Remove default entry into Navigation Menu focus mode but retain abili…

…ty to access via "Edit" (#61275) * Add new route for single Navigation without navigating to focus mode * Add edit option to Navigation Menu to enter focus mode * Amend back route from single Nav Menu to Nav Listing Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org>
WordPress · May 3, 2024 · f9908e5 · f9908e5
1 parent dde38de
commit f9908e5
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -148,8 +148,20 @@ export default function useLayoutAreas() {
 
 	// Navigation
 	if ( path === '/navigation' ) {
+		if ( postId ) {
+			return {
+				key: 'navigation',
+				areas: {
+					sidebar: <SidebarNavigationScreenNavigationMenu />,
+					preview: <Editor isLoading={ isSiteEditorLoading } />,
+					mobile: canvas === 'edit' && (
+						<Editor isLoading={ isSiteEditorLoading } />
+					),
+				},
+			};
+		}
 		return {
-			key: 'styles',
+			key: 'navigation',
 			areas: {
 				sidebar: <SidebarNavigationScreenNavigationMenus />,
 				preview: <Editor isLoading={ isSiteEditorLoading } />,

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -86,6 +86,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 			<SidebarNavigationScreenWrapper
 				actions={
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ _handleDelete }
 						onSave={ _handleSave }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
@@ -5,24 +5,30 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
 import DeleteConfirmDialog from './delete-confirm-dialog';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
 };
 
 export default function ScreenNavigationMoreMenu( props ) {
-	const { onDelete, onSave, onDuplicate, menuTitle } = props;
+	const { onDelete, onSave, onDuplicate, menuTitle, menuId } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
 	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
 		useState( false );
 
+	const history = useHistory();
+
 	const closeModals = () => {
 		setRenameModalOpen( false );
 		setDeleteConfirmDialogOpen( false );
@@ -50,6 +56,17 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Rename' ) }
 							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									history.push( {
+										postId: menuId,
+										postType: 'wp_navigation',
+										canvas: 'edit',
+									} );
+								} }
+							>
+								{ __( 'Edit' ) }
+							</MenuItem>
 							<MenuItem
 								onClick={ () => {
 									onDuplicate();

diff --git a/...t-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/...t-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
@@ -24,6 +24,7 @@ export default function SingleNavigationMenu( {
 			actions={
 				<>
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ handleDelete }
 						onSave={ handleSave }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -152,7 +152,7 @@ export function SidebarNavigationScreenWrapper( {
 const NavMenuItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postId,
-		postType: NAVIGATION_POST_TYPE,
+		path: '/navigation',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -33,6 +33,13 @@ import { SidebarNavigationContext } from '../sidebar';
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 function getBackPath( params ) {
+	// Navigation Menus are not currently part of a data view.
+	// Therefore when navigating back from a navigation menu
+	// the target path is the navigation listing view.
+	if ( params.path === '/navigation' && params.postId ) {
+		return { path: '/navigation' };
+	}
+
 	// From a data view path we navigate back to root
 	if ( params.path ) {
 		return {};