[Prototype] Navigation overlay editor: Spotlight editing experience #73541
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
- Create OverlayTemplatePartInnerBlocks component to render and edit overlay template part blocks inline - Conditionally render overlay template part blocks when overlay is open and custom overlay is selected - Remove navigation logic from responsive wrapper open button to match trunk behavior
- Hide close button when custom overlay is set - Remove padding/margin from responsive container and content when custom overlay is active - Set width and height to 100% for overlay container elements - Force root level blocks to 100% width in custom overlay content
- Create OverlayToggleContext to provide overlay state to child blocks - Add filter to inject close overlay button into all block toolbars when in overlay - Update OverlayTemplatePartInnerBlocks to provide context - Add CSS styling for custom overlay (remove padding/margin, set 100% width/height) - Hide close button in responsive wrapper when custom overlay is set
- Replace useEntityBlockEditor with rendering core/template-part block - Lock template-part block to prevent removal - Add width/height 100% styling for container and inner block editor elements - Exclude template-part blocks from overlay toggle control - Improve CSS selectors for overlay container elements
- Add overlay to supported areas for Design panel and Replace button - Fix useAlternativeBlockPatterns to use clientId instead of rootClientId for overlay patterns - This ensures overlay patterns are found when template part is nested in navigation block
- Update overlay toggle context to include navigation block clientId - Use selectBlock to select navigation block before closing overlay - Pass navigationClientId through to overlay template part component
- Change Edit Overlay action to toggle overlay open/closed - Show 'Close Overlay' when overlay is open, 'Edit Overlay' when closed - Pass overlay open state to OverlaySelector component - Enable button when overlay is open even if canEdit is false
Contributor
Author
|
Closing in favour of #73389 |
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
This PR is a prototype exploring an overlay editing experience for the Navigation block. It allows users to edit overlay template parts directly within the Navigation block's responsive wrapper, providing a "spotlight editing" experience where the overlay content can be edited inline without navigating away from the Navigation block.
This exploration is complementary to #73389, which explores the same overlay editing concept but via focused template part editing mode. Together, these prototypes explore different approaches to editing navigation overlays: one using focused template part editing (navigating to a separate editor), and this one using inline spotlight editing (editing within the Navigation block context).
Why
We're exploring how to provide a more seamless editing experience for navigation overlays. This prototype tests an alternative approach to #73389 by allowing users to edit overlay content directly within the Navigation block context, making it easier to see how changes affect the overall navigation experience without navigating away.
How
Testing Instructions
Basic Overlay Editing:
Edit/Close Overlay Button:
Shared Close Control:
Pattern Insertion:
Current Limitations