Search dashboard: surface inline customization links on the active Overlay row (RSM-2380)#48563
Draft
Search dashboard: surface inline customization links on the active Overlay row (RSM-2380)#48563
Conversation
Copilot
AI
changed the title
[WIP] Add inline customization links on active Overlay row
Search dashboard: surface inline customization links on the active Overlay row (RSM-2380)
May 6, 2026
github-actions
Bot
added
[Package] Search
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
github-actions
Bot
added
the
[Status] Needs Author Reply
…380) Inline customization links inside an option <label> are dead clicks — the label's click handler swallows the events and toggles the radio. Move them into a new ExperienceDetails panel rendered above the radio rows. The panel's content switches with the selected experience and shows the "Customize" / "Edit widgets" actions only when Overlay is the *active* (saved) experience, mirroring the legacy ModuleControl gate. `@wordpress/ui` Button has no `link` variant, so the actions use `variant="minimal" tone="brand"` and render as `<a>` via the base-ui `render` prop — `href` on a `<button>` is ignored by browsers, which would silently reproduce the dead-click bug. Non-Overlay options render only the title for now; richer per-experience content is a follow-up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
adamwoodnz
removed
the
[Status] Needs Author Reply
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Code Coverage Summary1 file is newly checked for coverage.
|
…sabled (RSM-2380) Always render the Customize / Edit widgets actions when Overlay is the selected experience, but only enable them once Overlay is the active (saved) experience. Active: render as <a href> via the @base-ui `render` prop so cmd/middle- click open in a new tab and the URL is visible on hover. wp-admin's global `a { color }` rule normally clobbers the library's variant colour on a Button-rendered-as-<a>, but outline+brand happens to use the same admin brand-blue, so there's no leak. Disabled: fall back to the default <button> render. The library's data-disabled rule only lands correctly on a real <button>, and AT users aren't told a non-functional element is a link. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…r (RSM-2380) Drop the nested-card framing on the panel — surrounding border, full border-radius, and contained padding made it read as a card-within-a- card. Reverse the form's padding via negative margins so the panel extends to the form edges, keep the top corners following the form's radius, and use a single bottom border to separate the panel from the radio rows. Background tone unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bring the panel title in line with the radio row label ("Overlay search"
instead of "Instant Search"), tighten the Sidebar widgets blurb, and
restore the panel as a nested card. Bump the title and action-title
font sizes for hierarchy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reapply the edge-to-edge layout: reverse the form's padding via negative margins so the panel sits flush with the form edges, top corners follow the form's radius, and a single bottom border separates it from the radio rows. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…RSM-2380) Pull the "Select a search experience for your visitors" h2 inside the form so it sits between the detail panel and the radio rows. Drop the fragment wrapper now that the form is the only top-level element. The heading still labels the fieldset via aria-labelledby. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ptions (RSM-2380)" This reverts commit e55592d.
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
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.
Fixes RSM-2380.
Why?
When the feature-selector replaced
ModuleControl, the Customize search results and Edit sidebar widgets entry points that lived under the legacy "Enable instant search" toggle were dropped. Site owners running the Overlay experience still need a path back to those pages.The first attempt rendered the links inline inside the active Overlay row, but the row is wrapped in a
<label>, which intercepts clicks and toggles the radio — the links were dead. This PR moves them into a new detail panel above the option rows that switches content per selected experience.Proposed changes
experience-details.jsxrendered above the radio fieldset. Subscribes togetSelectedExperience,getActiveExperience,isUpdatingJetpackSettings, andsupportsInstantSearch.supportsInstantSearch(paid-plan check, mirroring legacy).<a href>) via@wordpress/uiButtonwith the base-uirenderprop. The library has nolinkvariant;variant="minimal" tone="brand"gives the link-like appearance, andnativeButton={ false }lets the rendered<a>actually navigate (anhrefattribute on a<button>is ignored — that's the trap the first attempt fell into).SEARCH_CUSTOMIZE_URL,WIDGETS_EDITOR_URL) match the legacy values verbatim. The legacysprintf( ..., encodeURIComponent( returnUrl ) )was a no-op (the format strings have no%s), so we drop it.wpdsdesign tokens consistent with the rest of the selector (--wpds-color-bg-surface-neutral,--wpds-color-stroke-surface-neutral,--wpds-border-radius-lg, etc.). Inset action card uses the strong surface to read as a secondary affordance.Testing instructions
admin.php?page=jetpack-search-configure. Click Edit widgets → → lands onwidgets.php.aria-disabled, nohref).Test coverage
6 new Jest cases in
experience-details.test.jsx: title + description for Overlay, links present with correct hrefs when Overlay is active, plan gate hides Customize, actions hidden when Overlay is selected-but-not-active, title-only for non-Overlay rows,aria-disabled+ nohrefwhile saving. All 22 feature-selector tests pass.Visual verification
Verified locally on
pixelantics.jetpack.ngrok.app:admin.php?page=jetpack-search-configure(real navigation, not a dead click).Does this pull request change what data or activity we track or use?
No — UI navigation links only.