@wordpress/block-library 7.7.0 → 7.8.0

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -12,9 +12,8 @@ import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 export default function NavigationMenuDeleteControl( { onDelete } ) {
-	const [ isConfirmModalVisible, setIsConfirmModalVisible ] = useState(
-		false
-	);
+	const [ isConfirmModalVisible, setIsConfirmModalVisible ] =
+		useState( false );
 	const id = useEntityId( 'postType', 'wp_navigation' );
 	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
 	const { deleteEntityRecord } = useDispatch( coreStore );

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -88,39 +88,40 @@ export default function UnsavedInnerBlocks( {
 		__experimentalDirectInsert: shouldDirectInsert,
 	} );
 
-	const {
-		isSaving,
-		draftNavigationMenus,
-		hasResolvedDraftNavigationMenus,
-	} = useSelect(
-		( select ) => {
-			if ( isDisabled ) {
-				return EMPTY_OBJECT;
-			}
-
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				isSavingEntityRecord,
-			} = select( coreStore );
-
-			return {
-				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
-				draftNavigationMenus: getEntityRecords( ...DRAFT_MENU_PARAMS ),
-				hasResolvedDraftNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					DRAFT_MENU_PARAMS
-				),
-			};
-		},
-		[ isDisabled ]
-	);
+	const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =
+		useSelect(
+			( select ) => {
+				if ( isDisabled ) {
+					return EMPTY_OBJECT;
+				}
+
+				const {
+					getEntityRecords,
+					hasFinishedResolution,
+					isSavingEntityRecord,
+				} = select( coreStore );
+
+				return {
+					isSaving: isSavingEntityRecord(
+						'postType',
+						'wp_navigation'
+					),
+					draftNavigationMenus: getEntityRecords(
+						...DRAFT_MENU_PARAMS
+					),
+					hasResolvedDraftNavigationMenus: hasFinishedResolution(
+						'getEntityRecords',
+						DRAFT_MENU_PARAMS
+					),
+				};
+			},
+			[ isDisabled ]
+		);
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const { create: createNavigationMenu } = useCreateNavigationMenu(
-		clientId
-	);
+	const { create: createNavigationMenu } =
+		useCreateNavigationMenu( clientId );
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -18,9 +18,8 @@ export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
 export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 
 function useConvertClassicToBlockMenu( clientId ) {
-	const { create: createNavigationMenu } = useCreateNavigationMenu(
-		clientId
-	);
+	const { create: createNavigationMenu } =
+		useCreateNavigationMenu( clientId );
 	const registry = useRegistry();
 
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );

package/src/navigation/test/use-navigation-menu.js

