Add focus mode for Navigation Menus

docs/reference-guides/data/data-core-edit-site.md

@@ -328,6 +328,18 @@ _Parameters_
 
 -   _isOpen_ `boolean`: If true, opens the save view. If false, closes it. It does not toggle the state, but sets it directly.
 
+### setNavigationMenu
+
+Action that sets a navigation menu.
+
+_Parameters_
+
+-   _navigationMenuId_ `string`: The Navigation Menu Post ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setNavigationPanelActiveMenu
 
 > **Deprecated**

lib/compat/wordpress-6.3/link-template.php

@@ -28,7 +28,33 @@ function gutenberg_update_get_edit_post_link( $link, $post_id ) {
 		$slug             = urlencode( get_stylesheet() . '//' . $post->post_name );
 		$link             = admin_url( sprintf( $post_type_object->_edit_link, $slug ) );
 	}
+
 	return $link;
 }
 
 add_filter( 'get_edit_post_link', 'gutenberg_update_get_edit_post_link', 10, 2 );
+
+
+
+/**
+ * Modifies the edit link for the `wp_navigation` custom post type.
+ *
+ * This has not been backported to Core.
+ *
+ * @param string $link    The edit link.
+ * @param int    $post_id Post ID.
+ * @return string|null The edit post link for the given post. Null if the post type does not exist
+ *                     or does not allow an editing UI.
+ */
+function gutenberg_update_navigation_get_edit_post_link( $link, $post_id ) {
+	$post = get_post( $post_id );
+
+	if ( 'wp_navigation' === $post->post_type ) {
+		$post_type_object = get_post_type_object( $post->post_type );
+		$id               = $post->ID;
+		$link             = admin_url( sprintf( $post_type_object->_edit_link, $id ) );
+	}
+
+	return $link;
+}
+add_filter( 'get_edit_post_link', 'gutenberg_update_navigation_get_edit_post_link', 10, 2 );

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

@@ -9,8 +9,14 @@
  * Updates `wp_template` and `wp_template_part` post types to use
  * Gutenberg's REST controllers
  *
- * Adds `_edit_link` to the `wp_global_styles`, `wp_template`,
- * and `wp_template_part` post type schemata. See https://github.com/WordPress/gutenberg/issues/48065
+ * Adds `_edit_link` to the following post type schemata:
+ *
+ * - wp_global_styles
+ * - wp_template
+ * - wp_template_part
+ * - wp_navigation
+ *
+ * See https://github.com/WordPress/gutenberg/issues/48065
  *
  * @param array  $args Array of arguments for registering a post type.
  * @param string $post_type Post type key.
@@ -31,6 +37,18 @@ function gutenberg_update_templates_template_parts_rest_controller( $args, $post
 	if ( in_array( $post_type, array( 'wp_global_styles' ), true ) ) {
 		$args['_edit_link'] = '/site-editor.php?canvas=edit';
 	}
+
+	if ( 'wp_navigation' === $post_type ) {
+		$navigation_edit_link = 'site-editor.php?' . build_query(
+			array(
+				'postId'   => '%s',
+				'postType' => 'wp_navigation',
+				'canvas'   => 'edit',
+			)
+		);
+		$args['_edit_link']   = $navigation_edit_link;
+	}
+
 	return $args;
 }
 add_filter( 'register_post_type_args', 'gutenberg_update_templates_template_parts_rest_controller', 10, 2 );

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

