Skip to content

Navigation overlay: remove experiment #74968

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 12 commits into from
Feb 4, 2026
Merged

Navigation overlay: remove experiment #74968

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8f062b3
removed the experiment from the codebase
MaggieCabrera Jan 27, 2026
45b8618
added missing fixtures
MaggieCabrera Jan 27, 2026
f9423e4
removed js variable
MaggieCabrera Jan 27, 2026
771df71
refactor
MaggieCabrera Jan 27, 2026
018054c
removed controls that don't need to show anymore
MaggieCabrera Jan 27, 2026
ca2222c
removed redundant comment
MaggieCabrera Jan 30, 2026
5b659ef
removed experimental attr from block
MaggieCabrera Jan 30, 2026
0e54cc1
renamed patterns to use the core namespace
MaggieCabrera Feb 2, 2026
67c4ca7
linked backport file
MaggieCabrera Feb 3, 2026
ac69b5e
add the patterns into the excluded pattern sources constant
MaggieCabrera Feb 4, 2026
31e061e
changed source to use core
MaggieCabrera Feb 4, 2026
ee4bc69
fix source on one of the patterns
MaggieCabrera Feb 4, 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
3 changes: 3 additions & 0 deletions backport-changelog/7.0/10844.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
https://github.com/WordPress/wordpress-develop/pull/10844

* https://github.com/WordPress/gutenberg/pull/74968
1 change: 0 additions & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -548,7 +548,6 @@ Add a page, link, or another item to your navigation. ([Source](https://github.c
A customizable button to close overlays. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay-close))

