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
WordPress · Jun 16, 2023 · e2cfaaa · e2cfaaa · github-actions · Jun 16, 2023
1 parent ece6f8c
commit e2cfaaa
Show file tree

Hide file tree

Showing 23 changed files with 494 additions and 65 deletions.
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/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**

diff --git a/lib/compat/wordpress-6.3/link-template.php b/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 );
diff --git a/lib/compat/wordpress-6.3/rest-api.php b/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 );

diff --git a/packages/block-library/src/navigation/edit/index.js b/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 && (

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/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>

diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/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;

diff --git a/packages/edit-site/src/components/block-editor/constants.js b/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' ];
diff --git a/packages/edit-site/src/components/block-editor/get-block-editor-provider.js b/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;
+}
diff --git a/packages/edit-site/src/components/block-editor/index.js b/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>
 	);
 }