@wordpress/block-library 8.13.0 → 8.15.0

package/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,
 	};
 }
 

package/src/navigation/view-interactivity.js

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { store as wpStore } from '@wordpress/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+const openMenu = ( store, menuOpenedOn ) => {
+	const { context, ref, selectors } = store;
+	selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
+	context.core.navigation.previousFocus = ref;
+	if ( context.core.navigation.type === 'overlay' ) {
+		// Add a `has-modal-open` class to the <html> root.
+		document.documentElement.classList.add( 'has-modal-open' );
+	}
+};
+
+const closeMenu = ( store, menuClosedOn ) => {
+	const { context, selectors } = store;
+	selectors.core.navigation.menuOpenedBy( store )[ menuClosedOn ] = false;
+	// Check if the menu is still open or not.
+	if ( ! selectors.core.navigation.isMenuOpen( store ) ) {
+		if (
+			context.core.navigation.modal?.contains(
+				window.document.activeElement
+			)
+		) {
+			context.core.navigation.previousFocus.focus();
+		}
+		context.core.navigation.modal = null;
+		context.core.navigation.previousFocus = null;
+		if ( context.core.navigation.type === 'overlay' ) {
+			document.documentElement.classList.remove( 'has-modal-open' );
+		}
+	}
+};
+
+wpStore( {
+	effects: {
+		core: {
+			navigation: {
+				initMenu: ( store ) => {
+					const { context, selectors, ref } = store;
+					if ( selectors.core.navigation.isMenuOpen( store ) ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.navigation.modal = ref;
+						context.core.navigation.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.navigation.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: ( store ) => {
+					const { selectors, ref } = store;
+					if ( selectors.core.navigation.isMenuOpen( store ) ) {
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			navigation: {
+				roleAttribute: ( store ) => {
+					const { context, selectors } = store;
+					return context.core.navigation.type === 'overlay' &&
+						selectors.core.navigation.isMenuOpen( store )
+						? 'dialog'
+						: '';
+				},
+				isMenuOpen: ( { context } ) =>
+					// The menu is opened if either `click`, `hover` or `focus` is true.
+					Object.values(
+						context.core.navigation[
+							context.core.navigation.type === 'overlay'
+								? 'overlayOpenedBy'
+								: 'submenuOpenedBy'
+						]
+					).filter( Boolean ).length > 0,
+				menuOpenedBy: ( { context } ) =>
+					context.core.navigation[
+						context.core.navigation.type === 'overlay'
+							? 'overlayOpenedBy'
+							: 'submenuOpenedBy'
+					],
+			},
+		},
+	},
+	actions: {
+		core: {
+			navigation: {
+				openMenuOnHover( store ) {
+					const { navigation } = store.context.core;
+					if (
+						navigation.type === 'submenu' &&
+						// Only open on hover if the overlay is closed.
+						Object.values(
+							navigation.overlayOpenedBy || {}
+						).filter( Boolean ).length === 0
+					)
+						openMenu( store, 'hover' );
+				},
+				closeMenuOnHover( store ) {
+					closeMenu( store, 'hover' );
+				},
+				openMenuOnClick( store ) {
+					openMenu( store, 'click' );
+				},
+				closeMenuOnClick( store ) {
+					closeMenu( store, 'click' );
+					closeMenu( store, 'focus' );
+				},
+				openMenuOnFocus( store ) {
+					openMenu( store, 'focus' );
+				},
+				toggleMenuOnClick: ( store ) => {
+					const { selectors } = store;
+					const menuOpenedBy =
+						selectors.core.navigation.menuOpenedBy( store );
+					if ( menuOpenedBy.click || menuOpenedBy.focus ) {
+						closeMenu( store, 'click' );
+						closeMenu( store, 'focus' );
+					} else {
+						openMenu( store, 'click' );
+					}
+				},
+				handleMenuKeydown: ( store ) => {
+					const { context, selectors, event } = store;
+					if (
+						selectors.core.navigation.menuOpenedBy( store ).click
+					) {
+						// If Escape close the menu.
+						if ( event?.key === 'Escape' ) {
+							closeMenu( store, 'click' );
+							closeMenu( store, 'focus' );
+							return;
+						}
+
+						// Trap focus if it is an overlay (main menu).
+						if (
+							context.core.navigation.type === 'overlay' &&
+							event.key === 'Tab'
+						) {
+							// If shift + tab it change the direction.
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation
+										.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.firstFocusableElement.focus();
+							}
+						}
+					}
+				},
+				handleMenuFocusout: ( store ) => {
+					const { context, event } = store;
+					// If focus is outside modal, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outsite the document,
+					// `window.document.activeElement` doesn't change.
+					if (
+						! context.core.navigation.modal?.contains(
+							event.relatedTarget
+						) &&
+						event.target !== window.document.activeElement
+					) {
+						closeMenu( store, 'click' );
+						closeMenu( store, 'focus' );
+					}
+				},
+			},
+		},
+	},
+} );

package/src/navigation-link/edit.js

@@ -35,10 +35,7 @@ import {
 } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import {
-	store as coreStore,
-	useResourcePermissions,
-} from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -184,8 +181,9 @@ export default function NavigationLinkEdit( {
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
 
-	const pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
+	// Change the label using inspector causes rich text to change focus on firefox.
+	// This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
+	const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );
 
 	const {
 		innerBlocks,
@@ -322,13 +320,6 @@ export default function NavigationLinkEdit( {
 		setIsLinkOpen( false );
 	}
 
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
 	const {
 		textColor,
 		customTextColor,
@@ -381,8 +372,8 @@ export default function NavigationLinkEdit( {
 		},
 		{
 			allowedBlocks: ALLOWED_BLOCKS,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: true,
+			defaultBlock: DEFAULT_BLOCK,
+			directInsert: true,
 			renderAppender: false,
 		}
 	);
@@ -437,6 +428,8 @@ export default function NavigationLinkEdit( {
 						} }
 						label={ __( 'Label' ) }
 						autoComplete="off"
+						onFocus={ () => setIsLabelFieldFocused( true ) }
+						onBlur={ () => setIsLabelFieldFocused( false ) }
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
@@ -505,52 +498,56 @@ export default function NavigationLinkEdit( {
 						</div>
 					) : (
 						<>
-							{ ! isInvalid && ! isDraft && (
-								<>
-									<RichText
-										ref={ ref }
-										identifier="label"
-										className="wp-block-navigation-item__label"
-										value={ label }
-										onChange={ ( labelValue ) =>
-											setAttributes( {
-												label: labelValue,
-											} )
-										}
-										onMerge={ mergeBlocks }
-										onReplace={ onReplace }
-										__unstableOnSplitAtEnd={ () =>
-											insertBlocksAfter(
-												createBlock(
-													'core/navigation-link'
+							{ ! isInvalid &&
+								! isDraft &&
+								! isLabelFieldFocused && (
+									<>
+										<RichText
+											ref={ ref }
+											identifier="label"
+											className="wp-block-navigation-item__label"
+											value={ label }
+											onChange={ ( labelValue ) =>
+												setAttributes( {
+													label: labelValue,
+												} )
+											}
+											onMerge={ mergeBlocks }
+											onReplace={ onReplace }
+											__unstableOnSplitAtEnd={ () =>
+												insertBlocksAfter(
+													createBlock(
+														'core/navigation-link'
+													)
 												)
-											)
-										}
-										aria-label={ __(
-											'Navigation link text'
-										) }
-										placeholder={ itemLabelPlaceholder }
-										withoutInteractiveFormatting
-										allowedFormats={ [
-											'core/bold',
-											'core/italic',
-											'core/image',
-											'core/strikethrough',
-										] }
-										onClick={ () => {
-											if ( ! url ) {
-												setIsLinkOpen( true );
 											}
-										} }
-									/>
-									{ description && (
-										<span className="wp-block-navigation-item__description">
-											{ description }
-										</span>
-									) }
-								</>
-							) }
-							{ ( isInvalid || isDraft ) && (
+											aria-label={ __(
+												'Navigation link text'
+											) }
+											placeholder={ itemLabelPlaceholder }
+											withoutInteractiveFormatting
+											allowedFormats={ [
+												'core/bold',
+												'core/italic',
+												'core/image',
+												'core/strikethrough',
+											] }
+											onClick={ () => {
+												if ( ! url ) {
+													setIsLinkOpen( true );
+												}
+											} }
+										/>
+										{ description && (
+											<span className="wp-block-navigation-item__description">
+												{ description }
+											</span>
+										) }
+									</>
+								) }
+							{ ( isInvalid ||
+								isDraft ||
+								isLabelFieldFocused ) && (
 								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
 									<Tooltip
 										position="top center"
@@ -570,7 +567,11 @@ export default function NavigationLinkEdit( {
 													// See `updateAttributes` for more details.
 													`${ decodeEntities(
 														label
-													) } ${ placeholderText }`.trim()
+													) } ${
+														isInvalid || isDraft
+															? placeholderText
+															: ''
+													}`.trim()
 												}
 											</span>
 											<span className="wp-block-navigation-link__missing_text-tooltip">
@@ -589,7 +590,6 @@ export default function NavigationLinkEdit( {
 							link={ attributes }
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
-							hasCreateSuggestion={ userCanCreate }
 							onRemove={ removeLink }
 							onChange={ ( updatedValue ) => {
 								updateAttributes(

package/src/navigation-link/link-ui.js

@@ -10,7 +10,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { createInterpolateElement, useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	useResourcePermissions,
+} from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -125,6 +128,8 @@ function LinkControlTransforms( { clientId } ) {
 
 export function LinkUI( props ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const pagesPermissions = useResourcePermissions( 'pages' );
+	const postsPermissions = useResourcePermissions( 'posts' );
 
 	async function handleCreate( pageTitle ) {
 		const postType = props.link.type || 'page';
@@ -155,6 +160,13 @@ export function LinkUI( props ) {
 
 	const { label, url, opensInNewTab, type, kind } = props.link;
 
+	let userCanCreate = false;
+	if ( ! type || type === 'page' ) {
+		userCanCreate = pagesPermissions.canCreate;
+	} else if ( type === 'post' ) {
+		userCanCreate = postsPermissions.canCreate;
+	}
+
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
 	const link = useMemo(
@@ -179,7 +191,7 @@ export function LinkUI( props ) {
 				className={ props.className }
 				value={ link }
 				showInitialSuggestions={ true }
-				withCreateSuggestion={ props.hasCreateSuggestion }
+				withCreateSuggestion={ userCanCreate }
 				createSuggestion={ handleCreate }
 				createSuggestionButtonText={ ( searchTerm ) => {
 					let format;

package/src/navigation-submenu/edit.js

@@ -320,8 +320,8 @@ export default function NavigationSubmenuEdit( {
 		getNavigationChildBlockProps( innerBlocksColors );
 	const innerBlocksProps = useInnerBlocksProps( navigationChildBlockProps, {
 		allowedBlocks,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 
 		// Ensure block toolbar is not too far removed from item
 		// being edited.

package/src/navigation-submenu/index.php

@@ -5,16 +5,6 @@
  * @package WordPress
  */
 
-/**
- * Build an array with CSS classes and inline styles defining the colors
- * which will be applied to the navigation markup in the front-end.
- *
- * @param  array $context     Navigation block context.
- * @param  array $attributes  Block attributes.
- * @param  bool  $is_sub_menu Whether the block is a sub-menu.
- * @return array Colors CSS classes and inline styles.
- */
-
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
@@ -199,9 +189,9 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
 		}
 
-		// This allows us to be able to get a response from gutenberg_apply_colors_support.
+		// This allows us to be able to get a response from wp_apply_colors_support.
 		$block->block_type->supports['color'] = true;
-		$colors_supports                      = gutenberg_apply_colors_support( $block->block_type, $attributes );
+		$colors_supports                      = wp_apply_colors_support( $block->block_type, $attributes );
 		$css_classes                          = 'wp-block-navigation__submenu-container';
 		if ( array_key_exists( 'class', $colors_supports ) ) {
 			$css_classes .= ' ' . $colors_supports['class'];

package/src/page-list/convert-to-links-modal.js

@@ -5,14 +5,14 @@ import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export const convertDescription = __(
-	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
+	'This page list is synced with the published pages on your site. Detach the page list to add, delete, or reorder pages yourself.'
 );
 
 export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 	return (
 		<Modal
 			onRequestClose={ onClose }
-			title={ __( 'Edit this menu' ) }
+			title={ __( 'Edit Page List' ) }
 			className={ 'wp-block-page-list-modal' }
 			aria={ {
 				describedby: 'wp-block-page-list-modal__description',
@@ -30,7 +30,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 					disabled={ disabled }
 					onClick={ onClick }
 				>
-					{ __( 'Edit' ) }
+					{ __( 'Detach' ) }
 				</Button>
 			</div>
 		</Modal>