@wordpress/block-editor 12.11.0 → 12.12.0

package/src/components/use-block-commands/index.js

@@ -112,6 +112,60 @@ export const useTransformCommands = () => {
 };
 
 const useActionsCommands = () => {
+	const { clientIds } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds } = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		return {
+			clientIds: selectedBlockClientIds,
+		};
+	}, [] );
+
+	const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
+		useSelect( blockEditorStore );
+
+	const { setBlockMovingClientId, setNavigationMode, selectBlock } =
+		useDispatch( blockEditorStore );
+
+	if ( ! clientIds || clientIds.length < 1 ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
+	const canMove =
+		canMoveBlocks( clientIds, rootClientId ) &&
+		getBlockCount( rootClientId ) !== 1;
+
+	const commands = [];
+
+	if ( canMove ) {
+		commands.push( {
+			name: 'move-to',
+			label: __( 'Move to' ),
+			callback: () => {
+				setNavigationMode( true );
+				selectBlock( clientIds[ 0 ] );
+				setBlockMovingClientId( clientIds[ 0 ] );
+			},
+			icon: move,
+		} );
+	}
+
+	return {
+		isLoading: false,
+		commands: commands.map( ( command ) => ( {
+			...command,
+			name: 'core/block-editor/action-' + command.name,
+			callback: ( { close } ) => {
+				command.callback();
+				close();
+			},
+		} ) ),
+	};
+};
+
+const useQuickActionsCommands = () => {
 	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientIds,
@@ -130,9 +184,7 @@ const useActionsCommands = () => {
 		canInsertBlockType,
 		getBlockRootClientId,
 		getBlocksByClientId,
-		canMoveBlocks,
 		canRemoveBlocks,
-		getBlockCount,
 	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
@@ -145,9 +197,6 @@ const useActionsCommands = () => {
 		duplicateBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const onGroup = () => {
@@ -196,65 +245,54 @@ const useActionsCommands = () => {
 		);
 	} );
 	const canRemove = canRemoveBlocks( clientIds, rootClientId );
-	const canMove =
-		canMoveBlocks( clientIds, rootClientId ) &&
-		getBlockCount( rootClientId ) !== 1;
 
 	const commands = [];
+
+	if ( canDuplicate ) {
+		commands.push( {
+			name: 'duplicate',
+			label: __( 'Duplicate' ),
+			callback: () => duplicateBlocks( clientIds, true ),
+			icon: copy,
+		} );
+	}
+
 	if ( canInsertDefaultBlock ) {
 		commands.push(
 			{
-				name: 'add-after',
-				label: __( 'Add after' ),
+				name: 'add-before',
+				label: __( 'Add before' ),
 				callback: () => {
 					const clientId = Array.isArray( clientIds )
-						? clientIds[ clientIds.length - 1 ]
+						? clientIds[ 0 ]
 						: clientId;
-					insertAfterBlock( clientId );
+					insertBeforeBlock( clientId );
 				},
 				icon: add,
 			},
 			{
-				name: 'add-before',
-				label: __( 'Add before' ),
+				name: 'add-after',
+				label: __( 'Add after' ),
 				callback: () => {
 					const clientId = Array.isArray( clientIds )
-						? clientIds[ 0 ]
+						? clientIds[ clientIds.length - 1 ]
 						: clientId;
-					insertBeforeBlock( clientId );
+					insertAfterBlock( clientId );
 				},
 				icon: add,
 			}
 		);
 	}
-	if ( canRemove ) {
-		commands.push( {
-			name: 'remove',
-			label: __( 'Delete' ),
-			callback: () => removeBlocks( clientIds, true ),
-			icon: remove,
-		} );
-	}
-	if ( canDuplicate ) {
-		commands.push( {
-			name: 'duplicate',
-			label: __( 'Duplicate' ),
-			callback: () => duplicateBlocks( clientIds, true ),
-			icon: copy,
-		} );
-	}
-	if ( canMove ) {
+
+	if ( isGroupable ) {
 		commands.push( {
-			name: 'move-to',
-			label: __( 'Move to' ),
-			callback: () => {
-				setNavigationMode( true );
-				selectBlock( clientIds[ 0 ] );
-				setBlockMovingClientId( clientIds[ 0 ] );
-			},
-			icon: move,
+			name: 'Group',
+			label: __( 'Group' ),
+			callback: onGroup,
+			icon: group,
 		} );
 	}
+
 	if ( isUngroupable ) {
 		commands.push( {
 			name: 'ungroup',
@@ -263,14 +301,16 @@ const useActionsCommands = () => {
 			icon: ungroup,
 		} );
 	}
-	if ( isGroupable ) {
+
+	if ( canRemove ) {
 		commands.push( {
-			name: 'Group',
-			label: __( 'Group' ),
-			callback: onGroup,
-			icon: group,
+			name: 'remove',
+			label: __( 'Delete' ),
+			callback: () => removeBlocks( clientIds, true ),
+			icon: remove,
 		} );
 	}
+
 	return {
 		isLoading: false,
 		commands: commands.map( ( command ) => ( {
@@ -293,4 +333,9 @@ export const useBlockCommands = () => {
 		name: 'core/block-editor/blockActions',
 		hook: useActionsCommands,
 	} );
+	useCommandLoader( {
+		name: 'core/block-editor/blockQuickActions',
+		hook: useQuickActionsCommands,
+		context: 'block-selection-edit',
+	} );
 };

package/src/components/use-setting/index.js

@@ -189,7 +189,12 @@ export default function useSetting( path ) {
 			// Return if the setting was found in either the block instance or the store.
 			if ( result !== undefined ) {
 				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
-					return result.custom ?? result.theme ?? result.default;
+					return [ 'default', 'theme', 'custom' ].reduce(
+						( acc, key ) => {
+							return acc.concat( result[ key ] ?? [] );
+						},
+						[]
+					);
 				}
 				return result;
 			}

package/src/components/writing-flow/use-arrow-nav.js

@@ -114,6 +114,10 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
+		if ( node.closest( '[inert]' ) ) {
+			return;
+		}
+
 		// Skip if there's only one child that is content editable (and thus a
 		// better candidate).
 		if (

package/src/hooks/block-rename-ui.js

@@ -4,7 +4,7 @@
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { __, sprintf } from '@wordpress/i18n';
-import { getBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	MenuItem,
 	__experimentalHStack as HStack,
@@ -189,21 +189,13 @@ function BlockRenameControl( props ) {
 
 export const withBlockRenameControl = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { clientId, name, attributes, setAttributes } = props;
+		const { clientId, name, attributes, setAttributes, isSelected } = props;
 
-		const metaDataSupport = getBlockSupport(
-			name,
-			'__experimentalMetadata',
-			false
-		);
-
-		const supportsBlockNaming = !! (
-			true === metaDataSupport || metaDataSupport?.name
-		);
+		const supportsBlockNaming = hasBlockSupport( name, 'renaming', true );
 
 		return (
 			<>
-				{ supportsBlockNaming && (
+				{ isSelected && supportsBlockNaming && (
 					<>
 						<BlockRenameControl
 							clientId={ clientId }
@@ -211,8 +203,7 @@ export const withBlockRenameControl = createHigherOrderComponent(
 							onChange={ ( newName ) => {
 								setAttributes( {
 									metadata: {
-										...( attributes?.metadata &&
-											attributes?.metadata ),
+										...attributes?.metadata,
 										name: newName,
 									},
 								} );

package/src/hooks/{metadata-name.js → block-renaming.js}

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import { hasBlockMetadataSupport } from './metadata';
+import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -20,10 +17,10 @@ export function addLabelCallback( settings ) {
 		return settings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
+	const supportsBlockNaming = hasBlockSupport(
 		settings,
-		'name',
-		false // default value
+		'renaming',
+		true // default value
 	);
 
 	// Check whether block metadata is supported before using it.

package/src/hooks/custom-class-name.js

@@ -39,6 +39,30 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function CustomClassNameControls( { attributes, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				autoComplete="off"
+				label={ __( 'Additional CSS class(es)' ) }
+				value={ attributes.className || '' }
+				onChange={ ( nextValue ) => {
+					setAttributes( {
+						className: nextValue !== '' ? nextValue : undefined,
+					} );
+				} }
+				help={ __( 'Separate multiple classes with spaces.' ) }
+			/>
+		</InspectorControls>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the custom class name, if block supports custom class name.
@@ -51,42 +75,23 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
-			const blockEditingMode = useBlockEditingMode();
 			const hasCustomClassName = hasBlockSupport(
 				props.name,
 				'customClassName',
 				true
 			);
-			if ( hasCustomClassName && props.isSelected ) {
-				return (
-					<>
-						<BlockEdit { ...props } />
-						{ blockEditingMode === 'default' && (
-							<InspectorControls group="advanced">
-								<TextControl
-									__nextHasNoMarginBottom
-									autoComplete="off"
-									label={ __( 'Additional CSS class(es)' ) }
-									value={ props.attributes.className || '' }
-									onChange={ ( nextValue ) => {
-										props.setAttributes( {
-											className:
-												nextValue !== ''
-													? nextValue
-													: undefined,
-										} );
-									} }
-									help={ __(
-										'Separate multiple classes with spaces.'
-									) }
-								/>
-							</InspectorControls>
-						) }
-					</>
-				);
-			}
-
-			return <BlockEdit { ...props } />;
+
+			return (
+				<>
+					<BlockEdit { ...props } />
+					{ hasCustomClassName && props.isSelected && (
+						<CustomClassNameControls
+							attributes={ props.attributes }
+							setAttributes={ props.setAttributes }
+						/>
+					) }
+				</>
+			);
 		};
 	},
 	'withInspectorControl'

package/src/hooks/duotone.js

@@ -37,11 +37,22 @@ import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockSettings } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
+// Safari does not always update the duotone filter when the duotone colors
+// are changed. This browser check is later used to force a re-render of the block
+// element to ensure the duotone filter is updated. The check is included at the
+// root of this file as it only needs to be run once per page load.
+const isSafari =
+	window?.navigator.userAgent &&
+	window.navigator.userAgent.includes( 'Safari' ) &&
+	! window.navigator.userAgent.includes( 'Chrome' ) &&
+	! window.navigator.userAgent.includes( 'Chromium' );
+
 extend( [ namesPlugin ] );
 
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
@@ -223,6 +234,7 @@ const withDuotoneControls = createHigherOrderComponent(
 );
 
 function DuotoneStyles( {
+	clientId,
 	id: filterId,
 	selector: duotoneSelector,
 	attribute: duotoneAttr,
@@ -278,6 +290,8 @@ function DuotoneStyles( {
 		useDispatch( blockEditorStore )
 	);
 
+	const blockElement = useBlockElement( clientId );
+
 	useEffect( () => {
 		if ( ! isValidFilter ) return;
 
@@ -294,12 +308,30 @@ function DuotoneStyles( {
 			__unstableType: 'svgs',
 		} );
 
+		// Safari does not always update the duotone filter when the duotone colors
+		// are changed. When using Safari, force the block element to be repainted by
+		// the browser to ensure any changes are reflected visually. This logic matches
+		// that used on the site frontend in `block-supports/duotone.php`.
+		if ( blockElement && isSafari ) {
+			const display = blockElement.style.display;
+			// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
+			// is used instead of `none` to ensure that scroll position is not affected,
+			// as `none` results in the editor scrolling to the top of the block.
+			blockElement.style.display = 'inline-block';
+			// Simply accessing el.offsetHeight flushes layout and style
+			// changes in WebKit without having to wait for setTimeout.
+			// eslint-disable-next-line no-unused-expressions
+			blockElement.offsetHeight;
+			blockElement.style.display = display;
+		}
+
 		return () => {
 			deleteStyleOverride( filterId );
 			deleteStyleOverride( `duotone-${ filterId }` );
 		};
 	}, [
 		isValidFilter,
+		blockElement,
 		colors,
 		selector,
 		filterId,
@@ -378,6 +410,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			<>
 				{ shouldRender && (
 					<DuotoneStyles
+						clientId={ props.clientId }
 						id={ filterClass }
 						selector={ selector }
 						attribute={ attribute }

package/src/hooks/index.js

@@ -19,9 +19,9 @@ import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';
-import './metadata-name';
 import './custom-fields';
 import './block-hooks';
+import './block-renaming';
 import './block-rename-ui';
 
 export { useCustomSides } from './dimensions';

package/src/hooks/layout.js

@@ -408,11 +408,11 @@ export const withLayoutStyles = createHigherOrderComponent(
 
 		useEffect( () => {
 			if ( ! css ) return;
-			setStyleOverride( id, { css } );
+			setStyleOverride( selector, { css } );
 			return () => {
-				deleteStyleOverride( id );
+				deleteStyleOverride( selector );
 			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
 
 		return (
 			<BlockListBlock
@@ -472,11 +472,11 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 
 		useEffect( () => {
 			if ( ! css ) return;
-			setStyleOverride( id, { css } );
+			setStyleOverride( selector, { css } );
 			return () => {
-				deleteStyleOverride( id );
+				deleteStyleOverride( selector );
 			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
 
 		return <BlockListBlock { ...props } className={ className } />;
 	},

package/src/hooks/metadata.js

@@ -2,19 +2,8 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport } from '@wordpress/blocks';
-
 const META_ATTRIBUTE_NAME = 'metadata';
 
-export function hasBlockMetadataSupport( blockType, feature = '' ) {
-	// Only core blocks are allowed to use __experimentalMetadata until the fetaure is stablised.
-	if ( ! blockType.name.startsWith( 'core/' ) ) {
-		return false;
-	}
-	const support = getBlockSupport( blockType, '__experimentalMetadata' );
-	return !! ( true === support || support?.[ feature ] );
-}
-
 /**
  * Filters registered block settings, extending attributes to include `metadata`.
  *
@@ -29,39 +18,18 @@ export function addMetaAttribute( blockTypeSettings ) {
 		return blockTypeSettings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
-		blockTypeSettings,
-		'name'
-	);
-
-	if ( supportsBlockNaming ) {
-		blockTypeSettings.attributes = {
-			...blockTypeSettings.attributes,
-			[ META_ATTRIBUTE_NAME ]: {
-				type: 'object',
-			},
-		};
-	}
+	blockTypeSettings.attributes = {
+		...blockTypeSettings.attributes,
+		[ META_ATTRIBUTE_NAME ]: {
+			type: 'object',
+		},
+	};
 
 	return blockTypeSettings;
 }
 
-export function addSaveProps( extraProps, blockType, attributes ) {
-	if ( hasBlockMetadataSupport( blockType ) ) {
-		extraProps[ META_ATTRIBUTE_NAME ] = attributes[ META_ATTRIBUTE_NAME ];
-	}
-
-	return extraProps;
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addMetaAttribute',
 	addMetaAttribute
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/metadata/save-props',
-	addSaveProps
-);

package/src/hooks/utils.js

@@ -279,6 +279,8 @@ export function useBlockSettings( name, parentLayout ) {
 		isBackgroundEnabled,
 		isLinkEnabled,
 		isTextEnabled,
+		isHeadingEnabled,
+		isButtonEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );

package/src/layouts/grid.js

@@ -27,6 +27,28 @@ const RANGE_CONTROL_MAX_VALUES = {
 	vh: 100,
 	em: 38,
 	rem: 38,
+	svw: 100,
+	lvw: 100,
+	dvw: 100,
+	svh: 100,
+	lvh: 100,
+	dvh: 100,
+	vi: 100,
+	svi: 100,
+	lvi: 100,
+	dvi: 100,
+	vb: 100,
+	svb: 100,
+	lvb: 100,
+	dvb: 100,
+	vmin: 100,
+	svmin: 100,
+	lvmin: 100,
+	dvmin: 100,
+	vmax: 100,
+	svmax: 100,
+	lvmax: 100,
+	dvmax: 100,
 };
 
 export default {
@@ -131,10 +153,36 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			// Convert to pixel value assuming a root size of 16px.
 			newValue = Math.round( quantity * 16 ) + newUnit;
 		} else if (
-			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			[
+				'vh',
+				'vw',
+				'%',
+				'svw',
+				'lvw',
+				'dvw',
+				'svh',
+				'lvh',
+				'dvh',
+				'vi',
+				'svi',
+				'lvi',
+				'dvi',
+				'vb',
+				'svb',
+				'lvb',
+				'dvb',
+				'vmin',
+				'svmin',
+				'lvmin',
+				'dvmin',
+				'vmax',
+				'svmax',
+				'lvmax',
+				'dvmax',
+			].includes( newUnit ) &&
 			quantity > 100
 		) {
-			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			// When converting to `%` or viewport-relative units, cap the new value at 100.
 			newValue = 100 + newUnit;
 		}
 

package/src/layouts/utils.js

@@ -90,7 +90,8 @@ export function getBlockGapCSS(
 export function getAlignmentsInfo( layout ) {
 	const { contentSize, wideSize, type = 'default' } = layout;
 	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex =
+		/^(?!0)\d+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
 		// translators: %s: container size (i.e. 600px etc)
 		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
 		'@wordpress/block-editor'
 	);