@wordpress/block-editor 16.2.0 → 17.0.0

package/src/components/dimensions-tool/test/index.js

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
 const EMPTY_OBJECT = {};
@@ -9,6 +9,9 @@ const ASPECT_RATIO_OPTIONS = [
 	{ label: 'Original', value: 'auto' },
 	{ label: '16/9', value: '16/9' },
 	{ label: '4/3', value: '4/3' },
+	// Matches the core preset for a square, which is written as a single
+	// number rather than a ratio.
+	{ label: 'Square', value: '1' },
 	{
 		label: 'Custom',
 		value: 'custom',
@@ -41,6 +44,30 @@ function Example( { initialValue, onChange, ...props } ) {
 	);
 }
 
+// Holds the value like `Example`, but also lets a test update it from the
+// outside, the way `updateBlockAttributes`, undo, or another client would.
+function ExternallyUpdatedExample( { initialValue, onChange, updateRef } ) {
+	const [ value, setValue ] = useState( initialValue );
+	useEffect( () => {
+		updateRef.current = setValue;
+	}, [ updateRef ] );
+	return (
+		<ToolsPanel label="Dimensions" panelId="panel-id" resetAll={ () => {} }>
+			<DimensionsTool
+				panelId="panel-id"
+				onChange={ ( nextValue ) => {
+					setValue( nextValue );
+					onChange( nextValue );
+				} }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
+				value={ value }
+			/>
+		</ToolsPanel>
+	);
+}
+
 function ControlledExample( { value, onChange, ...props } ) {
 	return (
 		<ToolsPanel
@@ -102,6 +129,143 @@ describe( 'DimensionsTool', () => {
 			);
 			expect( aspectRatioSelect ).toHaveValue( 'auto' );
 		} );
+
+		it( 'displays an aspect ratio that is written differently to the option with the same ratio', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '1/1' } }
+					onChange={ onChange }
+				/>
+			);
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( '1' );
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '16 / 9' } }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+		} );
+
+		it( 'displays an aspect ratio without a matching option as custom', () => {
+			const onChange = jest.fn();
+			render(
+				<ControlledExample
+					value={ { aspectRatio: '7/5' } }
+					onChange={ onChange }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'combobox', { name: 'Aspect ratio' } )
+			).toHaveValue( 'custom' );
+		} );
+
+		it( 'updates the scale control when the value prop changes', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '16/9', scale: 'cover' } }
+					onChange={ onChange }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'radio', { name: 'Cover' } )
+			).toBeChecked();
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '16/9', scale: 'contain' } }
+					onChange={ onChange }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'radio', { name: 'Contain' } )
+			).toBeChecked();
+		} );
+	} );
+
+	describe( 'external updates', () => {
+		it( 'restores the scale that was set externally', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const updateRef = { current: null };
+
+			render(
+				<ExternallyUpdatedExample
+					initialValue={ { aspectRatio: '16/9', scale: 'cover' } }
+					onChange={ onChange }
+					updateRef={ updateRef }
+				/>
+			);
+
+			// Update the scale from outside the component.
+			await act( async () =>
+				updateRef.current( { aspectRatio: '16/9', scale: 'contain' } )
+			);
+
+			// Clearing and setting the aspect ratio again restores the scale.
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Aspect ratio' } ),
+				'auto'
+			);
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Aspect ratio' } ),
+				'4/3'
+			);
+
+			expect( onChange ).toHaveBeenLastCalledWith( {
+				aspectRatio: '4/3',
+				scale: 'contain',
+			} );
+		} );
+
+		it( 'restores the aspect ratio that was set externally', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const updateRef = { current: null };
+
+			render(
+				<ExternallyUpdatedExample
+					initialValue={ { aspectRatio: '16/9', scale: 'cover' } }
+					onChange={ onChange }
+					updateRef={ updateRef }
+				/>
+			);
+
+			// Update the aspect ratio from outside the component.
+			await act( async () =>
+				updateRef.current( { aspectRatio: '4/3', scale: 'cover' } )
+			);
+
+			// Setting both a width and a height replaces the aspect ratio with
+			// a custom one, and clearing the width restores the previous one.
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Width' } ),
+				'100'
+			);
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Height' } ),
+				'100'
+			);
+			await user.clear(
+				screen.getByRole( 'spinbutton', { name: 'Width' } )
+			);
+
+			expect( onChange ).toHaveBeenLastCalledWith( {
+				aspectRatio: '4/3',
+				scale: 'cover',
+				height: '100px',
+			} );
+		} );
 	} );
 
 	describe( 'updating aspectRatio', () => {

package/src/components/dimensions-tool/test/utils.js

@@ -0,0 +1,51 @@
+import { findAspectRatioOption, parseAspectRatio } from '../utils';
+
+describe( 'parseAspectRatio', () => {
+	it.each( [
+		[ '1', 1 ],
+		[ '1/1', 1 ],
+		[ '16/9', 16 / 9 ],
+		[ '16 / 9', 16 / 9 ],
+		[ '1.5', 1.5 ],
+		[ '3/2', 1.5 ],
+	] )( 'parses %s', ( value, expected ) => {
+		expect( parseAspectRatio( value ) ).toBe( expected );
+	} );
+
+	it.each( [
+		[ 'auto' ],
+		[ '' ],
+		[ '16/9/2' ],
+		[ '0' ],
+		[ '1/0' ],
+		[ '-16/9' ],
+		[ undefined ],
+		[ null ],
+	] )( 'returns null for %s', ( value ) => {
+		expect( parseAspectRatio( value ) ).toBeNull();
+	} );
+} );
+
+describe( 'findAspectRatioOption', () => {
+	const options = [
+		{ label: 'Original', value: 'auto' },
+		{ label: 'Square', value: '1' },
+		{ label: 'Wide', value: '16/9' },
+	];
+
+	it( 'matches an option by value', () => {
+		expect( findAspectRatioOption( '16/9', options ) ).toBe( options[ 2 ] );
+	} );
+
+	it( 'matches an option describing the same ratio', () => {
+		expect( findAspectRatioOption( '1/1', options ) ).toBe( options[ 1 ] );
+		expect( findAspectRatioOption( '16 / 9', options ) ).toBe(
+			options[ 2 ]
+		);
+	} );
+
+	it( 'returns null when no option describes the ratio', () => {
+		expect( findAspectRatioOption( '7/5', options ) ).toBeNull();
+		expect( findAspectRatioOption( 'nonsense', options ) ).toBeNull();
+	} );
+} );

package/src/components/dimensions-tool/utils.js

@@ -0,0 +1,67 @@
+/**
+ * Parses a CSS `aspect-ratio` value into a number so that values that are
+ * written differently but describe the same ratio, e.g. `1` and `1/1`, can be
+ * compared.
+ *
+ * @param {string} [value] CSS aspect-ratio value, e.g. '16/9' or '1.5'.
+ *
+ * @return {?number} The ratio as a number, or null when it cannot be parsed.
+ */
+export function parseAspectRatio( value ) {
+	if ( typeof value !== 'string' ) {
+		return null;
+	}
+
+	const parts = value.split( '/' );
+
+	if ( parts.length > 2 ) {
+		return null;
+	}
+
+	const [ width, height = '1' ] = parts;
+	const numericWidth = Number( width.trim() );
+	const numericHeight = Number( height.trim() );
+
+	if (
+		! Number.isFinite( numericWidth ) ||
+		! Number.isFinite( numericHeight ) ||
+		numericWidth <= 0 ||
+		numericHeight <= 0
+	) {
+		return null;
+	}
+
+	return numericWidth / numericHeight;
+}
+
+/**
+ * Finds the option that represents the given CSS `aspect-ratio` value.
+ *
+ * Aspect ratio values are free-form CSS, while the options are a fixed list of
+ * presets, so an exact string match isn't enough: `1/1` and `1` describe the
+ * same ratio but only one of them is a preset value.
+ *
+ * @param {string}   value   CSS aspect-ratio value.
+ * @param {Object[]} options Aspect ratio options.
+ *
+ * @return {?Object} The matching option, or null when there is none.
+ */
+export function findAspectRatioOption( value, options ) {
+	const exactMatch = options.find( ( option ) => option.value === value );
+
+	if ( exactMatch ) {
+		return exactMatch;
+	}
+
+	const ratio = parseAspectRatio( value );
+
+	if ( ratio === null ) {
+		return null;
+	}
+
+	return (
+		options.find(
+			( option ) => parseAspectRatio( option.value ) === ratio
+		) ?? null
+	);
+}

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

@@ -18,6 +18,7 @@ function DuotoneControl( {
 	disableCustomColors,
 	disableCustomDuotone,
 	value,
+	selectedSlug,
 	onChange,
 } ) {
 	let toolbarIcon;
@@ -75,6 +76,7 @@ function DuotoneControl( {
 						disableCustomColors={ disableCustomColors }
 						disableCustomDuotone={ disableCustomDuotone }
 						value={ value }
+						selectedSlug={ selectedSlug }
 						onChange={ onChange }
 					/>
 				</MenuGroup>

package/src/components/duotone-control/test/index.js

@@ -0,0 +1,100 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DuotoneControl from '../';
+
+// Adding two custom duotones in Global Styles seeds both from the palette's
+// darkest and lightest colors, so two presets holding the same pair is the
+// ordinary case. Only the slug tells them apart.
+const DUPLICATE_PALETTE = [
+	{
+		name: 'Duotone 1',
+		slug: 'custom-duotone-1',
+		colors: [ '#000000', '#ffffff' ],
+	},
+	{
+		name: 'Duotone 2',
+		slug: 'custom-duotone-2',
+		colors: [ '#000000', '#ffffff' ],
+	},
+];
+
+const COLOR_PALETTE = [
+	{ color: '#000000', name: 'Black', slug: 'black' },
+	{ color: '#ffffff', name: 'White', slug: 'white' },
+];
+
+async function openControl( user ) {
+	await user.click(
+		screen.getByRole( 'button', { name: 'Apply duotone filter' } )
+	);
+}
+
+describe( 'DuotoneControl', () => {
+	it( 'reports the slug of the duplicate that was picked', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<DuotoneControl
+				duotonePalette={ DUPLICATE_PALETTE }
+				colorPalette={ COLOR_PALETTE }
+				value={ undefined }
+				onChange={ onChange }
+			/>
+		);
+		await openControl( user );
+
+		await user.click(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith(
+			[ '#000000', '#ffffff' ],
+			1,
+			'custom-duotone-2'
+		);
+	} );
+
+	it( 'marks only the stored preset as selected when two share colors', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<DuotoneControl
+				duotonePalette={ DUPLICATE_PALETTE }
+				colorPalette={ COLOR_PALETTE }
+				value={ [ '#000000', '#ffffff' ] }
+				selectedSlug="custom-duotone-2"
+				onChange={ jest.fn() }
+			/>
+		);
+		await openControl( user );
+
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 1' } )
+		).toHaveAttribute( 'aria-selected', 'false' );
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'falls back to color matching when no slug is stored', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<DuotoneControl
+				duotonePalette={ DUPLICATE_PALETTE }
+				colorPalette={ COLOR_PALETTE }
+				value={ [ '#000000', '#ffffff' ] }
+				onChange={ jest.fn() }
+			/>
+		);
+		await openControl( user );
+
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 1' } )
+		).toHaveAttribute( 'aria-selected', 'true' );
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+} );

package/src/components/global-styles/advanced-panel.js

@@ -1,4 +1,7 @@
-import { TextareaControl, Notice } from '@wordpress/components';
+import {
+	TextareaControl as WCTextareaControl,
+	Notice,
+} from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -88,7 +91,7 @@ export default function AdvancedPanel( {
 					{ cssError }
 				</Notice>
 			) }
-			<TextareaControl
+			<WCTextareaControl
 				label={ __( 'Additional CSS' ) }
 				value={ customCSS }
 				onChange={ ( newValue ) => handleOnChange( newValue ) }

package/src/components/global-styles/border-panel.js

@@ -98,7 +98,6 @@ export default function BorderPanel( {
 	inheritedValue = value,
 	settings,
 	panelId,
-	name,
 	defaultControls = DEFAULT_CONTROLS,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
@@ -262,14 +261,18 @@ export default function BorderPanel( {
 		inheritedShadow !== undefined &&
 		inheritedShadow !== '';
 	const shadow = isShadowPlaceholder ? inheritedShadow : localShadow;
-	const shadowPresets = settings?.shadow?.presets ?? {};
-	const mergedShadowPresets =
-		shadowPresets.custom ??
-		shadowPresets.theme ??
-		shadowPresets.default ??
-		[];
+	// The presets the popover offers, from every origin. A preset the user
+	// picked has to be stored as a reference to its CSS variable rather than as
+	// the value it resolves to today, otherwise it stops tracking later edits
+	// to the preset. Reading the same list the popover renders is what keeps
+	// the two in step.
+	const shadowPresets = useShadowPresets( settings );
 	const setShadow = ( newValue ) => {
-		const slug = mergedShadowPresets?.find(
+		// The list runs default, theme, custom, so searching backwards picks
+		// the most specific origin when more than one defines the same shadow
+		// value — a newly added custom preset starts out identical to the
+		// `natural` default one, and it is the custom slug the user means.
+		const slug = shadowPresets.findLast(
 			( { shadow: shadowName } ) => shadowName === newValue
 		)?.slug;
 
@@ -369,7 +372,6 @@ export default function BorderPanel( {
 		showBorderRadius;
 
 	const label = useBorderPanelLabel( {
-		blockName: name,
 		hasShadowControl,
 		hasBorderControl,
 	} );

package/src/components/global-styles/color-panel.js

@@ -142,6 +142,7 @@ export default function ColorPanel( {
 	label,
 	children,
 	contrastWarning,
+	additionalElements,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const {
@@ -259,8 +260,19 @@ export default function ColorPanel( {
 				label: __( 'H6' ),
 				showPanel: showHeadingPanel,
 			},
+			...( additionalElements?.map( ( element ) => ( {
+				...element,
+				showPanel: hasSolidColors || hasGradientColors,
+			} ) ) ?? [] ),
 		],
-		[ showCaptionPanel, showButtonPanel, showHeadingPanel ]
+		[
+			additionalElements,
+			hasGradientColors,
+			hasSolidColors,
+			showCaptionPanel,
+			showButtonPanel,
+			showHeadingPanel,
+		]
 	);
 
 	const resetAllFilter = useCallback(

package/src/components/global-styles/dimensions-panel.js

@@ -347,6 +347,7 @@ export default function DimensionsPanel( {
 	// Special case because the layout controls are not part of the dimensions panel
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
+	allowAxialBlockGap = true,
 	styleState = DEFAULT_BLOCK_STYLE_STATE,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
@@ -556,9 +557,19 @@ export default function DimensionsPanel( {
 		? settings?.spacing?.blockGap
 		: settings?.spacing?.blockGap?.sides;
 	const isAxialGap =
-		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+		allowAxialBlockGap &&
+		gapSides &&
+		gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const localGapRaw = decodeValue( value?.spacing?.blockGap );
 	const inheritedGapRaw = decodeValue( inheritedValue?.spacing?.blockGap );
+	const localGapForSingleInput =
+		! isAxialGap && typeof localGapRaw === 'object'
+			? localGapRaw?.top
+			: localGapRaw;
+	const inheritedGapForSingleInput =
+		! isAxialGap && typeof inheritedGapRaw === 'object'
+			? inheritedGapRaw?.top
+			: inheritedGapRaw;
 	// Merge local-then-inherited so SpacingSizesControl's chip slider and
 	// the axial-gap BoxControl reflect the local value when set and fall
 	// back to the inherited value at rest.
@@ -572,8 +583,8 @@ export default function DimensionsPanel( {
 	// at-rest cue for those.
 	const isGapPlaceholder =
 		! hasValue( value?.spacing?.blockGap ) &&
-		typeof inheritedGapRaw === 'string' &&
-		inheritedGapRaw !== '';
+		typeof inheritedGapForSingleInput === 'string' &&
+		inheritedGapForSingleInput !== '';
 	const setGapValue = ( newGapValue ) => {
 		onChange(
 			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )
@@ -993,16 +1004,17 @@ export default function DimensionsPanel( {
 								min={ 0 }
 								onChange={ setGapValue }
 								units={ units }
-								value={ localGapRaw ?? undefined }
+								value={ localGapForSingleInput ?? undefined }
 								placeholder={
 									isGapPlaceholder
-										? inheritedGapRaw
+										? inheritedGapForSingleInput
 										: undefined
 								}
 							/>
 						) ) }
 					{ showSpacingPresetsControl && (
 						<SpacingSizesControl
+							key={ isAxialGap ? 'axial-gap' : 'single-gap' }
 							label={ __( 'Block spacing' ) }
 							min={ 0 }
 							onChange={ setGapValues }

package/src/components/global-styles/filters-panel.js

@@ -17,7 +17,10 @@ import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { reset as resetIcon } from '@wordpress/icons';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
-import { useToolsPanelDropdownMenuProps } from './utils';
+import {
+	useToolsPanelDropdownMenuProps,
+	getDuotoneSlugFromPreset,
+} from './utils';
 import { setImmutably } from '../../utils/object';
 import {
 	getInheritanceProps,
@@ -202,14 +205,24 @@ export default function FiltersPanel( {
 	const localDuotone = decodeValue( value?.filter?.duotone );
 	const inheritedDuotone = decodeValue( inheritedValue?.filter?.duotone );
 	const duotone = localDuotone ?? inheritedDuotone;
+	// Read from the raw value, since decoding resolves a preset reference to
+	// its colors and two presets can hold the same pair.
+	const localDuotoneSlug = getDuotoneSlugFromPreset( value?.filter?.duotone );
+	const inheritedDuotoneSlug = getDuotoneSlugFromPreset(
+		inheritedValue?.filter?.duotone
+	);
+	const duotoneSlug =
+		localDuotone !== undefined ? localDuotoneSlug : inheritedDuotoneSlug;
 	const isDuotonePlaceholder =
 		localDuotone === undefined && inheritedDuotone !== undefined;
-	const setDuotone = ( newValue ) => {
-		const duotonePreset = duotonePalette.find( ( { colors } ) => {
-			return colors === newValue;
-		} );
-		const duotoneValue = duotonePreset
-			? `var:preset|duotone|${ duotonePreset.slug }`
+	const setDuotone = ( newValue, slug ) => {
+		// A slug identifies the picked preset exactly. Falling back to a value
+		// match cannot tell two presets holding the same colors apart.
+		const presetSlug =
+			slug ??
+			duotonePalette.find( ( { colors } ) => colors === newValue )?.slug;
+		const duotoneValue = presetSlug
+			? `var:preset|duotone|${ presetSlug }`
 			: newValue;
 		onChange(
 			setImmutably( value, [ 'filter', 'duotone' ], duotoneValue )
@@ -217,16 +230,16 @@ export default function FiltersPanel( {
 	};
 	// Commit the inherited value when the user clicks the active preset
 	// while the picker is showing inherited duotone at rest.
-	const setDuotoneWithInheritedCommit = ( newValue ) => {
+	const setDuotoneWithInheritedCommit = ( newValue, index, slug ) => {
 		if (
 			newValue === undefined &&
 			isDuotonePlaceholder &&
 			inheritedDuotone !== undefined
 		) {
-			setDuotone( inheritedDuotone );
+			setDuotone( inheritedDuotone, inheritedDuotoneSlug );
 			return;
 		}
-		setDuotone( newValue );
+		setDuotone( newValue, slug );
 	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
@@ -292,6 +305,7 @@ export default function FiltersPanel( {
 										disableCustomColors
 										disableCustomDuotone
 										value={ duotone }
+										selectedSlug={ duotoneSlug }
 										onChange={
 											setDuotoneWithInheritedCommit
 										}