- **Name:** core/navigation-overlay-close
- **Experimental:** true
- **Category:** design
- **Supports:** color (background, text, ~~gradients~~), spacing (padding), typography (fontSize, lineHeight)
- **Attributes:** displayMode, text
Expand Down
24 changes: 11 additions & 13 deletions lib/compat/wordpress-7.0/rest-api.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,25 +49,23 @@ function gutenberg_modify_wp_template_part_post_type_args_7_0( $args ) {
add_filter( 'register_wp_template_part_post_type_args', 'gutenberg_modify_wp_template_part_post_type_args_7_0' );

/**
* Registers the 'navigation-overlay' template part area when the experiment is enabled.
* Registers the 'navigation-overlay' template part area.
*
* @param array $areas Array of template part area definitions.
* @return array Modified array of template part area definitions.
*/
if ( gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) {
function gutenberg_register_overlay_template_part_area( $areas ) {
$areas[] = array(
'area' => 'navigation-overlay',
'label' => __( 'Navigation Overlay', 'gutenberg' ),
'description' => __( 'Custom overlay area for navigation overlays.', 'gutenberg' ),
'icon' => 'overlay',
'area_tag' => 'div',
);
function gutenberg_register_overlay_template_part_area( $areas ) {
$areas[] = array(
'area' => 'navigation-overlay',
'label' => __( 'Navigation Overlay', 'gutenberg' ),
'description' => __( 'Custom overlay area for navigation overlays.', 'gutenberg' ),
'icon' => 'overlay',
'area_tag' => 'div',
);

return $areas;
}
add_filter( 'default_wp_template_part_areas', 'gutenberg_register_overlay_template_part_area' );
return $areas;
}
add_filter( 'default_wp_template_part_areas', 'gutenberg_register_overlay_template_part_area' );

/**
* Adds user global styles link relation to all theme responses.
Expand Down
3 changes: 0 additions & 3 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-content-only-inspector-fields', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalContentOnlyInspectorFields = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-customizable-navigation-overlays', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalNavigationOverlays = true', 'before' );
}
if ( gutenberg_is_experiment_enabled( 'active_templates' ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalTemplateActivate = true', 'before' );
}
Expand Down
12 changes: 0 additions & 12 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,18 +197,6 @@ function gutenberg_initialize_experiments_settings() {
)
);

add_settings_field(
'gutenberg-customizable-navigation-overlays',
__( 'Customizable Navigation Overlays', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Enables custom mobile overlay design and content control for Navigation blocks, allowing you to create flexible, professional menu experiences.', 'gutenberg' ),
'id' => 'gutenberg-customizable-navigation-overlays',
)
);

add_settings_field(
'gutenberg-extensible-site-editor',
__( 'Extensible Site Editor', 'gutenberg' ),
Expand Down
6 changes: 2 additions & 4 deletions lib/load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,10 +200,8 @@ function gutenberg_is_experiment_enabled( $name ) {
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';
}
// Block patterns for navigation overlays.
require __DIR__ . '/overlay-patterns.php';

if ( gutenberg_is_experiment_enabled( 'gutenberg-svg-icon-registry' ) ) {
require __DIR__ . '/experimental/class-wp-icons-registry.php';
Expand Down
32 changes: 18 additions & 14 deletions lib/experimental/overlay-patterns.php → lib/overlay-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,27 @@
/**
* 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
* This function adds patterns that are specific to navigation overlays.
* 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 category only if it doesn't exist in core.
$category_registry = WP_Block_Pattern_Categories_Registry::get_instance();
if ( ! $category_registry->is_registered( 'navigation' ) ) {
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',
'core/navigation-overlay',
array(

@MaggieCabrera MaggieCabrera Jan 30, 2026

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.

my only concern here is the naming of the patterns, the default one in particular. @getdave we don't have much precedent for using patterns like we do when we insert this one on overlay creation, you asked me on another PR about the naming convention with core/ vs gutenberg/. Historically we have created and tested new core patterns in gutenberg, with the gutenberg namespace, and then on backport we have renamed them to core, and right after merging we delete them from gutenberg because they would be duplicated otherwise. But we've never had an instance that I know of where a core pattern is invoked by gutenberg. I think there's two ways to go about this:

  1. We keep the gutenberg name convention and we change the overlay code that inserts the pattern to conditionally load the core or gutenberg one so this doesn't break in the beta process. The caveat is we probably need to keep the conditional forever?
  2. We rename right now all patterns to use the core namespace and nip it in the bud. During beta process we will have duplicated patterns with the same name if one has GB installed too, but I think that should resolve ok?

What do you think? This is the moment to make this decision

@getdave getdave Jan 30, 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 wonder if it's possible to construct a conditional that's if Gutenberg Plugin and version is less than 7.0 then use gutenberg else use core? Then when a production build is compiled it would resolve to false.

I'm leaning towards option 2 though.

I'm keen to get a wider range of perspectives @scruffian @jeryj @mikachan @tyxla

@scruffian scruffian Jan 30, 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.

Is there any reason not to go with option 2?

@tyxla tyxla Jan 30, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

2 sounds good to me. I'd just double-check the scenario with name conflicts with core registering the patterns and GB registering them too. The way I see it, the GB ones should take precedence, and if that's the case, then we're good.

@MaggieCabrera MaggieCabrera Jan 30, 2026

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.

Thanks for chiming in! I'll make that check and push the change

'title' => __( 'Navigation Overlay', 'gutenberg' ),
'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ),
Expand All @@ -41,7 +45,7 @@ function gutenberg_register_overlay_block_patterns() {
);

register_block_pattern(
'gutenberg/navigation-overlay-black-bg',
'core/navigation-overlay-black-bg',
array(
'title' => __( 'Overlay with black background', 'gutenberg' ),
'description' => _x( 'A navigation overlay with black background and big white text', 'Block pattern description', 'gutenberg' ),
Expand All @@ -57,7 +61,7 @@ function gutenberg_register_overlay_block_patterns() {
)
);
register_block_pattern(
'gutenberg/navigation-overlay-accent-bg',
'core/navigation-overlay-accent-bg',
array(
'title' => __( 'Overlay with orange background', 'gutenberg' ),
'description' => _x( 'A navigation overlay with orange background site title and tagline', 'Block pattern description', 'gutenberg' ),
Expand All @@ -83,7 +87,7 @@ function gutenberg_register_overlay_block_patterns() {
)
);
register_block_pattern(
'gutenberg/navigation-overlay-centered-with-extras',
'core/navigation-overlay-centered-with-extras',
array(
'title' => __( 'Overlay with site info and CTA', 'gutenberg' ),
'description' => _x( 'A navigation overlay with vertically and horizontally centered navigation, site info, and a CTA', 'Block pattern description', 'gutenberg' ),
Expand Down Expand Up @@ -125,7 +129,7 @@ function gutenberg_register_overlay_block_patterns() {
)
);
register_block_pattern(
'gutenberg/navigation-overlay-centered',
'core/navigation-overlay-centered',
array(
'title' => __( 'Overlay with centered navigation', 'gutenberg' ),
'description' => _x( 'A navigation overlay with vertically and horizontally centered navigation', 'Block pattern description', 'gutenberg' ),
Expand Down
5 changes: 1 addition & 4 deletions packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,7 @@ const getAllBlocks = () => {
tableOfContents,
homeLink,
logInOut,
navigationOverlayClose,
termCount,
termDescription,
termName,
Expand All @@ -291,10 +292,6 @@ const getAllBlocks = () => {
blocks.push( formSubmissionNotification );
}

if ( window?.__experimentalNavigationOverlays ) {
blocks.push( navigationOverlayClose );
}
Comment thread
getdave marked this conversation as resolved.
Resolved

if ( window?.__experimentalEnableBlockExperiments ) {
blocks.push( playlist );
blocks.push( playlistTrack );
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/navigation-overlay-close/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"__experimental": true,
"apiVersion": 3,
"name": "core/navigation-overlay-close",
"title": "Navigation Overlay Close",
Expand Down
54 changes: 2 additions & 52 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,6 @@ import NavigationMenuDeleteControl from './navigation-menu-delete-control';
import useNavigationNotice from './use-navigation-notice';
import OverlayMenuPreview from './overlay-menu-preview';
import OverlayPanel from './overlay-panel';
import OverlayVisibilityControl from './overlay-visibility-control';
import OverlayMenuPreviewButton from './overlay-menu-preview-button';
import useConvertClassicToBlockMenu, {
CLASSIC_MENU_CONVERSION_ERROR,
CLASSIC_MENU_CONVERSION_PENDING,
Expand Down Expand Up @@ -340,10 +338,6 @@ function Navigation( {

const blockEditingMode = useBlockEditingMode();

const isOverlayExperimentEnabled =
typeof window !== 'undefined' &&
window.__experimentalNavigationOverlays === true;

// Preload classic menus, so that they don't suddenly pop-in when viewing
// the Select Menu dropdown.
const { menus: classicMenus } = useNavigationEntities();
Expand Down Expand Up @@ -755,7 +749,7 @@ function Navigation( {
const stylingInspectorControls = (
<>
<InspectorControls>
{ ( ! isOverlayExperimentEnabled || hasSubmenus ) && (
{ hasSubmenus && (
<ToolsPanel
label={ __( 'Display' ) }
resetAll={ () => {
Expand All @@ -769,50 +763,6 @@ function Navigation( {
} }
dropdownMenuProps={ dropdownMenuProps }
>
{ ! isOverlayExperimentEnabled && (
<>
{ isResponsive && (
<OverlayMenuPreviewButton
isResponsive={ isResponsive }
overlayMenuPreview={
overlayMenuPreview
}
setOverlayMenuPreview={
setOverlayMenuPreview
}
hasIcon={ hasIcon }
icon={ icon }
setAttributes={ setAttributes }
overlayMenuPreviewClasses={
overlayMenuPreviewClasses
}
overlayMenuPreviewId={
overlayMenuPreviewId
}
containerStyle={ {
gridColumn: 'span 2',
} }
/>
) }

<ToolsPanelItem
hasValue={ () => overlayMenu !== 'mobile' }
label={ __( 'Overlay Visibility' ) }
onDeselect={ () =>
setAttributes( {
overlayMenu: 'mobile',
} )
}
isShownByDefault
>
<OverlayVisibilityControl
overlayMenu={ overlayMenu }
setAttributes={ setAttributes }
/>
</ToolsPanelItem>
</>
) }

{ hasSubmenus && (
<>
<h3 className="wp-block-navigation__submenu-header">
Expand Down Expand Up @@ -919,7 +869,7 @@ function Navigation( {
</ToolsPanel>
) }
</InspectorControls>
{ isOverlayExperimentEnabled && ! isWithinOverlay && (
{ ! isWithinOverlay && (
<InspectorControls>
<OverlayPanel
overlayMenu={ overlayMenu }
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation/edit/test/use-create-overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
} );

mockGetPatternBySlug.mockReturnValue( {
name: 'gutenberg/navigation-overlay',
name: 'core/navigation-overlay',
title: 'Navigation Overlay',
content:
'<!-- wp:group --><div class="wp-block-group"><!-- wp:navigation-overlay-close /--><!-- wp:navigation /--></div><!-- /wp:group -->',
Expand Down Expand Up @@ -199,7 +199,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
} );

expect( mockGetPatternBySlug ).toHaveBeenCalledWith(
'gutenberg/navigation-overlay'
'core/navigation-overlay'
);

expect( parse ).toHaveBeenCalledWith( mockGetPatternBySlug().content, {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/edit/use-create-overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
const pattern = useSelect(
( select ) =>
unlock( select( blockEditorStore ) ).getPatternBySlug(
'gutenberg/navigation-overlay'
'core/navigation-overlay'
),
[]
);
Expand Down
56 changes: 20 additions & 36 deletions packages/block-library/src/navigation/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,6 @@ class WP_Navigation_Block_Renderer {
*/
Comment thread
MaggieCabrera marked this conversation as resolved.
Resolved
private static $seen_menu_names = array();

/**
* Returns whether the navigation overlay experiment is enabled.
*
* @since 6.5.0
*
* @return bool Returns whether the navigation overlay experiment is enabled.
*/
private static function is_overlay_experiment_enabled() {
$gutenberg_experiments = get_option( 'gutenberg-experiments' );
return $gutenberg_experiments && array_key_exists( 'gutenberg-customizable-navigation-overlays', $gutenberg_experiments );
}

/**
* Returns whether or not this is responsive navigation.
Expand Down Expand Up @@ -652,7 +641,6 @@ private static function get_responsive_container_classes( $is_hidden_by_default,
}

if ( $has_custom_overlay ) {
// Only add the disable-default-overlay class if experiment is enabled AND overlay blocks actually rendered.
$responsive_container_classes[] = 'disable-default-overlay';
} else {
// Don't apply overlay color classes if using a custom overlay template part.
Expand Down Expand Up @@ -693,39 +681,35 @@ private static function get_responsive_container_markup( $attributes, $inner_blo

$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];

// Set-up variables for the custom overlay experiment.
// Values are set to "off" so they don't affect the default behavior.
$is_overlay_experiment_enabled = static::is_overlay_experiment_enabled();
// Set-up variables for custom overlays.
$has_custom_overlay = false;
$close_button_markup = '';
$has_custom_overlay_close_block = false;
$overlay_blocks_html = '';
$custom_overlay_markup = '';

if ( $is_overlay_experiment_enabled ) {
// Check if an overlay template part is selected and render it.
// This needs to happen before building classes so we know if overlay blocks actually exist.
if ( ! empty( $attributes['overlay'] ) ) {
// Get blocks from the overlay template part.
$overlay_blocks = static::get_overlay_blocks_from_template_part( $attributes['overlay'], $attributes );
// Check if overlay contains a navigation-overlay-close block.
$has_custom_overlay_close_block = block_core_navigation_block_tree_has_block_type(
$overlay_blocks,
'core/navigation-overlay-close',
array( 'core/navigation' ) // Skip navigation blocks, as they cannot contain an overlay close block
);
// Render template part blocks directly without navigation container wrapper.
$overlay_blocks_html = static::get_template_part_blocks_html( $overlay_blocks );
// Add Interactivity API directives to the overlay close block if present.
if ( $has_custom_overlay_close_block && $is_interactive ) {
$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
$overlay_blocks_html = block_core_navigation_add_directives_to_overlay_close( $tags );
}
// Check if an overlay template part is selected and render it.
// This needs to happen before building classes so we know if overlay blocks actually exist.
if ( ! empty( $attributes['overlay'] ) ) {
// Get blocks from the overlay template part.
$overlay_blocks = static::get_overlay_blocks_from_template_part( $attributes['overlay'], $attributes );
// Check if overlay contains a navigation-overlay-close block.
$has_custom_overlay_close_block = block_core_navigation_block_tree_has_block_type(
$overlay_blocks,
'core/navigation-overlay-close',
array( 'core/navigation' ) // Skip navigation blocks, as they cannot contain an overlay close block
);
// Render template part blocks directly without navigation container wrapper.
$overlay_blocks_html = static::get_template_part_blocks_html( $overlay_blocks );
// Add Interactivity API directives to the overlay close block if present.
if ( $has_custom_overlay_close_block && $is_interactive ) {
$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
$overlay_blocks_html = block_core_navigation_add_directives_to_overlay_close( $tags );
}

$has_custom_overlay = ! empty( $overlay_blocks_html );
}

$has_custom_overlay = ! empty( $overlay_blocks_html );

$responsive_container_classes = static::get_responsive_container_classes( $is_hidden_by_default, $has_custom_overlay, $colors );

$open_button_classes = array(
Expand Down
Loading
Loading