Skip to content

Create default Core Navigation Overlay patterns #74047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MaggieCabrera merged 8 commits into from
Jan 7, 2026
Merged

Create default Core Navigation Overlay patterns #74047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6a5a2ac
scaffolding to add a pattern
MaggieCabrera Dec 16, 2025
eec36ea
created new category, added better metadata and starting content
MaggieCabrera Dec 17, 2025
043c91b
don't load the patterns if experiment is disabled
MaggieCabrera Dec 17, 2025
05bb25d
added text domain and descriptions to translations
MaggieCabrera Dec 17, 2025
a5f60f6
linting
MaggieCabrera Dec 17, 2025
8ad40f9
aligned nav close button to the right
MaggieCabrera Dec 17, 2025
2199632
moved file to experimental folder
MaggieCabrera Dec 18, 2025
5003484
removerd extra line
MaggieCabrera Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions lib/experimental/overlay-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<?php
/**
* Block patterns registration for navigation overlays.
*
* @package gutenberg
*/

/**
* Registers block patterns for navigation overlays.
*
* This function adds patterns that are specific to the navigation overlays
* experiment. It runs after core patterns are registered to ensure all patterns
* are available.
*
* @since 6.0.0
*/
function gutenberg_register_overlay_block_patterns() {
register_block_pattern_category(
'navigation',
array(
'label' => _x( 'Navigation', 'Block pattern category', 'gutenberg' ),
'description' => _x( 'Display your website navigation.', 'Block pattern category', 'gutenberg' ),
)
);

register_block_pattern(
'gutenberg/navigation-overlay',
array(
'title' => __( 'Navigation Overlay', 'gutenberg' ),
'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ),
'content' => '<!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close -->
<button class="wp-block-navigation-overlay-close" type="button" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1.1-1-6.1 6.2-6.1-6.2-1.1 1 6.1 6.3-6.5 6.7 1.1 1 6.5-6.6 6.5 6.6 1.1-1z"></path></svg></button>
<!-- /wp:navigation-overlay-close --></div>
<!-- /wp:group -->

<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>

@scruffian scruffian Jan 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should disable the overlay on this navigation...

@scruffian scruffian Jan 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually we should do this to all navigation blocks within navigation overlays, so it should be a different PR.

<!-- /wp:group -->',
'categories' => array( 'navigation' ),
'blockTypes' => array( 'core/template-part/overlay' ),

@talldan talldan Dec 18, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know not introduced here, but I personally think the block type should be core/template-part/navigation-overlay (I guess it's the area that I think should be navigation-overlay), because it's a thing that's very specific to the navigation block.

Non-navigation content perhaps shouldn't ever be assigned to this area.

I think the template part areas are also a public api (extenders can add their own), so it might be better to have a more specific name, less chance of a clash with plugins.

@MaggieCabrera MaggieCabrera Dec 18, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getdave for awareness

@getdave getdave Dec 18, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Dan (and Maggie for ping)

I personally think the block type should be core/template-part/navigation-overlay (I guess it's the area that I think should be navigation-overlay)

My understanding of this suggestion is that the Template Part Area for Overlay should be renamed to Navigation Overlay. I think that's reasonable given it does seem pretty specific and we already have a Navigation Overlay Close block.

I don't believe we need a custom block instead of just using a Group with a custom name - I don't think you are suggesting that but mentioning just in case.

Non-navigation content perhaps shouldn't ever be assigned to this area.

I didn't follow this. The overlay must be allowed to contain any content. Could you elaborate?

)
);
}

add_action( 'init', 'gutenberg_register_overlay_block_patterns', 20 );
5 changes: 5 additions & 0 deletions lib/load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,3 +211,8 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php';
Gutenberg_Interactivity_API_Full_Page_Navigation::instance();
}

// Block patterns (only load when navigation overlays experiment is enabled).
if ( gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) {
require __DIR__ . '/experimental/overlay-patterns.php';
}
Loading