@@ -0,0 +1,236 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistry, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationMenu from '../use-navigation-menu';
+
+function createRegistryWithStores() {
+	// Create a registry and register used stores.
+	const registry = createRegistry();
+	registry.register( coreStore );
+
+	const navigationConfig = {
+		kind: 'postType',
+		name: 'wp_navigation',
+		baseURL: '/wp/v2/navigation',
+		rawAttributes: [ 'title', 'excerpt', 'content' ],
+	};
+	// Register post type entity.
+	registry.dispatch( coreStore ).addEntities( [ navigationConfig ] );
+	return registry;
+}
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function resolveRecords( registry, menus ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.startResolution( 'getEntityRecords', [
+		'postType',
+		'wp_navigation',
+		{ per_page: -1, status: 'publish' },
+	] );
+	dispatch.finishResolution( 'getEntityRecords', [
+		'postType',
+		'wp_navigation',
+		{ per_page: -1, status: 'publish' },
+	] );
+	dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, {
+		per_page: -1,
+		status: 'publish',
+	} );
+}
+
+function resolveCreatePermission( registry, allowed ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.receiveUserPermission( 'create/navigation', allowed );
+	dispatch.startResolution( 'canUser', [ 'create', 'navigation' ] );
+	dispatch.finishResolution( 'canUser', [ 'create', 'navigation' ] );
+}
+
+function resolveUpdatePermission( registry, ref, allowed ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.receiveUserPermission( `update/navigation/${ ref }`, allowed );
+	dispatch.startResolution( 'canUser', [ 'update', 'navigation', ref ] );
+	dispatch.finishResolution( 'canUser', [ 'update', 'navigation', ref ] );
+}
+
+function resolveDeletePermission( registry, ref, allowed ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.receiveUserPermission( `delete/navigation/${ ref }`, allowed );
+	dispatch.startResolution( 'canUser', [ 'delete', 'navigation', ref ] );
+	dispatch.finishResolution( 'canUser', [ 'delete', 'navigation', ref ] );
+}
+
+describe( 'useNavigationMenus', () => {
+	const navigationMenu1 = { id: 1, title: 'Menu 1', status: 'publish' };
+	const navigationMenu2 = { id: 2, title: 'Menu 2', status: 'publish' };
+	const navigationMenu3 = { id: 3, title: 'Menu 3', status: 'publish' };
+	const navigationMenus = [
+		navigationMenu1,
+		navigationMenu2,
+		navigationMenu3,
+	];
+
+	let registry;
+	beforeEach( () => {
+		registry = createRegistryWithStores();
+		useSelect.mockImplementation( ( fn ) => fn( registry.select ) );
+	} );
+
+	it( 'Should return no information when no data is resolved', () => {
+		expect( useNavigationMenu() ).toEqual( {
+			navigationMenus: null,
+			canSwitchNavigationMenu: false,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: false,
+			isNavigationMenuMissing: true,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return information about all menus when ref is missing', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, true );
+		expect( useNavigationMenu() ).toEqual( {
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: true,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: true,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return information about a specific menu when ref is given', () => {
+		resolveRecords( registry, navigationMenus );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return null for the menu when menu status is "draft"', () => {
+		const navigationMenuDraft = { id: 4, title: 'Menu 3', status: 'draft' };
+		const testMenus = [ ...navigationMenus, navigationMenuDraft ];
+		resolveRecords( registry, testMenus );
+		expect( useNavigationMenu( 4 ) ).toEqual( {
+			navigationMenu: null,
+			navigationMenus: testMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (create, update)', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, true );
+		resolveUpdatePermission( registry, 1, true );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: true,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: true,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (delete only)', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveDeletePermission( registry, 1, true );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: true,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: true,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (no permissions)', () => {
+		const requestedMenu = navigationMenu1;
+		// Note the "delete" permission is resolved for menu 2, but we're requesting
+		// the details of menu 1.
+		resolveDeletePermission( registry, navigationMenu2, true );
+		resolveRecords( registry, navigationMenus );
+
+		expect( useNavigationMenu( requestedMenu.id ) ).toEqual( {
+			navigationMenu: requestedMenu,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+} );

package/src/navigation/use-navigation-entities.js

@@ -43,19 +43,17 @@ export default function useNavigationEntities( menuId ) {
 		context: 'view',
 	} );
 
-	const {
-		records: menuItems,
-		hasResolved: hasResolvedMenuItems,
-	} = useEntityRecords(
-		'root',
-		'menuItem',
-		{
-			menus: menuId,
-			per_page: -1,
-			context: 'view',
-		},
-		{ enabled: !! menuId }
-	);
+	const { records: menuItems, hasResolved: hasResolvedMenuItems } =
+		useEntityRecords(
+			'root',
+			'menuItem',
+			{
+				menus: menuId,
+				per_page: -1,
+				context: 'view',
+			},
+			{ enabled: !! menuId }
+		);
 
 	return {
 		pages,

package/src/navigation/use-navigation-menu.js

@@ -8,93 +8,163 @@ export default function useNavigationMenu( ref ) {
 	return useSelect(
 		( select ) => {
 			const {
-				getEntityRecord,
-				getEditedEntityRecord,
-				getEntityRecords,
-				hasFinishedResolution,
-				isResolving,
-				canUser,
-			} = select( coreStore );
-
-			const navigationMenuSingleArgs = [
-				'postType',
-				'wp_navigation',
-				ref,
-			];
-			const rawNavigationMenu = ref
-				? getEntityRecord( ...navigationMenuSingleArgs )
-				: null;
-			let navigationMenu = ref
-				? getEditedEntityRecord( ...navigationMenuSingleArgs )
-				: null;
-
-			// getEditedEntityRecord will return the post regardless of status.
-			// Therefore if the found post is not published then we should ignore it.
-			if ( navigationMenu?.status !== 'publish' ) {
-				navigationMenu = null;
-			}
-
-			const hasResolvedNavigationMenu = ref
-				? hasFinishedResolution(
-						'getEditedEntityRecord',
-						navigationMenuSingleArgs
-				  )
-				: false;
-
-			const navigationMenuMultipleArgs = [
-				'postType',
-				'wp_navigation',
-				{ per_page: -1, status: 'publish' },
-			];
-			const navigationMenus = getEntityRecords(
-				...navigationMenuMultipleArgs
-			);
-
-			const canSwitchNavigationMenu = ref
-				? navigationMenus?.length > 1
-				: navigationMenus?.length > 0;
+				navigationMenus,
+				isResolvingNavigationMenus,
+				hasResolvedNavigationMenus,
+			} = selectNavigationMenus( select, ref );
 
-			return {
-				isNavigationMenuResolved: hasResolvedNavigationMenu,
-				isNavigationMenuMissing:
-					! ref ||
-					( hasResolvedNavigationMenu && ! rawNavigationMenu ),
-				canSwitchNavigationMenu,
-				isResolvingNavigationMenus: isResolving(
-					'getEntityRecords',
-					navigationMenuMultipleArgs
-				),
-				hasResolvedNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					navigationMenuMultipleArgs
-				),
+			const {
 				navigationMenu,
+				isNavigationMenuResolved,
+				isNavigationMenuMissing,
+			} = selectExistingMenu( select, ref );
+
+			const {
+				canUserCreateNavigationMenu,
+				isResolvingCanUserCreateNavigationMenu,
+				hasResolvedCanUserCreateNavigationMenu,
+			} = selectMenuCreatePermissions( select );
+
+			const {
+				canUserUpdateNavigationMenu,
+				hasResolvedCanUserUpdateNavigationMenu,
+			} = selectMenuUpdatePermissions( select, ref );
+
+			const {
+				canUserDeleteNavigationMenu,
+				hasResolvedCanUserDeleteNavigationMenu,
+			} = selectMenuDeletePermissions( select, ref );
+
+			return {
 				navigationMenus,
-				canUserUpdateNavigationMenu: ref
-					? canUser( 'update', 'navigation', ref )
-					: undefined,
-				hasResolvedCanUserUpdateNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'update', 'navigation', ref ]
-				),
-				canUserDeleteNavigationMenu: ref
-					? canUser( 'delete', 'navigation', ref )
-					: undefined,
-				hasResolvedCanUserDeleteNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'delete', 'navigation', ref ]
-				),
-				canUserCreateNavigationMenu: canUser( 'create', 'navigation' ),
-				isResolvingCanUserCreateNavigationMenu: isResolving(
-					'canUser',
-					[ 'create', 'navigation' ]
-				),
-				hasResolvedCanUserCreateNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'create', 'navigation' ]
-				),
+				isResolvingNavigationMenus,
+				hasResolvedNavigationMenus,
+
+				navigationMenu,
+				isNavigationMenuResolved,
+				isNavigationMenuMissing,
+
+				canUserCreateNavigationMenu,
+				isResolvingCanUserCreateNavigationMenu,
+				hasResolvedCanUserCreateNavigationMenu,
+
+				canUserUpdateNavigationMenu,
+				hasResolvedCanUserUpdateNavigationMenu,
+
+				canUserDeleteNavigationMenu,
+				hasResolvedCanUserDeleteNavigationMenu,
+
+				canSwitchNavigationMenu: ref
+					? navigationMenus?.length > 1
+					: navigationMenus?.length > 0,
 			};
 		},
 		[ ref ]
 	);
 }
+
+function selectNavigationMenus( select ) {
+	const { getEntityRecords, hasFinishedResolution, isResolving } =
+		select( coreStore );
+
+	const args = [
+		'postType',
+		'wp_navigation',
+		{ per_page: -1, status: 'publish' },
+	];
+	return {
+		navigationMenus: getEntityRecords( ...args ),
+		isResolvingNavigationMenus: isResolving( 'getEntityRecords', args ),
+		hasResolvedNavigationMenus: hasFinishedResolution(
+			'getEntityRecords',
+			args
+		),
+	};
+}
+
+function selectExistingMenu( select, ref ) {
+	if ( ! ref ) {
+		return {
+			isNavigationMenuResolved: false,
+			isNavigationMenuMissing: true,
+		};
+	}
+
+	const { getEntityRecord, getEditedEntityRecord, hasFinishedResolution } =
+		select( coreStore );
+
+	const args = [ 'postType', 'wp_navigation', ref ];
+	const navigationMenu = getEntityRecord( ...args );
+	const editedNavigationMenu = getEditedEntityRecord( ...args );
+	const hasResolvedNavigationMenu = hasFinishedResolution(
+		'getEditedEntityRecord',
+		args
+	);
+
+	return {
+		isNavigationMenuResolved: hasResolvedNavigationMenu,
+		isNavigationMenuMissing: hasResolvedNavigationMenu && ! navigationMenu,
+
+		// getEditedEntityRecord will return the post regardless of status.
+		// Therefore if the found post is not published then we should ignore it.
+		navigationMenu:
+			editedNavigationMenu.status === 'publish'
+				? editedNavigationMenu
+				: null,
+	};
+}
+
+function selectMenuCreatePermissions( select ) {
+	const { hasFinishedResolution, isResolving, canUser } = select( coreStore );
+
+	const args = [ 'create', 'navigation' ];
+	return {
+		canUserCreateNavigationMenu: !! canUser( ...args ),
+		isResolvingCanUserCreateNavigationMenu: !! isResolving(
+			'canUser',
+			args
+		),
+		hasResolvedCanUserCreateNavigationMenu: !! hasFinishedResolution(
+			'canUser',
+			args
+		),
+	};
+}
+
+function selectMenuUpdatePermissions( select, ref ) {
+	if ( ! ref ) {
+		return {
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+		};
+	}
+
+	const { hasFinishedResolution, canUser } = select( coreStore );
+	const args = [ 'update', 'navigation', ref ];
+	return {
+		canUserUpdateNavigationMenu: !! canUser( ...args ),
+		hasResolvedCanUserUpdateNavigationMenu: !! hasFinishedResolution(
+			'canUser',
+			args
+		),
+	};
+}
+
+function selectMenuDeletePermissions( select, ref ) {
+	if ( ! ref ) {
+		return {
+			canUserDeleteNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+		};
+	}
+
+	const { hasFinishedResolution, canUser } = select( coreStore );
+	const args = [ 'delete', 'navigation', ref ];
+	return {
+		canUserDeleteNavigationMenu: !! canUser( ...args ),
+		hasResolvedCanUserDeleteNavigationMenu: !! hasFinishedResolution(
+			'canUser',
+			args
+		),
+	};
+}

package/src/navigation/use-template-part-area-label.js

@@ -21,9 +21,8 @@ export default function useTemplatePartAreaLabel( clientId ) {
 				return;
 			}
 
-			const { getBlock, getBlockParentsByBlockName } = select(
-				blockEditorStore
-			);
+			const { getBlock, getBlockParentsByBlockName } =
+				select( blockEditorStore );
 
 			const withAscendingResults = true;
 			const parentTemplatePartClientIds = getBlockParentsByBlockName(
@@ -40,10 +39,12 @@ export default function useTemplatePartAreaLabel( clientId ) {
 			// Blocks can be loaded into a *non-post* block editor.
 			// This code is lifted from this file:
 			// packages/block-library/src/template-part/edit/advanced-controls.js
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const definedAreas = select(
-				'core/editor'
-			).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-disable @wordpress/data-no-store-string-literals */
+			const definedAreas =
+				select(
+					'core/editor'
+				).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-enable @wordpress/data-no-store-string-literals */
 			const { getEditedEntityRecord } = select( coreStore );
 
 			for ( const templatePartClientId of parentTemplatePartClientIds ) {