@wordpress/block-editor 15.21.1 → 15.22.0

package/src/hooks/color.js

@@ -8,8 +8,7 @@ import clsx from 'clsx';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,27 +18,9 @@ import {
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import { __experimentalGetGradientClass } from '../components/gradients';
-import {
-	cleanEmptyObject,
-	transformStyles,
-	shouldSkipSerialization,
-} from './utils';
+import { transformStyles, shouldSkipSerialization } from './utils';
 import { getBackgroundImageClasses } from './background';
 import { useSettings } from '../components/use-settings';
-import InspectorControls from '../components/inspector-controls';
-import {
-	useHasColorPanel,
-	default as StylesColorPanel,
-} from '../components/global-styles/color-panel';
-import { extractPresetSlug } from '../utils/color-values';
-import BlockColorContrastChecker from './contrast-checker';
-import { store as blockEditorStore } from '../store';
-import {
-	getStyleForState,
-	isDefaultBlockStyleState,
-	setStyleForState,
-	useBlockStyleState,
-} from './block-style-state';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
@@ -192,190 +173,6 @@ export function addSaveProps( props, blockNameOrType, attributes ) {
 	return props;
 }
 
-function styleToAttributes( style ) {
-	const textColorValue = style?.color?.text;
-	const textColorSlug = extractPresetSlug( textColorValue, 'color' );
-	const backgroundColorValue = style?.color?.background;
-	const backgroundColorSlug = extractPresetSlug(
-		backgroundColorValue,
-		'color'
-	);
-	const gradientValue = style?.color?.gradient;
-	const gradientSlug = extractPresetSlug( gradientValue, 'gradient' );
-	const updatedStyle = { ...style };
-	updatedStyle.color = {
-		...updatedStyle.color,
-		text: textColorSlug ? undefined : textColorValue,
-		background: backgroundColorSlug ? undefined : backgroundColorValue,
-		gradient: gradientSlug ? undefined : gradientValue,
-	};
-	return {
-		style: cleanEmptyObject( updatedStyle ),
-		textColor: textColorSlug,
-		backgroundColor: backgroundColorSlug,
-		gradient: gradientSlug,
-	};
-}
-
-function attributesToStyle( attributes ) {
-	return {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			text: attributes.textColor
-				? 'var:preset|color|' + attributes.textColor
-				: attributes.style?.color?.text,
-			background: attributes.backgroundColor
-				? 'var:preset|color|' + attributes.backgroundColor
-				: attributes.style?.color?.background,
-			gradient: attributes.gradient
-				? 'var:preset|gradient|' + attributes.gradient
-				: attributes.style?.color?.gradient,
-		},
-	};
-}
-
-function ColorInspectorControl( { children, resetAllFilter } ) {
-	const attributesResetAllFilter = useCallback(
-		( attributes ) => {
-			const existingStyle = attributesToStyle( attributes );
-			const updatedStyle = resetAllFilter( existingStyle );
-			return {
-				...attributes,
-				...styleToAttributes( updatedStyle ),
-			};
-		},
-		[ resetAllFilter ]
-	);
-
-	return (
-		<InspectorControls
-			group="color"
-			resetAllFilter={ attributesResetAllFilter }
-		>
-			{ children }
-		</InspectorControls>
-	);
-}
-
-export function ColorEdit( {
-	clientId,
-	name,
-	setAttributes,
-	settings,
-	asWrapper,
-	label,
-	defaultControls,
-} ) {
-	const selectedState = useBlockStyleState();
-	const isEnabled = useHasColorPanel( settings );
-
-	const { style, textColor, backgroundColor, gradient } = useSelect(
-		( select ) => {
-			// Early return to avoid subscription when disabled
-			if ( ! isEnabled ) {
-				return {};
-			}
-			const {
-				style: _style,
-				textColor: _textColor,
-				backgroundColor: _backgroundColor,
-				gradient: _gradient,
-			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-			return {
-				style: _style,
-				textColor: _textColor,
-				backgroundColor: _backgroundColor,
-				gradient: _gradient,
-			};
-		},
-		[ clientId, isEnabled ]
-	);
-
-	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
-
-	const value = useMemo( () => {
-		if ( isStateSelected ) {
-			return getStyleForState( style, selectedState );
-		}
-		return attributesToStyle( {
-			style,
-			textColor,
-			backgroundColor,
-			gradient,
-		} );
-	}, [
-		isStateSelected,
-		selectedState,
-		style,
-		textColor,
-		backgroundColor,
-		gradient,
-	] );
-
-	const onChange = isStateSelected
-		? ( newStyle ) => {
-				setAttributes( {
-					style: setStyleForState( style, selectedState, newStyle ),
-				} );
-		  }
-		: ( newStyle ) => {
-				setAttributes( styleToAttributes( newStyle ) );
-		  };
-
-	const Wrapper = asWrapper || ColorInspectorControl;
-
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	defaultControls = defaultControls
-		? defaultControls
-		: getBlockSupport( name, [
-				COLOR_SUPPORT_KEY,
-				'__experimentalDefaultControls',
-		  ] );
-
-	const enableContrastChecking =
-		! isStateSelected &&
-		! value?.color?.gradient &&
-		( settings?.color?.text || settings?.color?.link ) &&
-		// Contrast checking is enabled by default.
-		// Deactivating it requires `enableContrastChecker` to have
-		// an explicit value of `false`.
-		false !==
-			getBlockSupport( name, [
-				COLOR_SUPPORT_KEY,
-				'enableContrastChecker',
-			] );
-
-	return (
-		<StylesColorPanel
-			as={ Wrapper }
-			panelId={ clientId }
-			settings={ settings }
-			value={ value }
-			onChange={ onChange }
-			defaultControls={ defaultControls }
-			label={ label }
-			enableContrastChecker={
-				false !==
-				getBlockSupport( name, [
-					COLOR_SUPPORT_KEY,
-					'enableContrastChecker',
-				] )
-			}
-		>
-			{ enableContrastChecking && (
-				<BlockColorContrastChecker
-					clientId={ clientId }
-					name={ name }
-				/>
-			) }
-		</StylesColorPanel>
-	);
-}
-
 function useBlockProps( {
 	name,
 	backgroundColor,

package/src/hooks/color.scss

@@ -1,6 +1,9 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .color-block-support-panel {
+	// Blocks with non-standard color attributes (e.g. Social Icons,
+	// Navigation) still render the public ContrastChecker component
+	// directly within the color panel.
 	.block-editor-contrast-checker {
 		grid-column: span 2;
 		margin-top: $grid-unit-20;
@@ -12,13 +15,4 @@
 			row-gap: 0;
 		}
 	}
-
-	/**
-	 * After converting PanelColorGradientSettings to render as a ToolsPanel
-	 * we need to remove the top margin when wrapping inner content due to
-	 * rendering via SlotFills.
-	 */
-	.block-editor-tools-panel-color-gradient-settings__item.first {
-		margin-top: 0;
-	}
 }

package/src/hooks/contrast-checker.js

@@ -1,15 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useReducer } from '@wordpress/element';
+import { useEffect, useLayoutEffect, useReducer } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 import { getBlockSelector } from '@wordpress/global-styles-engine';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
-import ContrastChecker from '../components/contrast-checker';
+import { getContrastWarning } from '../components/contrast-checker';
+
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedValue( node, property ) {
@@ -80,23 +82,47 @@ function reducer( prevColors, newColors ) {
 	return hasChanged ? newColors : prevColors;
 }
 
-export default function BlockColorContrastChecker( { clientId, name } ) {
+/**
+ * Returns a contrast warning message for a block's computed colors, or
+ * `undefined` when contrast is sufficient or checking is disabled.
+ *
+ * Colors are read from the rendered block element so that inherited values
+ * (e.g. from Global Styles or ancestor blocks) are taken into account.
+ *
+ * @param {Object}  props
+ * @param {string}  props.clientId          Block client ID.
+ * @param {string}  props.name              Block name.
+ * @param {boolean} [props.enabled]         Whether contrast checking is active.
+ * @param {boolean} [props.checkTextColor]  Whether to evaluate the text/background pair.
+ * @param {boolean} [props.checkLinkColor]  Whether to evaluate the link/background pair.
+ * @param {string}  [props.messageOverride] Caller-provided copy used in place of the generic guidance.
+ *
+ * @return {?string} The warning message, if any.
+ */
+export default function useBlockColorContrastWarning( {
+	clientId,
+	name,
+	enabled = true,
+	checkTextColor = true,
+	checkLinkColor = true,
+	messageOverride,
+} ) {
 	const blockEl = useBlockElement( clientId );
 	const [ colors, setColors ] = useReducer( reducer, {} );
 
 	const blockType = useSelect(
 		( select ) => {
-			return name
+			return name && enabled
 				? select( blocksStore ).getBlockType( name )
 				: undefined;
 		},
-		[ name ]
+		[ name, enabled ]
 	);
 
 	// There are so many things that can change the color of a block
 	// So we perform this check on every render.
 	useLayoutEffect( () => {
-		if ( ! blockEl || ! blockType ) {
+		if ( ! enabled || ! blockEl || ! blockType ) {
 			return;
 		}
 
@@ -112,7 +138,7 @@ export default function BlockColorContrastChecker( { clientId, name } ) {
 	// Runs in its own effect with dependencies so the observer is only
 	// recreated when the block element or block type changes.
 	useLayoutEffect( () => {
-		if ( ! blockEl || ! blockType ) {
+		if ( ! enabled || ! blockEl || ! blockType ) {
 			return;
 		}
 
@@ -123,19 +149,36 @@ export default function BlockColorContrastChecker( { clientId, name } ) {
 		observer.observe( blockEl, {
 			attributes: true,
 			attributeFilter: [ 'class', 'style' ],
+			subtree: true,
 		} );
 
 		return () => {
 			observer.disconnect();
 		};
-	}, [ blockEl, blockType ] );
-
-	return (
-		<ContrastChecker
-			backgroundColor={ colors.backgroundColor }
-			textColor={ colors.textColor }
-			linkColor={ colors.linkColor }
-			enableAlphaChecker
-		/>
-	);
+	}, [ enabled, blockEl, blockType ] );
+
+	const warning = enabled
+		? getContrastWarning( {
+				backgroundColor: colors.backgroundColor,
+				textColor: checkTextColor ? colors.textColor : undefined,
+				linkColor: checkLinkColor ? colors.linkColor : undefined,
+				messageOverride,
+				enableAlphaChecker: true,
+		  } )
+		: null;
+
+	// The popover Notice that displays this warning is muted
+	// (`spokenMessage={ null }`), so this hook is the single source of the
+	// spoken announcement. Announce only when the warning message itself
+	// appears or changes; keying off `speakMessage` rather than the raw
+	// computed `colors` avoids re-announcing the same warning when colors
+	// recompute without changing the outcome.
+	const speakMessage = warning?.speakMessage;
+	useEffect( () => {
+		if ( speakMessage ) {
+			speak( speakMessage );
+		}
+	}, [ speakMessage ] );
+
+	return warning?.message;
 }

package/src/hooks/custom-class-name.js

@@ -47,7 +47,6 @@ function CustomClassNameControlsPure( { className, setAttributes } ) {
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
-				__next40pxDefaultSize
 				autoComplete="off"
 				label={ __( 'Additional CSS class(es)' ) }
 				value={ className || '' }

package/src/hooks/dimensions.js

@@ -190,6 +190,14 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+export function isExplicitAspectRatio( aspectRatio ) {
+	if ( ! aspectRatio ) {
+		return false;
+	}
+
+	return `${ aspectRatio }`.trim().toLowerCase() !== 'auto';
+}
+
 export default {
 	useBlockProps,
 	attributeKeys: [ 'height', 'minHeight', 'width', 'style' ],
@@ -206,8 +214,11 @@ function useBlockProps( { name, height, minHeight, style } ) {
 		return {};
 	}
 
+	const hasExplicitAspectRatio = isExplicitAspectRatio(
+		style?.dimensions?.aspectRatio
+	);
 	const className = clsx( {
-		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+		'has-aspect-ratio': hasExplicitAspectRatio,
 	} );
 
 	// Allow dimensions-based inline style overrides to override any global styles rules that
@@ -215,12 +226,12 @@ function useBlockProps( { name, height, minHeight, style } ) {
 	const inlineStyleOverrides = {};
 
 	// Apply rules to unset incompatible styles.
-	// Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
+	// Note that an explicit `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
 	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
 	// that is set should be intentional and should override any existing height properties. The Cover block
 	// and dimensions controls have logic that will manually clear the aspect ratio if height properties
 	// are set.
-	if ( style?.dimensions?.aspectRatio ) {
+	if ( hasExplicitAspectRatio ) {
 		// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.
 		inlineStyleOverrides.minHeight = 'unset';
 		inlineStyleOverrides.height = 'unset';

package/src/hooks/elements.js

@@ -0,0 +1,140 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { useMemo, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import {
+	useHasColorPanel,
+	default as StylesColorPanel,
+} from '../components/global-styles/color-panel';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
+import { COLOR_SUPPORT_KEY } from './color';
+import useBlockColorContrastWarning from './contrast-checker';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+	useBlockStyleState,
+} from './block-style-state';
+
+function ElementsInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const updatedStyle = resetAllFilter( attributes.style );
+			return {
+				...attributes,
+				style: cleanEmptyObject( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
+	);
+
+	return (
+		<InspectorControls
+			group="elements"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
+
+export function ElementsEdit( {
+	clientId,
+	name,
+	setAttributes,
+	settings,
+	asWrapper,
+	label,
+	defaultControls,
+} ) {
+	const selectedState = useBlockStyleState();
+	const isEnabled = useHasColorPanel( settings );
+
+	const style = useSelect(
+		( select ) => {
+			if ( ! isEnabled ) {
+				return undefined;
+			}
+			const attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId );
+			return attributes?.style;
+		},
+		[ clientId, isEnabled ]
+	);
+
+	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+
+	const value = useMemo( () => {
+		if ( isStateSelected ) {
+			return getStyleForState( style, selectedState );
+		}
+		return style;
+	}, [ isStateSelected, selectedState, style ] );
+
+	const onChange = isStateSelected
+		? ( newStyle ) => {
+				setAttributes( {
+					style: setStyleForState( style, selectedState, newStyle ),
+				} );
+		  }
+		: ( newStyle ) => {
+				setAttributes( { style: cleanEmptyObject( newStyle ) } );
+		  };
+
+	// Text and background color failures are reported by the Typography and
+	// Background panels, which own those selections.
+	const enableContrastChecking =
+		! isStateSelected &&
+		!! value?.elements?.link?.color?.text &&
+		settings?.color?.link &&
+		false !==
+			getBlockSupport( name, [
+				COLOR_SUPPORT_KEY,
+				'enableContrastChecker',
+			] );
+
+	const contrastWarning = useBlockColorContrastWarning( {
+		clientId,
+		name,
+		enabled: !! enableContrastChecking,
+		checkTextColor: false,
+		messageOverride: __(
+			'This link color has poor contrast against the background. Consider increasing contrast.'
+		),
+	} );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	defaultControls = defaultControls
+		? defaultControls
+		: getBlockSupport( name, [
+				COLOR_SUPPORT_KEY,
+				'__experimentalDefaultControls',
+		  ] );
+
+	const Wrapper = asWrapper || ElementsInspectorControl;
+
+	return (
+		<StylesColorPanel
+			as={ Wrapper }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+			label={ label }
+			contrastWarning={ contrastWarning }
+		/>
+	);
+}

package/src/hooks/elements.scss

@@ -0,0 +1,8 @@
+.elements-block-support-panel {
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.elements-block-support-panel__inner-wrapper {
+			row-gap: 0;
+		}
+	}
+}