@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/src/hooks/block-style-variation.js

@@ -4,17 +4,22 @@
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';
+import {
+	toStyles,
+	getBlockSelectors,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { usePrivateStyleOverride } from './utils';
-import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 import { unlock } from '../lock-unlock';
 
+const { getVariationStyle } = unlock( globalStylesEnginePrivateApis );
+
 const VARIATION_PREFIX = 'is-style-';
 
 function getVariationMatches( className ) {
@@ -175,77 +180,6 @@ export function BlockStyleVariationOverridesWithConfig( { config } ) {
 	);
 }
 
-/**
- * Retrieves any variation styles data and resolves any referenced values.
- *
- * @param {Object}    globalStyles A complete global styles object, containing settings and styles.
- * @param {string}    name         The name of the desired block type.
- * @param {variation} variation    The of the block style variation to retrieve data for.
- *
- * @return {Object|undefined} The global styles data for the specified variation.
- */
-export function getVariationStylesWithRefValues(
-	globalStyles,
-	name,
-	variation
-) {
-	if ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {
-		return;
-	}
-
-	// Helper to recursively look for `ref` values to resolve.
-	const replaceRefs = ( variationStyles ) => {
-		Object.keys( variationStyles ).forEach( ( key ) => {
-			const value = variationStyles[ key ];
-
-			// Only process objects.
-			if ( typeof value === 'object' && value !== null ) {
-				// Process `ref` value if present.
-				if ( value.ref !== undefined ) {
-					if (
-						typeof value.ref !== 'string' ||
-						value.ref.trim() === ''
-					) {
-						// Remove invalid ref.
-						delete variationStyles[ key ];
-					} else {
-						// Resolve `ref` value.
-						const refValue = getValueFromObjectPath(
-							globalStyles,
-							value.ref
-						);
-
-						if ( refValue ) {
-							variationStyles[ key ] = refValue;
-						} else {
-							delete variationStyles[ key ];
-						}
-					}
-				} else {
-					// Recursively resolve `ref` values in nested objects.
-					replaceRefs( value );
-
-					// After recursion, if value is empty due to explicitly
-					// `undefined` ref value, remove it.
-					if ( Object.keys( value ).length === 0 ) {
-						delete variationStyles[ key ];
-					}
-				}
-			}
-		} );
-	};
-
-	// Deep clone variation node to avoid mutating it within global styles and losing refs.
-	const styles = JSON.parse(
-		JSON.stringify(
-			globalStyles.styles.blocks[ name ].variations[ variation ]
-		)
-	);
-	replaceRefs( styles );
-
-	return styles;
-}
-
 function useBlockStyleVariation( name, variation, clientId ) {
 	const { globalSettings, globalStyles } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
@@ -256,7 +190,7 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	}, [] );
 
 	return useMemo( () => {
-		const variationStyles = getVariationStylesWithRefValues(
+		const variationStyles = getVariationStyle(
 			{
 				settings: globalSettings,
 				styles: globalStyles,

package/src/hooks/border.js

@@ -29,6 +29,7 @@ import {
 	useHasBorderPanelControls,
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { store as blockEditorStore } from '../store';
 import {
 	getStyleForState,
@@ -149,19 +150,32 @@ function BordersInspectorControl( { label, children, resetAllFilter } ) {
 export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	const selectedState = useBlockStyleState();
 	const isEnabled = useHasBorderPanel( settings );
-	const { style, borderColor } = useSelect(
+	const { style, borderColor, className } = useSelect(
 		( select ) => {
 			// Early return to avoid subscription when disabled
 			if ( ! isEnabled ) {
 				return {};
 			}
-			const { style: _style, borderColor: _borderColor } =
-				select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-			return { style: _style, borderColor: _borderColor };
+			const {
+				style: _style,
+				borderColor: _borderColor,
+				className: _className,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				borderColor: _borderColor,
+				className: _className,
+			};
 		},
 		[ clientId, isEnabled ]
 	);
 
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
+
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
 	const value = useMemo( () => {
@@ -204,6 +218,7 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/custom-css.js

@@ -10,7 +10,7 @@ import InspectorControls from '../components/inspector-controls';
 import AdvancedPanel, {
 	validateCSS,
 } from '../components/global-styles/advanced-panel';
-import { cleanEmptyObject, useStyleOverride } from './utils';
+import { cleanEmptyObject, usePrivateStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 
 // Stable reference for useInstanceId.
@@ -96,11 +96,12 @@ function CustomCSSEdit( { clientId, name, setAttributes } ) {
  * Hook to handle custom CSS for a block in the editor.
  * Generates a unique class and applies scoped CSS via style override.
  *
- * @param {Object} props       Block props.
- * @param {Object} props.style Block style attribute.
+ * @param {Object} props          Block props.
+ * @param {Object} props.style    Block style attribute.
+ * @param {string} props.clientId Block client ID.
  * @return {Object} Block props including className for custom CSS scoping.
  */
-function useBlockProps( { style } ) {
+function useBlockProps( { style, clientId } ) {
 	const customCSS = style?.css;
 
 	// Validate CSS is non-empty and passes validation checks.
@@ -150,8 +151,16 @@ function useBlockProps( { style } ) {
 		return processCSSNesting( customCSS, customCSSSelector );
 	}, [ customCSS, customCSSSelector, isValidCSS ] );
 
-	// Inject the CSS via style override.
-	useStyleOverride( { css: transformedCSS } );
+	// Inject the CSS via style override. The type makes EditorStyles print
+	// it after all other overrides (e.g. block style variations), matching
+	// the front end where the custom CSS stylesheet is printed last. The
+	// clientId keeps custom CSS overrides in block order relative to each
+	// other, which is the order they print in on the front end.
+	usePrivateStyleOverride( {
+		css: transformedCSS,
+		clientId,
+		__unstableType: 'custom-css',
+	} );
 
 	// Only add the class if there's valid custom CSS.
 	if ( ! isValidCSS ) {

package/src/hooks/dimensions.js

@@ -19,6 +19,7 @@ import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
@@ -78,17 +79,28 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const selectedState = useBlockStyleState();
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 	const isEnabled = useHasDimensionsPanel( settings, selectedState );
-	const style = useSelect(
+	const { style, className } = useSelect(
 		( select ) => {
 			// Early return to avoid subscription when disabled
 			if ( ! isEnabled ) {
-				return undefined;
+				return {};
 			}
-			return select( blockEditorStore ).getBlockAttributes( clientId )
-				?.style;
+			const attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: attributes.style,
+				className: attributes.className,
+			};
 		},
 		[ clientId, isEnabled ]
 	);
+
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
+
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const value = isStateSelected
 		? getStyleForState( style, selectedState )
@@ -139,6 +151,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				onVisualize={
 					isStateSelected ? undefined : setVisualizedProperty
 				}
+				inheritedValue={ inheritedValue }
 			/>
 			{ ! isStateSelected &&
 				!! settings?.spacing?.padding &&

package/src/hooks/duotone.js

@@ -15,7 +15,11 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
-import { getBlockSelector } from '@wordpress/global-styles-engine';
+import { useSelect } from '@wordpress/data';
+import {
+	getBlockSelector,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -26,20 +30,21 @@ import {
 	__experimentalDuotoneControl as DuotoneControl,
 	useSettings,
 } from '../components';
-import {
-	getDuotoneFilter,
-	getDuotoneStylesheet,
-	getDuotoneUnsetStylesheet,
-} from '../components/duotone/utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
 	useBlockSettings,
 	usePrivateStyleOverride,
 } from './utils';
+import { unlock } from '../lock-unlock';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { store as blockEditorStore } from '../store';
+
+const { getDuotoneFilter, getDuotoneStylesheet, getDuotoneUnsetStylesheet } =
+	unlock( globalStylesEnginePrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -98,11 +103,21 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanelPure( { style, setAttributes, name } ) {
+function DuotonePanelPure( { style, setAttributes, name, clientId } ) {
 	const duotoneStyle = style?.color?.duotone;
 	const settings = useBlockSettings( name );
 	const blockEditingMode = useBlockEditingMode();
 
+	const className = useSelect(
+		( select ) =>
+			clientId
+				? select( blockEditorStore ).getBlockAttributes( clientId )
+						?.className
+				: undefined,
+		[ clientId ]
+	);
+	const { value: inheritedValue } = useResolvedStyle( name, className );
+
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
 		defaultSetting: 'color.defaultDuotone',
@@ -137,7 +152,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 		<>
 			<InspectorControls group="filter">
 				<StylesFiltersPanel
-					value={ { filter: { duotone: duotonePresetOrColors } } }
+					value={ {
+						filter: { duotone: duotonePresetOrColors },
+					} }
 					onChange={ ( newDuotone ) => {
 						const newStyle = {
 							...style,
@@ -150,6 +167,7 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 						} );
 					} }
 					settings={ settings }
+					inheritedValue={ inheritedValue }
 				/>
 			</InspectorControls>
 			<BlockControls group="block" __experimentalShareWithChildBlocks>

package/src/hooks/elements.js

@@ -14,6 +14,7 @@ import {
 	useHasColorPanel,
 	default as StylesColorPanel,
 } from '../components/global-styles/color-panel';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 import { COLOR_SUPPORT_KEY } from './color';
@@ -59,18 +60,27 @@ export function ElementsEdit( {
 	const selectedState = useBlockStyleState();
 	const isEnabled = useHasColorPanel( settings );
 
-	const style = useSelect(
+	const { style, className } = useSelect(
 		( select ) => {
 			if ( ! isEnabled ) {
-				return undefined;
+				return {};
 			}
 			const attributes =
 				select( blockEditorStore ).getBlockAttributes( clientId );
-			return attributes?.style;
+			return {
+				style: attributes?.style,
+				className: attributes?.className,
+			};
 		},
 		[ clientId, isEnabled ]
 	);
 
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
+
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
 	const value = useMemo( () => {
@@ -93,7 +103,6 @@ export function ElementsEdit( {
 	// 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 !==
@@ -135,6 +144,7 @@ export function ElementsEdit( {
 			defaultControls={ defaultControls }
 			label={ label }
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/grid-visualizer.js

@@ -21,45 +21,48 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isVisible, blockVisibility, deviceType } = useSelect(
-		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				isDraggingBlocks,
-				getTemplateLock,
-				getBlockEditingMode,
-				getBlockAttributes,
-				getSettings,
-			} = select( blockEditorStore );
+	const { isVisible, blockVisibility, deviceType, viewportSettings } =
+		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 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,
+					viewportSettings:
+						settings?.__experimentalFeatures?.viewport,
+				};
+			},
+			[ clientId ]
+		);
 
 	// Get the block's DOM element to derive the canvas iframe window,
 	// so viewport detection matches the actual block rendering context
@@ -71,6 +74,7 @@ function GridTools( { clientId, layout } ) {
 		blockVisibility,
 		deviceType,
 		view: canvasView,
+		viewportSettings,
 	} );
 
 	// Check whether any ancestor is hidden at the viewport actually detected

package/src/hooks/layout-child.js

@@ -4,6 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -26,13 +27,10 @@ import {
 	getStyleForState,
 } from './block-style-state';
 
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
+
 // 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)',
-};
 
 // These are the serialized `selfStretch` values. `max` used to be called
 // "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
@@ -253,10 +251,11 @@ export function getResponsiveChildLayoutStyles( {
 	style = {},
 	selector,
 	parentLayout = {},
+	viewportSettings,
 } ) {
 	const baseLayout = style?.layout ?? {};
 
-	return Object.entries( RESPONSIVE_BREAKPOINTS )
+	return Object.entries( getResponsiveMediaQueries( viewportSettings ) )
 		.map( ( [ viewport, mediaQuery ] ) => {
 			const viewportLayout = getStyleForState( style, {
 				viewport,
@@ -282,9 +281,15 @@ export function getResponsiveChildLayoutStyles( {
 }
 
 function useBlockPropsChildLayoutStyles( { style } ) {
-	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
-		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
-	} );
+	const { shouldRenderChildLayoutStyles, viewportSettings } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				shouldRenderChildLayoutStyles: ! settings.disableLayoutStyles,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
+			};
+		}
+	);
 	const layout = style?.layout ?? {};
 	const { columnStart, rowStart, columnSpan, rowSpan } = layout;
 	const parentLayout = useLayout() || {};
@@ -320,6 +325,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				style,
 				selector,
 				parentLayout,
+				viewportSettings,
 			} ),
 		].join( '' );
 	}
@@ -373,6 +379,7 @@ function GridTools( {
 		parentBlockVisibility,
 		blockBlockVisibility,
 		deviceType,
+		viewportSettings,
 		isChildBlockAGrid,
 	} = useSelect(
 		( select ) => {
@@ -411,6 +418,7 @@ function GridTools( {
 				blockBlockVisibility:
 					blockAttributes?.metadata?.blockVisibility,
 				deviceType: currentDeviceType,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
@@ -431,6 +439,7 @@ function GridTools( {
 		blockVisibility: parentBlockVisibility,
 		deviceType,
 		view: canvasView,
+		viewportSettings,
 	} );
 
 	// Check whether any ancestor of the parent grid is hidden at the viewport
@@ -457,6 +466,7 @@ function GridTools( {
 			blockVisibility: blockBlockVisibility,
 			deviceType,
 			view: canvasView,
+			viewportSettings,
 		} );
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.