Skip to content

fix(onboarding): color picker — hide for single palette + sync screenshot to filter #480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ineagu merged 2 commits into from
Jun 22, 2026
Merged

fix(onboarding): color picker — hide for single palette + sync screenshot to filter #480

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
92c0468
fix(onboarding): hide color picker when a starter site has a single p…
ineagu Jun 22, 2026
b3b9663
fix(onboarding): sync card screenshot to the selected color filter
ineagu Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions onboarding/src/Components/StarterSiteCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ const StarterSiteCard = ( {
setSite,
handleNextStep,
trackingId,
editor
editor,
selectedColors = []
} ) => {
const {
upsell,
Expand Down Expand Up @@ -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 || '' );
Expand All @@ -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;
Expand Down Expand Up @@ -194,7 +224,7 @@ const StarterSiteCard = ( {
) ) }
</div>
) }
{ colorOptions.length > 0 && (
{ colorOptions.length > 1 && (
<div
className={
isColorExpanded
Expand Down Expand Up @@ -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 } ) => {
Expand Down
Loading