Use useResourcePermissions in block-library and the widgets editor (#…

…43305) * Use useResourcePermissions in block-library and the widgets editor * Return an object from useResourcePermissions instead of an array * Update the usage in useNavigationMenu * Update the usage in the widgets editor * Assign useResourcePermissions results to named variables
WordPress · Aug 19, 2022 · 949feb3 · 949feb3
1 parent 93be308
commit 949feb3
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 114 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -42,7 +42,10 @@ import {
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseResourcePermissions as useResourcePermissions,
+} from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -463,14 +466,15 @@ export default function NavigationLinkEdit( {
 	const itemLabelPlaceholder = __( 'Add link…' );
 	const ref = useRef();
 
+	const pagesPermissions = useResourcePermissions( 'pages' );
+	const postsPermissions = useResourcePermissions( 'posts' );
+
 	const {
 		innerBlocks,
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
 		hasChildren,
-		userCanCreatePages,
-		userCanCreatePosts,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -497,14 +501,6 @@ export default function NavigationLinkEdit( {
 					true
 				),
 				hasChildren: !! getBlockCount( clientId ),
-				userCanCreatePages: select( coreStore ).canUser(
-					'create',
-					'pages'
-				),
-				userCanCreatePosts: select( coreStore ).canUser(
-					'create',
-					'posts'
-				),
 			};
 		},
 		[ clientId ]
@@ -606,9 +602,9 @@ export default function NavigationLinkEdit( {
 
 	let userCanCreate = false;
 	if ( ! type || type === 'page' ) {
-		userCanCreate = userCanCreatePages;
+		userCanCreate = pagesPermissions.canCreate;
 	} else if ( type === 'post' ) {
-		userCanCreate = userCanCreatePosts;
+		userCanCreate = postsPermissions.canCreate;
 	}
 
 	async function handleCreate( pageTitle ) {

diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
@@ -39,7 +39,10 @@ import {
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	__experimentalUseResourcePermissions as useResourcePermissions,
+	store as coreStore,
+} from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
 
@@ -294,15 +297,16 @@ export default function NavigationSubmenuEdit( {
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
 
+	const pagesPermissions = useResourcePermissions( 'pages' );
+	const postsPermissions = useResourcePermissions( 'posts' );
+
 	const {
 		isAtMaxNesting,
 		isTopLevelItem,
 		isParentOfSelectedBlock,
 		isImmediateParentOfSelectedBlock,
 		hasChildren,
 		selectedBlockHasChildren,
-		userCanCreatePages,
-		userCanCreatePosts,
 		onlyDescendantIsEmptyLink,
 	} = useSelect(
 		( select ) => {
@@ -348,14 +352,6 @@ export default function NavigationSubmenuEdit( {
 				),
 				hasChildren: !! getBlockCount( clientId ),
 				selectedBlockHasChildren: !! selectedBlockChildren?.length,
-				userCanCreatePages: select( coreStore ).canUser(
-					'create',
-					'pages'
-				),
-				userCanCreatePosts: select( coreStore ).canUser(
-					'create',
-					'posts'
-				),
 				onlyDescendantIsEmptyLink: _onlyDescendantIsEmptyLink,
 			};
 		},
@@ -426,9 +422,9 @@ export default function NavigationSubmenuEdit( {
 
 	let userCanCreate = false;
 	if ( ! type || type === 'page' ) {
-		userCanCreate = userCanCreatePages;
+		userCanCreate = pagesPermissions.canCreate;
 	} else if ( type === 'post' ) {
-		userCanCreate = userCanCreatePosts;
+		userCanCreate = postsPermissions.canCreate;
 	}
 
 	async function handleCreate( pageTitle ) {

diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -12,10 +12,13 @@ export default function useNavigationMenu( ref ) {
 
 	return useSelect(
 		( select ) => {
-			const [
-				hasResolvedPermissions,
-				{ canCreate, canUpdate, canDelete, isResolving },
-			] = permissions;
+			const {
+				canCreate,
+				canUpdate,
+				canDelete,
+				isResolving,
+				hasResolved,
+			} = permissions;
 
 			const {
 				navigationMenus,
@@ -44,16 +47,16 @@ export default function useNavigationMenu( ref ) {
 
 				canUserCreateNavigationMenu: canCreate,
 				isResolvingCanUserCreateNavigationMenu: isResolving,
-				hasResolvedCanUserCreateNavigationMenu: hasResolvedPermissions,
+				hasResolvedCanUserCreateNavigationMenu: hasResolved,
 
 				canUserUpdateNavigationMenu: canUpdate,
 				hasResolvedCanUserUpdateNavigationMenu: ref
-					? hasResolvedPermissions
+					? hasResolved
 					: undefined,
 
 				canUserDeleteNavigationMenu: canDelete,
 				hasResolvedCanUserDeleteNavigationMenu: ref
-					? hasResolvedPermissions
+					? hasResolved
 					: undefined,
 			};
 		},

diff --git a/packages/core-data/src/hooks/test/use-resource-permissions.js b/packages/core-data/src/hooks/test/use-resource-permissions.js
@@ -50,28 +50,24 @@ describe( 'useResourcePermissions', () => {
 				<TestComponent />
 			</RegistryProvider>
 		);
-		expect( data ).toEqual( [
-			false,
-			{
-				status: 'IDLE',
-				isResolving: false,
-				canCreate: false,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'IDLE',
+			isResolving: false,
+			hasResolved: false,
+			canCreate: false,
+		} );
 
 		// Required to make sure no updates happen outside of act()
 		await act( async () => {
 			jest.advanceTimersByTime( 1 );
 		} );
 
-		expect( data ).toEqual( [
-			true,
-			{
-				status: 'SUCCESS',
-				isResolving: false,
-				canCreate: true,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'SUCCESS',
+			isResolving: false,
+			hasResolved: true,
+			canCreate: true,
+		} );
 	} );
 
 	it( 'retrieves the relevant permissions for a resource with a key', async () => {
@@ -85,31 +81,27 @@ describe( 'useResourcePermissions', () => {
 				<TestComponent />
 			</RegistryProvider>
 		);
-		expect( data ).toEqual( [
-			false,
-			{
-				status: 'IDLE',
-				isResolving: false,
-				canCreate: false,
-				canUpdate: false,
-				canDelete: false,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'IDLE',
+			isResolving: false,
+			hasResolved: false,
+			canCreate: false,
+			canUpdate: false,
+			canDelete: false,
+		} );
 
 		// Required to make sure no updates happen outside of act()
 		await act( async () => {
 			jest.advanceTimersByTime( 1 );
 		} );
 
-		expect( data ).toEqual( [
-			true,
-			{
-				status: 'SUCCESS',
-				isResolving: false,
-				canCreate: true,
-				canUpdate: false,
-				canDelete: false,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'SUCCESS',
+			isResolving: false,
+			hasResolved: true,
+			canCreate: true,
+			canUpdate: false,
+			canDelete: false,
+		} );
 	} );
 } );
diff --git a/packages/core-data/src/hooks/use-resource-permissions.ts b/packages/core-data/src/hooks/use-resource-permissions.ts
@@ -81,14 +81,12 @@ export default function __experimentalUseResourcePermissions< IdType = void >(
 			const { canUser } = resolve( coreStore );
 			const create = canUser( 'create', resource );
 			if ( ! id ) {
-				return [
-					create.hasResolved,
-					{
-						status: create.status,
-						isResolving: create.isResolving,
-						canCreate: create.hasResolved && create.data,
-					},
-				];
+				return {
+					status: create.status,
+					isResolving: create.isResolving,
+					hasResolved: create.hasResolved,
+					canCreate: create.hasResolved && create.data,
+				};
 			}
 
 			const update = canUser( 'update', resource, id );
@@ -104,16 +102,14 @@ export default function __experimentalUseResourcePermissions< IdType = void >(
 			} else if ( hasResolved ) {
 				status = Status.Success;
 			}
-			return [
+			return {
+				status,
+				isResolving,
 				hasResolved,
-				{
-					status,
-					isResolving,
-					canCreate: hasResolved && create.data,
-					canUpdate: hasResolved && update.data,
-					canDelete: hasResolved && _delete.data,
-				},
-			];
+				canCreate: hasResolved && create.data,
+				canUpdate: hasResolved && update.data,
+				canDelete: hasResolved && _delete.data,
+			};
 		},
 		[ resource, id ]
 	);

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -4,6 +4,11 @@
 import { SlotFillProvider } from '@wordpress/components';
 import { uploadMedia } from '@wordpress/media-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	useEntityBlockEditor,
+	store as coreStore,
+	__experimentalUseResourcePermissions as useResourcePermissions,
+} from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
 	BlockEditorProvider,
@@ -18,7 +23,6 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';
 import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../store';
@@ -29,36 +33,34 @@ export default function WidgetAreasBlockEditorProvider( {
 	children,
 	...props
 } ) {
-	const {
-		hasUploadPermissions,
-		reusableBlocks,
-		isFixedToolbarActive,
-		keepCaretInsideBlock,
-	} = useSelect(
-		( select ) => ( {
-			hasUploadPermissions:
-				select( coreStore ).canUser( 'create', 'media' ) ?? true,
-			widgetAreas: select( editWidgetsStore ).getWidgetAreas(),
-			widgets: select( editWidgetsStore ).getWidgets(),
-			reusableBlocks: ALLOW_REUSABLE_BLOCKS
-				? select( coreStore ).getEntityRecords( 'postType', 'wp_block' )
-				: [],
-			isFixedToolbarActive: !! select( preferencesStore ).get(
-				'core/edit-widgets',
-				'fixedToolbar'
-			),
-			keepCaretInsideBlock: !! select( preferencesStore ).get(
-				'core/edit-widgets',
-				'keepCaretInsideBlock'
-			),
-		} ),
-		[]
-	);
+	const mediaPermissions = useResourcePermissions( 'media' );
+	const { reusableBlocks, isFixedToolbarActive, keepCaretInsideBlock } =
+		useSelect(
+			( select ) => ( {
+				widgetAreas: select( editWidgetsStore ).getWidgetAreas(),
+				widgets: select( editWidgetsStore ).getWidgets(),
+				reusableBlocks: ALLOW_REUSABLE_BLOCKS
+					? select( coreStore ).getEntityRecords(
+							'postType',
+							'wp_block'
+					  )
+					: [],
+				isFixedToolbarActive: !! select( preferencesStore ).get(
+					'core/edit-widgets',
+					'fixedToolbar'
+				),
+				keepCaretInsideBlock: !! select( preferencesStore ).get(
+					'core/edit-widgets',
+					'keepCaretInsideBlock'
+				),
+			} ),
+			[]
+		);
 	const { setIsInserterOpened } = useDispatch( editWidgetsStore );
 
 	const settings = useMemo( () => {
 		let mediaUploadBlockEditor;
-		if ( hasUploadPermissions ) {
+		if ( mediaPermissions.canCreate ) {
 			mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {
 				uploadMedia( {
 					wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,
@@ -80,7 +82,7 @@ export default function WidgetAreasBlockEditorProvider( {
 		blockEditorSettings,
 		isFixedToolbarActive,
 		keepCaretInsideBlock,
-		hasUploadPermissions,
+		mediaPermissions.canCreate,
 		reusableBlocks,
 		setIsInserterOpened,
 	] );