Remove custom button and show single menu on Navigation route

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 }

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

packages/edit-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>
+ );
+}

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>