Navigation Editor: Preview functionality

[javierarce]

I've been exploring some ideas to integrate a preview functionality inside the Navigation Screen.

Since the menu in this editor is an abstraction, the main benefit of this feature would be to have a contextual live preview to show how the menu would look once it's published. This could be especially useful for previewing complex menus (i.e. mega-menus).

From talking with several people and reading some related issues (regarding the Customizer API and the relationship between the FSE and non-block-based themes, for instance), I understand that implementing a feature like this one could be challenging at this moment. Still, I'd like to bring the idea here to check if the general concept of a preview for menus makes sense and discuss possible solutions.

Here's the first design for this functionality to get the conversation started.

The preview could work as it currently does in the Customizer, so users could navigate to different pages of the site within this view, locate their menus, and even interact with them.

• As in the Customizer, the Theme location section in the right sidebar would update the preview window.
• There could be a divider between the menu and the preview to resize each division and reveal more content.
• Also, both areas could be independently scrollable.

If the user hasn't assigned a menu to a location, we could render a standalone preview using a navigation block with some basic styles applied.

This preview would not be 100% accurate, but it would give users a general idea of how it will look. Also, this standalone view could be rendered without the responsive toggles, as it would act as a quick preview.

Here's a related issue that addresses some of the technical aspects of this kind of preview from the Widget editor perspective. The conversation there between @celloexpressions, @noisysocks, @draganescu, and others also raises several questions and concerns that are relevant to this issue.

If the two widget interfaces ("Appearance → Widgets" and "Appearance → Customize → Widgets") don't get consolidated, and the general idea described in this issue is accepted, it could be interesting to explore a preview solution that works for both the Navigation and the Widget editor using the same design language.

[draganescu]

• Do we want to / can we use the changeset architecture in the Customizer to preview block based content from another place (cc @celloexpressions)? Or do we want to rebuild that for any reason (@mtias) ? Is there anything wrong with the implementation or the basic assumptions in the changeset Customizer API that does not work with block themes?
• Previewing unassigned navigation is impossible IMO, so the preview in the navigation editor should only be operable if the user has assigned the menu to a location (cc @javierarce). The fact that the location can be anywhere does not matter that much as the user (because of the classic workflow) will know where to look. The one advantage the customizer UI has is that the user can "navigate" to the place where the menu is shown as some locations may only exist on certain templates.

[celloexpressions]

The original proposal in #26012 can apply directly to the navigation screen as well. The best way to run a contextual live preview on the navigation screen is to use a freestanding instance of the customizer. The customize preview can be used directly and the screen's UI would be framed in a custom customizer panel with customize settings handling preview and savings. This inherently implements the customize changesets UI to unlock drafts and scheduled changes.

If we end up with a split-screen UI for the navigation screen, I would definitely revisit the conversation of merging the screen into the customizer. Remembering that customize panels can break out of the sidebar UI where appropriate, the customizer and the standalone screen could use the same exact UI. At that point, the only difference is that the instance in the customizer offers access to editing other elements of the site within the same editing session.

As an aside, integrating more closely with the customizer should improve backwards compatibility options for the navigation block and screen. For example, the ability to add new pages while building a menu.

[javierarce]

I'm closing this issue since the navigation screen is no longer actively developed.

Related: #43620.