Navigation screen: Fix failing request for menu items (#28764)

* Avoid making a request for menu items before menus have been fetched

* Add unit test

* Improve handling of pending state for editor

* Also disable save button when there is no navigation post

packages/edit-navigation/src/components/header/index.js

@@ -61,7 +61,7 @@ export default function Header( {
 						showTooltip: false,
 						children: __( 'Select menu' ),
 						isTertiary: true,
-						disabled: ! menus,
+						disabled: ! menus?.length,
 						__experimentalIsFocusable: true,
 					} }
 					popoverProps={ {

packages/edit-navigation/src/components/layout/index.js

@@ -37,6 +37,7 @@ export default function Layout( { blockEditorSettings } ) {
 		navigationPost,
 		selectMenu,
 		deleteMenu,
+		hasLoadedMenus,
 	} = useNavigationEditor();
 
 	const [ blocks, onInput, onChange ] = useNavigationBlockEditor(
@@ -56,7 +57,7 @@ export default function Layout( { blockEditorSettings } ) {
 
 					<div className="edit-navigation-layout">
 						<Header
-							isPending={ ! navigationPost }
+							isPending={ ! hasLoadedMenus }
 							menus={ menus }
 							selectedMenuId={ selectedMenuId }
 							onSelectMenu={ selectMenu }
@@ -78,11 +79,11 @@ export default function Layout( { blockEditorSettings } ) {
 								saveBlocks={ savePost }
 							/>
 							<Toolbar
-								isPending={ ! navigationPost }
+								isPending={ ! hasLoadedMenus }
 								navigationPost={ navigationPost }
 							/>
 							<Editor
-								isPending={ ! navigationPost }
+								isPending={ ! hasLoadedMenus }
 								blocks={ blocks }
 							/>
 							<InspectorAdditions

packages/edit-navigation/src/components/layout/use-navigation-editor.js

@@ -10,10 +10,16 @@ import { useState, useEffect } from '@wordpress/element';
 import { store as editNavigationStore } from '../../store';
 
 export default function useNavigationEditor() {
-	const menus = useSelect(
-		( select ) => select( 'core' ).getMenus( { per_page: -1 } ),
-		[]
-	);
+	const { menus, hasLoadedMenus } = useSelect( ( select ) => {
+		const selectors = select( 'core' );
+		const params = { per_page: -1 };
+		return {
+			menus: selectors.getMenus( params ),
+			hasLoadedMenus: selectors.hasFinishedResolution( 'getMenus', [
+				params,
+			] ),
+		};
+	}, [] );
 
 	const [ selectedMenuId, setSelectedMenuId ] = useState( null );
 
@@ -52,5 +58,6 @@ export default function useNavigationEditor() {
 		navigationPost,
 		selectMenu,
 		deleteMenu,
+		hasLoadedMenus,
 	};
 }

packages/edit-navigation/src/components/toolbar/save-button.js

@@ -20,6 +20,7 @@ export default function SaveButton( { navigationPost } ) {
 			onClick={ () => {
 				saveNavigationPost( navigationPost );
 			} }
+			disabled={ ! navigationPost }
 		>
 			{ __( 'Save' ) }
 		</Button>

packages/edit-navigation/src/store/resolvers.js

@@ -25,6 +25,10 @@ import { KIND, POST_TYPE, buildNavigationPostId } from './utils';
  * @return {void}
  */
 export function* getNavigationPostForMenu( menuId ) {
+	if ( ! menuId ) {
+		return;
+	}
+
 	const stubPost = createStubPost( menuId );
 	// Persist an empty post to warm up the state
 	yield persistPost( stubPost );

packages/edit-navigation/src/store/test/resolvers.js

@@ -24,6 +24,12 @@ jest.mock( '@wordpress/blocks', () => {
 } );
 
 describe( 'getNavigationPostForMenu', () => {
+	it( 'returns early when a menuId is not provided', () => {
+		const generator = getNavigationPostForMenu( null );
+		expect( generator.next().value ).toBeUndefined();
+		expect( generator.next().done ).toBe( true );
+	} );
+
 	it( 'gets navigation post for menu id', () => {
 		const menuId = 123;