@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.21.0

package/src/components/child-layout-control/index.js

@@ -40,13 +40,14 @@ function helpText( selfStretch, parentLayout ) {
 /**
  * Form to edit the child layout value.
  *
- * @param {Object}   props                  Props.
- * @param {Object}   props.value            The child layout value.
- * @param {Function} props.onChange         Function to update the child layout value.
- * @param {Object}   props.parentLayout     The parent layout value.
+ * @param {Object}   props                      Props.
+ * @param {Object}   props.value                The child layout value.
+ * @param {Function} props.onChange             Function to update the child layout value.
+ * @param {Object}   props.parentLayout         The parent layout value.
  *
- * @param {boolean}  props.isShownByDefault
- * @param {string}   props.panelId
+ * @param {boolean}  props.isShownByDefault     Whether the control is shown by default.
+ * @param {string}   props.panelId              The panel ID.
+ * @param {boolean}  props.showGridSpanDefaults Whether unset grid span controls should show default values.
  * @return {Element} child layout edit element.
  */
 export default function ChildLayoutControl( {
@@ -55,6 +56,7 @@ export default function ChildLayoutControl( {
 	parentLayout,
 	isShownByDefault,
 	panelId,
+	showGridSpanDefaults = true,
 } ) {
 	const {
 		type: parentType,
@@ -80,6 +82,7 @@ export default function ChildLayoutControl( {
 				parentLayout={ parentLayout }
 				isShownByDefault={ isShownByDefault }
 				panelId={ panelId }
+				showGridSpanDefaults={ showGridSpanDefaults }
 			/>
 		);
 	}
@@ -206,6 +209,7 @@ function GridControls( {
 	parentLayout,
 	isShownByDefault,
 	panelId,
+	showGridSpanDefaults,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
 	const { columnCount, rowCount } = parentLayout ?? {};
@@ -243,6 +247,9 @@ function GridControls( {
 		window.__experimentalEnableGridInteractivity && rowCount
 			? rowCount - ( rowStart ?? 1 ) + 1
 			: undefined;
+	const columnSpanValue =
+		columnSpan ?? ( showGridSpanDefaults ? 1 : undefined );
+	const rowSpanValue = rowSpan ?? ( showGridSpanDefaults ? 1 : undefined );
 
 	return (
 		<>
@@ -274,7 +281,7 @@ function GridControls( {
 								columnSpan: constrainedValue,
 							} );
 						} }
-						value={ columnSpan ?? 1 }
+						value={ columnSpanValue }
 						min={ 1 }
 						max={ maxColumnSpan }
 					/>
@@ -298,7 +305,7 @@ function GridControls( {
 								rowSpan: constrainedValue,
 							} );
 						} }
-						value={ rowSpan ?? 1 }
+						value={ rowSpanValue }
 						min={ 1 }
 						max={ maxRowSpan }
 					/>

package/src/components/child-layout-control/test/index.js

@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ChildLayoutControl from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () =>
+	jest.fn( ( mapSelect ) => {
+		if ( typeof mapSelect === 'function' ) {
+			return mapSelect( () => ( {
+				getBlockRootClientId: () => 'root-client-id',
+			} ) );
+		}
+
+		return {
+			getBlockAttributes: () => ( {} ),
+			getBlockOrder: () => [],
+		};
+	} )
+);
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: () => ( {
+		__unstableMarkNextChangeAsNotPersistent: jest.fn(),
+		moveBlocksToPosition: jest.fn(),
+	} ),
+} ) );
+
+describe( 'ChildLayoutControl', () => {
+	const baseProps = {
+		onChange: jest.fn(),
+		parentLayout: {
+			type: 'grid',
+		},
+		isShownByDefault: true,
+		panelId: 'client-id',
+	};
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	function renderControl( props ) {
+		return render(
+			<ToolsPanel
+				label="Dimensions"
+				resetAll={ jest.fn() }
+				panelId="client-id"
+			>
+				<ChildLayoutControl { ...baseProps } { ...props } />
+			</ToolsPanel>
+		);
+	}
+
+	it( 'shows default grid span values for unset span controls by default', () => {
+		renderControl( { value: {} } );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } )
+		).toHaveValue( 1 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Row span' } )
+		).toHaveValue( 1 );
+	} );
+
+	it( 'shows empty grid span values when defaults are hidden', () => {
+		renderControl( { value: {}, showGridSpanDefaults: false } );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } )
+		).toHaveValue( null );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Row span' } )
+		).toHaveValue( null );
+	} );
+
+	it( 'shows explicitly set grid span values when defaults are hidden', () => {
+		renderControl( {
+			value: {
+				columnSpan: 1,
+				rowSpan: 2,
+			},
+			showGridSpanDefaults: false,
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } )
+		).toHaveValue( 1 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Row span' } )
+		).toHaveValue( 2 );
+	} );
+
+	it( 'sets a numeric span when entering 1 into an empty span control', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		renderControl( {
+			value: {},
+			onChange,
+			showGridSpanDefaults: false,
+		} );
+
+		await user.type(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } ),
+			'1'
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			columnStart: undefined,
+			rowStart: undefined,
+			rowSpan: undefined,
+			columnSpan: 1,
+		} );
+	} );
+} );

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

