List Menus or Show Single Menu

WordPress · May 22, 2023 · ef90205 · ef90205
1 parent 1939eae
commit ef90205
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 52 deletions.
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
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+
+export default function SidebarNavigationScreenNavigationMenu() {
+	const postType = `wp_navigation`;
+	const {
+		params: { postId },
+	} = useNavigator();
+
+	const { record: navigationMenu, isResolving: isLoading } = useEntityRecord(
+		'postType',
+		postType,
+		postId
+	);
+
+	if ( isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				{ __( 'Loading Navigation Menu.' ) }
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! isLoading && ! navigationMenu ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				{ __( 'Navigation Menu Missing.' ) }
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	return (
+		<SidebarNavigationScreenWrapper>
+			{ navigationMenu?.title.rendered }
+		</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
@@ -4,77 +4,60 @@
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationItem from '../sidebar-navigation-item';
 import NavigationMenuContent from './navigation-menu-content';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import {
 	isPreviewingTheme,
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
+import { useLink } from '../routes/link';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 const noop = () => {};
 const NAVIGATION_MENUS_QUERY = {
-	per_page: 1,
+	per_page: -1,
 	status: 'publish',
 	order: 'desc',
 	orderby: 'date',
 };
 
-function SidebarNavigationScreenWrapper( { children, actions } ) {
+export function SidebarNavigationScreenWrapper( { children, actions } ) {
 	return (
 		<SidebarNavigationScreen
 			title={ __( 'Navigation' ) }
 			actions={ actions }
-			description={ __(
-				'Browse your site, edit pages, and manage your primary navigation menu.'
-			) }
+			description={ __( 'Manage your Navigation menus.' ) }
 			content={ children }
 		/>
 	);
 }
 
-export default function SidebarNavigationScreenNavigationMenus() {
-	const history = useHistory();
-	const { navigationMenus, hasResolvedNavigationMenus, storedSettings } =
-		useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const { getEntityRecords, hasFinishedResolution } =
-				select( coreStore );
-
-			const navigationMenusQuery = [
-				'postType',
-				'wp_navigation',
-				NAVIGATION_MENUS_QUERY,
-			];
-			return {
-				storedSettings: getSettings( false ),
-				navigationMenus: getEntityRecords( ...navigationMenusQuery ),
-				hasResolvedNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					navigationMenusQuery
-				),
-			};
-		}, [] );
-
-	const firstNavigationMenu = navigationMenus?.[ 0 ]?.id;
-	const blocks = useMemo( () => {
-		return [
-			createBlock( 'core/navigation', { ref: firstNavigationMenu } ),
-		];
-	}, [ firstNavigationMenu ] );
+const NavMenuItem = ( { postType, postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postType,
+		postId,
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
 
-	const hasNavigationMenus = !! navigationMenus?.length;
+const SideBarNavigationScreenNavigationMenu = ( {
+	menu: firstNavigationMenu,
+} ) => {
+	const history = useHistory();
 
 	const onSelect = useCallback(
 		( selectedBlock ) => {
@@ -106,13 +89,19 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		[ history ]
 	);
 
-	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
-		return (
-			<SidebarNavigationScreenWrapper>
-				{ __( 'There are no Navigation Menus.' ) }
-			</SidebarNavigationScreenWrapper>
-		);
-	}
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	const blocks = useMemo( () => {
+		return [
+			createBlock( 'core/navigation', { ref: firstNavigationMenu } ),
+		];
+	}, [ firstNavigationMenu ] );
 
 	return (
 		<BlockEditorProvider
@@ -121,14 +110,68 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			onChange={ noop }
 			onInput={ noop }
 		>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+				<NavigationMenuContent
+					rootClientId={ blocks[ 0 ].clientId }
+					onSelect={ onSelect }
+				/>
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export default function SidebarNavigationScreenNavigationMenus() {
+	const postType = 'wp_navigation';
+
+	const { records: navigationMenus, isResolving: isLoading } =
+		useEntityRecords( 'postType', `wp_navigation`, NAVIGATION_MENUS_QUERY );
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasSingleNavigationMenu = navigationMenus?.length === 1;
+	const firstNavigationMenu = navigationMenus?.[ 0 ]?.id;
+
+	if ( isLoading ) {
+		return (
 			<SidebarNavigationScreenWrapper>
-				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
-					<NavigationMenuContent
-						rootClientId={ blocks[ 0 ].clientId }
-						onSelect={ onSelect }
-					/>
-				</div>
+				{ __( 'Loading Navigation Menus.' ) }
 			</SidebarNavigationScreenWrapper>
-		</BlockEditorProvider>
+		);
+	}
+
+	if ( ! isLoading && ! hasNavigationMenus ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				{ __( 'There are no Navigation Menus.' ) }
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( hasSingleNavigationMenu ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				<SideBarNavigationScreenNavigationMenu
+					menu={ firstNavigationMenu }
+				/>
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	return (
+		<SidebarNavigationScreenWrapper>
+			<ItemGroup>
+				{ navigationMenus?.map( ( navMenu ) => (
+					<NavMenuItem
+						postType={ postType }
+						postId={ navMenu.id }
+						key={ navMenu.id }
+						withChevron
+					>
+						{ decodeEntities(
+							navMenu.title?.rendered || navMenu.slug
+						) }
+					</NavMenuItem>
+				) ) }
+			</ItemGroup>
+		</SidebarNavigationScreenWrapper>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -18,10 +18,10 @@ import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
-import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 import { unlock } from '../../private-apis';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
@@ -43,7 +43,7 @@ function SidebarScreens() {
 				<SidebarNavigationScreenGlobalStyles />
 			</NavigatorScreen>
 			<NavigatorScreen path="/navigation/:postType/:postId">
-				<SidebarNavigationScreenNavigationItem />
+				<SidebarNavigationScreenNavigationMenu />
 			</NavigatorScreen>
 			<NavigatorScreen path="/page">
 				<SidebarNavigationScreenPages />