diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index 4e27a3a24778c..c930693a9ad4a 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/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={ {
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index 37ce18de7580b..357fc400d073a 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/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 } ) {
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,
};
}
diff --git a/packages/edit-navigation/src/components/toolbar/save-button.js b/packages/edit-navigation/src/components/toolbar/save-button.js
index 92132f47198d6..4d526ebbe40ed 100644
--- a/packages/edit-navigation/src/components/toolbar/save-button.js
+++ b/packages/edit-navigation/src/components/toolbar/save-button.js
@@ -20,6 +20,7 @@ export default function SaveButton( { navigationPost } ) {
onClick={ () => {
saveNavigationPost( navigationPost );
} }
+ disabled={ ! navigationPost }
>
{ __( 'Save' ) }
diff --git a/packages/edit-navigation/src/store/resolvers.js b/packages/edit-navigation/src/store/resolvers.js
index af3b59a02b8ac..a7b8bb5ca67ed 100644
--- a/packages/edit-navigation/src/store/resolvers.js
+++ b/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 );
diff --git a/packages/edit-navigation/src/store/test/resolvers.js b/packages/edit-navigation/src/store/test/resolvers.js
index 984be802bb4bd..c056222e1595c 100644
--- a/packages/edit-navigation/src/store/test/resolvers.js
+++ b/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;