@wordpress/block-library 7.12.0 → 7.13.1-next.957ca95e4c.0

package/src/media-text/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty, omit } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,8 +42,9 @@ const migrateCustomColors = ( attributes ) => {
 			background: attributes.customBackgroundColor,
 		},
 	};
+	const { customBackgroundColor, ...restAttributes } = attributes;
 	return {
-		...omit( attributes, [ 'customBackgroundColor' ] ),
+		...restAttributes,
 		style,
 	};
 };

package/src/media-text/style.scss

@@ -6,6 +6,8 @@
 	display: grid;
 	grid-template-columns: 50% 1fr;
 	grid-template-rows: auto;
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	&.has-media-on-the-right {
 		grid-template-columns: 1fr 50%;

package/src/navigation/block.json

@@ -94,6 +94,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalSkipSerialization": [ "textDecoration" ],
 			"__experimentalDefaultControls": {

package/src/navigation/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mapValues, omit } from 'lodash';
+import { mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -552,8 +552,10 @@ const deprecated = [
 			inserter: true,
 		},
 		migrate: compose( migrateIdToRef, ( attributes ) => {
+			const { rgbTextColor, rgbBackgroundColor, ...restAttributes } =
+				attributes;
 			return {
-				...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ),
+				...restAttributes,
 				customTextColor: attributes.textColor
 					? undefined
 					: attributes.rgbTextColor,

package/src/navigation/edit/index.js

@@ -6,13 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	useState,
-	useEffect,
-	useRef,
-	useCallback,
-	Platform,
-} from '@wordpress/element';
+import { useState, useEffect, useRef, Platform } from '@wordpress/element';
 import {
 	InspectorControls,
 	BlockControls,
@@ -29,7 +23,7 @@ import {
 } from '@wordpress/block-editor';
 import { EntityProvider } from '@wordpress/core-data';
 
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	PanelBody,
 	ToggleControl,
@@ -41,6 +35,8 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import { createBlock } from '@wordpress/blocks';
+import { close, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -100,7 +96,6 @@ function Navigation( {
 
 	const ref = attributes.ref;
 
-	const registry = useRegistry();
 	const setRef = ( postId ) => {
 		setAttributes( { ref: postId } );
 	};
@@ -210,19 +205,37 @@ function Navigation( {
 	const navMenuResolvedButMissing =
 		hasResolvedNavigationMenus && isNavigationMenuMissing;
 
-	// Attempt to retrieve and prioritize any existing navigation menu unless
-	// a specific ref is allocated or the user is explicitly creating a new menu. The aim is
-	// for the block to "just work" from a user perspective using existing data.
+	// Attempt to retrieve and prioritize any existing navigation menu unless:
+	// - the are uncontrolled inner blocks already present in the block.
+	// - the user is creating a new menu.
+	// - there are no menus to choose from.
+	// This attempts to pick the first menu if there is a single Navigation Post. If more
+	// than 1 exists then use the most recent.
+	// The aim is for the block to "just work" from a user perspective using existing data.
 	useEffect( () => {
 		if (
+			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! navigationMenus?.length ||
-			navigationMenus?.length > 1
+			! navigationMenus?.length
 		) {
 			return;
 		}
 
+		navigationMenus.sort( ( menuA, menuB ) => {
+			const menuADate = new Date( menuA.date );
+			const menuBDate = new Date( menuB.date );
+			return menuADate.getTime() < menuBDate.getTime();
+		} );
+
+		/**
+		 *  This fallback displays (both in editor and on front)
+		 *  a list of pages only if no menu (user assigned or
+		 *  automatically picked) is available.
+		 *  The fallback should not request a save (entity dirty state)
+		 *  nor to be undoable, hence why it is marked as non persistent
+		 */
+		__unstableMarkNextChangeAsNotPersistent();
 		setRef( navigationMenus[ 0 ].id );
 	}, [ navigationMenus ] );
 
@@ -231,10 +244,9 @@ function Navigation( {
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
 	const {
-		convert,
+		convert: convertClassicMenu,
 		status: classicMenuConversionStatus,
 		error: classicMenuConversionError,
-		value: classicMenuConversionResult,
 	} = useConvertClassicToBlockMenu( clientId );
 
 	const isConvertingClassicMenu =
@@ -255,13 +267,24 @@ function Navigation( {
 		hasResolvedNavigationMenus &&
 		! hasUncontrolledInnerBlocks;
 
+	if ( isPlaceholder && ! ref ) {
+		/**
+		 *  this fallback only displays (both in editor and on front)
+		 *  the list of pages block if no menu is available as a fallback.
+		 *  We don't want the fallback to request a save,
+		 *  nor to be undoable, hence we mark it non persistent.
+		 */
+		__unstableMarkNextChangeAsNotPersistent();
+		replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+	}
+
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;
 
 	// "loading" state:
 	// - there is a menu creation process in progress.
 	// - there is a classic menu conversion process in progress.
-	// OR
+	// OR:
 	// - there is a ref attribute pointing to a Navigation Post
 	// - the Navigation Post isn't available (hasn't resolved) yet.
 	const isLoading =
@@ -273,38 +296,30 @@ function Navigation( {
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
 	const hasBlockOverlay = useBlockOverlayActive( clientId );
-	const blockProps = useBlockProps(
-		{
-			ref: navRef,
-			className: classnames( className, {
-				'items-justified-right': justifyContent === 'right',
-				'items-justified-space-between':
-					justifyContent === 'space-between',
-				'items-justified-left': justifyContent === 'left',
-				'items-justified-center': justifyContent === 'center',
-				'is-vertical': orientation === 'vertical',
-				'no-wrap': flexWrap === 'nowrap',
-				'is-responsive': 'never' !== overlayMenu,
-				'has-text-color': !! textColor.color || !! textColor?.class,
-				[ getColorClassName( 'color', textColor?.slug ) ]:
-					!! textColor?.slug,
-				'has-background':
-					!! backgroundColor.color || backgroundColor.class,
-				[ getColorClassName(
-					'background-color',
-					backgroundColor?.slug
-				) ]: !! backgroundColor?.slug,
-				[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
-				'block-editor-block-content-overlay': hasBlockOverlay,
-			} ),
-			style: {
-				color: ! textColor?.slug && textColor?.color,
-				backgroundColor:
-					! backgroundColor?.slug && backgroundColor?.color,
-			},
+	const blockProps = useBlockProps( {
+		ref: navRef,
+		className: classnames( className, {
+			'items-justified-right': justifyContent === 'right',
+			'items-justified-space-between': justifyContent === 'space-between',
+			'items-justified-left': justifyContent === 'left',
+			'items-justified-center': justifyContent === 'center',
+			'is-vertical': orientation === 'vertical',
+			'no-wrap': flexWrap === 'nowrap',
+			'is-responsive': 'never' !== overlayMenu,
+			'has-text-color': !! textColor.color || !! textColor?.class,
+			[ getColorClassName( 'color', textColor?.slug ) ]:
+				!! textColor?.slug,
+			'has-background': !! backgroundColor.color || backgroundColor.class,
+			[ getColorClassName( 'background-color', backgroundColor?.slug ) ]:
+				!! backgroundColor?.slug,
+			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
+			'block-editor-block-content-overlay': hasBlockOverlay,
+		} ),
+		style: {
+			color: ! textColor?.slug && textColor?.color,
+			backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,
 		},
-		{ __unstableIsDisabled: hasBlockOverlay }
-	);
+	} );
 
 	// Turn on contrast checker for web only since it's not supported on mobile yet.
 	const enableContrastChecking = Platform.OS === 'web';
@@ -328,11 +343,7 @@ function Navigation( {
 			speak( __( 'Classic menu importing.' ) );
 		}
 
-		if (
-			classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS &&
-			classicMenuConversionResult
-		) {
-			handleUpdateMenu( classicMenuConversionResult?.id );
+		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS ) {
 			showClassicMenuConversionNotice(
 				__( 'Classic menu imported successfully.' )
 			);
@@ -343,11 +354,7 @@ function Navigation( {
 				__( 'Classic menu import failed.' )
 			);
 		}
-	}, [
-		classicMenuConversionStatus,
-		classicMenuConversionResult,
-		classicMenuConversionError,
-	] );
+	}, [ classicMenuConversionStatus, classicMenuConversionError ] );
 
 	// Spacer block needs orientation from context. This is a patch until
 	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
@@ -441,17 +448,6 @@ function Navigation( {
 		shouldFocusNavigationSelector,
 	] );
 
-	const resetToEmptyBlock = useCallback( () => {
-		registry.batch( () => {
-			setAttributes( {
-				ref: undefined,
-			} );
-			if ( ! ref ) {
-				replaceInnerBlocks( clientId, [] );
-			}
-		} );
-	}, [ clientId, ref ] );
-
 	const isResponsive = 'never' !== overlayMenu;
 
 	const overlayMenuPreviewClasses = classnames(
@@ -470,15 +466,25 @@ function Navigation( {
 								setOverlayMenuPreview( ! overlayMenuPreview );
 							} }
 						>
-							{ hasIcon && <OverlayMenuIcon /> }
-							{ ! hasIcon && <span>{ __( 'Menu' ) }</span> }
+							{ hasIcon && (
+								<>
+									<OverlayMenuIcon />
+									<Icon icon={ close } />
+								</>
+							) }
+							{ ! hasIcon && (
+								<>
+									<span>{ __( 'Menu' ) }</span>
+									<span>{ __( 'Close' ) }</span>
+								</>
+							) }
 						</Button>
 					) }
 					{ overlayMenuPreview && (
 						<ToggleControl
 							label={ __( 'Show icon button' ) }
 							help={ __(
-								'Configure the visual appearance of the button opening the overlay menu.'
+								'Configure the visual appearance of the button opening and closing the overlay menu.'
 							) }
 							onChange={ ( value ) =>
 								setAttributes( { hasIcon: value } )
@@ -600,6 +606,33 @@ function Navigation( {
 	if ( hasUnsavedBlocks ) {
 		return (
 			<TagName { ...blockProps }>
+				<BlockControls>
+					<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
+						<NavigationMenuSelector
+							ref={ null }
+							currentMenuId={ null }
+							clientId={ clientId }
+							onSelectNavigationMenu={ ( menuId ) => {
+								handleUpdateMenu( menuId );
+								setShouldFocusNavigationSelector( true );
+							} }
+							onSelectClassicMenu={ async ( classicMenu ) => {
+								const navMenu = await convertClassicMenu(
+									classicMenu.id,
+									classicMenu.name
+								);
+								if ( navMenu ) {
+									handleUpdateMenu( navMenu.id );
+									setShouldFocusNavigationSelector( true );
+								}
+							} }
+							onCreateNew={ () => createNavigationMenu( '', [] ) }
+							/* translators: %s: The name of a menu. */
+							actionLabel={ __( "Switch to '%s'" ) }
+							showManageActions
+						/>
+					</ToolbarGroup>
+				</BlockControls>
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
@@ -611,7 +644,6 @@ function Navigation( {
 					overlayTextColor={ overlayTextColor }
 				>
 					<UnsavedInnerBlocks
-						blockProps={ blockProps }
 						blocks={ uncontrolledInnerBlocks }
 						clientId={ clientId }
 						navigationMenus={ navigationMenus }
@@ -639,16 +671,46 @@ function Navigation( {
 	// TODO - the user should be able to select a new one?
 	if ( ref && isNavigationMenuMissing ) {
 		return (
-			<div { ...blockProps }>
+			<TagName { ...blockProps }>
+				<BlockControls>
+					<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
+						<NavigationMenuSelector
+							ref={ navigationSelectorRef }
+							currentMenuId={ ref }
+							clientId={ clientId }
+							onSelectNavigationMenu={ ( menuId ) => {
+								handleUpdateMenu( menuId );
+								setShouldFocusNavigationSelector( true );
+							} }
+							onSelectClassicMenu={ async ( classicMenu ) => {
+								const navMenu = await convertClassicMenu(
+									classicMenu.id,
+									classicMenu.name
+								);
+								if ( navMenu ) {
+									handleUpdateMenu( navMenu.id );
+									setShouldFocusNavigationSelector( true );
+								}
+							} }
+							onCreateNew={ () => createNavigationMenu( '', [] ) }
+							/* translators: %s: The name of a menu. */
+							actionLabel={ __( "Switch to '%s'" ) }
+							showManageActions
+						/>
+					</ToolbarGroup>
+				</BlockControls>
 				<Warning>
 					{ __(
 						'Navigation menu has been deleted or is unavailable. '
 					) }
-					<Button onClick={ resetToEmptyBlock } variant="link">
+					<Button
+						onClick={ () => createNavigationMenu( '', [] ) }
+						variant="link"
+					>
 						{ __( 'Create a new menu?' ) }
 					</Button>
 				</Warning>
-			</div>
+			</TagName>
 		);
 	}
 
@@ -666,7 +728,17 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
-	if ( isPlaceholder ) {
+	/**
+	 * Historically the navigation block has supported custom placeholders.
+	 * Even though the current UX tries as hard as possible not to
+	 * end up in a placeholder state, the block continues to support
+	 * this extensibility point, via a CustomPlaceholder.
+	 * When CustomPlaceholder is present it becomes the default fallback
+	 * for an empty navigation block, instead of the default fallbacks.
+	 *
+	 */
+
+	if ( isPlaceholder && CustomPlaceholder ) {
 		return (
 			<TagName { ...blockProps }>
 				<PlaceholderComponent
@@ -681,9 +753,15 @@ function Navigation( {
 						handleUpdateMenu( menuId );
 						setShouldFocusNavigationSelector( true );
 					} }
-					onSelectClassicMenu={ ( classicMenu ) => {
-						convert( classicMenu.id, classicMenu.name );
-						setShouldFocusNavigationSelector( true );
+					onSelectClassicMenu={ async ( classicMenu ) => {
+						const navMenu = await convertClassicMenu(
+							classicMenu.id,
+							classicMenu.name
+						);
+						if ( navMenu ) {
+							handleUpdateMenu( navMenu.id );
+							setShouldFocusNavigationSelector( true );
+						}
 					} }
 					onCreateEmpty={ () => createNavigationMenu( '', [] ) }
 				/>
@@ -705,11 +783,21 @@ function Navigation( {
 									handleUpdateMenu( menuId );
 									setShouldFocusNavigationSelector( true );
 								} }
-								onSelectClassicMenu={ ( classicMenu ) => {
-									convert( classicMenu.id, classicMenu.name );
-									setShouldFocusNavigationSelector( true );
+								onSelectClassicMenu={ async ( classicMenu ) => {
+									const navMenu = await convertClassicMenu(
+										classicMenu.id,
+										classicMenu.name
+									);
+									if ( navMenu ) {
+										handleUpdateMenu( navMenu.id );
+										setShouldFocusNavigationSelector(
+											true
+										);
+									}
 								} }
-								onCreateNew={ resetToEmptyBlock }
+								onCreateNew={ () =>
+									createNavigationMenu( '', [] )
+								}
 								/* translators: %s: The name of a menu. */
 								actionLabel={ __( "Switch to '%s'" ) }
 								showManageActions
@@ -728,7 +816,7 @@ function Navigation( {
 							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
 									onDelete={ ( deletedMenuTitle = '' ) => {
-										resetToEmptyBlock();
+										replaceInnerBlocks( clientId, [] );
 										showNavigationMenuStatusNotice(
 											sprintf(
 												// translators: %s: the name of a menu (e.g. Header navigation).

package/src/navigation/edit/responsive-wrapper.js

@@ -79,7 +79,7 @@ export default function ResponsiveWrapper( {
 			{ ! isOpen && (
 				<Button
 					aria-haspopup="true"
-					aria-label={ __( 'Open menu' ) }
+					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
@@ -104,10 +104,15 @@ export default function ResponsiveWrapper( {
 					<div { ...dialogProps }>
 						<Button
 							className="wp-block-navigation__responsive-container-close"
-							aria-label={ __( 'Close menu' ) }
+							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
 						>
-							<Icon icon={ close } />
+							{ hasIcon && <Icon icon={ close } /> }
+							{ ! hasIcon && (
+								<span className="wp-block-navigation__toggle_button_label">
+									{ __( 'Close' ) }
+								</span>
+							) }
 						</Button>
 						<div
 							className="wp-block-navigation__responsive-container-content"

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +37,6 @@ const ALLOWED_BLOCKS = [
 ];
 
 export default function UnsavedInnerBlocks( {
-	blockProps,
 	blocks,
 	clientId,
 	hasSavedUnsavedInnerBlocks,
@@ -63,7 +57,9 @@ export default function UnsavedInnerBlocks( {
 	// from the original inner blocks from the post content then the
 	// user has made changes to the inner blocks. At this point the inner
 	// blocks can be considered "dirty".
-	const innerBlocksAreDirty = blocks !== originalBlocks.current;
+	// We also make sure the current innerBlocks had a chance to be set.
+	const innerBlocksAreDirty =
+		!! originalBlocks.current && blocks !== originalBlocks.current;
 
 	const shouldDirectInsert = useMemo(
 		() =>
@@ -81,12 +77,17 @@ export default function UnsavedInnerBlocks( {
 	const isDisabled = useContext( Disabled.Context );
 	const savingLock = useRef( false );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		renderAppender: hasSelection ? undefined : false,
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: shouldDirectInsert,
-	} );
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-navigation__container',
+		},
+		{
+			renderAppender: hasSelection ? undefined : false,
+			allowedBlocks: ALLOWED_BLOCKS,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: shouldDirectInsert,
+		}
+	);
 
 	const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =
 		useSelect(
@@ -170,18 +171,9 @@ export default function UnsavedInnerBlocks( {
 	const Wrapper = isSaving ? Disabled : 'div';
 
 	return (
-		<Wrapper className="wp-block-navigation__unsaved-changes">
-			<div
-				className={ classnames(
-					'wp-block-navigation__unsaved-changes-overlay',
-					{
-						'is-saving': isSaving,
-					}
-				) }
-			>
-				<div { ...innerBlocksProps } />
-			</div>
+		<>
+			<Wrapper { ...innerBlocksProps } />
 			{ isSaving && <Spinner /> }
-		</Wrapper>
+		</>
 	);
 }

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

@@ -23,7 +23,6 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const registry = useRegistry();
 
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
-	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
 
 	async function convertClassicMenuToBlockMenu( menuId, menuName ) {
@@ -88,47 +87,42 @@ function useConvertClassicToBlockMenu( clientId ) {
 		return navigationMenu;
 	}
 
-	const convert = useCallback(
-		( menuId, menuName ) => {
-			if ( ! menuId || ! menuName ) {
-				setError( 'Unable to convert menu. Missing menu details.' );
+	const convert = useCallback( async ( menuId, menuName ) => {
+		if ( ! menuId || ! menuName ) {
+			setError( 'Unable to convert menu. Missing menu details.' );
+			setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+			return;
+		}
+
+		setStatus( CLASSIC_MENU_CONVERSION_PENDING );
+		setError( null );
+
+		return await convertClassicMenuToBlockMenu( menuId, menuName )
+			.then( ( navigationMenu ) => {
+				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+				return navigationMenu;
+			} )
+			.catch( ( err ) => {
+				setError( err?.message );
 				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-				return;
-			}
-
-			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
-			setValue( null );
-			setError( null );
-
-			convertClassicMenuToBlockMenu( menuId, menuName )
-				.then( ( navMenu ) => {
-					setValue( navMenu );
-					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
-				} )
-				.catch( ( err ) => {
-					setError( err?.message );
-					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-
-					// Rethrow error for debugging.
-					throw new Error(
-						sprintf(
-							// translators: %s: the name of a menu (e.g. Header navigation).
-							__( `Unable to create Navigation Menu "%s".` ),
-							menuName
-						),
-						{
-							cause: err,
-						}
-					);
-				} );
-		},
-		[ clientId ]
-	);
+
+				// Rethrow error for debugging.
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to create Navigation Menu "%s".` ),
+						menuName
+					),
+					{
+						cause: err,
+					}
+				);
+			} );
+	}, [] );
 
 	return {
 		convert,
 		status,
-		value,
 		error,
 	};
 }