Add overlay template part selector to Navigation block (behind experiment) #73760
Conversation
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
getdave
changed the title
|
Size Change: +980 B (+0.04%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
getdave
added
[Block] Navigation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
mtias
reviewed
Dec 5, 2025
mtias
reviewed
Dec 5, 2025
mtias
reviewed
Dec 5, 2025
mtias
reviewed
Dec 5, 2025
packages/block-library/src/navigation/edit/overlay-template-part-selector.js
Outdated
Show resolved
Hide resolved
mikachan
reviewed
Dec 8, 2025
Member
mikachan
left a comment
mikachan
left a comment
There was a problem hiding this comment.
This is testing well for me so far 🙌 I've a couple of small suggestions on things I noticed while testing.
packages/block-library/src/navigation/edit/overlay-template-part-selector.js
Show resolved
Hide resolved
packages/block-library/src/navigation/edit/overlay-template-part-selector.js
Outdated
Show resolved
Hide resolved
- Add overlayTemplatePart attribute to Navigation block.json - Create OverlayTemplatePartSelector component with template part querying - Add Edit button to navigate to focused template part editor - Create OverlayPanel component wrapping selector in PanelBody - Integrate panel into Navigation block inspector controls - Gate panel behind gutenberg-customizable-navigation-overlays experiment - Add comprehensive integration tests for selector component The panel only appears when: - The experiment is enabled (window.__experimentalNavigationOverlays) - Overlay menu is not set to 'never'
Update all user-facing strings to use simpler 'overlay' terminology instead of the technical 'overlay template part' phrase. This makes the UI more user-friendly by hiding implementation details. - Change 'Overlay Template Part' label to 'Overlay' - Update loading message to 'Loading overlays…' - Simplify help text and aria-labels - Update all test strings to match new terminology
- Only show Edit button when an overlay is selected - Change button width from full width to fit-content - Remove inline styles and use CSS class instead - Add proper spacing using design system variables
- Move overlay visibility toggle and preview to Overlay panel when experiment enabled - Fix overlay menu preview controls to work outside ToolsPanel context - Keep panel visible when overlay is off so users can toggle it back on - Rename 'Overlay Menu' to 'Overlay Visibility' - Rename 'Overlay' selector to 'Overlay template'
…e help text - Use template part title instead of slug in Edit button aria-label - Change help text from 'No overlays found. Create one?' to 'No overlays found.' - Update test to match new help text
getdave
force-pushed
the
add/navigation-overlay-template-part-selector
branch
from
28cace4 to
8f42a2d
Compare
mikachan
approved these changes
Dec 10, 2025
Member
mikachan
left a comment
mikachan
left a comment
There was a problem hiding this comment.
Thanks for addressing the feedback! This is testing well in both these scenarios:
- With Experiment Enabled ✅
- With Experiment Disabled ✅
I think we can bring this in and start iterating.
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.
What
Adds the ability to select an overlay template part from the Navigation block sidebar. When an overlay template part is selected, users can navigate to edit it directly from the block editor. When an overlay is selected, clicking the overlay toggle button in the canvas navigates to the template part editor instead of toggling the menu.
Why
This enables users to customize navigation overlays by editing dedicated overlay template parts, rather than relying solely on Navigation block controls. This aligns with the block-based approach for overlay customization, allowing styling to be managed within the template part itself.
How
overlayTemplatePartattribute to Navigation blockOverlayTemplatePartSelectorcomponent for selecting overlay template partsResponsiveWrapperto navigate to template part editor when overlay is selectedwindow.__experimentalNavigationOverlaysOverlayVisibilityControl,OverlayMenuPreviewButton,OverlayMenuPreviewControls) to avoid code duplication between the Display panel (when experiment is off) and Overlay panel (when experiment is on)Notes
UI/UX Considerations
fit-contentfor better visual appearanceFuture Considerations
Testing Instructions
With Experiment Enabled
window.__experimentalNavigationOverlays = truein the browser consoleWith Experiment Disabled
window.__experimentalNavigationOverlaysshould beundefinedorfalsePart of #73080