Navigation: Load navigations using so that we only need to preload on…

…e request
WordPress · Jul 4, 2023 · 6929278 · 6929278
1 parent 5ba7484
commit 6929278
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 35 deletions.
diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js
@@ -20,13 +20,15 @@ export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link',
 ];
 
+export const PRELOADED_NAVIGATION_MENUS_QUERY = {
+	per_page: 100,
+	status: [ 'publish', 'draft' ],
+	order: 'desc',
+	orderby: 'date',
+};
+
 export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'postType',
 	'wp_navigation',
-	{
-		per_page: 100,
-		status: [ 'publish', 'draft' ],
-		order: 'desc',
-		orderby: 'date',
-	},
+	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];
diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -4,18 +4,19 @@
 import {
 	store as coreStore,
 	useResourcePermissions,
+	useEntityRecords,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { SELECT_NAVIGATION_MENUS_ARGS } from './constants';
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 
 export default function useNavigationMenu( ref ) {
 	const permissions = useResourcePermissions( 'navigation', ref );
 
-	return useSelect(
+	const useSelectResult = useSelect(
 		( select ) => {
 			const {
 				canCreate,
@@ -25,31 +26,17 @@ export default function useNavigationMenu( ref ) {
 				hasResolved,
 			} = permissions;
 
-			const {
-				navigationMenus,
-				isResolvingNavigationMenus,
-				hasResolvedNavigationMenus,
-			} = selectNavigationMenus( select );
-
 			const {
 				navigationMenu,
 				isNavigationMenuResolved,
 				isNavigationMenuMissing,
 			} = selectExistingMenu( select, ref );
 
 			return {
-				navigationMenus,
-				isResolvingNavigationMenus,
-				hasResolvedNavigationMenus,
-
 				navigationMenu,
 				isNavigationMenuResolved,
 				isNavigationMenuMissing,
 
-				canSwitchNavigationMenu: ref
-					? navigationMenus?.length > 1
-					: navigationMenus?.length > 0,
-
 				canUserCreateNavigationMenu: canCreate,
 				isResolvingCanUserCreateNavigationMenu: isResolving,
 				hasResolvedCanUserCreateNavigationMenu: hasResolved,
@@ -67,22 +54,26 @@ export default function useNavigationMenu( ref ) {
 		},
 		[ ref, permissions ]
 	);
-}
 
-function selectNavigationMenus( select ) {
-	const { getEntityRecords, hasFinishedResolution, isResolving } =
-		select( coreStore );
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+		canSwitchNavigationMenu = ref
+			? navigationMenus?.length > 1
+			: navigationMenus?.length > 0,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
 
 	return {
-		navigationMenus: getEntityRecords( ...SELECT_NAVIGATION_MENUS_ARGS ),
-		isResolvingNavigationMenus: isResolving(
-			'getEntityRecords',
-			SELECT_NAVIGATION_MENUS_ARGS
-		),
-		hasResolvedNavigationMenus: hasFinishedResolution(
-			'getEntityRecords',
-			SELECT_NAVIGATION_MENUS_ARGS
-		),
+		...useSelectResult,
+		navigationMenus,
+		isResolvingNavigationMenus,
+		hasResolvedNavigationMenus,
+		canSwitchNavigationMenu,
 	};
 }