From 92c0468dba66faa5eb4aebc6a850199ab43f777e Mon Sep 17 00:00:00 2001 From: Ionut Neagu Date: Mon, 22 Jun 2026 16:56:31 +0200 Subject: [PATCH 1/2] fix(onboarding): hide color picker when a starter site has a single palette The per-card color swatch summary rendered whenever a site had at least one color, showing a lone non-actionable dot when there was nothing to choose. Only render the picker when there are 2+ palettes (colorOptions.length > 1). Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs --- onboarding/src/Components/StarterSiteCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/onboarding/src/Components/StarterSiteCard.js b/onboarding/src/Components/StarterSiteCard.js index f4f6849d..7d17c12d 100644 --- a/onboarding/src/Components/StarterSiteCard.js +++ b/onboarding/src/Components/StarterSiteCard.js @@ -194,7 +194,7 @@ const StarterSiteCard = ( { ) ) } ) } - { colorOptions.length > 0 && ( + { colorOptions.length > 1 && (
Date: Mon, 22 Jun 2026 17:26:30 +0200 Subject: [PATCH 2/2] fix(onboarding): sync card screenshot to the selected color filter When a color is selected in the global filter, each matching starter-site card now switches its screenshot to that color's palette (screenshots_by_color), restoring the intended filter behavior (the card previously stayed on its default palette). All in StarterSiteCard: - subscribe to getSelectedColors via withSelect; - derive `filterColor` = the first selected color the card actually has (case-insensitive match, returns the raw colorOptions slug); - seed activeColor from filterColor (falling back to the first palette) in an effect keyed on [colorOptions, filterColor], so manual swatch clicks survive until the filter changes and a cleared filter reverts to the default. Falls back to the base screenshot when screenshots_by_color lacks the selected color. Builds on the single-palette swatch gate (colorOptions.length > 1). Verified in a local wp-env Neve onboarding instance: selecting "green" switched the matching cards to their -green screenshots. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs --- onboarding/src/Components/StarterSiteCard.js | 38 ++++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/onboarding/src/Components/StarterSiteCard.js b/onboarding/src/Components/StarterSiteCard.js index 7d17c12d..6b292d3a 100644 --- a/onboarding/src/Components/StarterSiteCard.js +++ b/onboarding/src/Components/StarterSiteCard.js @@ -47,7 +47,8 @@ const StarterSiteCard = ( { setSite, handleNextStep, trackingId, - editor + editor, + selectedColors = [] } ) => { const { upsell, @@ -93,6 +94,32 @@ const StarterSiteCard = ( { screenshot: screenshotMap[ color ] || screenshot, } ) ); }, [ data?.colors, data?.screenshots_by_color, screenshot ] ); + // First globally-selected color this card actually has, returned as the + // canonical RAW colorOptions slug so option.slug === activeColor still hits. + // selectedColors are normalized lowercase (Filters.js) while colorOptions + // slugs / screenshots_by_color keys are raw, so match case-insensitively. + const filterColor = useMemo( () => { + if ( + ! Array.isArray( selectedColors ) || + ! selectedColors.length || + ! colorOptions.length + ) { + return ''; + } + + const normalizedToSlug = new Map( + colorOptions.map( ( option ) => [ + String( option.slug || '' ).trim().toLowerCase(), + option.slug, + ] ) + ); + + const matched = selectedColors.find( ( color ) => + normalizedToSlug.has( color ) + ); + + return matched ? normalizedToSlug.get( matched ) : ''; + }, [ selectedColors, colorOptions ] ); const previewColors = colorOptions.slice( 0, 2 ); const [ activePage, setActivePage ] = useState( pageShots[0]?.key || 'home' ); const [ activeColor, setActiveColor ] = useState( colorOptions[0]?.slug || '' ); @@ -102,9 +129,12 @@ const StarterSiteCard = ( { setActivePage( pageShots[0]?.key || 'home' ); }, [ pageShots ] ); + // Seed the displayed color from the global filter when this card matches a + // selected color; otherwise fall back to the first palette. Re-runs only on + // filter/colorOptions changes, so manual swatch clicks survive until then. useEffect( () => { - setActiveColor( colorOptions[0]?.slug || '' ); - }, [ colorOptions ] ); + setActiveColor( filterColor || colorOptions[0]?.slug || '' ); + }, [ colorOptions, filterColor ] ); const activePageShot = pageShots.find( ( shot ) => shot.key === activePage ) || pageShots[0] || null; @@ -290,12 +320,14 @@ export default compose( getCurrentEditor, getCurrentCategory, getSearchQuery, + getSelectedColors, } = select( 'ti-onboarding' ); return { trackingId: getTrackingId(), editor: getCurrentEditor(), category: getCurrentCategory(), query: getSearchQuery(), + selectedColors: getSelectedColors() || [], }; } ), withDispatch( ( dispatch, { data } ) => {