In-Sidebar Visual Preview for Selected Navigation Overlay #74096
Description
What
Provide an in-context, visual preview of the selected Navigation Overlay directly within the Navigation block sidebar. This preview establishes clear editing context by showing the structure and contents of the Overlay currently associated with the Navigation block.
Why
Navigation Overlays are inherently visual and can vary significantly in structure and content. As sites evolve and multiple Overlays are introduced, users need a fast, reliable way to understand which Overlay they are configuring and what it contains, without switching modes or making exploratory edits. A sidebar preview reduces ambiguity, supports confident decision-making, and scales better as Overlay usage becomes more sophisticated.
How
Introduce a read-only visual preview of the selected Overlay within the Navigation block sidebar.
One approach to explore is the pattern demonstrated in the prototype PR #73389, which uses the BlockPreview component in a similar way to the Design sidebar shown when editing a Header template part in focused template part editing mode.
The preview should:
- Clearly reflect the currently selected Overlay
- Update automatically when the Overlay selection changes
- Provide visual context without introducing a secondary editing surface
User Stories
The following stories capture the intended outcomes from a user perspective:
As a user, I want to see a visual preview of the selected Overlay in the Navigation sidebar, so I can immediately understand what I’m configuring.
As a user, I want the preview to reflect changes in Overlay selection, so my editing context is always clear.
As a user, I want to assess the contents and layout of an Overlay without entering another editing mode, so I can make informed choices before modifying it.