fix(onboarding): color picker — hide for single palette + sync screenshot to filter#480
Merged
Merged
Conversation
…alette 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) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs
ineagu
added
enhancement
Collaborator
HardeepAsrani
approved these changes
Jun 22, 2026
ineagu
changed the title
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) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs
Collaborator
|
🎉 This PR is included in version 1.4.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
pirate-bot
added
the
released
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two related fixes to the onboarding starter-site color picker (
StarterSiteCard.js).1. Hide the picker when a site has a single palette
The swatch summary rendered whenever a site had ≥1 color, showing a lone non-actionable dot. Now gated on
colorOptions.length > 1.2. Sync the card screenshot to the selected color filter
Selecting a color in the global filter already narrowed the grid to matching sites, but each card still showed its default palette screenshot. Now a matching card switches its screenshot to the selected color's palette (
screenshots_by_color):getSelectedColorsviawithSelect;filterColor= the first selected color the card actually has (case-insensitive; returns the rawcolorOptionsslug sooption.slug === activeColorstill matches);activeColorfromfilterColor(fallback to the first palette) in an effect keyed on[colorOptions, filterColor]— so manual swatch clicks survive until the filter changes, and clearing the filter reverts to the default;screenshots_by_colorlacks the selected color.No store /
Sites.js/Filters.jschanges — the store already exposesgetSelectedColors.Tested
Verified in a local
wp-envNeve onboarding instance against the live catalog (which now carries color data): selecting green filtered the grid and switched matching cards to their-greenscreenshots (cb:marketing-agency-gb-green,cb:web-agency-gb-green, …); single-palette sites show no swatch; clearing reverts.