@wordpress/block-editor 16.2.0 → 17.0.0

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

@@ -25,13 +25,27 @@ const EMPTY_ARRAY = [];
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const shadows = useShadowPresets( settings );
+	const presets = useMemo( () => {
+		if ( ! shadows.length ) {
+			return shadows;
+		}
+		// The entry that clears the shadow is a display-only affordance with no
+		// counterpart in `theme.json`. It is added here rather than in
+		// `useShadowPresets` so that callers mapping a value back to a preset
+		// never mistake it for one and persist a reference to a CSS variable
+		// that is never output.
+		return [
+			{ name: __( 'Unset' ), slug: 'unset', shadow: 'none' },
+			...shadows,
+		];
+	}, [ shadows ] );
 
 	return (
 		<div className="block-editor-global-styles__shadow-popover-container">
 			<VStack spacing={ 4 }>
 				<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
 				<ShadowPresets
-					presets={ shadows }
+					presets={ presets }
 					activeShadow={ shadow }
 					onSelect={ onShadowChange }
 				/>
@@ -209,6 +223,18 @@ function renderShadowToggle( shadow, onShadowChange, resetConfig ) {
 	};
 }
 
+/**
+ * Returns the available shadow presets, from every origin, in the order they
+ * are presented to the user.
+ *
+ * This is the single source of truth for which presets exist: it backs both the
+ * popover's preset list and the mapping of a chosen shadow back to the preset
+ * it came from, so what is shown and what is stored cannot drift apart.
+ *
+ * @param {Object} settings Theme.json settings for the current context.
+ *
+ * @return {Array} The shadow presets.
+ */
 export function useShadowPresets( settings ) {
 	return useMemo( () => {
 		if ( ! settings?.shadow ) {
@@ -221,21 +247,22 @@ export function useShadowPresets( settings ) {
 			theme: themeShadows,
 			custom: customShadows,
 		} = settings?.shadow?.presets ?? {};
-		const unsetShadow = {
-			name: __( 'Unset' ),
-			slug: 'unset',
-			shadow: 'none',
-		};
 
-		const shadowPresets = [
+		const allPresets = [
 			...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ),
 			...( themeShadows || EMPTY_ARRAY ),
 			...( customShadows || EMPTY_ARRAY ),
 		];
-		if ( shadowPresets.length ) {
-			shadowPresets.unshift( unsetShadow );
-		}
 
-		return shadowPresets;
+		// More than one origin can define the same slug, but only the most
+		// specific definition is output as a CSS variable. Keeping the ones it
+		// overrides would offer swatches that apply a different shadow than
+		// the one they show.
+		return allPresets.filter(
+			( preset, index ) =>
+				allPresets.findLastIndex(
+					( { slug } ) => slug === preset.slug
+				) === index
+		);
 	}, [ settings ] );
 }

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

@@ -432,3 +432,233 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 	} );
 } );
