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

package/src/hooks/background.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { getBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import { cleanEmptyObject } from './utils';
 import { extractPresetSlug } from '../utils/color-values';
@@ -24,13 +13,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,30 +168,30 @@ 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 backgroundGradientSupported = hasBackgroundSupport(
+	const { value: inheritedValue } = useResolvedStyle(
 		name,
-		'gradient'
+		className,
+		selectedState
 	);
 
+	const backgroundGradientSupported =
+		hasBackgroundSupport( name, 'gradient' ) &&
+		!! settings?.background?.gradient;
+
 	const colorSupport = getBlockSupport( name, 'color' );
 	const hasColorBackgroundSupport =
 		colorSupport && colorSupport.background !== false;
@@ -234,13 +223,15 @@ export function BackgroundImagePanel( {
 			},
 		} ),
 	};
+	const value = isStateSelected
+		? getStyleForState( style, selectedState )
+		: styleValue;
 
 	// Skipped for gradients, which can't be reliably evaluated for contrast.
 	const enableContrastChecking =
-		! isStateSelected &&
-		! styleValue?.color?.gradient &&
-		! styleValue?.background?.gradient &&
-		!! styleValue?.color?.background &&
+		! value?.color?.gradient &&
+		! value?.background?.gradient &&
+		!! value?.color?.background &&
 		( settings?.color?.text || settings?.color?.link ) &&
 		false !== getBlockSupport( name, [ 'color', 'enableContrastChecker' ] );
 
@@ -379,7 +370,6 @@ export function BackgroundImagePanel( {
 
 	return (
 		<StylesBackgroundPanel
-			inheritedValue={ inheritedValue }
 			as={ Wrapper }
 			panelId={ clientId }
 			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
@@ -392,6 +382,7 @@ export function BackgroundImagePanel( {
 					: styleValue
 			}
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/block-bindings.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import {
@@ -11,10 +8,6 @@ import {
 import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import {
 	BlockBindingsAttributeControl,
 	useBlockBindingsUtils,

package/src/hooks/block-fields/fields-dropdown-menu.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { moreVertical, check } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
 
 export default function FieldsDropdownMenu( {

package/src/hooks/block-fields/index.js

@@ -23,7 +23,6 @@ const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 import FieldsDropdownMenu from './fields-dropdown-menu';
 import { PrivateBlockContext } from '../../components/block-list/private-block-context';
 import InspectorControls from '../../components/inspector-controls/fill';
-
 // controls
 import RichText from './rich-text';
 import Media from './media';

package/src/hooks/block-fields/link/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Icon as WCIcon,
@@ -11,10 +8,6 @@ import { useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { link } from '@wordpress/icons';
 import { prependHTTP } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import LinkControl from '../../../components/link-control';
 import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
 

package/src/hooks/block-fields/link/styles.scss

@@ -3,12 +3,7 @@
 
 .block-editor-content-only-controls__link {
 	width: 100%;
-	box-shadow: inset 0 0 0 $border-width $gray-400;
-
-	&:focus:not(:disabled) {
-		// Allow smooth transition between focused and unfocused box-shadow states.
-		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
+	border-color: $gray-400;
 }
 
 .block-editor-content-only-controls__link-row {

package/src/hooks/block-fields/media/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Icon as WCIcon,
@@ -17,10 +14,6 @@ import {
 	video as videoIcon,
 	reset as resetIcon,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import MediaReplaceFlow from '../../../components/media-replace-flow';
 import MediaUploadCheck from '../../../components/media-upload/check';
 import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';

package/src/hooks/block-fields/media/styles.scss

@@ -3,13 +3,8 @@
 
 .block-editor-content-only-controls__media {
 	width: 100%;
-	box-shadow: inset 0 0 0 $border-width $gray-400;
+	border-color: $gray-400;
 	padding-right: $grid-unit-40;
-
-	&:focus:not(:disabled) {
-		// Allow smooth transition between focused and unfocused box-shadow states.
-		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
 }
 
 .block-editor-content-only-controls__media-replace-flow {

package/src/hooks/block-fields/rich-text/index.js

@@ -1,25 +1,15 @@
-/**
- * WordPress dependencies
- */
 import { BaseControl, useBaseControlProps } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
 import { useRegistry } from '@wordpress/data';
 import { useMemo, useRef, useState } from '@wordpress/element';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
 import { getAllowedFormats } from '../../../components/rich-text/utils';
 import { useEventListeners } from '../../../components/rich-text/event-listeners';
 import FormatEdit from '../../../components/rich-text/format-edit';
-import {
-	keyboardShortcutContext,
-	inputEventContext,
-} from '../../../components/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { useRichText } = unlock( richTextPrivateApis );
+const { useRichText, KeyboardShortcutContext, InputEventContext } =
+	unlock( richTextPrivateApis );
 
 export default function RichTextControl( {
 	data,
@@ -84,8 +74,8 @@ export default function RichTextControl( {
 	return (
 		<>
 			{ isSelected && (
-				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
-					<inputEventContext.Provider value={ inputEvents }>
+				<KeyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<InputEventContext.Provider value={ inputEvents }>
 						<div>
 							<FormatEdit
 								value={ value }
@@ -96,8 +86,8 @@ export default function RichTextControl( {
 								isVisible={ false }
 							/>
 						</div>
-					</inputEventContext.Provider>
-				</keyboardShortcutContext.Provider>
+					</InputEventContext.Provider>
+				</KeyboardShortcutContext.Provider>
 			) }
 			<BaseControl { ...baseControlProps }>
 				<div

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-fields/use-inspector-popover-placement.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useViewportMatch } from '@wordpress/compose';
 
 export function useInspectorPopoverPlacement(

package/src/hooks/block-hooks.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Fragment, useMemo } from '@wordpress/element';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 

package/src/hooks/block-renaming.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 

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

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { cleanEmptyObject } from './utils';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 

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

@@ -1,20 +1,18 @@
-/**
- * WordPress dependencies
- */
 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';
-
-/**
- * Internal dependencies
- */
+import {
+	toStyles,
+	getBlockSelectors,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
 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 +173,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 +183,7 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	}, [] );
 
 	return useMemo( () => {
-		const variationStyles = getVariationStylesWithRefValues(
+		const variationStyles = getVariationStyle(
 			{
 				settings: globalSettings,
 				styles: globalStyles,

package/src/hooks/border.js

@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
@@ -29,6 +18,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 +139,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 +207,7 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/color.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import {
 	getColorClassName,
 	getColorObjectByAttributeValues,

package/src/hooks/compat.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { hasBlockSupport } from '@wordpress/blocks';
 import { addFilter } from '@wordpress/hooks';
 

package/src/hooks/contrast-checker.js

@@ -1,17 +1,9 @@
-/**
- * WordPress dependencies
- */
 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 { getContrastWarning } from '../components/contrast-checker';
-
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedValue( node, property ) {

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

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { InspectorControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 

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 ) {