@wordpress/block-editor 16.1.0 → 17.0.0

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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import BorderPanel from '../border-panel';
 
 // The inheritance treatment sits behind the
@@ -439,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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, renderHook, screen } from '@testing-library/react';
 import { click, render as renderAriakit } from '@ariakit/test/react';
-
-/**
- * Internal dependencies
- */
 import ColorPanel, {
 	useHasColorPanel,
 	useHasTextPanel,
@@ -265,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

@@ -1,13 +1,6 @@
 /* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectLocalOverride", "expectPlaceholderState"] }] */
-/**
- * External dependencies
- */
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import DimensionsPanel from '../dimensions-panel';
 
 // The inheritance treatment sits behind the
@@ -97,6 +90,14 @@ const baseSettings = {
 	},
 };
 
+const settingsWithAxialGap = {
+	...baseSettings,
+	spacing: {
+		...baseSettings.spacing,
+		blockGap: [ 'horizontal', 'vertical' ],
+	},
+};
+
 const settingsWithDimensions = {
 	...baseSettings,
 	dimensions: {
@@ -287,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: {
@@ -302,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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import FiltersPanel from '../filters-panel';
 
 // The inheritance treatment sits behind the
@@ -192,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/inherited-value-context-core.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { renderHook } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { useResolvedStyle } from '../inherited-value-context';
 import { globalStylesDataKey } from '../../../store/private-keys';
 

package/src/components/global-styles/test/inherited-value-context.js

@@ -1,19 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { useResolvedStyle } from '../inherited-value-context';
 import { BlockContextProvider } from '../../block-context';
-
 import { globalStylesDataKey } from '../../../store/private-keys';
 
 // The inheritance treatment sits behind the

package/src/components/global-styles/test/state-control-badges.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import StateControlBadges from '../state-control-badges';
 
 jest.mock( '@wordpress/ui', () => {

package/src/components/global-styles/test/typography-panel-core.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import { click, render as renderAriakit } from '@ariakit/test/react';
-
-/**
- * Internal dependencies
- */
 import TypographyPanel from '../typography-panel';
 
 // Coverage for `TypographyPanel` with the `gutenberg-global-styles-inheritance-ui`

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

@@ -1,13 +1,6 @@
-/**
- * External dependencies
- */
 import { act, render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { click, render as renderAriakit } from '@ariakit/test/react';
-
-/**
- * Internal dependencies
- */
 import TypographyPanel, { useHasTypographyPanel } from '../typography-panel';
 
 // The inheritance treatment sits behind the

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestFontWeight,

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/typography-panel.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	FontSizePicker,
 	__experimentalNumberControl as NumberControl,
@@ -11,10 +8,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 /**