+
+describe( 'BorderPanel — shadow preset persistence', () => {
+	const selectShadowPreset = async ( user, name ) => {
+		await user.click(
+			screen.getByRole( 'button', { name: 'Drop shadow' } )
+		);
+		await user.click( screen.getByRole( 'option', { name } ) );
+	};
+
+	const shadowSettings = ( presets, defaultPresets = true ) => ( {
+		shadow: { defaultPresets, presets },
+	} );
+
+	const defaultPreset = {
+		name: 'Natural',
+		slug: 'natural',
+		shadow: '6px 6px 9px rgba(0, 0, 0, 0.2)',
+	};
+	const themePreset = {
+		name: 'Outlined',
+		slug: 'outlined',
+		shadow: '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+	};
+	const customPreset = {
+		name: 'My shadow',
+		slug: 'my-shadow',
+		shadow: '0 0 10px rgba(255, 0, 0, 1)',
+	};
+
+	it( 'persists a theme preset as a preset reference when custom presets also exist', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings( {
+					default: [ defaultPreset ],
+					theme: [ themePreset ],
+					custom: [ customPreset ],
+				} ) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await selectShadowPreset( user, 'Outlined' );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			shadow: 'var:preset|shadow|outlined',
+		} );
+	} );
+
+	it( 'persists a default preset as a preset reference when custom presets also exist', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings( {
+					default: [ defaultPreset ],
+					theme: [ themePreset ],
+					custom: [ customPreset ],
+				} ) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await selectShadowPreset( user, 'Natural' );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			shadow: 'var:preset|shadow|natural',
+		} );
+	} );
+
+	it( 'persists a custom preset as a preset reference', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings( {
+					default: [ defaultPreset ],
+					theme: [ themePreset ],
+					custom: [ customPreset ],
+				} ) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await selectShadowPreset( user, 'My shadow' );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			shadow: 'var:preset|shadow|my-shadow',
+		} );
+	} );
+
+	it( 'persists the unset entry as a literal value, not a preset reference', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings( {
+					theme: [ themePreset ],
+					custom: [ customPreset ],
+				} ) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await selectShadowPreset( user, 'Unset' );
+
+		expect( onChange ).toHaveBeenCalledWith( { shadow: 'none' } );
+	} );
+
+	it( 'does not reference default presets the theme has opted out of', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings(
+					{
+						// Same shadow value as the theme preset below, so the
+						// lookup has to skip it rather than match it first.
+						default: [
+							{ ...defaultPreset, shadow: themePreset.shadow },
+						],
+						theme: [ themePreset ],
+					},
+					false
+				) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await selectShadowPreset( user, 'Outlined' );
+
+		// The opted-out preset is not offered, so it is not something the
+		// user can have meant.
+		expect(
+			screen.queryByRole( 'option', { name: 'Natural' } )
+		).not.toBeInTheDocument();
+		expect( onChange ).toHaveBeenCalledWith( {
+			shadow: 'var:preset|shadow|outlined',
+		} );
+	} );
+
+	it( 'offers only the most specific preset when a slug is defined twice', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		// Custom preset slugs are generated as `shadow-<n>` from the custom
+		// presets alone, so they can collide with a theme preset's slug.
+		const themeShadowOne = {
+			name: 'Theme shadow',
+			slug: 'shadow-1',
+			shadow: '0 0 10px rgba(0, 0, 255, 1)',
+		};
+		const customShadowOne = {
+			name: 'Shadow 1',
+			slug: 'shadow-1',
+			shadow: '0 0 10px rgba(255, 0, 0, 1)',
+		};
+
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings( {
+					theme: [ themeShadowOne ],
+					custom: [ customShadowOne ],
+				} ) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Drop shadow' } )
+		);
+
+		// `--wp--preset--shadow--shadow-1` holds the custom preset's value, so
+		// offering the theme one would show a shadow it cannot apply.
+		expect(
+			screen.queryByRole( 'option', { name: 'Theme shadow' } )
+		).not.toBeInTheDocument();
+
+		await user.click( screen.getByRole( 'option', { name: 'Shadow 1' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			shadow: 'var:preset|shadow|shadow-1',
+		} );
+	} );
+
+	it( 'references the most specific origin when two presets share a value', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		// A custom preset starts out with the same value as the `natural`
+		// default one, so this is the state right after adding one.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowSettings( {
+					default: [ defaultPreset ],
+					custom: [
+						{ ...customPreset, shadow: defaultPreset.shadow },
+					],
+				} ) }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		await selectShadowPreset( user, 'My shadow' );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			shadow: 'var:preset|shadow|my-shadow',
+		} );
+	} );
+} );

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

@@ -258,6 +258,30 @@ describe( 'ColorPanel — duplicate-hex preset slug identity', () => {
 	} );
 } );
 
