Navigation overlay: remove experiment

backport-changelog/7.0/10844.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/10844
+
+* https://github.com/WordPress/gutenberg/pull/74968

docs/reference-guides/core-blocks.md

@@ -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

lib/compat/wordpress-7.0/rest-api.php

@@ -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.

lib/experimental/editor-settings.php

@@ -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' );
 	}

lib/experiments-page.php

@@ -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' ),

lib/load.php

@@ -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';

lib/experimental/overlay-patterns.php → lib/overlay-patterns.php

@@ -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(
 			'title'       => __( 'Navigation Overlay', 'gutenberg' ),
 			'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ),
@@ -37,11 +41,12 @@ function gutenberg_register_overlay_block_patterns() {
 <!-- /wp:group -->',
 			'categories'  => array( 'navigation' ),
 			'blockTypes'  => array( 'core/template-part/navigation-overlay' ),
+			'source'      => 'core',
 		)
 	);
 
 	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' ),
@@ -54,10 +59,11 @@ function gutenberg_register_overlay_block_patterns() {
 <!-- /wp:group -->',
 			'categories'  => array( 'navigation' ),
 			'blockTypes'  => array( 'core/template-part/navigation-overlay' ),
+			'source'      => 'core',
 		)
 	);
 	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' ),
@@ -80,10 +86,11 @@ function gutenberg_register_overlay_block_patterns() {
 <!-- /wp:group -->',
 			'categories'  => array( 'navigation' ),
 			'blockTypes'  => array( 'core/template-part/navigation-overlay' ),
+			'source'      => 'core',
 		)
 	);
 	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' ),
@@ -122,10 +129,11 @@ function gutenberg_register_overlay_block_patterns() {
 <!-- /wp:group -->',
 			'categories'  => array( 'navigation' ),
 			'blockTypes'  => array( 'core/template-part/navigation-overlay' ),
+			'source'      => 'core',
 		)
 	);
 	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' ),
@@ -140,6 +148,7 @@ function gutenberg_register_overlay_block_patterns() {
 <!-- /wp:group -->',
 			'categories'  => array( 'navigation' ),
 			'blockTypes'  => array( 'core/template-part/navigation-overlay' ),
+			'source'      => 'core',
 		)
 	);
 }

packages/block-library/src/index.js

@@ -266,6 +266,7 @@ const getAllBlocks = () => {
 		tableOfContents,
 		homeLink,
 		logInOut,
+		navigationOverlayClose,
 		termCount,
 		termDescription,
 		termName,
@@ -291,10 +292,6 @@ const getAllBlocks = () => {
 		blocks.push( formSubmissionNotification );
 	}
 
-	if ( window?.__experimentalNavigationOverlays ) {
-		blocks.push( navigationOverlayClose );
-	}
-
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( playlist );
 		blocks.push( playlistTrack );

packages/block-library/src/navigation-overlay-close/block.json

@@ -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",

packages/block-library/src/navigation/edit/index.js

@@ -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,
@@ -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();
@@ -755,7 +749,7 @@ function Navigation( {
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
-				{ ( ! isOverlayExperimentEnabled || hasSubmenus ) && (
+				{ hasSubmenus && (
 					<ToolsPanel
 						label={ __( 'Display' ) }
 						resetAll={ () => {
@@ -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">
@@ -919,7 +869,7 @@ function Navigation( {
 					</ToolsPanel>
 				) }
 			</InspectorControls>
-			{ isOverlayExperimentEnabled && ! isWithinOverlay && (
+			{ ! isWithinOverlay && (
 				<InspectorControls>
 					<OverlayPanel
 						overlayMenu={ overlayMenu }

packages/block-library/src/navigation/edit/test/use-create-overlay.js

@@ -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 -->',
@@ -199,7 +199,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 		} );
 
 		expect( mockGetPatternBySlug ).toHaveBeenCalledWith(
-			'gutenberg/navigation-overlay'
+			'core/navigation-overlay'
 		);
 
 		expect( parse ).toHaveBeenCalledWith( mockGetPatternBySlug().content, {

packages/block-library/src/navigation/edit/use-create-overlay.js

@@ -27,7 +27,7 @@ export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
 	const pattern = useSelect(
 		( select ) =>
 			unlock( select( blockEditorStore ) ).getPatternBySlug(
-				'gutenberg/navigation-overlay'
+				'core/navigation-overlay'
 			),
 		[]
 	);