@wordpress/block-library 7.7.0 → 7.10.0

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

@@ -0,0 +1,241 @@
+/**
+ * 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,
+			navigationMenu: undefined,
+			canSwitchNavigationMenu: false,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
+			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,
+			navigationMenu: undefined,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: true,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
+			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 );
+		resolveDeletePermission( registry, 1, false );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: true,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: true,
+			hasResolvedCanUserUpdateNavigationMenu: true,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (delete only)', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, false );
+		resolveUpdatePermission( registry, 1, false );
+		resolveDeletePermission( registry, 1, true );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: true,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: true,
+			hasResolvedCanUserUpdateNavigationMenu: true,
+			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

@@ -1,100 +1,113 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseResourcePermissions as useResourcePermissions,
+} from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function useNavigationMenu( ref ) {
+	const permissions = useResourcePermissions( 'navigation', ref );
+
 	return useSelect(
 		( select ) => {
+			const [
+				hasResolvedPermissions,
+				{ canCreate, canUpdate, canDelete, isResolving },
+			] = permissions;
+
 			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 );
+
+			return {
 				navigationMenus,
-				canUserUpdateNavigationMenu: ref
-					? canUser( 'update', 'navigation', ref )
+				isResolvingNavigationMenus,
+				hasResolvedNavigationMenus,
+
+				navigationMenu,
+				isNavigationMenuResolved,
+				isNavigationMenuMissing,
+
+				canSwitchNavigationMenu: ref
+					? navigationMenus?.length > 1
+					: navigationMenus?.length > 0,
+
+				canUserCreateNavigationMenu: canCreate,
+				isResolvingCanUserCreateNavigationMenu: isResolving,
+				hasResolvedCanUserCreateNavigationMenu: hasResolvedPermissions,
+
+				canUserUpdateNavigationMenu: canUpdate,
+				hasResolvedCanUserUpdateNavigationMenu: ref
+					? hasResolvedPermissions
 					: undefined,
-				hasResolvedCanUserUpdateNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'update', 'navigation', ref ]
-				),
-				canUserDeleteNavigationMenu: ref
-					? canUser( 'delete', 'navigation', ref )
+
+				canUserDeleteNavigationMenu: canDelete,
+				hasResolvedCanUserDeleteNavigationMenu: ref
+					? hasResolvedPermissions
 					: undefined,
-				hasResolvedCanUserDeleteNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'delete', 'navigation', ref ]
-				),
-				canUserCreateNavigationMenu: canUser( 'create', 'navigation' ),
-				isResolvingCanUserCreateNavigationMenu: isResolving(
-					'canUser',
-					[ 'create', 'navigation' ]
-				),
-				hasResolvedCanUserCreateNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'create', 'navigation' ]
-				),
 			};
 		},
-		[ ref ]
+		[ ref, permissions ]
 	);
 }
+
+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,
+	};
+}

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 ) {

package/src/navigation/view.js

@@ -55,7 +55,7 @@ window.addEventListener( 'load', () => {
 			}
 		} );
 	} );
-	// Close on focus outside.
+	// Close on focus outside or escape key.
 	document.addEventListener( 'keyup', function ( event ) {
 		const submenuBlocks = document.querySelectorAll(
 			'.wp-block-navigation-item.has-child'
@@ -63,6 +63,11 @@ window.addEventListener( 'load', () => {
 		submenuBlocks.forEach( function ( block ) {
 			if ( ! block.contains( event.target ) ) {
 				closeSubmenus( block );
+			} else if ( event.key === 'Escape' ) {
+				const toggle = block.querySelector( '[aria-expanded="true"]' );
+				closeSubmenus( block );
+				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+				toggle?.focus();
 			}
 		} );
 	} );

package/src/navigation-link/edit.js

@@ -225,20 +225,28 @@ export const updateNavigationLinkBlockAttributes = (
 	} = blockAttributes;
 
 	const {
-		title = '', // the title of any provided Post.
-		url = '',
+		title: newLabel = '', // the title of any provided Post.
+		url: newUrl = '',
 
 		opensInNewTab,
 		id,
 		kind: newKind = originalKind,
 		type: newType = originalType,
 	} = updatedValue;
-	const normalizedTitle = title.replace( /http(s?):\/\//gi, '' );
-	const normalizedURL = url.replace( /http(s?):\/\//gi, '' );
-	const escapeTitle =
-		title !== '' &&
-		normalizedTitle !== normalizedURL &&
-		originalLabel !== title;
+
+	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+
+	const useNewLabel =
+		newLabel &&
+		newLabel !== originalLabel &&
+		// LinkControl without the title field relies
+		// on the check below. Specifically, it assumes that
+		// the URL is the same as a title.
+		// This logic a) looks suspicious and b) should really
+		// live in the LinkControl and not here. It's a great
+		// candidate for future refactoring.
+		newLabelWithoutHttp !== newUrlWithoutHttp;
 
 	// Unfortunately this causes the escaping model to be inverted.
 	// The escaped content is stored in the block attributes (and ultimately in the database),
@@ -249,9 +257,9 @@ export const updateNavigationLinkBlockAttributes = (
 	// See also:
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
-	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+	const label = useNewLabel
+		? escape( newLabel )
+		: originalLabel || escape( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -265,7 +273,7 @@ export const updateNavigationLinkBlockAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( url && { url: encodeURI( safeDecodeURI( url ) ) } ),
+		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),
@@ -447,10 +455,8 @@ export default function NavigationLinkEdit( {
 		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
 	};
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const {
-		replaceBlock,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -658,10 +664,8 @@ export default function NavigationLinkEdit( {
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
-			[ getColorClassName(
-				'background-color',
-				backgroundColor
-			) ]: !! backgroundColor,
+			[ getColorClassName( 'background-color', backgroundColor ) ]:
+				!! backgroundColor,
 		} ),
 		style: {
 			color: ! textColor && customTextColor,

package/src/navigation-link/hooks.js

@@ -9,11 +9,6 @@ import {
 	customPostType,
 } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import fallbackVariations from './fallback-variations';
-
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
@@ -34,15 +29,6 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 		return settings;
 	}
 
-	// Fallback handling may be deleted after supported WP ranges understand the `variations`
-	// property when passed to register_block_type in index.php.
-	if ( ! settings.variations ) {
-		return {
-			...settings,
-			variations: fallbackVariations,
-		};
-	}
-
 	// Otherwise decorate server passed variations with an icon and isActive function.
 	if ( settings.variations ) {
 		const isActive = ( blockAttributes, variationAttributes ) => {

package/src/navigation-link/index.js

@@ -88,7 +88,7 @@ export const settings = {
 	transforms,
 };
 
-// importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+// importing this file includes side effects. This is added in block-library/package.json under sideEffects
 addFilter(
 	'blocks.registerBlockType',
 	'core/navigation-link',