Make the off-canvas navigation editor the default experience (#46995)

* Move site editor nav menu sidebar to its own experimental flag * Remove experimental option for off canvas editor * Reword nav sidebar experiment label * Remove unused Fragment imports * Remove unused toggleProps in NavigationMenuSelector * Remove unused id in NavigationMenu * reverse the conditional * add explanatory comment * reset value if the experiment is off * Add comment about nav block specific code Co-authored-by: Ben Dwyer <ben@escruffian.com>
WordPress · Jan 26, 2023 · 557df6d · 557df6d
1 parent fd1247c
commit 557df6d
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 96 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -83,8 +83,8 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-site-editor-navigation-menu-sidebar', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSiteEditorNavigationMenuSidebar = true', 'before' );
 	}
 }
 

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -54,26 +54,26 @@ function gutenberg_initialize_experiments_settings() {
 	);
 
 	add_settings_field(
-		'gutenberg-off-canvas-navigation-editor',
-		__( 'Off canvas navigation editor ', 'gutenberg' ),
+		'gutenberg-color-randomizer',
+		__( 'Color randomizer ', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Test a new "off canvas" editor for navigation block using the block inspector and a tree view of the current menu', 'gutenberg' ),
-			'id'    => 'gutenberg-off-canvas-navigation-editor',
+			'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ),
+			'id'    => 'gutenberg-color-randomizer',
 		)
 	);
 
 	add_settings_field(
-		'gutenberg-color-randomizer',
-		__( 'Color randomizer ', 'gutenberg' ),
+		'gutenberg-site-editor-navigation-menu-sidebar',
+		__( 'Global navigation menu sidebar ', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ),
-			'id'    => 'gutenberg-color-randomizer',
+			'label' => __( 'Test a new global navigation menu sidebar in the site editor.', 'gutenberg' ),
+			'id'    => 'gutenberg-site-editor-navigation-menu-sidebar',
 		)
 	);
 

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
@@ -27,9 +27,6 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 		( { title, icon, description } = blockType );
 	}
 
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const { parentNavBlockClientId } = useSelect( ( select ) => {
 		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
 			select( blockEditorStore );
@@ -49,7 +46,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 
 	return (
 		<div className={ classnames( 'block-editor-block-card', className ) }>
-			{ isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && (
+			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
 					onClick={ () => selectBlock( parentNavBlockClientId ) }
 					label={ __( 'Go to parent Navigation block' ) }

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -173,12 +173,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const blockInspectorAnimationSettings = useSelect(
 		( select ) => {
-			if ( isOffCanvasNavigationEditorEnabled && blockType ) {
+			if ( blockType ) {
 				const globalBlockInspectorAnimationSettings =
 					select( blockEditorStore ).getSettings()
 						.__experimentalBlockInspectorAnimation;
@@ -188,7 +185,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			}
 			return null;
 		},
-		[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
+		[ selectedBlockClientId, blockType ]
 	);
 
 	if ( count > 1 ) {
@@ -254,10 +251,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 
 	return (
 		<BlockInspectorSingleBlockWrapper
-			animate={
-				isOffCanvasNavigationEditorEnabled &&
-				blockInspectorAnimationSettings
-			}
+			animate={ blockInspectorAnimationSettings }
 			wrapper={ ( children ) => (
 				<AnimatedContainer
 					blockInspectorAnimationSettings={

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -89,9 +89,6 @@ function Navigation( {
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -879,12 +876,10 @@ function Navigation( {
 									} }
 								/>
 							) }
-						{ isOffCanvasNavigationEditorEnabled && (
-							<ManageMenusButton
-								disabled={ isManageMenusButtonDisabled }
-								className="wp-block-navigation-manage-menus-button"
-							/>
-						) }
+						<ManageMenusButton
+							disabled={ isManageMenusButtonDisabled }
+							className="wp-block-navigation-manage-menus-button"
+						/>
 					</InspectorControls>
 				) }
 

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -126,20 +126,13 @@ const DefaultControls = ( props ) => {
 };
 
 const MenuInspectorControls = ( props ) => {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = isOffCanvasNavigationEditorEnabled
-		? 'list'
-		: undefined;
-
+	// Show the OffCanvasEditor controls if we're in the Gutenberg plugin. Previously used isOffCanvasNavigationEditorEnabled.
 	return (
-		<InspectorControls __experimentalGroup={ menuControlsSlot }>
+		<InspectorControls __experimentalGroup="list">
 			<PanelBody
-				title={
-					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
-				}
+				title={ process.env.IS_GUTENBERG_PLUGIN ? null : __( 'Menu' ) }
 			>
-				{ isOffCanvasNavigationEditorEnabled ? (
+				{ process.env.IS_GUTENBERG_PLUGIN ? (
 					<ExperimentControls { ...props } />
 				) : (
 					<DefaultControls { ...props } />

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -31,8 +31,6 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -149,43 +147,20 @@ function NavigationMenuSelector( {
 		},
 	};
 
-	if (
-		! hasNavigationMenus &&
-		! hasClassicMenus &&
-		! isOffCanvasNavigationEditorEnabled
-	) {
-		return (
-			<Button
-				className="wp-block-navigation__navigation-selector-button--createnew"
-				isBusy={ ! enableOptions }
-				disabled={ ! enableOptions }
-				__experimentalIsFocusable
-				onClick={ () => {
-					onCreateNew();
-					setIsCreatingMenu( true );
-					setSelectorLabel( __( 'Loading …' ) );
-					setEnableOptions( false );
-				} }
-			>
-				{ __( 'Create new menu' ) }
-			</Button>
-		);
-	}
-
-	return (
+	const NavigationMenuSelectorDropdown = (
 		<DropdownMenu
 			className={
-				isOffCanvasNavigationEditorEnabled
+				process.env.IS_GUTENBERG_PLUGIN // Previously isOffCanvasNavigationEditorEnabled
 					? ''
 					: 'wp-block-navigation__navigation-selector'
 			}
 			label={ selectorLabel }
-			text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
-			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
+			text={ process.env.IS_GUTENBERG_PLUGIN ? '' : selectorLabel } // Previously isOffCanvasNavigationEditorEnabled
+			icon={ process.env.IS_GUTENBERG_PLUGIN ? moreVertical : null } // Previously isOffCanvasNavigationEditorEnabled
 			toggleProps={
-				isOffCanvasNavigationEditorEnabled
+				process.env.IS_GUTENBERG_PLUGIN
 					? { isSmall: true }
-					: toggleProps
+					: toggleProps // Previously isOffCanvasNavigationEditorEnabled
 			}
 		>
 			{ ( { onClose } ) => (
@@ -247,6 +222,32 @@ function NavigationMenuSelector( {
 			) }
 		</DropdownMenu>
 	);
+
+	const NavigationMenuSelectorButton = (
+		<Button
+			className="wp-block-navigation__navigation-selector-button--createnew"
+			isBusy={ ! enableOptions }
+			disabled={ ! enableOptions }
+			__experimentalIsFocusable
+			onClick={ () => {
+				onCreateNew();
+				setIsCreatingMenu( true );
+				setSelectorLabel( __( 'Loading …' ) );
+				setEnableOptions( false );
+			} }
+		>
+			{ __( 'Create new menu' ) }
+		</Button>
+	);
+
+	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
+		if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
+			// This has to be in it's own conditional so it is removed by dead code elimination. Previously used isOffCanvasNavigationEditorEnabled.
+			return NavigationMenuSelectorButton;
+		}
+	}
+
+	return NavigationMenuSelectorDropdown;
 }
 
 export default NavigationMenuSelector;
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -70,12 +70,6 @@ export default function NavigationPlaceholder( {
 							clientId={ clientId }
 							onSelectNavigationMenu={ onSelectNavigationMenu }
 							onSelectClassicMenu={ onSelectClassicMenu }
-							toggleProps={ {
-								variant: 'tertiary',
-								iconPosition: 'right',
-								className:
-									'wp-block-navigation-placeholder__actions__dropdown',
-							} }
 						/>
 
 						<hr />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -69,7 +69,9 @@ export function SidebarComplementaryAreaFills() {
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavigationMenuSidebar = Fragment;
 
-	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
+	if (
+		window?.__experimentalEnableSiteEditorNavigationMenuSidebar === true
+	) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
 	}
 

diff --git a/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
@@ -206,10 +206,7 @@ export default function NavigationInspector() {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					<NavigationMenu
-						id={ navMenuListId }
-						innerBlocks={ publishedInnerBlocks }
-					/>
+					<NavigationMenu innerBlocks={ publishedInnerBlocks } />
 				</BlockEditorProvider>
 			) }
 

diff --git a/...ges/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js b/...ges/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	__experimentalListView as ListView,
 	__experimentalOffCanvasEditor as OffCanvasEditor,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -32,7 +31,7 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks, id } ) {
+export default function NavigationMenu( { innerBlocks } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
@@ -50,13 +49,7 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
-		return (
-			<OffCanvasEditor
-				blocks={ innerBlocks }
-				selectBlockInCanvas={ false }
-			/>
-		);
-	}
-	return <ListView id={ id } />;
+	return (
+		<OffCanvasEditor blocks={ innerBlocks } selectBlockInCanvas={ false } />
+	);
 }