Prototype: Customizable Navigation Overlays Editor Experience #73389
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
- Add full-height editor display for overlay template parts - Create Overlay Close block (core/overlay-close) restricted to overlay template parts - Add overlayTemplatePartId attribute to Navigation block - Add overlay selector control in Navigation block Display panel - Register overlay-close block in block library This is a working editor-only prototype for customizable Navigation Overlays. Front-end PHP rendering is not included.
- Change overlayTemplatePartId attribute type from number to string - Update OverlaySelector to handle string IDs like 'twentytwentyfive//my-new-overlay' - Simplify component implementation and remove parseInt conversion
- Add Edit Overlay button below the select control - Button is disabled when no overlay is selected - Button navigates to template part editor when clicked - Add pencil icon to button - Use VStack for vertical spacing between select and button - Set button max-width to fit-content to prevent full-width stretching
- Create new Overlay PanelBody in Navigation block inspector
- Move overlay menu preview, overlay menu toggle, and overlay template part selector from Display ToolsPanel to Overlay panel
- Add VStack spacing for proper control spacing in Overlay panel
- Update Display ToolsPanel to remove overlay controls
- Add help text to overlay template part selector
- Panel opens by default (initialOpen={true})
- Keep overlay color controls in Color group (unchanged)
- Detect if Navigation block is inside an overlay template part - Hide Overlay panel when inside an overlay template part - Override overlayMenu to 'never' and overlayTemplatePartId to undefined when inside overlay - Prevents nested overlays (overlay inception) - Rename 'Overlay Menu' label to 'Overlay Visibility' for clarity
- Update ResponsiveWrapper to accept overlayTemplatePartId and onNavigateToEntityRecord props - Modify toggle button click handler to navigate to overlay template part editor when overlayTemplatePartId is set - Navigate to overlay template part editor when clicking the responsive container toggle button (hamburger menu) - Falls back to normal toggle behavior if no overlay template part is set - Pass navigation props to both ResponsiveWrapper instances
- Register overlay template part area in WordPress 7.0 compatibility layer - Gate overlay area registration behind experiment flag - Generate unique overlay names when creating new overlays (Overlay, Overlay 2, etc.) - Remove console.log debug statement - Ensure each overlay has a distinct name in the list
- Conditionally render OverlaySelector only when overlayMenu is not 'never' - Preserve overlayTemplatePartId attribute when controls are hidden - Add code comment noting PHP rendering must account for this situation - Ensures configured overlay remains available if user toggles back to Mobile/Always
|
Size Change: +2.5 kB (+0.1%) Total Size: 2.49 MB
ℹ️ View Unchanged
|
getdave
added
[Type] Experimental
This was referenced Dec 11, 2025
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.
This PR contains a working prototype implementation of customizable navigation overlays for early feedback and issue discovery. This code is NOT intended for production and may contain shortcuts, hardcoded values, and experimental approaches.
What
This prototype implements the editor-side experience for customizable navigation overlays as outlined in #73084. It enables users to:
Why
This prototype is designed to:
The prototype intentionally focuses on the editor experience only and does not include front-end PHP rendering.
How
The implementation includes:
gutenberg-customizable-navigation-overlaysexperimentNote: This prototype contains intentional shortcuts including hardcoded values, code duplication, and simplified error handling. These are acceptable for prototype purposes but would need to be addressed before production.