Load first menu item in a new block editor if navigation is not in ca…

…nvas.
WordPress · Feb 23, 2023 · 148b2c1 · 148b2c1
1 parent 85749c0
commit 148b2c1
Showing 1 changed file with 99 additions and 33 deletions.
diff --git a/packages/edit-site/src/components/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js
@@ -3,8 +3,13 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import {
+	store as blockEditorStore,
+	BlockEditorProvider,
+	BlockTools,
+	BlockList,
+} from '@wordpress/block-editor';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 
@@ -13,38 +18,90 @@ import { __ } from '@wordpress/i18n';
  */
 import NavigationMenu from './navigation-menu';
 
+const NAVIGATION_MENUS_QUERY = [
+	'postType',
+	'wp_navigation',
+	[ { per_page: 1, status: 'publish' } ],
+];
+
+function NavigationBlockEditorLoader( { onSelect, navigationPostId } ) {
+	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		'wp_navigation',
+		{ id: navigationPostId }
+	);
+	return (
+		<BlockEditorProvider
+			value={ innerBlocks }
+			onChange={ onChange }
+			onInput={ onInput }
+		>
+			<NavigationMenu onSelect={ onSelect } />
+			<div style={ { visibility: 'hidden' } }>
+				<BlockTools>
+					<BlockList />
+				</BlockTools>
+			</div>
+		</BlockEditorProvider>
+	);
+}
+
 export default function NavigationInspector( { onSelect } ) {
-	const { navigationBlockId, isLoadingInnerBlocks, hasLoadedInnerBlocks } =
-		useSelect( ( select ) => {
-			const {
-				__experimentalGetActiveBlockIdByBlockNames,
-				__experimentalGetGlobalBlocksByName,
-				getBlock,
-			} = select( blockEditorStore );
-			const { isResolving, hasFinishedResolution } = select( coreStore );
+	const {
+		navigationBlockId,
+		navigationPostId,
+		isLoadingInnerBlocks,
+		hasLoadedInnerBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			__experimentalGetActiveBlockIdByBlockNames,
+			__experimentalGetGlobalBlocksByName,
+			getBlock,
+		} = select( blockEditorStore );
+		const { isResolving, hasFinishedResolution, getEntityRecords } =
+			select( coreStore );
+
+		const selectedNavBlockId =
+			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' ) ||
+			__experimentalGetGlobalBlocksByName( 'core/navigation' )?.[ 0 ];
 
-			const selectedNavBlockId =
-				__experimentalGetActiveBlockIdByBlockNames(
-					'core/navigation'
-				) ||
-				__experimentalGetGlobalBlocksByName( 'core/navigation' )?.[ 0 ];
-			const selectedNavigationPost =
-				selectedNavBlockId &&
-				getBlock( selectedNavBlockId )?.attributes?.ref;
+		let navigationPost, isLoading, hasLoaded;
+		if ( selectedNavBlockId ) {
+			navigationPost = getBlock( selectedNavBlockId )?.attributes?.ref;
+			isLoading = isResolving( 'getEntityRecord', [
+				'postType',
+				'wp_navigation',
+				navigationPost,
+			] );
+			hasLoaded = hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				'wp_navigation',
+				navigationPost,
+			] );
+		} else {
+			const navigationMenus = getEntityRecords(
+				...NAVIGATION_MENUS_QUERY
+			);
+			if ( navigationMenus?.length > 0 ) {
+				navigationPost = navigationMenus[ 0 ].id;
+			}
+			isLoading = isResolving(
+				'getEntityRecords',
+				NAVIGATION_MENUS_QUERY
+			);
+			hasLoaded = hasFinishedResolution(
+				'getEntityRecords',
+				NAVIGATION_MENUS_QUERY
+			);
+		}
 
-			return {
-				navigationBlockId: selectedNavBlockId,
-				isLoadingInnerBlocks: isResolving( 'getEntityRecord', [
-					'postType',
-					'wp_navigation',
-					selectedNavigationPost,
-				] ),
-				hasLoadedInnerBlocks: hasFinishedResolution(
-					'getEntityRecord',
-					[ 'postType', 'wp_navigation', selectedNavigationPost ]
-				),
-			};
-		}, [] );
+		return {
+			navigationPostId: navigationPost,
+			navigationBlockId: selectedNavBlockId,
+			isLoadingInnerBlocks: isLoading,
+			hasLoadedInnerBlocks: hasLoaded,
+		};
+	}, [] );
 
 	useEffect( () => {
 		if ( isLoadingInnerBlocks ) {
@@ -60,7 +117,8 @@ export default function NavigationInspector( { onSelect } ) {
 		<div className="edit-site-navigation-inspector">
 			{ hasLoadedInnerBlocks &&
 				! isLoadingInnerBlocks &&
-				! navigationBlockId && (
+				! navigationBlockId &&
+				! navigationPostId && (
 					<p className="edit-site-navigation-inspector__empty-msg">
 						{ __( 'There are no Navigation Menus.' ) }
 					</p>
@@ -76,12 +134,20 @@ export default function NavigationInspector( { onSelect } ) {
 					<div className="edit-site-navigation-inspector__placeholder is-child" />
 				</>
 			) }
-			{ navigationBlockId && hasLoadedInnerBlocks && (
+			{ navigationBlockId && navigationPostId && hasLoadedInnerBlocks && (
 				<NavigationMenu
 					onSelect={ onSelect }
 					navigationBlockId={ navigationBlockId }
 				/>
 			) }
+			{ ! navigationBlockId &&
+				navigationPostId &&
+				hasLoadedInnerBlocks && (
+					<NavigationBlockEditorLoader
+						onSelect={ onSelect }
+						navigationPostId={ navigationPostId }
+					/>
+				) }
 		</div>
 	);
 }