@wordpress/block-editor 16.0.0 → 16.1.0

package/src/components/block-list/use-block-props/use-focus-handler.js

@@ -12,7 +12,6 @@ import {
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
-import { isShiftClickInProgress } from '../../writing-flow/utils';
 import { unlock } from '../../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
@@ -23,7 +22,7 @@ const { subscribeDelegatedListener } = unlock( composePrivateApis );
  * @param {string} clientId Block client ID.
  */
 export function useFocusHandler( clientId ) {
-	const { isBlockSelected, isBlockMultiSelected } =
+	const { isBlockSelected, isBlockMultiSelected, isMultiSelecting } =
 		useSelect( blockEditorStore );
 	const { selectBlock, selectionChange } = useDispatch( blockEditorStore );
 
@@ -48,12 +47,14 @@ export function useFocusHandler( clientId ) {
 					return;
 				}
 
-				// Never select on the focus fired by a shift+click: the
-				// browser can focus the common editable ancestor of the
-				// range (e.g. a group block), and any selection re-render
-				// mid gesture destroys the native selection being made. The
-				// selection observer builds the multi-selection on mouseup.
-				if ( isShiftClickInProgress() ) {
+				// Never select on the focus fired during a selection
+				// gesture (a shift+click, marked by the selection observer
+				// with startMultiSelect). The browser can focus the common
+				// editable ancestor of the range (e.g. a group block), and
+				// any selection re-render mid gesture destroys the native
+				// selection being made. The observer builds the
+				// multi-selection on mouseup.
+				if ( isMultiSelecting() ) {
 					return;
 				}
 

package/src/components/block-list/use-block-props/use-register-block-event-handlers.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useEffect,
+	useInsertionEffect,
+	useRef,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getEventHandlers } from '../../writing-flow/use-editable-root-event-handlers';
+import { BlockRefs } from '../../provider/block-refs-provider';
+
+/**
+ * Registers the block's `wrapperProps` event handlers so the writing flow host
+ * can call them when a block that supports `editableRoot` is edited through the
+ * host and the events no longer reach the block.
+ *
+ * Handlers are keyed by client ID in the `BlockRefs` context, so the host
+ * resolves them from the block hierarchy. A ref is stored so the host always
+ * calls the latest render's handlers, and only blocks that have a handler are
+ * registered.
+ *
+ * @param {string} clientId     Block client ID.
+ * @param {Object} wrapperProps The block's merged wrapper props.
+ */
+export function useRegisterBlockEventHandlers( clientId, wrapperProps ) {
+	const { eventHandlers } = useContext( BlockRefs );
+	const handlers = getEventHandlers( wrapperProps );
+	const handlersRef = useRef();
+	useInsertionEffect( () => {
+		handlersRef.current = handlers;
+	} );
+
+	const hasHandlers = !! handlers;
+	useEffect( () => {
+		if ( hasHandlers ) {
+			eventHandlers.set( clientId, handlersRef );
+			return () => eventHandlers.delete( clientId );
+		}
+	}, [ eventHandlers, clientId, hasHandlers ] );
+}

package/src/components/block-parent-selector/index.js

@@ -26,10 +26,13 @@ export default function BlockParentSelector() {
 	const { parentClientId } = useSelect( ( select ) => {
 		const {
 			getBlockParents,
-			getSelectedBlockClientId,
+			getSelectedBlockClientIds,
 			getParentSectionBlock,
 		} = unlock( select( blockEditorStore ) );
-		const selectedBlockClientId = getSelectedBlockClientId();
+		// Not getSelectedBlockClientId: a text selection crossing into a
+		// nested block resolves to the ancestor alone, but its selection
+		// start and end differ.
+		const [ selectedBlockClientId ] = getSelectedBlockClientIds();
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];

package/src/components/block-toolbar/switch-section-style.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -18,7 +19,9 @@ import useStylesForBlocks from '../block-styles/use-styles-for-block';
 import { replaceActiveStyle } from '../block-styles/utils';
 import { store as blockEditorStore } from '../../store';
 import { globalStylesDataKey } from '../../store/private-keys';
-import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+import { unlock } from '../../lock-unlock';
+
+const { getVariationStyle } = unlock( globalStylesEnginePrivateApis );
 
 const styleIcon = (
 	<SVG
@@ -59,7 +62,7 @@ function SwitchSectionStyle( { clientId } ) {
 
 	// Get the background color for the active style
 	const activeStyleBackground = activeStyle?.name
-		? getVariationStylesWithRefValues(
+		? getVariationStyle(
 				{
 					settings: globalSettings,
 					styles: globalStyles,

package/src/components/block-tools/empty-block-inserter.js

@@ -15,12 +15,8 @@ export default function EmptyBlockInserter( {
 	clientId,
 	__unstableContentRef,
 } ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
+	const { isInsertionPointVisible, lastClientId, rootClientId } =
+		useSelectedBlockToolProps( clientId );
 
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
@@ -29,7 +25,7 @@ export default function EmptyBlockInserter( {
 
 	return (
 		<BlockPopoverCover
-			clientId={ capturingClientId || clientId }
+			clientId={ clientId }
 			bottomClientId={ lastClientId }
 			className={ clsx(
 				'block-editor-block-list__block-side-inserter-popover',

package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden 1`] = `
 <div>
@@ -9,7 +9,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Change vertical alignment"
+      aria-label="Align content vertically"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -37,7 +37,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Change vertical alignment"
+    label="Align content vertically"
   >
     <div>
       <button

package/src/components/block-vertical-alignment-control/test/index.js

@@ -40,6 +40,22 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
+	test( 'should use custom label and description', () => {
+		render(
+			<BlockVerticalAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				label="Custom Label"
+				description="Custom Description"
+			/>
+		);
+
+		const button = screen.getByRole( 'button', { name: 'Custom Label' } );
+		expect( button ).toHaveAttribute( 'aria-label', 'Custom Label' );
+		// The description is now part of the toggleProps and not directly accessible
+		// We can't easily test for the describedBy attribute here
+	} );
+
 	test( 'should expand controls when toggled', async () => {
 		const user = userEvent.setup();
 
@@ -59,7 +75,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Change vertical alignment',
+				name: 'Align content vertically',
 			} )
 		);
 
@@ -86,7 +102,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		);
 
 		const activeControl = screen.getByRole( 'button', {
-			name: `Align ${ alignment }`,
+			name: `Align top`,
 			pressed: true,
 		} );
 

package/src/components/block-vertical-alignment-control/ui.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import {
 	justifyTop,
@@ -43,6 +43,7 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
+	label = __( 'Align content vertically' ),
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -62,10 +63,7 @@ function BlockVerticalAlignmentUI( {
 					? activeAlignment.icon
 					: defaultAlignmentControl.icon
 			}
-			label={ _x(
-				'Change vertical alignment',
-				'Block vertical alignment setting label'
-			) }
+			label={ label }
 			controls={ controls.map( ( control ) => {
 				return {
 					...BLOCK_ALIGNMENTS_CONTROLS[ control ],

package/src/components/border-radius-control/test/utils.js

@@ -7,7 +7,6 @@ import {
 	hasMixedValues,
 	hasDefinedValues,
 	mode,
-	getPresetValueFromCustomValue,
 	getPresetValueFromControlValue,
 } from '../utils';
 
@@ -273,46 +272,6 @@ describe( 'mode', () => {
 	} );
 } );
 
-describe( 'getPresetValueFromCustomValue', () => {
-	const presets = [
-		{ name: 'None', slug: '0', size: 0 },
-		{ name: 'Small', slug: 'sm', size: '4px' },
-		{ name: 'Medium', slug: 'md', size: 'clamp(2px, 1vw, 8px)' },
-	];
-
-	it( 'should return "0" if value is "0"', () => {
-		expect( getPresetValueFromCustomValue( '0', presets ) ).toBe( '0' );
-	} );
-
-	it( 'should return preset reference if value matches a preset', () => {
-		expect( getPresetValueFromCustomValue( '4px', presets ) ).toBe(
-			'var:preset|border-radius|sm'
-		);
-		expect(
-			getPresetValueFromCustomValue( 'clamp(2px, 1vw, 8px)', presets )
-		).toBe( 'var:preset|border-radius|md' );
-	} );
-
-	it( 'should return value as-is if no matching preset', () => {
-		expect( getPresetValueFromCustomValue( '7px', presets ) ).toBe( '7px' );
-	} );
-
-	it( 'should return value as-is if already a preset reference', () => {
-		expect(
-			getPresetValueFromCustomValue(
-				'var:preset|border-radius|md',
-				presets
-			)
-		).toBe( 'var:preset|border-radius|md' );
-	} );
-
-	it( 'should return undefined if value is undefined', () => {
-		expect(
-			getPresetValueFromCustomValue( undefined, presets )
-		).toBeUndefined();
-	} );
-} );
-
 describe( 'getPresetValueFromControlValue', () => {
 	const presets = [
 		{ name: 'None', slug: '0', size: 0 },

package/src/components/border-radius-control/utils.js

@@ -3,6 +3,16 @@
  */
 import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import {
+	getCustomValueFromPreset,
+	isValuePreset,
+} from '../preset-input-control/utils';
+
+const BORDER_RADIUS_PRESET_TYPE = 'border-radius';
+
 /**
  * Gets the (non-undefined) item with the highest occurrence within an array
  * Based in part on: https://stackoverflow.com/a/20762713
@@ -138,84 +148,6 @@ export function hasDefinedValues( values ) {
 	return !! filteredValues.length;
 }
 
-/**
- * Checks is given value is a radius preset.
- *
- * @param {string} value Value to check
- *
- * @return {boolean} Return true if value is string in format var:preset|border-radius|.
- */
-export function isValuePreset( value ) {
-	if ( ! value?.includes ) {
-		return false;
-	}
-	return value === '0' || value.includes( 'var:preset|border-radius|' );
-}
-
-/**
- * Returns the slug section of the given preset string.
- *
- * @param {string} value Value to extract slug from.
- *
- * @return {string|undefined} The value slug from given preset.
- */
-export function getPresetSlug( value ) {
-	if ( ! value ) {
-		return;
-	}
-
-	if ( value === '0' || value === 'default' ) {
-		return value;
-	}
-
-	const slug = value.match( /var:preset\|border-radius\|(.+)/ );
-
-	return slug ? slug[ 1 ] : undefined;
-}
-
-/**
- * Converts radius preset value into a Range component value .
- *
- * @param {string} presetValue Value to convert to Range value.
- * @param {Array}  presets     Array of current radius preset value objects.
- *
- * @return {number} The int value for use in Range control.
- */
-export function getSliderValueFromPreset( presetValue, presets ) {
-	if ( presetValue === undefined ) {
-		return 0;
-	}
-	const slug =
-		parseFloat( presetValue, 10 ) === 0
-			? '0'
-			: getPresetSlug( presetValue );
-	const sliderValue = presets.findIndex( ( size ) => {
-		return String( size.slug ) === slug;
-	} );
-
-	// Returning NaN rather than undefined as undefined makes range control thumb sit in center
-	return sliderValue !== -1 ? sliderValue : NaN;
-}
-
-/**
- * Converts a preset into a custom value.
- *
- * @param {string} value   Value to convert
- * @param {Array}  presets Array of the current radius preset objects
- *
- * @return {string} Mapping of the radius preset to its equivalent custom value.
- */
-export function getCustomValueFromPreset( value, presets ) {
-	if ( ! isValuePreset( value ) ) {
-		return value;
-	}
-
-	const slug = parseFloat( value, 10 ) === 0 ? '0' : getPresetSlug( value );
-	const radiusSize = presets.find( ( size ) => String( size.slug ) === slug );
-
-	return radiusSize?.size;
-}
-
 /**
  * Converts a control value into a preset value.
  *
@@ -242,33 +174,6 @@ export function getPresetValueFromControlValue(
 	return `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;
 }
 
-/**
- * Converts a custom value to preset value if one can be found.
- *
- * Returns value as-is if no match is found.
- *
- * @param {string} value   Value to convert
- * @param {Array}  presets Array of the current border radius preset objects
- *
- * @return {string} The preset value if it can be found.
- */
-export function getPresetValueFromCustomValue( value, presets ) {
-	// Return value as-is if it is undefined or is already a preset, or '0';
-	if ( ! value || isValuePreset( value ) || value === '0' ) {
-		return value;
-	}
-
-	const spacingMatch = presets.find(
-		( size ) => String( size.size ) === String( value )
-	);
-
-	if ( spacingMatch?.slug ) {
-		return `var:preset|border-radius|${ spacingMatch.slug }`;
-	}
-
-	return value;
-}
-
 /**
  * Converts all preset values in a values object to their custom equivalents.
  *
@@ -285,8 +190,12 @@ export function convertPresetsToCustomValues( values, presets ) {
 	const converted = {};
 	Object.keys( values ).forEach( ( key ) => {
 		const value = values[ key ];
-		if ( isValuePreset( value ) ) {
-			const customValue = getCustomValueFromPreset( value, presets );
+		if ( isValuePreset( value, BORDER_RADIUS_PRESET_TYPE ) ) {
+			const customValue = getCustomValueFromPreset(
+				value,
+				presets,
+				BORDER_RADIUS_PRESET_TYPE
+			);
 			converted[ key ] = customValue !== undefined ? customValue : value;
 		} else {
 			converted[ key ] = value;

package/src/components/button-block-appender/content.scss

@@ -25,8 +25,12 @@
 }
 
 
-// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
-.block-list-appender:only-child {
+// When a button appender shows up in empty container blocks, such as Group
+// and Columns, add an extra click state: the first click selects the
+// container instead of opening the inserter. Default block appenders don't
+// need this because their first click inserts a paragraph and sets the
+// selection.
+.block-list-appender:only-child:has(.block-editor-button-block-appender) {
 	// One level of nesting
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {

package/src/components/colors-gradients/control.js

@@ -45,6 +45,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	colorSlug,
 	gradientValue,
+	gradientSlug,
 	clearable,
 	showTitle = true,
 	enableAlpha,
@@ -102,13 +103,15 @@ function ColorGradientControlInner( {
 		[ TAB_IDS.gradient ]: (
 			<GradientPicker
 				value={ gradientValue }
+				selectedSlug={ gradientSlug }
 				onChange={
 					canChooseAColor
-						? ( newGradient ) => {
-								onGradientChange( newGradient );
+						? ( newGradient, _index, newSlug ) => {
+								onGradientChange( newGradient, newSlug );
 								onColorChange();
 						  }
-						: onGradientChange
+						: ( newGradient, _index, newSlug ) =>
+								onGradientChange( newGradient, newSlug )
 				}
 				{ ...{ gradients, disableCustomGradients } }
 				__experimentalIsRenderedInSidebar={

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div>

package/src/components/dimension-control/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -58,6 +63,8 @@ function useDimensionSizes( presets ) {
  * @param {?string}                    props.label          A label for the control.
  * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.
  * @param {string}                     props.value          The current dimension value.
+ * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.
+ * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.
  * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.
  *
  * @return {Component} The component to be rendered.
@@ -66,6 +73,8 @@ export default function DimensionControl( {
 	label = __( 'Dimension' ),
 	onChange,
 	value,
+	placeholder,
+	className,
 	dimensionSizes: dimensionSizesProp,
 } ) {
 	const [ dimensionSizesFromSettings, availableUnits ] = useSettings(
@@ -146,7 +155,9 @@ export default function DimensionControl( {
 	};
 
 	return (
-		<fieldset className="block-editor-dimension-control">
+		<fieldset
+			className={ clsx( 'block-editor-dimension-control', className ) }
+		>
 			<BaseControl.VisualLabel as="legend">
 				{ label }
 			</BaseControl.VisualLabel>
@@ -157,6 +168,7 @@ export default function DimensionControl( {
 				minimumCustomValue={ 0 }
 				onChange={ onChange }
 				onUnitChange={ handleUnitChange }
+				placeholder={ placeholder }
 				presets={ options }
 				presetType="dimension"
 				selectedUnit={ selectedUnit }

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -1,15 +1,13 @@
 /**
  * WordPress dependencies
  */
-import {
-	SelectControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import { useSettings } from '../use-settings';
+import { InheritanceToolsPanelItem } from '../global-styles/inheritance';
 
 /**
  * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
@@ -29,6 +27,9 @@ import { useSettings } from '../use-settings';
  * @property {SelectControlProps[]}         [options]          Aspect ratio options.
  * @property {string}                       [defaultValue]     Default aspect ratio value.
  * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ * @property {string}                       [className]        Additional CSS class on the wrapping panel item.
+ * @property {boolean}                      [isInherited]      Whether the control is displaying an inherited Global Styles value.
+ * @property {boolean}                      [hasLocalOverride] Whether a local value is overriding an inherited Global Styles value.
  */
 
 export default function AspectRatioTool( {
@@ -39,6 +40,9 @@ export default function AspectRatioTool( {
 	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
+	className,
+	isInherited,
+	hasLocalOverride,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
@@ -78,7 +82,10 @@ export default function AspectRatioTool( {
 	];
 
 	return (
-		<ToolsPanelItem
+		<InheritanceToolsPanelItem
+			className={ className }
+			isInherited={ isInherited }
+			hasLocalOverride={ hasLocalOverride }
 			hasValue={
 				hasValue ? hasValue : () => displayValue !== defaultValue
 			}
@@ -93,6 +100,6 @@ export default function AspectRatioTool( {
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
 			/>
-		</ToolsPanelItem>
+		</InheritanceToolsPanelItem>
 	);
 }

package/src/components/editor-styles/index.js

@@ -75,7 +75,22 @@ function EditorStyles( { styles, scope, transformOptions } ) {
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
-		for ( const [ id, override ] of overrides ) {
+		/*
+		 * Custom CSS overrides are applied after all other overrides so they
+		 * win the cascade at equal specificity, mirroring the front end where
+		 * the custom CSS stylesheet is printed last. Both partitions keep the
+		 * block order established by getStyleOverrides.
+		 */
+		const orderedOverrides = [
+			...overrides.filter(
+				( [ , override ] ) => override?.__unstableType !== 'custom-css'
+			),
+			...overrides.filter(
+				( [ , override ] ) => override?.__unstableType === 'custom-css'
+			),
+		];
+
+		for ( const [ id, override ] of orderedOverrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
 			const overrideWithId = { ...override, id };
 			if ( index === -1 ) {