@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.23.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/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;
+		}
+	}
+}

package/src/hooks/grid-visualizer.js

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import useBlockVisibility from '../components/block-visibility/use-block-visibility';
 import { deviceTypeKey } from '../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
@@ -20,60 +21,73 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isVisible, blockVisibility, deviceType, isAnyAncestorHidden } =
-		useSelect(
-			( select ) => {
-				const {
-					isBlockSelected,
-					hasSelectedInnerBlock,
-					isDraggingBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					getBlockAttributes,
-					getSettings,
-				} = select( blockEditorStore );
+	const { isVisible, blockVisibility, deviceType } = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				isDraggingBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				getBlockAttributes,
+				getSettings,
+			} = select( blockEditorStore );
 
-				// These calls are purposely ordered from least expensive to most expensive.
-				// Hides the visualizer in cases where the user is not or cannot interact with it.
-				// Also hide if a child block is selected, because layout-child.js will render
-				// the visualizer in that case (with proper childGridClientId handling).
-				if (
-					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
-					getTemplateLock( clientId ) ||
-					getBlockEditingMode( clientId ) !== 'default' ||
-					hasSelectedInnerBlock( clientId )
-				) {
-					return { isVisible: false };
-				}
+			// These calls are purposely ordered from least expensive to most expensive.
+			// Hides the visualizer in cases where the user is not or cannot interact with it.
+			// Also hide if a child block is selected, because layout-child.js will render
+			// the visualizer in that case (with proper childGridClientId handling).
+			if (
+				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+				getTemplateLock( clientId ) ||
+				getBlockEditingMode( clientId ) !== 'default' ||
+				hasSelectedInnerBlock( clientId )
+			) {
+				return { isVisible: false };
+			}
 
-				const { isBlockParentHiddenAtViewport } = unlock(
-					select( blockEditorStore )
-				);
+			const attributes = getBlockAttributes( clientId );
+			const settings = getSettings();
+			const currentDeviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() ||
+				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
-				const attributes = getBlockAttributes( clientId );
-				const settings = getSettings();
-				const currentDeviceType =
-					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+			return {
+				isVisible: true,
+				blockVisibility: attributes?.metadata?.blockVisibility,
+				deviceType: currentDeviceType,
+			};
+		},
+		[ clientId ]
+	);
 
-				return {
-					isVisible: true,
-					blockVisibility: attributes?.metadata?.blockVisibility,
-					deviceType: currentDeviceType,
-					isAnyAncestorHidden: isBlockParentHiddenAtViewport(
-						clientId,
-						currentDeviceType
-					),
-				};
-			},
-			[ clientId ]
-		);
+	// Get the block's DOM element to derive the canvas iframe window,
+	// so viewport detection matches the actual block rendering context
+	const blockElement = useBlockElement( clientId );
+	const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+	const canvasView = rawCanvasView === null ? undefined : rawCanvasView;
 
-	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
 		blockVisibility,
 		deviceType,
+		view: canvasView,
 	} );
 
+	// Check whether any ancestor is hidden at the viewport actually detected
+	// from the canvas, so it stays consistent with how blocks are hidden.
+	const isAnyAncestorHidden = useSelect(
+		( select ) => {
+			if ( ! isVisible ) {
+				return false;
+			}
+			const { isBlockParentHiddenAtViewport } = unlock(
+				select( blockEditorStore )
+			);
+			return isBlockParentHiddenAtViewport( clientId, currentViewport );
+		},
+		[ clientId, currentViewport, isVisible ]
+	);
+
 	return (
 		<>
 			<GridLayoutSync clientId={ clientId } />