@wordpress/block-editor 16.0.0 → 16.1.0

package/src/hooks/background.js

@@ -24,13 +24,13 @@ import {
 	hasBackgroundImageValue,
 	hasBackgroundGradientValue,
 } from '../components/global-styles/background-panel';
-import { globalStylesDataKey } from '../store/private-keys';
 import {
 	getStyleForState,
 	isDefaultBlockStyleState,
 	setStyleForState,
 	useBlockStyleState,
 } from './block-style-state';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -179,24 +179,25 @@ export function BackgroundImagePanel( {
 	asWrapper,
 } ) {
 	const selectedState = useBlockStyleState();
-	const { style, className, backgroundColor, gradient, inheritedValue } =
-		useSelect(
-			( select ) => {
-				const { getBlockAttributes, getSettings } =
-					select( blockEditorStore );
-				const _settings = getSettings();
-				const blockAttributes = getBlockAttributes( clientId );
-				return {
-					style: blockAttributes?.style,
-					className: blockAttributes?.className,
-					backgroundColor: blockAttributes?.backgroundColor,
-					gradient: blockAttributes?.gradient,
-					inheritedValue:
-						_settings[ globalStylesDataKey ]?.blocks?.[ name ],
-				};
-			},
-			[ clientId, name ]
-		);
+	const { style, className, backgroundColor, gradient } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+			const blockAttributes = getBlockAttributes( clientId );
+			return {
+				style: blockAttributes?.style,
+				className: blockAttributes?.className,
+				backgroundColor: blockAttributes?.backgroundColor,
+				gradient: blockAttributes?.gradient,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
 
 	const backgroundGradientSupported = hasBackgroundSupport(
 		name,
@@ -381,15 +382,19 @@ export function BackgroundImagePanel( {
 
 	return (
 		<StylesBackgroundPanel
-			inheritedValue={ inheritedValue }
 			as={ Wrapper }
 			panelId={ clientId }
 			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
-			value={ value }
+			value={
+				isStateSelected
+					? getStyleForState( style, selectedState )
+					: styleValue
+			}
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/block-fields/rich-text/styles.scss

@@ -8,7 +8,7 @@
 	margin: 0;
 	background: $white;
 	color: $gray-900;
-	@include input-control( var(--wp-admin-theme-color, #3858e9) );
+	@include input-control;
 	border-color: $gray-600;
 
 	&::placeholder {

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( () => {
@@ -134,6 +144,7 @@ export function ElementsEdit( {
 			defaultControls={ defaultControls }
 			label={ label }
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/line-height.js

@@ -41,7 +41,6 @@ export function LineHeightEdit( props ) {
 			__unstableInputWidth="100%"
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
-			size="__unstable-large"
 		/>
 	);
 }