t-hamano · Jul 20, 2026 · Jun 29, 2026 · Jun 29, 2026 · Jun 30, 2026 · Jun 30, 2026
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Inspector controls in the standard block-supports panels (Typography, Dimensions, Border, Color, Background, Filters) now reflect the value a block inherits from Global Styles when no local override is set. Inherited controls show that value at rest (as a placeholder, preselected option, or resolved value) and mark the label with a dotted underline; setting a local override reveals a reset affordance that clears the override back to the inherited value ([#77894](https://github.com/WordPress/gutenberg/pull/77894)).
+
 ## 16.0.0 (2026-07-14)
 
 ### Internal

@@ -406,6 +406,8 @@ _Parameters_
 -   _props.label_ `?string`: A label for the control.
 -   _props.onChange_ `( value: string ) => void`: Called when the dimension value changes.
 -   _props.value_ `string`: The current dimension value.
+-   _props.placeholder_ `?string`: Placeholder text for the custom-value input.
+-   _props.className_ `?string`: Additional CSS class on the wrapping fieldset.
 -   _props.dimensionSizes_ `?Object`: Optional dimension size presets. Falls back to settings from the store.
 
 _Returns_

@@ -39,6 +39,7 @@ import { getResolvedValue } from '@wordpress/global-styles-engine';
  * Internal dependencies
  */
 import { hasBackgroundImageValue } from '../global-styles/background-panel';
+import { InheritanceResetButton } from '../global-styles/inheritance';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
@@ -193,6 +194,7 @@ function BackgroundControlsPanel( {
 	onToggle: onToggleCallback = noop,
 	hasImageValue,
 	onReset,
+	hasLocalOverride,
 	containerRef,
 } ) {
 	if ( ! hasImageValue ) {
@@ -225,24 +227,38 @@ function BackgroundControlsPanel( {
 							as="button"
 							onToggleCallback={ onToggleCallback }
 						/>
-						{ onReset && (
-							<Button
-								__next40pxDefaultSize
-								label={ __( 'Reset' ) }
-								className="block-editor-global-styles-background-panel__reset"
-								size="small"
-								icon={ resetIcon }
-								onClick={ () => {
-									onReset();
-									// Close the dropdown if open.
-									if ( isOpen ) {
-										onToggle();
-									}
-									// Focus the toggle button.
-									focusToggleButton( containerRef );
-								} }
-							/>
-						) }
+						{ onReset &&
+							( hasLocalOverride ? (
+								<InheritanceResetButton
+									className="block-editor-global-styles-background-panel__reset"
+									onResetToInherited={ () => {
+										onReset();
+										// Close the dropdown if open.
+										if ( isOpen ) {
+											onToggle();
+										}
+										// Focus the toggle button.
+										focusToggleButton( containerRef );
+									} }
+								/>
+							) : (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									className="block-editor-global-styles-background-panel__reset"
+									size="small"
+									icon={ resetIcon }
+									onClick={ () => {
+										onReset();
+										// Close the dropdown if open.
+										if ( isOpen ) {
+											onToggle();
+										}
+										// Focus the toggle button.
+										focusToggleButton( containerRef );
+									} }
+								/>
+							) ) }
 					</>
 				);
 			} }
@@ -434,22 +450,29 @@ function BackgroundSizeControls( {
 	inheritedValue,
 	defaultValues,
 } ) {
-	const sizeValue =
-		style?.background?.backgroundSize ||
-		inheritedValue?.background?.backgroundSize;
-	const repeatValue =
-		style?.background?.backgroundRepeat ||
-		inheritedValue?.background?.backgroundRepeat;
+	/*
+	 * Read local and inherited values separately so each sub-control can
+	 * show the inherited value while marking the control as inherited.
+	 */
+	const localSizeValue = style?.background?.backgroundSize;
+	const localRepeatValue = style?.background?.backgroundRepeat;
+	const localPositionValue = style?.background?.backgroundPosition;
+	const localAttachmentValue = style?.background?.backgroundAttachment;
+	const inheritedSizeValue = inheritedValue?.background?.backgroundSize;
+	const inheritedRepeatValue = inheritedValue?.background?.backgroundRepeat;
+	const inheritedPositionValue =
+		inheritedValue?.background?.backgroundPosition;
+	const inheritedAttachmentValue =
+		inheritedValue?.background?.backgroundAttachment;
+
+	const sizeValue = localSizeValue || inheritedSizeValue;
+	const repeatValue = localRepeatValue || inheritedRepeatValue;
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
 	const isUploadedImage = style?.background?.backgroundImage?.id;
-	const positionValue =
-		style?.background?.backgroundPosition ||
-		inheritedValue?.background?.backgroundPosition;
-	const attachmentValue =
-		style?.background?.backgroundAttachment ||
-		inheritedValue?.background?.backgroundAttachment;
+	const positionValue = localPositionValue || inheritedPositionValue;
+	const attachmentValue = localAttachmentValue || inheritedAttachmentValue;
 
 	/*
 	 * Set default values for uploaded images.
@@ -642,12 +665,10 @@ export default function BackgroundImagePanel( {
 	inheritedValue = value,
 	settings,
 	defaultValues = {},
+	showInheritanceLabelIndicators = true,
 } ) {
 	/*
-	 * Resolve any inherited "ref" pointers.
-	 * Should the block editor need resolved, inherited values
-	 * across all controls, this could be abstracted into a hook,
-	 * e.g., useResolveGlobalStyle
+	 * Resolve inherited `ref` pointers for background controls.
 	 */
 	const { globalStyles, _links } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -681,13 +702,25 @@ export default function BackgroundImagePanel( {
 	}, [ globalStyles, _links, inheritedValue ] );
 
 	const resetBackground = () =>
-		onChange( setImmutably( value, [ 'background' ], {} ) );
+		onChange(
+			setImmutably( value, [ 'background' ], {
+				gradient: value?.background?.gradient,
+			} )
+		);
 
 	const { title, url } = value?.background?.backgroundImage || {
 		...resolvedInheritedValue?.background?.backgroundImage,
 	};
+	const localHasImageValue = hasBackgroundImageValue( value );
 	const hasImageValue =
-		hasBackgroundImageValue( value ) ||
+		localHasImageValue || hasBackgroundImageValue( resolvedInheritedValue );
+	// The blue-dot local-override affordance is part of the inherited-value
+	// treatment. When that treatment is disabled (e.g. in the Global Styles
+	// panel, where the edited value *is* the global style rather than a local
+	// override of it), fall back to the plain reset control.
+	const hasLocalOverride =
+		showInheritanceLabelIndicators &&
+		localHasImageValue &&
 		hasBackgroundImageValue( resolvedInheritedValue );
 
 	const imageValue =
@@ -721,7 +754,8 @@ export default function BackgroundImagePanel( {
 					url={ url }
 					onToggle={ setIsDropDownOpen }
 					hasImageValue={ hasImageValue }
-					onReset={ resetBackground }
+					hasLocalOverride={ hasLocalOverride }
+					onReset={ localHasImageValue ? resetBackground : undefined }
 					containerRef={ containerRef }
 				>
 					<VStack spacing={ 3 } className="single-column">

@@ -97,12 +97,25 @@
 		transition: opacity 0.1s ease-in-out;
 	}
 
+	&.has-local-override-from-global-styles__reset {
+		position: absolute;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-block: 0;
+		margin-inline: 0 $grid-unit;
+		opacity: 1;
+	}
+
 	&.block-editor-global-styles-background-panel__reset {
 		border-radius: $radius-small;
 	}
 
 	.block-editor-global-styles-background-panel__dropdown-toggle:hover + &,
 	&:focus,
+	&:focus-within,
 	&:hover {
 		opacity: 1;
 	}

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -18,7 +19,9 @@ import useStylesForBlocks from '../block-styles/use-styles-for-block';
 import { replaceActiveStyle } from '../block-styles/utils';
 import { store as blockEditorStore } from '../../store';
 import { globalStylesDataKey } from '../../store/private-keys';
-import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+import { unlock } from '../../lock-unlock';
+
+const { getVariationStyle } = unlock( globalStylesEnginePrivateApis );
 
 const styleIcon = (
 	<SVG
@@ -59,7 +62,7 @@ function SwitchSectionStyle( { clientId } ) {
 
 	// Get the background color for the active style
 	const activeStyleBackground = activeStyle?.name
-		? getVariationStylesWithRefValues(
+		? getVariationStyle(
 				{
 					settings: globalSettings,
 					styles: globalStyles,

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -58,6 +63,8 @@ function useDimensionSizes( presets ) {
  * @param {?string}                    props.label          A label for the control.
  * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.
  * @param {string}                     props.value          The current dimension value.
+ * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.
+ * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.
  * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.
  *
  * @return {Component} The component to be rendered.
@@ -66,6 +73,8 @@ export default function DimensionControl( {
 	label = __( 'Dimension' ),
 	onChange,
 	value,
+	placeholder,
+	className,
 	dimensionSizes: dimensionSizesProp,
 } ) {
 	const [ dimensionSizesFromSettings, availableUnits ] = useSettings(
@@ -146,7 +155,9 @@ export default function DimensionControl( {
 	};
 
 	return (
-		<fieldset className="block-editor-dimension-control">
+		<fieldset
+			className={ clsx( 'block-editor-dimension-control', className ) }
+		>
 			<BaseControl.VisualLabel as="legend">
 				{ label }
 			</BaseControl.VisualLabel>
@@ -157,6 +168,7 @@ export default function DimensionControl( {
 				minimumCustomValue={ 0 }
 				onChange={ onChange }
 				onUnitChange={ handleUnitChange }
+				placeholder={ placeholder }
 				presets={ options }
 				presetType="dimension"
 				selectedUnit={ selectedUnit }

@@ -1,15 +1,13 @@
 /**
  * WordPress dependencies
  */
-import {
-	SelectControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import { useSettings } from '../use-settings';
+import { InheritanceToolsPanelItem } from '../global-styles/inheritance';
 
 /**
  * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
@@ -29,6 +27,9 @@ import { useSettings } from '../use-settings';
  * @property {SelectControlProps[]}         [options]          Aspect ratio options.
  * @property {string}                       [defaultValue]     Default aspect ratio value.
  * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ * @property {string}                       [className]        Additional CSS class on the wrapping panel item.
+ * @property {boolean}                      [isInherited]      Whether the control is displaying an inherited Global Styles value.
+ * @property {boolean}                      [hasLocalOverride] Whether a local value is overriding an inherited Global Styles value.
  */
 
 export default function AspectRatioTool( {
@@ -39,6 +40,9 @@ export default function AspectRatioTool( {
 	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
+	className,
+	isInherited,
+	hasLocalOverride,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
@@ -78,7 +82,10 @@ export default function AspectRatioTool( {
 	];
 
 	return (
-		<ToolsPanelItem
+		<InheritanceToolsPanelItem
+			className={ className }
+			isInherited={ isInherited }
+			hasLocalOverride={ hasLocalOverride }
 			hasValue={
 				hasValue ? hasValue : () => displayValue !== defaultValue
 			}
@@ -93,6 +100,6 @@ export default function AspectRatioTool( {
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
 			/>
-		</ToolsPanelItem>
+		</InheritanceToolsPanelItem>
 	);
 }