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

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>
 	);
 }

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

@@ -19,7 +19,7 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useCallback, useRef } from '@wordpress/element';
+import { useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
 import { reset as resetIcon } from '@wordpress/icons';
@@ -31,6 +31,7 @@ import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
+import { extractPresetSlug } from '../../utils/color-values';
 import { unlock } from '../../lock-unlock';
 
 export function useHasColorPanel( settings ) {
@@ -144,6 +145,29 @@ export function ColorToolsPanel( {
 	);
 }
 
+/**
+ * Encodes a color value for storage in the style object.
+ *
+ * When a `slug` is provided it is used directly (slug-based selection path).
+ * Otherwise the function falls back to looking up the hex value in the
+ * palette; if found it encodes the slug, otherwise it stores the raw hex.
+ *
+ * Extracted to module scope so it is not re-created on every render.
+ * Callers pass the flattened palette (`allColors`), computed once in `ColorPanel` from the per-origin `colors` array.
+ *
+ * @param {Array}       allColors  Flat array of `{ color, slug }` objects.
+ * @param {string|void} colorValue Hex or CSS color string.
+ * @param {string|void} slug       Optional palette slug from slug-aware selection.
+ * @return {string|void} Encoded value suitable for the style object.
+ */
+function encodeColorValueWithPalette( allColors, colorValue, slug ) {
+	if ( slug ) {
+		return 'var:preset|color|' + slug;
+	}
+	const colorObject = allColors.find( ( { color } ) => color === colorValue );
+	return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
+}
+
 const DEFAULT_CONTROLS = {
 	text: true,
 	background: true,
@@ -179,6 +203,7 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
 function ColorPanelTab( {
 	isGradient,
 	inheritedValue,
+	inheritedSlug,
 	userValue,
 	setValue,
 	colorGradientControlSettings,
@@ -190,6 +215,7 @@ function ColorPanelTab( {
 			enableAlpha
 			__experimentalIsRenderedInSidebar
 			colorValue={ isGradient ? undefined : inheritedValue }
+			colorSlug={ isGradient ? undefined : inheritedSlug }
 			gradientValue={ isGradient ? inheritedValue : undefined }
 			onColorChange={ isGradient ? undefined : setValue }
 			onGradientChange={ isGradient ? setValue : undefined }
@@ -341,19 +367,15 @@ export default function ColorPanel( {
 	const hasBackgroundGradientSupport = !! settings?.background?.gradient;
 	const showGradientColors =
 		hasGradientColors && ! hasBackgroundGradientSupport;
+
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
-	const encodeColorValue = ( colorValue ) => {
-		const allColors = colors.flatMap(
-			( { colors: originColors } ) => originColors
-		);
-		const colorObject = allColors.find(
-			( { color } ) => color === colorValue
-		);
-		return colorObject
-			? 'var:preset|color|' + colorObject.slug
-			: colorValue;
-	};
+
+	const allColors = useMemo(
+		() => colors.flatMap( ( { colors: originColors } ) => originColors ),
+		[ colors ]
+	);
+
 	const encodeGradientValue = ( gradientValue ) => {
 		const allGradients = gradients.flatMap(
 			( { gradients: originGradients } ) => originGradients
@@ -375,11 +397,11 @@ export default function ColorPanel( {
 	const hasBackground = () =>
 		!! userBackgroundColor ||
 		( ! hasBackgroundGradientSupport && !! userGradient );
-	const setBackgroundColor = ( newColor ) => {
+	const setBackgroundColor = ( newColor, newSlug ) => {
 		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
-			encodeColorValue( newColor )
+			encodeColorValueWithPalette( allColors, newColor, newSlug )
 		);
 		if ( ! hasBackgroundGradientSupport ) {
 			newValue.color.gradient = undefined;
@@ -413,12 +435,12 @@ export default function ColorPanel( {
 		inheritedValue?.elements?.link?.color?.text
 	);
 	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
-	const setLinkColor = ( newColor ) => {
+	const setLinkColor = ( newColor, newSlug ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'elements', 'link', 'color', 'text' ],
-				encodeColorValue( newColor )
+				encodeColorValueWithPalette( allColors, newColor, newSlug )
 			)
 		);
 	};
@@ -428,12 +450,12 @@ export default function ColorPanel( {
 	const userHoverLinkColor = decodeValue(
 		value?.elements?.link?.[ ':hover' ]?.color?.text
 	);
-	const setHoverLinkColor = ( newColor ) => {
+	const setHoverLinkColor = ( newColor, newSlug ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'elements', 'link', ':hover', 'color', 'text' ],
-				encodeColorValue( newColor )
+				encodeColorValueWithPalette( allColors, newColor, newSlug )
 			)
 		);
 	};
@@ -454,20 +476,40 @@ export default function ColorPanel( {
 
 	// Text Color
 	const showTextPanel = useHasTextPanel( settings );
+	const showCaptionPanel = useHasCaptionPanel( settings );
+	const showButtonPanel = useHasButtonPanel( settings );
+	const showHeadingPanel = useHasHeadingPanel( settings );
 	const textColor = decodeValue( inheritedValue?.color?.text );
 	const userTextColor = decodeValue( value?.color?.text );
 	const hasTextColor = () => !! userTextColor;
-	const setTextColor = ( newColor ) => {
+	const setTextColor = ( newColor, newSlug ) => {
 		let changedObject = setImmutably(
 			value,
 			[ 'color', 'text' ],
-			encodeColorValue( newColor )
+			encodeColorValueWithPalette( allColors, newColor, newSlug )
 		);
-		if ( textColor === linkColor ) {
+		// Compare raw encoded references (e.g. `var:preset|color|slug`), not
+		// decoded hex values. Two palette entries can share the same hex but
+		// carry different slugs (e.g. `var:preset|color|dark-background` and
+		// `var:preset|color|dark-text` both resolving to `#000`); comparing decoded
+		// values would conflate them and incorrectly force the link color to
+		// follow the text color even when the user deliberately chose a
+		// different palette slot.
+		//
+		// Note: this is stricter than the previous decoded comparison.
+		// If text and link were stored in different formats that resolved to
+		// the same hex (e.g. one as `var:preset|color|x` and the other as
+		// `var(--wp--preset--color--x)`), the old check would sync them
+		// and this one will not. In practice this should not arise because
+		// both values are written through the same encoding path.
+		if (
+			inheritedValue?.color?.text ===
+			inheritedValue?.elements?.link?.color?.text
+		) {
 			changedObject = setImmutably(
 				changedObject,
 				[ 'elements', 'link', 'color', 'text' ],
-				encodeColorValue( newColor )
+				encodeColorValueWithPalette( allColors, newColor, newSlug )
 			);
 		}
 
@@ -480,78 +522,75 @@ export default function ColorPanel( {
 		{
 			name: 'caption',
 			label: __( 'Captions' ),
-			showPanel: useHasCaptionPanel( settings ),
+			showPanel: showCaptionPanel,
 		},
 		{
 			name: 'button',
 			label: __( 'Button' ),
-			showPanel: useHasButtonPanel( settings ),
+			showPanel: showButtonPanel,
 		},
 		{
 			name: 'heading',
 			label: __( 'Heading' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 		{
 			name: 'h1',
 			label: __( 'H1' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 		{
 			name: 'h2',
 			label: __( 'H2' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 		{
 			name: 'h3',
 			label: __( 'H3' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 		{
 			name: 'h4',
 			label: __( 'H4' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 		{
 			name: 'h5',
 			label: __( 'H5' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 		{
 			name: 'h6',
 			label: __( 'H6' ),
-			showPanel: useHasHeadingPanel( settings ),
+			showPanel: showHeadingPanel,
 		},
 	];
 
-	const resetAllFilter = useCallback(
-		( previousValue ) => {
-			return {
-				...previousValue,
-				color: undefined,
-				elements: {
-					...previousValue?.elements,
-					link: {
-						...previousValue?.elements?.link,
+	const resetAllFilter = ( previousValue ) => {
+		return {
+			...previousValue,
+			color: undefined,
+			elements: {
+				...previousValue?.elements,
+				link: {
+					...previousValue?.elements?.link,
+					color: undefined,
+					':hover': {
 						color: undefined,
-						':hover': {
-							color: undefined,
-						},
 					},
-					...elements.reduce( ( acc, element ) => {
-						return {
-							...acc,
-							[ element.name ]: {
-								...previousValue?.elements?.[ element.name ],
-								color: undefined,
-							},
-						};
-					}, {} ),
 				},
-			};
-		},
-		[ elements ]
-	);
+				...elements.reduce( ( acc, element ) => {
+					return {
+						...acc,
+						[ element.name ]: {
+							...previousValue?.elements?.[ element.name ],
+							color: undefined,
+						},
+					};
+				}, {} ),
+			},
+		};
+	};
 
 	const items = [
 		showTextPanel && {
@@ -566,6 +605,10 @@ export default function ColorPanel( {
 					key: 'text',
 					label: __( 'Text' ),
 					inheritedValue: textColor,
+					inheritedSlug: extractPresetSlug(
+						inheritedValue?.color?.text,
+						'color'
+					),
 					setValue: setTextColor,
 					userValue: userTextColor,
 				},
@@ -586,6 +629,10 @@ export default function ColorPanel( {
 					key: 'background',
 					label: __( 'Color' ),
 					inheritedValue: backgroundColor,
+					inheritedSlug: extractPresetSlug(
+						inheritedValue?.color?.background,
+						'color'
+					),
 					setValue: setBackgroundColor,
 					userValue: userBackgroundColor,
 				},
@@ -611,6 +658,10 @@ export default function ColorPanel( {
 					key: 'link',
 					label: __( 'Default' ),
 					inheritedValue: linkColor,
+					inheritedSlug: extractPresetSlug(
+						inheritedValue?.elements?.link?.color?.text,
+						'color'
+					),
 					setValue: setLinkColor,
 					userValue: userLinkColor,
 				},
@@ -618,6 +669,11 @@ export default function ColorPanel( {
 					key: 'hover',
 					label: __( 'Hover' ),
 					inheritedValue: hoverLinkColor,
+					inheritedSlug: extractPresetSlug(
+						inheritedValue?.elements?.link?.[ ':hover' ]?.color
+							?.text,
+						'color'
+					),
 					setValue: setHoverLinkColor,
 					userValue: userHoverLinkColor,
 				},
@@ -665,20 +721,28 @@ export default function ColorPanel( {
 			onChange( newValue );
 		};
 
-		const setElementTextColor = ( newTextColor ) => {
+		const setElementTextColor = ( newTextColor, newSlug ) => {
 			onChange(
 				setImmutably(
 					value,
 					[ 'elements', name, 'color', 'text' ],
-					encodeColorValue( newTextColor )
+					encodeColorValueWithPalette(
+						allColors,
+						newTextColor,
+						newSlug
+					)
 				)
 			);
 		};
-		const setElementBackgroundColor = ( newBackgroundColor ) => {
+		const setElementBackgroundColor = ( newBackgroundColor, newSlug ) => {
 			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
-				encodeColorValue( newBackgroundColor )
+				encodeColorValueWithPalette(
+					allColors,
+					newBackgroundColor,
+					newSlug
+				)
 			);
 			newValue.elements[ name ].color.gradient = undefined;
 			onChange( newValue );
@@ -720,6 +784,10 @@ export default function ColorPanel( {
 						key: 'text',
 						label: __( 'Text' ),
 						inheritedValue: elementTextColor,
+						inheritedSlug: extractPresetSlug(
+							inheritedValue?.elements?.[ name ]?.color?.text,
+							'color'
+						),
 						setValue: setElementTextColor,
 						userValue: elementTextUserColor,
 					},
@@ -728,6 +796,11 @@ export default function ColorPanel( {
 						key: 'background',
 						label: __( 'Background' ),
 						inheritedValue: elementBackgroundColor,
+						inheritedSlug: extractPresetSlug(
+							inheritedValue?.elements?.[ name ]?.color
+								?.background,
+							'color'
+						),
 						setValue: setElementBackgroundColor,
 						userValue: elementBackgroundUserColor,
 					},