Onboarding: 4-per-row grid, calmer banners, color-picker fixes + external-services disclosure#481
Merged
Conversation
…readme - Send the site title (blogname) alongside the URL in the AI starter-site ranking request so the service has a niche signal beyond the URL. - Add a readme "External services" section disclosing the ThemeIsle starter-sites service (catalog, ranking, license) per the WordPress.org plugin guidelines. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BNzxtv8VLmNXCCqQyK4gUC
Widen the onboarding starter-sites grid from 3 to 4 columns at the laptop breakpoint (>=992px) so users see ~8 templates at once instead of leaving large empty margins on wider screens. Tablet stays at 2 columns, mobile at 1. Keep the JS in sync with the new column count: - Page size 9 -> 12 (initial useState, the reset effect, and the lazy-load increment) so each render fills whole rows. 12 divides evenly by both 3 and 4, so rows stay full at every breakpoint. - Search "Browse more" divider padding % 3 -> % 4 so the divider lands on a clean row boundary under the 4-column grid. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs
Two banners on the "Choose a design" step were too intrusive. 1. Remove the full-width "80+ new starter sites" promo notice (added in #465) and keep the social proof as a quiet subtitle under the heading: "Nearly 200 starter sites for every niche — fresh designs added regularly." Removes the OnboardingPromoNotice component + SCSS, the SiteList mount, the style import, and the dismiss AJAX handler / show-logic / localization in Admin.php, plus the e2e dismiss test. 2. Make the premium-upsell toast compact (smaller padding/font, capped width, smaller logo, no fixed 70px height) and sharpen the copy: "Unlock every premium template with Neve Business. Upgrade" (was "Unlock Access to all premium templates with Neve Business plan. Get Started."). Note: should_show_business_agency_promo_text() + the onboardingShowProNoticeText localization are now unused (they only varied the removed notice's text); left in place with their unit tests and can be pruned in a follow-up. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs
…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
Applies the workflow-decided implementations for the two onboarding notices,
verified in a local wp-env Neve onboarding instance.
- Subtitle: copy -> "Nearly 200 starter sites across every niche, with dozens
added recently." (truthful, evergreen). Fix a WCAG AA contrast failure:
$secondary-text #848484 (~3.5:1) -> mix(...) ~#6E6D6D (~4.6:1); subtle
weight-only emphasis on the count, plus a small-screen scale step.
- Upsell toast: two-line copy ("Unlock every premium template" /
"Included with Neve Business. <See plans>"), white card, Neve mark scaled
to 24px, role=status + accessible (type=button, aria-label) dismiss,
focus-visible rings, reduced-motion, mobile full-width strip.
- Logo: add viewBox="0 0 40 40" to SVG.logo so it scales instead of cropping
when constrained below 40px (fixes the clipped mark in the toast).
- phpcs: re-align the const block after the promo-notice constant removal.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs
The grid now renders a full page of 12 cards, so card page-shot buttons
(e.g. "Gallery", "Ballet Blog", "All Courses") contain "all" as a substring.
The non-exact getByRole('button', { name: 'All' }) locator then resolved to
multiple elements (Playwright strict mode violation). Match the All/Free
filter buttons by exact name.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYVWBEDjCM3wzBP6Ew1Ku4
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
feat(onboarding): tone down starter-sites listing banners
feat(onboarding): show 4 starter sites per row on laptop and up
feat(starter-ranking): send site title + add External Services disclosure
…r-swatch fix(onboarding): color picker — hide for single palette + sync screenshot to filter
Contributor
Author
|
@rodica-andronache can you help with testing this? |
Collaborator
ineagu
changed the title
HardeepAsrani
approved these changes
Jun 22, 2026
- Starter sites now show 4 per row on laptop and desktop, so you can see more designs at a glance. - Tidier library: the promotional banner is replaced with a subtle subtitle, and the upgrade prompt is smaller with clearer wording. - Color variants: select a color to preview every matching starter site in that palette; sites with a single palette no longer show an empty color control. - Smarter results: your site title is now used to better order and search the starter-sites library.
The per-card color summary showed at rest, adding visual noise to the grid. Hide it at rest and reveal it on card hover/focus (matching the page-shot tabs) so the resting grid stays clean; the full white pill still appears on hover. 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.
Changelog
Details (for review)
Onboarding "Choose a design" improvements, bundled for release (development → master). Includes the work from #478, #479 and #480.
Grid — show 4 starter sites per row on laptop+ (≥992px) instead of 3 (tablet 2, mobile 1); lazy-load page size and the search "Browse more" divider padding track the column count.
Banners (less intrusive) — remove the full-width "80+ new starter sites" promo notice (component, SCSS, the dismiss AJAX/option in
Admin.php, e2e); keep the social proof as a quiet subtitle under the heading (also fixes a WCAG AA contrast issue). Make the premium-upsell toast compact with clearer copy ("Unlock every premium template" / "Included with Neve Business. See plans"), add a11y (role=status, accessible dismiss, focus rings), and fix the Neve logo cropping viaviewBox="0 0 40 40".Color picker — hide the per-card swatch for single-palette sites (
colorOptions.length > 1); when a color is selected in the filter, switch each matching card's screenshot to that palette (screenshots_by_color) with graceful fallback, preserving manual swatch clicks.Ranking + disclosure — send the site title to the starter-sites ranking/search service (
Starter_Ranking.php); add an "External services" section toreadme.txt(wp.org compliance).Will affect visual aspect of the product
YES — onboarding grid, header subtitle, upsell toast, per-card color swatches.
Test instructions
yarn && yarn build, open Neve onboarding (wp-admin/admin.php?page=neve-onboarding) on a ≥992px screen.Closes #477.