Remove custom button and show single menu on Navigation route

WordPress · Jun 16, 2023 · 3dee12c · 3dee12c
1 parent a72b4b1
commit 3dee12c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 86 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -20,7 +20,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -44,14 +43,14 @@ export default function SidebarNavigationScreenMain() {
 			) }
 			content={
 				<ItemGroup>
-					<SidebarNavigationScreenNavigationMenuButton
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/navigation"
 						withChevron
 						icon={ navigation }
-						as={ SidebarNavigationItem }
 					>
 						{ __( 'Navigation' ) }
-					</SidebarNavigationScreenNavigationMenuButton>
-
+					</NavigatorButton>
 					<SidebarNavigationItemGlobalStyles
 						withChevron
 						icon={ styles }

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
@@ -16,8 +16,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 import ScreenNavigationMoreMenu from './more-menu';
-import NavigationMenuEditor from './navigation-menu-editor';
-import EditButton from './edit-button';
+import SingleNavigationMenu from './single-navigation-menu';
 
 export default function SidebarNavigationScreenNavigationMenu() {
 	const {
@@ -213,37 +212,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	}
 
 	return (
-		<SidebarNavigationScreenWrapper
-			actions={
-				<>
-					<EditButton />
-					<ScreenNavigationMoreMenu
-						menuTitle={ decodeEntities( menuTitle ) }
-						onDelete={ handleDelete }
-						onSave={ handleSave }
-						onDuplicate={ handleDuplicate }
-					/>
-				</>
-			}
-			title={ decodeEntities( menuTitle ) }
-			description={
-				<>
-					<p>
-						{ sprintf(
-							/* translators: %s: Navigation menu title */
-							'This is your "%s" navigation menu. ',
-							decodeEntities( menuTitle )
-						) }
-					</p>
-					<p>
-						{ __(
-							'You can edit this menu here, but be aware that visual styles might be applied separately in templates or template parts, so the preview shown here can be incomplete.'
-						) }
-					</p>
-				</>
-			}
-		>
-			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
-		</SidebarNavigationScreenWrapper>
+		<SingleNavigationMenu
+			navigationMenu={ navigationMenu }
+			handleSave={ handleSave }
+			handleDelete={ handleDelete }
+			handleDuplicate={ handleDuplicate }
+		/>
 	);
 }
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
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+import ScreenNavigationMoreMenu from './more-menu';
+import NavigationMenuEditor from './navigation-menu-editor';
+
+export default function SingleNavigationMenu( {
+	navigationMenu,
+	handleDelete,
+	handleDuplicate,
+	handleSave,
+} ) {
+	const menuTitle = navigationMenu?.title?.rendered;
+
+	return (
+		<SidebarNavigationScreenWrapper
+			actions={
+				<ScreenNavigationMoreMenu
+					menuTitle={ decodeEntities( menuTitle ) }
+					onDelete={ handleDelete }
+					onSave={ handleSave }
+					onDuplicate={ handleDuplicate }
+				/>
+			}
+			title={ decodeEntities( menuTitle ) }
+			description={ __(
+				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+			) }
+		>
+			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
+		</SidebarNavigationScreenWrapper>
+	);
+}
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
@@ -18,6 +18,7 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 import { useLink } from '../routes/link';
+import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
 
 export default function SidebarNavigationScreenNavigationMenus() {
 	const { records: navigationMenus, isResolving: isLoading } =
@@ -45,6 +46,17 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		);
 	}
 
+	// if single menu then render it
+	if ( navigationMenus?.length === 1 ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				<NavigationMenuEditor
+					navigationMenuId={ navigationMenus[ 0 ]?.id }
+				/>
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
 	return (
 		<SidebarNavigationScreenWrapper>
 			<ItemGroup>

diff --git a/...s/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js b/...s/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js