@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.22.1

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 } />

package/src/hooks/layout-child.js

@@ -9,6 +9,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
 import {
@@ -16,16 +17,21 @@ import {
 	GridItemResizer,
 	GridItemMovers,
 } from '../components/grid';
+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';
+import {
+	DEFAULT_BLOCK_STYLE_STATE,
+	getStyleForState,
+} from './block-style-state';
 
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 
 // These are the serialized `selfStretch` values. `max` used to be called
@@ -252,7 +258,10 @@ export function getResponsiveChildLayoutStyles( {
 
 	return Object.entries( RESPONSIVE_BREAKPOINTS )
 		.map( ( [ viewport, mediaQuery ] ) => {
-			const viewportLayout = style?.[ viewport ]?.layout;
+			const viewportLayout = getStyleForState( style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} )?.layout;
 			if ( ! viewportLayout || ! Object.keys( viewportLayout ).length ) {
 				return '';
 			}
@@ -390,6 +399,9 @@ function GridTools( {
 			const parentAttributes = getBlockAttributes( _rootClientId );
 			const blockAttributes = getBlockAttributes( clientId );
 			const settings = getSettings();
+			const currentDeviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() ||
+				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
 			return {
 				rootClientId: _rootClientId,
@@ -398,9 +410,7 @@ function GridTools( {
 					parentAttributes?.metadata?.blockVisibility,
 				blockBlockVisibility:
 					blockAttributes?.metadata?.blockVisibility,
-				deviceType:
-					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+				deviceType: currentDeviceType,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
@@ -408,16 +418,45 @@ function GridTools( {
 		[ clientId ]
 	);
 
-	const { isBlockCurrentlyHidden: isParentBlockCurrentlyHidden } =
-		useBlockVisibility( {
-			blockVisibility: parentBlockVisibility,
-			deviceType,
-		} );
+	// 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: isParentBlockCurrentlyHidden,
+		currentViewport,
+	} = useBlockVisibility( {
+		blockVisibility: parentBlockVisibility,
+		deviceType,
+		view: canvasView,
+	} );
+
+	// Check whether any ancestor of the parent grid is hidden at the viewport
+	// actually detected from the canvas, so it stays consistent with how
+	// blocks are hidden.
+	const isAnyAncestorHidden = useSelect(
+		( select ) => {
+			if ( ! rootClientId ) {
+				return false;
+			}
+			const { isBlockParentHiddenAtViewport } = unlock(
+				select( blockEditorStore )
+			);
+			return isBlockParentHiddenAtViewport(
+				rootClientId,
+				currentViewport
+			);
+		},
+		[ rootClientId, currentViewport ]
+	);
 
 	const { isBlockCurrentlyHidden: isBlockItselfCurrentlyHidden } =
 		useBlockVisibility( {
 			blockVisibility: blockBlockVisibility,
 			deviceType,
+			view: canvasView,
 		} );
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
@@ -425,7 +464,7 @@ function GridTools( {
 
 	const childGridClientId = isChildBlockAGrid ? clientId : undefined;
 
-	if ( ! isVisible || isParentBlockCurrentlyHidden ) {
+	if ( ! isVisible || isParentBlockCurrentlyHidden || isAnyAncestorHidden ) {
 		return null;
 	}
 

package/src/hooks/layout.js

@@ -52,8 +52,8 @@ const layoutBlockSupportKey = 'layout';
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
 // packages/global-styles-engine/src/core/render.tsx.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 const CHILD_LAYOUT_KEYS = [
 	'selfStretch',
@@ -252,7 +252,10 @@ export function getResponsiveLayoutStyles( {
 } ) {
 	return Object.entries( RESPONSIVE_BREAKPOINTS )
 		.map( ( [ viewport, mediaQuery ] ) => {
-			const viewportStyle = attributes?.style?.[ viewport ];
+			const viewportStyle = getStyleForState( attributes?.style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} );
 			const viewportLayout = getLayoutContainerValues(
 				viewportStyle?.layout
 			);

package/src/hooks/states.js

@@ -19,8 +19,8 @@ export const PSEUDO_STATE_LABELS = {
 };
 
 export const RESPONSIVE_STATE_LABELS = {
-	tablet: __( 'Tablet' ),
-	mobile: __( 'Mobile' ),
+	'@tablet': __( 'Tablet' ),
+	'@mobile': __( 'Mobile' ),
 };
 
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS

package/src/hooks/style.js

@@ -19,7 +19,8 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
  */
 import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
-import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
+import { COLOR_SUPPORT_KEY } from './color';
+import { ElementsEdit } from './elements';
 import {
 	TypographyPanel,
 	TYPOGRAPHY_SUPPORT_KEY,
@@ -57,8 +58,8 @@ const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
 // packages/global-styles-engine/src/core/render.tsx.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 
 const styleSupportKeys = [
@@ -419,7 +420,10 @@ export function getResponsiveStateCSSRules( style, name, baseSelector ) {
 
 	Object.entries( RESPONSIVE_BREAKPOINTS ).forEach(
 		( [ viewport, mediaQuery ] ) => {
-			const viewportStyles = style?.[ viewport ];
+			const viewportStyles = getStyleForState( style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} );
 			if ( ! viewportStyles ) {
 				return;
 			}
@@ -464,8 +468,8 @@ export function getResponsiveStateCSSRules( style, name, baseSelector ) {
  * Returns the style value used to force-preview a selected state on canvas.
  *
  * Responsive pseudo states inherit from their default-viewport pseudo state.
- * For example, selecting `mobile + :hover` should preview styles from
- * `:hover`, with `mobile.:hover` values layered on top when present.
+ * For example, selecting `@mobile + :hover` should preview styles from
+ * `:hover`, with `@mobile.:hover` values layered on top when present.
  *
  * @param {Object} style         Block style object.
  * @param {Object} selectedState Selected block style state.
@@ -848,7 +852,7 @@ function BlockStyleControls( {
 
 	return (
 		<BlockStyleStateProvider value={ selectedState }>
-			<ColorEdit { ...passedProps } />
+			<ElementsEdit { ...passedProps } />
 			<BackgroundImagePanel { ...passedProps } />
 			<TypographyPanel { ...passedProps } />
 			<BorderPanel { ...passedProps } />