@wordpress/block-editor 15.21.0 → 15.22.0

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

@@ -14,6 +14,10 @@ import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
  */
 import ChildLayoutControl from '../';
 
+jest.mock( '../../use-settings', () => ( {
+	useSettings: () => [ undefined ],
+} ) );
+
 jest.mock( '@wordpress/data/src/components/use-select', () =>
 	jest.fn( ( mapSelect ) => {
 		if ( typeof mapSelect === 'function' ) {
@@ -123,4 +127,64 @@ describe( 'ChildLayoutControl', () => {
 			columnSpan: 1,
 		} );
 	} );
+
+	it( 'shows legacy fixed flex sizing as max', () => {
+		renderControl( {
+			parentLayout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			value: {
+				selfStretch: 'fixed',
+				flexSize: '320px',
+			},
+		} );
+
+		expect( screen.getByRole( 'radio', { name: 'Max' } ) ).toBeChecked();
+	} );
+
+	it( 'sets fixedNoShrink when selecting fixed flex sizing', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		renderControl( {
+			parentLayout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			value: {},
+			onChange,
+		} );
+
+		await user.click( screen.getByRole( 'radio', { name: 'Fixed' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			selfStretch: 'fixedNoShrink',
+			flexSize: undefined,
+		} );
+	} );
+
+	it( 'sets legacy fixed when selecting max sizing', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		renderControl( {
+			parentLayout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			value: {
+				selfStretch: 'fixedNoShrink',
+				flexSize: '320px',
+			},
+			onChange,
+		} );
+
+		await user.click( screen.getByRole( 'radio', { name: 'Max' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			selfStretch: 'fixed',
+			flexSize: '320px',
+		} );
+	} );
 } );

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

@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	ColorPalette,
 	GradientPicker,
+	Notice,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
@@ -48,6 +49,7 @@ function ColorGradientControlInner( {
 	showTitle = true,
 	enableAlpha,
 	headingLevel,
+	noticeProps,
 } ) {
 	const canChooseAColor =
 		onColorChange &&
@@ -67,20 +69,35 @@ function ColorGradientControlInner( {
 		  }
 		: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );
 
+	const colorPalette = (
+		<ColorPalette
+			value={ colorValue }
+			selectedSlug={ colorSlug }
+			onChange={ colorPaletteOnChange }
+			{ ...{ colors, disableCustomColors } }
+			__experimentalIsRenderedInSidebar={
+				__experimentalIsRenderedInSidebar
+			}
+			clearable={ clearable }
+			enableAlpha={ enableAlpha }
+			headingLevel={ headingLevel }
+		/>
+	);
+
 	const tabPanels = {
+		// The `ColorPalette` must stay at a stable position in the tree whether
+		// or not a notice is present. Wrapping it in a `VStack` only when a
+		// notice appears remounts it, which resets the custom color picker back
+		// to the swatch view mid-edit. Keep `ColorPalette` last and toggle only
+		// the notice ahead of it; the notice's own bottom margin provides the
+		// spacing the wrapper used to.
 		[ TAB_IDS.color ]: (
-			<ColorPalette
-				value={ colorValue }
-				selectedSlug={ colorSlug }
-				onChange={ colorPaletteOnChange }
-				{ ...{ colors, disableCustomColors } }
-				__experimentalIsRenderedInSidebar={
-					__experimentalIsRenderedInSidebar
-				}
-				clearable={ clearable }
-				enableAlpha={ enableAlpha }
-				headingLevel={ headingLevel }
-			/>
+			<>
+				{ noticeProps && (
+					<Notice isDismissible={ false } { ...noticeProps } />
+				) }
+				{ colorPalette }
+			</>
 		),
 		[ TAB_IDS.gradient ]: (
 			<GradientPicker

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

@@ -51,7 +51,10 @@ const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
 					: true
 			}
 			{ ...props }
-			className="block-editor-tools-panel-color-gradient-settings__item"
+			className={ clsx(
+				'block-editor-color-gradient-item',
+				'block-editor-tools-panel-color-gradient-settings__item'
+			) }
 			panelId={ panelId }
 			// Pass resetAllFilter if supplied due to rendering via SlotFill
 			// into parent ToolsPanel.

package/src/components/colors-gradients/style.scss

@@ -68,14 +68,23 @@ $swatch-gap: 12px;
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
 
+// Space the in-popover contrast notice away from the color palette below it.
+.block-editor-panel-color-gradient-settings__contrast-notice {
+	margin-bottom: $grid-unit-20;
+}
+
 /**
 * The following styles replicate the separated border of the
 * `ItemGroup` component but allows for hidden items. This is because
 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
 * must at least render a placeholder which would otherwise interfere
 * with the `:last-child` styles.
+*
+* Applied via the shared `block-editor-color-gradient-item` class on
+* color/gradient dropdown items across the Color, Background, and
+* Typography panels.
 */
-.block-editor-tools-panel-color-gradient-settings__item {
+.block-editor-color-gradient-item {
 	padding: 0;
 	max-width: 100%;
 	position: relative;
@@ -87,7 +96,6 @@ $swatch-gap: 12px;
 
 	// Identify the first visible instance as placeholder items will not have this class.
 	&:nth-child(1 of &) {
-		margin-top: $grid-unit-30;
 		border-top-left-radius: $radius-small;
 		border-top-right-radius: $radius-small;
 		border-top: 1px solid $gray-300;
@@ -127,6 +135,12 @@ $swatch-gap: 12px;
 		text-overflow: ellipsis;
 		max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05));
 	}
+
+	// Reserve extra space for the always-visible contrast warning icon,
+	// which sits alongside the hover-revealed reset button.
+	> button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
+		max-width: calc(100% - ($button-size-next-default-40px + $button-size-small + $grid-unit));
+	}
 }
 
 .block-editor-panel-color-gradient-settings__dropdown {
@@ -161,4 +175,27 @@ $swatch-gap: 12px;
 		// Show reset button on devices that do not support hover.
 		opacity: 1;
 	}