@@ -42,6 +42,7 @@ function ColorGradientControlInner( {
 	onColorChange,
 	onGradientChange,
 	colorValue,
+	colorSlug,
 	gradientValue,
 	clearable,
 	showTitle = true,
@@ -59,18 +60,19 @@ function ColorGradientControlInner( {
 		return null;
 	}
 
+	const colorPaletteOnChange = canChooseAGradient
+		? ( newColor, _index, newSlug ) => {
+				onColorChange( newColor, newSlug );
+				onGradientChange();
+		  }
+		: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );
+
 	const tabPanels = {
 		[ TAB_IDS.color ]: (
 			<ColorPalette
 				value={ colorValue }
-				onChange={
-					canChooseAGradient
-						? ( newColor ) => {
-								onColorChange( newColor );
-								onGradientChange();
-						  }
-						: onColorChange
-				}
+				selectedSlug={ colorSlug }
+				onChange={ colorPaletteOnChange }
 				{ ...{ colors, disableCustomColors } }
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { screen } from '@testing-library/react';
-import { render } from '@ariakit/test/react';
+import { click, render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -131,4 +131,101 @@ describe( 'ColorPaletteControl', () => {
 			'components-custom-gradient-picker__control-point-button'
 		);
 	} );
+
+	describe( 'slug-based color selection', () => {
+		// Two entries that share the same hex value — used to verify that slug
+		// disambiguation works correctly.
+		const DUPLICATE_COLOR_PALETTE = [
+			{
+				color: '#000',
+				name: 'Dark Background',
+				slug: 'dark-background',
+			},
+			{ color: '#000', name: 'Dark Text', slug: 'dark-text' },
+		];
+
+		it( 'forwards colorSlug as selectedSlug to ColorPalette, marking only the slug-matched swatch as selected', async () => {
+			await render(
+				<ColorGradientControl
+					label="Test Color Gradient"
+					colorValue="#000"
+					colorSlug="dark-text"
+					colors={ DUPLICATE_COLOR_PALETTE }
+					gradients={ [] }
+					disableCustomColors={ false }
+					disableCustomGradients
+					onColorChange={ noop }
+					onGradientChange={ noop }
+				/>
+			);
+
+			const options = screen.getAllByRole( 'option' );
+			// 'dark-background' is index 0, 'dark-text' is index 1.
+			// With colorSlug="dark-text", only the second swatch should be selected.
+			expect( options[ 0 ] ).toHaveAttribute( 'aria-selected', 'false' );
+			expect( options[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
+		} );
+
+		it( 'calls onColorChange with (color, slug) when a swatch is clicked (color-only palette)', async () => {
+			const onColorChange = jest.fn();
+
+			await render(
+				<ColorGradientControl
+					label="Test Color Gradient"
+					colorValue={ undefined }
+					colors={ DUPLICATE_COLOR_PALETTE }
+					gradients={ [] }
+					disableCustomColors={ false }
+					disableCustomGradients
+					onColorChange={ onColorChange }
+					onGradientChange={ noop }
+				/>
+			);
+
+			const options = screen.getAllByRole( 'option' );
+			// Click the second swatch: color='#000', slug='dark-text'.
+			await click( options[ 1 ] );
+
+			expect( onColorChange ).toHaveBeenCalledWith( '#000', 'dark-text' );
+		} );
+
+		it( 'calls onColorChange with (color, slug) and calls onGradientChange() when both colors and gradients are available', async () => {
+			const onColorChange = jest.fn();
+			const onGradientChange = jest.fn();
+
+			await render(
+				<ColorGradientControl
+					label="Test Color Gradient"
+					colorValue={ undefined }
+					colors={ DUPLICATE_COLOR_PALETTE }
+					gradients={ [
+						{
+							gradient:
+								'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+							name: 'Vivid cyan blue to vivid purple',
+							slug: 'vivid-cyan-blue-to-vivid-purple',
+						},
+					] }
+					disableCustomColors={ false }
+					disableCustomGradients={ false }
+					onColorChange={ onColorChange }
+					onGradientChange={ onGradientChange }
+				/>
+			);
+
+			// When both colors and gradients are available the color tab is shown
+			// by default (no gradientValue). Click the first color swatch.
+			const options = screen.getAllByRole( 'option' );
+			await click( options[ 0 ] );
+
+			// First entry: color='#000', slug='dark-background'.
+			expect( onColorChange ).toHaveBeenCalledWith(
+				'#000',
+				'dark-background'
+			);
+			// Selecting a color must also clear the active gradient.
+			expect( onGradientChange ).toHaveBeenCalledTimes( 1 );
+			expect( onGradientChange ).toHaveBeenCalledWith();
+		} );
+	} );
 } );

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

@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	TextareaControl,
-	Notice,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { TextareaControl, Notice } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -29,6 +26,41 @@ export function validateCSS( css ) {
 	return true;
 }
 
+/**
+ * Returns the error message string if the CSS contains HTML markup, or null if it is clean.
+ *
+ * @param {string} css The CSS string to check.
+ * @return {string|null} An error message, or null if the CSS is valid.
+ */
+function getMarkupValidationError( css ) {
+	return validateCSS( css )
+		? null
+		: __( 'The custom CSS is invalid. Do not use <> markup.' );
+}
+
+/**
+ * Full CSS validation: markup check first (fast), then a CSS parser (slower).
+ *
+ * @param {string} css The CSS string to validate.
+ * @return {string|null} An error message, or null if the CSS is valid.
+ */
+function getCSSValidationError( css ) {
+	if ( ! css ) {
+		return null;
+	}
+	const markupError = getMarkupValidationError( css );
+	if ( markupError ) {
+		return markupError;
+	}
+	const [ transformed ] = transformStyles(
+		[ { css } ],
+		'.for-validation-only'
+	);
+	return transformed === null
+		? __( 'There is an error with your CSS structure.' )
+		: null;
+}
+
 export default function AdvancedPanel( {
 	value,
 	onChange,
@@ -36,51 +68,24 @@ export default function AdvancedPanel( {
 	help,
 } ) {
 	// Custom CSS
-	const [ cssError, setCSSError ] = useState( null );
 	const customCSS = inheritedValue?.css;
+	const [ cssError, setCSSError ] = useState( () =>
+		getCSSValidationError( customCSS )
+	);
 	function handleOnChange( newValue ) {
 		onChange( {
 			...value,
 			css: newValue,
 		} );
 
-		// Validate immediately on change for quick feedback.
-		if ( ! validateCSS( newValue ) ) {
-			setCSSError(
-				__( 'The custom CSS is invalid. Do not use <> markup.' )
-			);
-			return;
-		}
-
-		// Clear HTML markup error if CSS is now valid.
-		if ( cssError ) {
-			setCSSError( null );
-		}
+		setCSSError( getMarkupValidationError( newValue ) );
 	}
 	function handleOnBlur( event ) {
-		const cssValue = event?.target?.value;
-
-		if ( ! cssValue || ! validateCSS( cssValue ) ) {
-			return;
-		}
-
-		// Check if the value is valid CSS structure on blur (more expensive check).
-		// Pass a wrapping selector to ensure that `transformStyles` validates the CSS.
-		// Note that the wrapping selector here is not used in the actual output of any styles.
-		const [ transformed ] = transformStyles(
-			[ { css: cssValue } ],
-			'.for-validation-only'
-		);
-
-		setCSSError(
-			transformed === null
-				? __( 'There is an error with your CSS structure.' )
-				: null
-		);
+		setCSSError( getCSSValidationError( event?.target?.value ) );
 	}
 
 	return (
-		<VStack spacing={ 3 }>
+		<Stack direction="column" gap="md">
 			{ cssError && (
 				<Notice status="error" onRemove={ () => setCSSError( null ) }>
 					{ cssError }
@@ -95,6 +100,6 @@ export default function AdvancedPanel( {
 				spellCheck={ false }
 				help={ help }
 			/>
-		</VStack>
+		</Stack>
 	);
 }