Add focus mode for Navigation Menus (#39286)

* Add new state handlers for setting Nav Menu

Fixing unlocking

Avoid unnecessarily effectful code

Fix bug with persistent Nav block locking

Reinstate effect to limit calls to selectBlock

Reinstate effect to run selectively

Isolate Nav specific code

Refactor settings to hook

Isolate Editor Canvas to component

Extract mode statuses to hook

Colocate editor canvas dependencies

Remove requirement for Nav hook to return data

Extract entire canvas to component

Get blocks directly from the store

Use factory to provide default editor component

Extract independent components for default and wp_navigation

Remove template dep from Navigation focus hook

Delete redundant hook

Remove need for settings prop

Extract hooks to files

Export boolean to avoid render

Remove redundant prop and var

Extract Site Editor Canvas component to file

Extract factory to file

Remove need to pass props to abstract component

Improve abstract component and factory naming

Improve usage of constants

Be explicit about entity mapping in factory

Remove templateType prop from SiteEditorCanvas component

Improve variable naming

Use more performant selector

Improve documenting rule for showing appender

Move Navigation specific editor settings to relevant provider

Remove useSiteEditorMode hook

See #39286 (comment)

Reintstate bug fix with comment

Fix error in rebase

Add edit button

Use Navigation icon and label

Use correct labels

* Add descriptive text as instructed

See #39286

* Update edit link for Navigation post type

Fixes revisions link

* Fix PHPCS

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