Navigation: Simplify the useSelect for useNavigationMenus (#51977)

* Navigation: Load navigations using so that we only need to preload one request * remove permissions from the useSelect * Add comments about what constants to keep in sync with each other * extract vars
WordPress · Jul 13, 2023 · 179929d · 179929d · github-actions · Jul 13, 2023
1 parent 4f6a407
commit 179929d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 69 deletions.
diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js
@@ -20,13 +20,19 @@ export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link',
 ];
 
+// These parameters must be kept aligned with those in
+// lib/compat/wordpress-6.3/navigation-block-preloading.php
+// and
+// edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
+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,85 +4,61 @@
 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 {
+		navigationMenu,
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+	} = useSelect(
 		( select ) => {
-			const {
-				canCreate,
-				canUpdate,
-				canDelete,
-				isResolving,
-				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,
-
-				canUserUpdateNavigationMenu: canUpdate,
-				hasResolvedCanUserUpdateNavigationMenu: ref
-					? hasResolved
-					: undefined,
-
-				canUserDeleteNavigationMenu: canDelete,
-				hasResolvedCanUserDeleteNavigationMenu: ref
-					? hasResolved
-					: undefined,
-			};
+			return selectExistingMenu( select, ref );
 		},
-		[ ref, permissions ]
+		[ ref ]
 	);
-}
 
-function selectNavigationMenus( select ) {
-	const { getEntityRecords, hasFinishedResolution, isResolving } =
-		select( coreStore );
+	const { canCreate, canUpdate, canDelete, isResolving, hasResolved } =
+		permissions;
+
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
+
+	const canSwitchNavigationMenu = ref
+		? navigationMenus?.length > 1
+		: navigationMenus?.length > 0;
 
 	return {
-		navigationMenus: getEntityRecords( ...SELECT_NAVIGATION_MENUS_ARGS ),
-		isResolvingNavigationMenus: isResolving(
-			'getEntityRecords',
-			SELECT_NAVIGATION_MENUS_ARGS
-		),
-		hasResolvedNavigationMenus: hasFinishedResolution(
-			'getEntityRecords',
-			SELECT_NAVIGATION_MENUS_ARGS
-		),
+		navigationMenu,
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+		navigationMenus,
+		isResolvingNavigationMenus,
+		hasResolvedNavigationMenus,
+		canSwitchNavigationMenu,
+		canUserCreateNavigationMenu: canCreate,
+		isResolvingCanUserCreateNavigationMenu: isResolving,
+		hasResolvedCanUserCreateNavigationMenu: hasResolved,
+		canUserUpdateNavigationMenu: canUpdate,
+		hasResolvedCanUserUpdateNavigationMenu: ref ? hasResolved : undefined,
+		canUserDeleteNavigationMenu: canDelete,
+		hasResolvedCanUserDeleteNavigationMenu: ref ? hasResolved : undefined,
 	};
 }
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
@@ -3,6 +3,8 @@
 // on apiFetch this query is limited to 100.
 // These parameters must be kept aligned with those in
 // lib/compat/wordpress-6.3/navigation-block-preloading.php
+// and
+// block-library/src/navigation/constants.js
 export const PRELOADED_NAVIGATION_MENUS_QUERY = {
 	per_page: 100,
 	status: [ 'publish', 'draft' ],