@@ -26,6 +26,7 @@ import {
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
@@ -67,6 +68,9 @@ import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
+import { unlock } from '../../lock-unlock';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 function Navigation( {
 	attributes,
@@ -114,6 +118,8 @@ function Navigation( {
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
 
+	const blockEditingMode = useBlockEditingMode();
+
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
 	const { menus: classicMenus } = useNavigationEntities();
@@ -652,8 +658,9 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
+				{ blockEditingMode === 'default' && stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
@@ -693,6 +700,7 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
 				<DeletedNavigationWarning
 					onCreateNew={ createUntitledEmptyNavigationMenu }
@@ -760,9 +768,10 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
-				{ isEntityAvailable && (
+				{ blockEditingMode === 'default' && stylingInspectorControls }
+				{ blockEditingMode === 'default' && isEntityAvailable && (
 					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (

packages/block-library/src/navigation/edit/menu-inspector-controls.js

@@ -138,6 +138,7 @@ const MenuInspectorControls = ( props ) => {
 		onSelectClassicMenu,
 		onSelectNavigationMenu,
 		isManageMenusButtonDisabled,
+		blockEditingMode,
 	} = props;
 
 	return (
@@ -150,22 +151,24 @@ const MenuInspectorControls = ( props ) => {
 					>
 						{ __( 'Menu' ) }
 					</Heading>
-					<NavigationMenuSelector
-						currentMenuId={ currentMenuId }
-						onSelectClassicMenu={ onSelectClassicMenu }
-						onSelectNavigationMenu={ onSelectNavigationMenu }
-						onCreateNew={ onCreateNew }
-						createNavigationMenuIsSuccess={
-							createNavigationMenuIsSuccess
-						}
-						createNavigationMenuIsError={
-							createNavigationMenuIsError
-						}
-						actionLabel={ actionLabel }
-						isManageMenusButtonDisabled={
-							isManageMenusButtonDisabled
-						}
-					/>
+					{ blockEditingMode === 'default' && (
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+							actionLabel={ actionLabel }
+							isManageMenusButtonDisabled={
+								isManageMenusButtonDisabled
+							}
+						/>
+					) }
 				</HStack>
 				<MainContent { ...props } />
 			</PanelBody>

packages/edit-site/src/components/block-editor/back-button.js

@@ -17,9 +17,10 @@ function BackButton() {
 	const location = useLocation();
 	const history = useHistory();
 	const isTemplatePart = location.params.postType === 'wp_template_part';
+	const isNavigationMenu = location.params.postType === 'wp_navigation';
 	const previousTemplateId = location.state?.fromTemplateId;
 
-	const isFocusMode = isTemplatePart;
+	const isFocusMode = isTemplatePart || isNavigationMenu;
 
 	if ( ! isFocusMode || ! previousTemplateId ) {
 		return null;

packages/edit-site/src/components/block-editor/constants.js

@@ -1 +1 @@
-export const FOCUSABLE_ENTITIES = [ 'wp_template_part' ];
+export const FOCUSABLE_ENTITIES = [ 'wp_template_part', 'wp_navigation' ];

packages/edit-site/src/components/block-editor/get-block-editor-provider.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import DefaultBlockEditor from './providers/default-block-editor-provider';
+import NavigationBlockEditor from './providers/navigation-block-editor-provider';
+
+/**
+ * Factory to isolate choosing the appropriate block editor
+ * component to handle a given entity type.
+ *
+ * @param {string} entityType the entity type being edited
+ * @return {JSX.Element} the block editor component to use.
+ */
+export default function getBlockEditorProvider( entityType ) {
+	let Provider = null;
+
+	switch ( entityType ) {
+		case 'wp_navigation':
+			Provider = NavigationBlockEditor;
+			break;
+		case 'wp_template':
+		case 'wp_template_part':
+		default:
+			Provider = DefaultBlockEditor;
+			break;
+	}
+
+	return Provider;
+}

packages/edit-site/src/components/block-editor/index.js

@@ -13,28 +13,31 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 /**
  * Internal dependencies
  */
-
 import TemplatePartConverter from '../template-part-converter';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { DisableNonPageContentBlocks } from '../page-content-focus';
 import SiteEditorCanvas from './site-editor-canvas';
-import DefaultBlockEditorProvider from './providers/default-block-editor-provider';
+import getBlockEditorProvider from './get-block-editor-provider';
 
 export default function BlockEditor() {
-	const { hasPageContentFocus } = useSelect( ( select ) => {
-		const { hasPageContentFocus: _hasPageContentFocus } = unlock(
-			select( editSiteStore )
-		);
+	const { entityType, hasPageContentFocus } = useSelect( ( select ) => {
+		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
+			unlock( select( editSiteStore ) );
 
 		return {
+			entityType: getEditedPostType(),
 			hasPageContentFocus: _hasPageContentFocus(),
 		};
 	}, [] );
 
+	// Choose the provider based on the entity type currently
+	// being edited.
+	const BlockEditorProvider = getBlockEditorProvider( entityType );
+
 	return (
-		<DefaultBlockEditorProvider>
+		<BlockEditorProvider>
 			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
@@ -44,6 +47,6 @@ export default function BlockEditor() {
 			<SiteEditorCanvas />
 
 			<ReusableBlocksMenuItems />
-		</DefaultBlockEditorProvider>
+		</BlockEditorProvider>
 	);
 }