WordPress 7.0 is revolutionizing how site owners manage mobile navigation with its introduction of Customisable Navigation Overlays. This feature empowers users with unprecedented flexibility, moving beyond the static, unchangeable overlays of the past.
For WordPress users, the days of fixed navigation overlays are over. With the new feature in version 7.0, site owners can fully customize their mobile navigation menus directly within the block editor. Previously, the mobile menu experience was restricted to a default design with no customisation options. Now, site owners can craft overlays from blocks and patterns, enhancing both design and functionality.
How Customisable Navigation Overlays Transform Mobile Menus
The introduction of Customisable Navigation Overlays marks a significant shift. Navigation overlays are now implemented as template parts, leveraging a new navigation-overlay template part area. This is primarily managed through the Navigation block’s overlay controls in the Site Editor. Users can find and edit these overlays via the Patterns section in the Site Editor sidebar.
Each overlay is typically tied to a single Navigation block, although multiple references are possible. The block canvas within an overlay can include a variety of elements—navigation menus, social icons, or even calls to action. This flexibility allows site owners to tailor the mobile navigation experience to their specific needs.
Activating and Customizing Overlays
The feature is opt-in, meaning the standard overlay behavior remains until a custom overlay is activated. This can be done by creating a new overlay in the Site Editor’s Overlays section, selecting an existing one, or using a theme pre-assignment. Themes can include pre-built overlays, making them available immediately upon activation.
The distinction between template parts and patterns is crucial. Template parts are ready-to-use overlays, while patterns provide design options accessible in the Site Editor. This setup allows themes to offer various design choices without automatically applying an overlay.
For Theme Developers: Bundling and Registering Overlays
Theme developers have new opportunities with this release. To bundle navigation overlays, developers should register the template part in theme.json. This ensures the overlay is recognized as an overlay template part and not categorized incorrectly. Additionally, creating the corresponding HTML file in the theme’s parts directory is essential. Including the Navigation Overlay Close block within the overlay is strongly recommended to maintain design consistency and accessibility.
Overlay patterns can be registered using register_block_pattern(), scoped specifically to the navigation-overlay template part. This approach keeps patterns organized and relevant, ensuring they only appear where applicable.
What To Do
- Site Owners: Explore the new overlay options in the Site Editor to enhance your mobile navigation experience.
- Theme Developers: Update your themes to register and include customisable overlays, leveraging the new template parts and patterns capabilities.
- Agencies: Advise clients on the benefits of customisable overlays and assist with the transition to WordPress 7.0 if needed.