+describe( 'ColorPanel — additional elements', () => {
+	it( 'renders additional element color controls', () => {
+		render(
+			<ColorPanel
+				value={ {} }
+				settings={ settingsWithColors( {
+					text: true,
+					background: true,
+				} ) }
+				onChange={ () => {} }
+				panelId="test-panel"
+				additionalElements={ [
+					{ name: 'textInput', label: 'Inputs' },
+				] }
+				defaultControls={ { textInput: true } }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: /^Inputs/ } )
+		).toBeVisible();
+	} );
+} );
+
 describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 	describe( 'Link color', () => {
 		it( 'exposes an accessible reset when local link.text overrides the inherited value', () => {

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

@@ -90,6 +90,14 @@ const baseSettings = {
 	},
 };
 
+const settingsWithAxialGap = {
+	...baseSettings,
+	spacing: {
+		...baseSettings.spacing,
+		blockGap: [ 'horizontal', 'vertical' ],
+	},
+};
+
 const settingsWithDimensions = {
 	...baseSettings,
 	dimensions: {
@@ -280,12 +288,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 			expect( gapInput ).toHaveAttribute( 'placeholder', '1.5rem' );
 		} );
 
-		it( 'renders no placeholder for blockGap when the inherited value is the compound axial shape (single-input path can only display strings)', () => {
-			// When blockGap is an object (axial split), the panel still
-			// renders the single-input UnitControl path because the
-			// settings here do not enable axial gap sides. The placeholder
-			// must NOT surface a non-string value into a control that
-			// cannot display it.
+		it( 'renders the vertical blockGap as a placeholder when the inherited value has an axial shape', () => {
 			renderPanel( {
 				value: {},
 				inheritedValue: {
@@ -295,7 +298,95 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 			} );
 
 			const gapInput = screen.getByLabelText( /block spacing/i );
-			expect( gapInput ).not.toHaveAttribute( 'placeholder' );
+			expect( gapInput ).toHaveAttribute( 'placeholder', '1rem' );
+		} );
+
+		it( 'renders the vertical blockGap when a local axial value is shown in a single input', () => {
+			renderPanel( {
+				value: {
+					spacing: { blockGap: { top: '1rem', left: '0.5rem' } },
+				},
+				settings: baseSettings,
+			} );
+
+			const gapInput = screen.getByLabelText( /block spacing/i );
+			expect( gapInput ).toHaveValue( 1 );
+		} );
+	} );
+
+	describe( 'block spacing (axial gap path)', () => {
+		it( 'renders separate horizontal and vertical controls when axial block gap is allowed', async () => {
+			const user = userEvent.setup();
+			renderPanel( {
+				value: {},
+				settings: settingsWithAxialGap,
+			} );
+
+			const blockSpacingControl = screen.getByRole( 'group', {
+				name: 'Block spacing',
+			} );
+			await user.click(
+				within( blockSpacingControl ).getByRole( 'button', {
+					name: 'Unlink sides',
+				} )
+			);
+
+			expect(
+				within( blockSpacingControl ).getByRole( 'textbox', {
+					name: 'Top and bottom sides',
+				} )
+			).toBeInTheDocument();
+			expect(
+				within( blockSpacingControl ).getByRole( 'textbox', {
+					name: 'Left and right sides',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'renders a single control when axial block gap is not allowed', () => {
+			renderPanel( {
+				value: {},
+				settings: settingsWithAxialGap,
+				allowAxialBlockGap: false,
+			} );
+
+			expect(
+				screen.getByLabelText( /block spacing/i )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'group', { name: 'Block spacing' } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'keeps the block spacing control visible when axial support changes', () => {
+			const settings = {
+				...settingsWithSpacingPresets,
+				spacing: {
+					...settingsWithSpacingPresets.spacing,
+					blockGap: [ 'horizontal', 'vertical' ],
+				},
+			};
+			const props = {
+				value: {},
+				settings,
+				onChange: () => {},
+				panelId: 'test-panel',
+			};
+			const { rerender } = render(
+				<DimensionsPanel { ...props } allowAxialBlockGap />
+			);
+
+			expect(
+				screen.getAllByRole( 'slider', { name: /block spacing/i } )
+			).toHaveLength( 2 );
+
+			rerender(
+				<DimensionsPanel { ...props } allowAxialBlockGap={ false } />
+			);
+
+			expect(
+				screen.getAllByRole( 'slider', { name: /block spacing/i } )
+			).toHaveLength( 1 );
 		} );
 	} );
 

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

@@ -185,3 +185,87 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 		expect( onChange ).not.toHaveBeenCalled();
 	} );
 } );
+
+// Adding two custom duotones in Global Styles seeds both from the palette's
+// darkest and lightest colors, so duplicates are the ordinary case. Only the
+// slug tells them apart.
+const duplicateSettings = {
+	color: {
+		customDuotone: true,
+		defaultDuotone: true,
+		duotone: {
+			custom: [
+				{
+					name: 'Duotone 1',
+					slug: 'custom-duotone-1',
+					colors: [ '#000000', '#ffffff' ],
+				},
+				{
+					name: 'Duotone 2',
+					slug: 'custom-duotone-2',
+					colors: [ '#000000', '#ffffff' ],
+				},
+			],
+		},
+		palette: {
+			default: [
+				{ name: 'Black', slug: 'black', color: '#000000' },
+				{ name: 'White', slug: 'white', color: '#ffffff' },
+			],
+		},
+	},
+};
+
+async function openDuotone( user ) {
+	await user.click( screen.getByRole( 'button', { name: /duotone/i } ) );
+}
+
+describe( 'FiltersPanel — duplicate duotone presets', () => {
+	it( 'marks only the stored preset as selected', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<FiltersPanel
+				value={ {
+					filter: { duotone: 'var:preset|duotone|custom-duotone-2' },
+				} }
+				inheritedValue={ {} }
+				settings={ duplicateSettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+		await openDuotone( 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( 'saves the slug of the preset that was picked', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<FiltersPanel
+				value={ {} }
+				inheritedValue={ {} }
+				settings={ duplicateSettings }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+		await openDuotone( user );
+
+		await user.click(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			filter: { duotone: 'var:preset|duotone|custom-duotone-2' },
+		} );
+	} );
+} );

package/src/components/global-styles/test/utils.js

@@ -0,0 +1,30 @@
+import { getDuotoneSlugFromPreset } from '../utils';
+
+describe( 'global styles utils', () => {
+	describe( 'getDuotoneSlugFromPreset', () => {
+		it( 'should return the slug of a preset reference', () => {
+			expect(
+				getDuotoneSlugFromPreset( 'var:preset|duotone|grayscale' )
+			).toBe( 'grayscale' );
+		} );
+
+		it( 'should return the slug of a custom preset', () => {
+			expect(
+				getDuotoneSlugFromPreset(
+					'var:preset|duotone|custom-duotone-2'
+				)
+			).toBe( 'custom-duotone-2' );
+		} );
+
+		it( 'should return undefined for custom colors', () => {
+			expect(
+				getDuotoneSlugFromPreset( [ '#000000', '#ffffff' ] )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined for unset and for no value', () => {
+			expect( getDuotoneSlugFromPreset( 'unset' ) ).toBeUndefined();
+			expect( getDuotoneSlugFromPreset( undefined ) ).toBeUndefined();
+		} );
+	} );
+} );

package/src/components/global-styles/utils.js

@@ -47,3 +47,26 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
+
+/**
+ * Reads the preset slug out of a duotone style value.
+ *
+ * Two presets can hold the same pair of colors, so the slug is the only thing
+ * that identifies which one is applied. The colors alone do not.
+ *
+ * Lives here rather than beside its siblings in `hooks/duotone` because that
+ * module imports the filters panel, so the panel cannot import back from it.
+ *
+ * @param {string|string[]|undefined} duotone A duotone style value.
+ *
+ * @return {string|undefined} The preset slug, if the value references one.
+ */
+export function getDuotoneSlugFromPreset( duotone ) {
+	if ( typeof duotone !== 'string' ) {
+		return undefined;
+	}
+
+	const [ , slug ] = duotone.match( /^var:preset\|duotone\|(.+)$/ ) ?? [];
+
+	return slug;
+}

package/src/components/inner-blocks/index.js

@@ -94,7 +94,11 @@ function UncontrolledInnerBlocks( props ) {
 		EMPTY_OBJECT;
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
-	const usedLayout = layout || defaultLayoutBlockSupport;
+	// The support is a config object, e.g. `{ allowSwitching: false, default: { type: 'flex' } }`,
+	// so the layout itself lives under `default`. Passing the config through would leave the
+	// context without a `type`, and consumers would resolve it to the flow layout.
+	const usedLayout =
+		layout || defaultLayoutBlockSupport.default || EMPTY_OBJECT;
 
 	const memoedLayout = useMemo(
 		() => ( {
@@ -174,12 +178,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		__unstableDisableLayoutClassNames,
 		__unstableDisableDropZone,
 		dropZoneElement,
+		layout: layoutOverride,
 	} = options;
 	const {
 		clientId,
-		layout = null,
+		layout: contextLayout = null,
 		__unstableLayoutClassNames: layoutClassNames = '',
 	} = useBlockEditContext();
+	// An options layout takes precedence over the context layout, as it does
+	// for the inner blocks settings, so containers whose layout attribute
+	// doesn't apply to their inner blocks (e.g. Post Template) can opt out.
+	const layout = layoutOverride ?? contextLayout;
 	const selected = useSelect(
 		( select ) => {
 			const {