Navigation Overlay customisation via Template Parts #43852
Description
Update
Following discussion in this Issue the aim is now to make it possible to define the overlay as a separate template part.
This will allow users to create a totally custom overlay and associate that with a given Navigation block via the template part's unique identifier.
As template parts are a blank canvas, it will be possible to have a different Navigation block within the template part itself which will solve the requirement whereby some users wish to have a different menu on "mobile".
Styling of this template will be achieved via #40318.
This Issue is an "epic" and will need to be further broken down into it's constituent parts.
User Requirements
These are the high level requirements for the feature.
- As a user...
- I should be able to customise the visual styling of the overlay that appears for a given Navigation block.
- I should see the Navigation block within my overlay is – by default – automatically kept in sync with menu used in the parent Navigation block.
- I should be able to display different items in my overlay Navigation than those shown in the parent Navigation.
- I should be able to style the Navigation block used in my overlay differently than the parent Navigation block.
- I should not be able to make my overlay inaccessible to any user.
- I should not be able to “break” the interactive functionality of the overlay using the editor.
- I should be able to style my overlay via Global Styles.
- As a theme creator...
- I should be able to style my overlay via Theme JSON.
- I should be able to provide a default navigation overlay template that will override the default one supplied by core.
Glossary
- "Parent Navigation" - the navigation block which controls/triggers the overlay.
Issue update: Dec 23
To enable full customization of the contents of the Navigation overlay menu, it could become a separate block, with its own possible inner blocks, paddings, and global styles properties. To enable that, we could have the overlay button invoke a "focus mode" editing of the overlay block:An additional affordance, for example for when the overlay only invokes on mobile, could be to add an Edit button in the Display panel of the inspector:
The Overlay could be surfaced in the List View in the same style as position: sticky; group blocks in #30121:
However it would not be a requirement for this issue, and if helpful to the development effort, there is no need to optimize for more than a single navigation menu with a single overlay that are directly tied together with no ability to replace one overlay with another.
There are technical questions to consider (please see this conversation), it would be good to consider these in light of template parts as well, since ideally the experience of entering and existing focused mode can feel similar.
The overlay block should be stylable in Global Styles (a la "core/navigation-overlay": {), so custom paddings and styles can be applied. This should also address #44182.
Initial proposal (Issue updated Nov 7.)
As of #43576, it is now easier to position the little navigation overlay menu icon (burger menu) so that the close icon from the overlay will perfectly overlap it. To do that, you:
- Ensure the navigation sits inside a wide container block, which itself is inside a container that inherits layout
- Ensure that the navigation menu sits aligned to the top/right of this container and has no additional padding or margin
- The theme opts into root paddings (Core CSS support for root padding and alignfull blocks #42085), by adding "useRootPaddingAwareAlignments": true in theme.json under settings, and paddings to go with that either in global styles or under styles > spacing.
The result is that the menu icon will sit in the exact place where the close icon will sit:
This is working well. However, it works mainly well for themes that look good with the menu icon in the extreme top right corners. Other designs would benefit from a little vertical padding above the menu item, to optically balance, for example, a site title with the burger icon. Like so:
At the moment, all 4 paddings for the overlay menu are set to be the same as any root padding applied to your site. It would be nice to be able to customize these paddings further, by simply surfacing this padding control for the overlay menu, so for example the top padding could be set just a bit higher, to match any custom header padding, making things line up.
For starters, this could be implemented in theme.json only, and a padding control for the overlay could be added to the block at a later point.