+
+	// While a contrast warning is in effect the warning icon occupies the
+	// far-right slot, so the reset button shifts left to sit beside it.
+	.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + & {
+		right: $button-size-small + $grid-unit-05;
+	}
+}
+
+// Icon-only "Low contrast" warning shown to the right of the color
+// control toggle whenever the selection has insufficient contrast.
+// Unlike the reset button it stays visible without hover. It is not a
+// menu; activating it opens the color picker popover (where the full
+// warning notice lives), so it doubles as a shortcut to the fix. The
+// accessible name and hover/focus tooltip come from the button label.
+.block-editor-panel-color-gradient-settings__contrast-warning {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+
+	&.block-editor-panel-color-gradient-settings__contrast-warning {
+		border-radius: $radius-small;
+	}
 }

package/src/components/contrast-checker/README.md

@@ -69,3 +69,12 @@ The text color to check the contrast of the background against.
 
 -   Type: `String`
 -   Required: No
+
+#### messageOverride
+
+Custom warning message to display (and announce) instead of the default
+contrast guidance when the color combination has insufficient contrast. Useful
+for providing panel-specific, more concise copy.
+
+-   Type: `String`
+-   Required: No

package/src/components/contrast-checker/index.js

@@ -14,7 +14,28 @@ import { speak } from '@wordpress/a11y';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
-function ContrastChecker( {
+/**
+ * Computes a contrast warning for the given color combination, if any.
+ *
+ * Shared between the `ContrastChecker` component and the block inspector
+ * contrast warning indicators, which surface the result without rendering
+ * a notice.
+ *
+ * @param {Object}  props
+ * @param {string}  [props.backgroundColor]         Background color.
+ * @param {string}  [props.fallbackBackgroundColor] Fallback background color.
+ * @param {string}  [props.fallbackTextColor]       Fallback text color.
+ * @param {string}  [props.fallbackLinkColor]       Fallback link color.
+ * @param {number}  [props.fontSize]                Font size value in pixels.
+ * @param {boolean} [props.isLargeText]             Whether the text is large.
+ * @param {string}  [props.textColor]               Text color.
+ * @param {string}  [props.linkColor]               Link color.
+ * @param {string}  [props.messageOverride]         Caller-provided copy used in place of the generic guidance.
+ * @param {boolean} [props.enableAlphaChecker]      Whether to warn about transparent text.
+ *
+ * @return {?Object} `{ message, speakMessage }` when contrast is insufficient, otherwise `null`.
+ */
+export function getContrastWarning( {
 	backgroundColor,
 	fallbackBackgroundColor,
 	fallbackTextColor,
@@ -23,6 +44,7 @@ function ContrastChecker( {
 	isLargeText,
 	textColor,
 	linkColor,
+	messageOverride,
 	enableAlphaChecker = false,
 } ) {
 	const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
@@ -81,6 +103,13 @@ function ContrastChecker( {
 			if ( backgroundColorHasTransparency || textHasTransparency ) {
 				continue;
 			}
+			// A caller can provide panel-specific copy that is clearer and
+			// more concise than the generic brighter/darker guidance.
+			if ( messageOverride ) {
+				message = messageOverride;
+				speakMessage = messageOverride;
+				break;
+			}
 			message =
 				backgroundColorBrightness < colordTextColor.brightness()
 					? sprintf(
@@ -119,11 +148,21 @@ function ContrastChecker( {
 		return null;
 	}
 
+	return { message, speakMessage };
+}
+
+function ContrastChecker( props ) {
+	const warning = getContrastWarning( props );
+
+	if ( ! warning ) {
+		return null;
+	}
+
 	// Note: The `Notice` component can speak messages via its `spokenMessage`
 	// prop, but the contrast checker requires granular control over when the
 	// announcements are made. Notably, the message will be re-announced if a
 	// new color combination is selected and the contrast is still insufficient.
-	speak( speakMessage );
+	speak( warning.speakMessage );
 
 	return (
 		<div className="block-editor-contrast-checker">
@@ -132,7 +171,7 @@ function ContrastChecker( {
 				status="warning"
 				isDismissible={ false }
 			>
-				{ message }
+				{ warning.message }
 			</Notice>
 		</div>
 	);

package/src/components/date-format-picker/index.js

@@ -144,7 +144,6 @@ function NonDefaultControls( { format, onChange } ) {
 			/>
 			{ isCustom && (
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
 					help={ createInterpolateElement(

package/src/components/default-block-appender/content.scss

@@ -30,6 +30,9 @@
 		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
 		opacity: 0.62;
 
+		// Reset the text shadow from the global styles.
+		text-shadow: none;
+
 		// The following prevents user agent styles from applying margins to the appender's inner paragraph.
 		// This in turn prevents layout shift due to layout styles removing margins from first and last children.
 		margin-block-start: 0;

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

@@ -56,7 +56,7 @@ function DimensionsTool( {
 	aspectRatioOptions, // Default options handled by AspectRatioTool.
 	defaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.
 	scaleOptions, // Default options handled by ScaleTool.
-	defaultScale = 'fill', // Match CSS default value for object-fit.
+	defaultScale = 'cover',
 	unitsOptions, // Default options handled by UnitControl.
 	tools = [ 'aspectRatio', 'widthHeight', 'scale' ],
 } ) {
@@ -73,21 +73,19 @@ function DimensionsTool( {
 		value.aspectRatio === undefined || value.aspectRatio === 'auto'
 			? null
 			: value.aspectRatio;
-	const scale =
-		value.scale === undefined || value.scale === 'fill'
-			? null
-			: value.scale;
+	const scale = value.scale === undefined ? null : value.scale;
 
 	// Keep track of state internally, so when the value is cleared by means
 	// other than directly editing that field, it's easier to restore the
 	// previous value.
 	const [ lastScale, setLastScale ] = useState( scale );
 	const [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );
+	const hasCustomAspectRatio = !! ( width && height );
 
 	// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
 	// dropdown to indicate that setting both the width and height is the same
 	// as a custom aspect ratio.
-	const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
+	const aspectRatioValue = hasCustomAspectRatio ? 'custom' : aspectRatio;
 
 	const showScaleControl = aspectRatio || ( width && height );
 
@@ -197,9 +195,6 @@ function DimensionsTool( {
 					onChange={ ( nextScale ) => {
 						const nextValue = { ...value };
 
-						// 'fill' is CSS default, so it gets treated as null.
-						nextScale = nextScale === 'fill' ? null : nextScale;
-
 						setLastScale( nextScale );
 
 						// Update scale.

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

@@ -86,8 +86,7 @@ export default function ScaleTool( {
 	defaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,
 	isShownByDefault = true,
 } ) {
-	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
-	const displayValue = value ?? 'fill';
+	const displayValue = value ?? defaultValue;
 
 	const scaleHelp = useMemo( () => {
 		return options.reduce( ( acc, option ) => {

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

@@ -16,6 +16,17 @@ import { useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
 const EMPTY_OBJECT = {};
+const ASPECT_RATIO_OPTIONS = [
+	{ label: 'Original', value: 'auto' },
+	{ label: '16/9', value: '16/9' },
+	{ label: '4/3', value: '4/3' },
+	{
+		label: 'Custom',
+		value: 'custom',
+		disabled: true,
+		hidden: true,
+	},
+];
 
 function Example( { initialValue, onChange, ...props } ) {
 	const [ value, setValue ] = useState( initialValue );
@@ -33,16 +44,27 @@ function Example( { initialValue, onChange, ...props } ) {
 				} }
 				defaultScale="cover"
 				defaultAspectRatio="auto"
-				aspectRatioOptions={ [
-					{ label: 'Original', value: 'auto' },
-					{ label: '16/9', value: '16/9' },
-					{
-						label: 'Custom',
-						value: 'custom',
-						disabled: true,
-						hidden: true,
-					},
-				] }
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
+				value={ value }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
+function ControlledExample( { value, onChange, ...props } ) {
+	return (
+		<ToolsPanel
+			label="Dimensions"
+			panelId="panel-id"
+			resetAll={ () => onChange( EMPTY_OBJECT ) }
+		>
+			<DimensionsTool
+				panelId="panel-id"
+				onChange={ onChange }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
 				value={ value }
 				{ ...props }
 			/>
@@ -60,6 +82,39 @@ function Example( { initialValue, onChange, ...props } ) {
 // properties are treated differently from missing properties.
 
 describe( 'DimensionsTool', () => {
+	describe( 'controlled values', () => {
+		it( 'updates the aspect ratio control when the value prop changes', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '16/9' } }
+					onChange={ onChange }
+				/>
+			);
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '4/3' } }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( '4/3' );
+
+			rerender(
+				<ControlledExample
+					value={ EMPTY_OBJECT }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+		} );
+	} );
+
 	describe( 'updating aspectRatio', () => {
 		it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
@@ -323,7 +378,30 @@ describe( 'DimensionsTool', () => {
 	} );
 
 	describe( 'updating scale', () => {
-		// No custom interactions here. Things should just update normally.
+		it( 'when default scale is cover, setting scale to fill preserves the fill value', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const scaleFillRadio = screen.getByRole( 'radio', {
+				name: 'Fill',
+			} );
+
+			await user.click( scaleFillRadio );
+			expect( scaleFillRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'fill' } ],
+			] );
+		} );
 	} );
 
 	describe( 'updating dimensions', () => {

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

@@ -85,7 +85,11 @@ export default function AdvancedPanel( {
 	}
 
 	return (
-		<Stack direction="column" gap="md">
+		<Stack
+			direction="column"
+			gap="md"
+			className="block-editor-global-styles-advanced-panel"
+		>
 			{ cssError && (
 				<Notice status="error" onRemove={ () => setCSSError( null ) }>
 					{ cssError }