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

package/src/components/global-styles/background-panel.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -21,6 +18,11 @@ import {
 	extractPresetSlug,
 	encodeColorValueWithPalette,
 } from '../../utils/color-values';
+import {
+	getInheritanceProps,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
@@ -168,6 +170,7 @@ export default function BackgroundImagePanel( {
 	defaultValues = {},
 	headerLabel = __( 'Background' ),
 	contrastWarning,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const {
 		colors,
@@ -259,6 +262,9 @@ export default function BackgroundImagePanel( {
 		onChange( newValue );
 	};
 
+	// Non-cascading root values are already dropped from `inheritedValue` by
+	// the builder, so inherited reads below are direct.
+
 	// Background color (written to `color.background`).
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
 	const userBackgroundColor = decodeValue( value?.color?.background );
@@ -291,11 +297,11 @@ export default function BackgroundImagePanel( {
 	// Legacy `color.gradient` setters.
 	const legacyColorGradient = decodeValue( inheritedValue?.color?.gradient );
 	const userLegacyColorGradient = decodeValue( value?.color?.gradient );
-	const setLegacyColorGradient = ( newGradient ) => {
+	const setLegacyColorGradient = ( newGradient, newSlug ) => {
 		const newValue = setImmutably(
 			value,
 			[ 'color', 'gradient' ],
-			encodeGradientValue( newGradient )
+			encodeGradientValue( newGradient, newSlug )
 		);
 		newValue.color.background = undefined;
 		onChange( newValue );
@@ -317,16 +323,31 @@ export default function BackgroundImagePanel( {
 	// Set gradient value, encoding preset matches as slug references.
 	// Also clear color.gradient to migrate from the legacy location,
 	// matching the block inspector behavior in hooks/background.js.
-	const setGradient = ( newGradient ) => {
+	const setGradient = ( newGradient, newSlug ) => {
 		let newValue = setImmutably(
 			value,
 			[ 'background', 'gradient' ],
-			encodeGradientValue( newGradient )
+			encodeGradientValue( newGradient, newSlug )
 		);
 		newValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );
 		onChange( newValue );
 	};
 
+	const inheritanceProps = ( isInherited, hasLocalOverride, classNames ) =>
+		showInheritanceLabelIndicators
+			? getInheritanceProps( isInherited, hasLocalOverride, classNames )
+			: { className: classNames };
+
+	// The inherited value arrives already resolved (refs + theme-file pointers)
+	// with non-cascading root values dropped, so a presence check drives the
+	// label affordance and matches what `BackgroundImageControl` renders.
+	const inheritedBackgroundImage = hasBackgroundImageValue( {
+		background: {
+			backgroundImage: inheritedValue?.background?.backgroundImage,
+		},
+	} );
+	const hasLocalBackgroundImage = hasBackgroundImageValue( value );
+
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -336,8 +357,13 @@ export default function BackgroundImagePanel( {
 			headerLabel={ headerLabel }
 		>
 			{ showBackgroundImageControl && (
-				<ToolsPanelItem
-					className="block-editor-color-gradient-item"
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						inheritedBackgroundImage && ! hasLocalBackgroundImage,
+						hasLocalBackgroundImage && inheritedBackgroundImage,
+						'block-editor-color-gradient-item'
+					) }
+					showLocalOverrideActionsInLabel={ false }
 					hasValue={ () => hasBackgroundImageValue( value ) }
 					label={ __( 'Image' ) }
 					onDeselect={ resetBackground }
@@ -351,8 +377,11 @@ export default function BackgroundImagePanel( {
 						inheritedValue={ inheritedValue }
 						defaultControls={ defaultControls }
 						defaultValues={ defaultValues }
+						showInheritanceLabelIndicators={
+							showInheritanceLabelIndicators
+						}
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showBackgroundColorControl && (
 				<ColorGradientDropdownItem
@@ -362,30 +391,36 @@ export default function BackgroundImagePanel( {
 					isShownByDefault={ defaultControls.backgroundColor }
 					indicators={ [ userBackgroundColor ?? backgroundColor ] }
 					contrastWarning={ contrastWarning }
+					showInheritanceLabelIndicators={
+						showInheritanceLabelIndicators
+					}
+					isPlaceholder={
+						userBackgroundColor === undefined &&
+						backgroundColor !== undefined
+					}
+					hasInheritedValue={ backgroundColor !== undefined }
 					tabs={ [
 						{
 							key: 'background',
 							label: __( 'Color' ),
-							inheritedValue:
-								userBackgroundColor ?? backgroundColor,
-							// Resolve the slug from the same source as the
-							// displayed value (user value first, then the
-							// inherited fallback). For a block instance the
-							// selection lives in `value` while `inheritedValue`
-							// only holds the global styles fallback, so reading
-							// the slug from `inheritedValue` alone would miss it
-							// and two same-hex presets would both appear selected.
-							inheritedSlug:
-								extractPresetSlug(
-									value?.color?.background,
-									'color'
-								) ??
-								extractPresetSlug(
-									inheritedValue?.color?.background,
-									'color'
-								),
+							inheritedValue: backgroundColor,
+							// The picker selects by slug: `userSlug` when the
+							// block has its own value, otherwise
+							// `inheritedSlug`. Hex matching would mark two
+							// same-hex presets as both selected.
+							inheritedSlug: extractPresetSlug(
+								inheritedValue?.color?.background,
+								'color'
+							),
+							userSlug: extractPresetSlug(
+								value?.color?.background,
+								'color'
+							),
 							setValue: setBackgroundColor,
 							userValue: userBackgroundColor,
+							isPlaceholder:
+								userBackgroundColor === undefined &&
+								backgroundColor !== undefined,
 						},
 					] }
 					colorGradientControlSettings={ {
@@ -401,16 +436,36 @@ export default function BackgroundImagePanel( {
 					hasValue={ () => hasBackgroundGradientValue( value ) }
 					resetValue={ resetGradient }
 					isShownByDefault={ defaultControls.gradient }
-					indicators={ [ currentGradient ] }
+					indicators={ [ currentGradient ?? inheritedGradient ] }
+					showInheritanceLabelIndicators={
+						showInheritanceLabelIndicators
+					}
+					isPlaceholder={
+						currentGradient === undefined &&
+						inheritedGradient !== undefined
+					}
+					hasInheritedValue={ inheritedGradient !== undefined }
 					tabs={ [
 						{
 							key: 'gradient',
 							label: __( 'Gradient' ),
-							inheritedValue:
-								currentGradient ?? inheritedGradient,
+							inheritedValue: inheritedGradient,
+							inheritedSlug: extractPresetSlug(
+								inheritedValue?.background?.gradient ??
+									inheritedValue?.color?.gradient,
+								'gradient'
+							),
+							userSlug: extractPresetSlug(
+								value?.background?.gradient ??
+									value?.color?.gradient,
+								'gradient'
+							),
 							setValue: setGradient,
 							userValue: currentGradient,
 							isGradient: true,
+							isPlaceholder:
+								currentGradient === undefined &&
+								inheritedGradient !== undefined,
 						},
 					] }
 					colorGradientControlSettings={ {
@@ -429,15 +484,33 @@ export default function BackgroundImagePanel( {
 					indicators={ [
 						userLegacyColorGradient ?? legacyColorGradient,
 					] }
+					showInheritanceLabelIndicators={
+						showInheritanceLabelIndicators
+					}
+					isPlaceholder={
+						userLegacyColorGradient === undefined &&
+						legacyColorGradient !== undefined
+					}
+					hasInheritedValue={ legacyColorGradient !== undefined }
 					tabs={ [
 						{
 							key: 'gradient',
 							label: __( 'Gradient' ),
-							inheritedValue:
-								userLegacyColorGradient ?? legacyColorGradient,
+							inheritedValue: legacyColorGradient,
+							inheritedSlug: extractPresetSlug(
+								inheritedValue?.color?.gradient,
+								'gradient'
+							),
+							userSlug: extractPresetSlug(
+								value?.color?.gradient,
+								'gradient'
+							),
 							setValue: setLegacyColorGradient,
 							userValue: userLegacyColorGradient,
 							isGradient: true,
+							isPlaceholder:
+								userLegacyColorGradient === undefined &&
+								legacyColorGradient !== undefined,
 						},
 					] }
 					colorGradientControlSettings={ {

package/src/components/global-styles/border-panel.js

@@ -6,7 +6,6 @@ import {
 	__experimentalHasSplitBorders as hasSplitBorders,
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	BaseControl,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -22,6 +21,11 @@ import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
+import {
+	getInheritanceProps,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 export function useHasBorderPanel( settings ) {
 	const controls = Object.values( useHasBorderPanelControls( settings ) );
@@ -103,6 +107,7 @@ export default function BorderPanel( {
 	panelId,
 	name,
 	defaultControls = DEFAULT_CONTROLS,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const colors = useColorsPerOrigin( settings );
 	const areCustomSolidsEnabled = settings?.color?.custom;
@@ -110,6 +115,14 @@ export default function BorderPanel( {
 		( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
 		[ settings ]
 	);
+	// Always keep the layout className (e.g. `single-column`); only the
+	// inheritance treatment is gated on `showInheritanceLabelIndicators`.
+	const inheritanceProps = ( isInherited, hasLocalOverride, className ) =>
+		getInheritanceProps(
+			showInheritanceLabelIndicators && isInherited,
+			showInheritanceLabelIndicators && hasLocalOverride,
+			className
+		);
 	const encodeColorValue = ( colorValue ) => {
 		const allColors = colors.flatMap(
 			( { colors: originColors } ) => originColors
@@ -121,61 +134,141 @@ export default function BorderPanel( {
 			? 'var:preset|color|' + colorObject.slug
 			: colorValue;
 	};
-	const border = useMemo( () => {
-		if ( hasSplitBorders( inheritedValue?.border ) ) {
-			const borderValue = { ...inheritedValue?.border };
-			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
-				borderValue[ side ] = {
-					...borderValue[ side ],
-					color: decodeValue( borderValue[ side ]?.color ),
-				};
-			} );
-			return borderValue;
-		}
-		return {
-			...inheritedValue?.border,
-			color: inheritedValue?.border?.color
-				? decodeValue( inheritedValue?.border?.color )
-				: undefined,
-		};
-	}, [ inheritedValue?.border, decodeValue ] );
+	// Decode a `border` sub-tree (handles split borders + flat shape).
+	const decodeBorder = useCallback(
+		( source ) => {
+			if ( ! source ) {
+				return undefined;
+			}
+			if ( hasSplitBorders( source ) ) {
+				const out = { ...source };
+				[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+					out[ side ] = {
+						...out[ side ],
+						color: decodeValue( out[ side ]?.color ),
+					};
+				} );
+				return out;
+			}
+			return {
+				...source,
+				color: source.color ? decodeValue( source.color ) : undefined,
+			};
+		},
+		[ decodeValue ]
+	);
+	// Local-then-inherited: prefer the user's locally-set border (whether
+	// flat or split) when defined, otherwise fall back to the inherited
+	// Global Styles border. The merge happens at the sub-tree root, not
+	// at the leaf level — borders are commonly authored as a single
+	// affordance in the inspector, so partial leaf merges would be
+	// surprising.
+	const localBorder = useMemo(
+		() => decodeBorder( value?.border ),
+		[ value?.border, decodeBorder ]
+	);
+	const inheritedBorder = useMemo(
+		() => decodeBorder( inheritedValue?.border ),
+		[ inheritedValue?.border, decodeBorder ]
+	);
+	const isBorderPlaceholder =
+		! isDefinedBorder( value?.border ) &&
+		!! inheritedBorder &&
+		isDefinedBorder( inheritedBorder );
+	const border = isBorderPlaceholder ? inheritedBorder : localBorder;
 	const setBorder = ( newBorder ) =>
 		onChange( { ...value, border: newBorder } );
 	const showBorderColor = useHasBorderColorControl( settings );
 	const showBorderStyle = useHasBorderStyleControl( settings );
 	const showBorderWidth = useHasBorderWidthControl( settings );
 
-	// Border radius.
+	// Border radius. Display inherited values through the control's `values`
+	// prop when local values are empty so UnitControl can parse the numeric
+	// quantity and selected unit normally (e.g. `2.5em` -> `2.5` + `em`).
+	// `hasBorderRadius` remains local-only, so displaying the inherited value
+	// does not mark the ToolsPanel item as customised or commit on mount.
 	const showBorderRadius = useHasBorderRadiusControl( settings );
-	const borderRadiusValues = useMemo( () => {
-		if ( typeof inheritedValue?.border?.radius !== 'object' ) {
-			return decodeValue( inheritedValue?.border?.radius );
+	const localBorderRadius = useMemo( () => {
+		if ( typeof value?.border?.radius !== 'object' ) {
+			return decodeValue( value?.border?.radius );
+		}
+		return {
+			topLeft: decodeValue( value?.border?.radius?.topLeft ),
+			topRight: decodeValue( value?.border?.radius?.topRight ),
+			bottomLeft: decodeValue( value?.border?.radius?.bottomLeft ),
+			bottomRight: decodeValue( value?.border?.radius?.bottomRight ),
+		};
+	}, [ value?.border?.radius, decodeValue ] );
+	const inheritedBorderRadius = useMemo( () => {
+		const rawRadius = inheritedValue?.border?.radius;
+		if ( typeof rawRadius !== 'object' ) {
+			return decodeValue( rawRadius );
 		}
-
 		return {
-			topLeft: decodeValue( inheritedValue?.border?.radius?.topLeft ),
-			topRight: decodeValue( inheritedValue?.border?.radius?.topRight ),
-			bottomLeft: decodeValue(
-				inheritedValue?.border?.radius?.bottomLeft
-			),
-			bottomRight: decodeValue(
-				inheritedValue?.border?.radius?.bottomRight
-			),
+			topLeft: decodeValue( rawRadius?.topLeft ),
+			topRight: decodeValue( rawRadius?.topRight ),
+			bottomLeft: decodeValue( rawRadius?.bottomLeft ),
+			bottomRight: decodeValue( rawRadius?.bottomRight ),
 		};
 	}, [ inheritedValue?.border?.radius, decodeValue ] );
+	// Spread the local border, not the merged display value, or setting a
+	// radius bakes the inherited border into the local override. Mirror of
+	// the guard in `onBorderChange`.
 	const setBorderRadius = ( newBorderRadius ) =>
-		setBorder( { ...border, radius: newBorderRadius } );
+		setBorder( { ...value?.border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {
 		const borderValues = value?.border?.radius;
 		if ( typeof borderValues === 'object' ) {
-			return Object.entries( borderValues ).some( Boolean );
+			return Object.entries( borderValues ).some( ( [ , v ] ) => !! v );
 		}
 		return !! borderValues;
 	};
+	const isBorderRadiusPlaceholder =
+		! hasBorderRadius() &&
+		inheritedBorderRadius !== undefined &&
+		inheritedBorderRadius !== '';
+	// Build an object value so unlinked-mode shows per-corner inherited
+	// values. The control accepts either a string or an object; passing the
+	// object form is correct in both modes (the control collapses to the
+	// `all`/first corner in linked mode).
+	const borderRadius = useMemo( () => {
+		if ( ! isBorderRadiusPlaceholder ) {
+			return localBorderRadius;
+		}
+		if ( typeof inheritedBorderRadius === 'string' ) {
+			return inheritedBorderRadius;
+		}
+		const obj = inheritedBorderRadius;
+		if ( ! obj ) {
+			return localBorderRadius;
+		}
+		const all =
+			obj.topLeft &&
+			obj.topLeft === obj.topRight &&
+			obj.topLeft === obj.bottomLeft &&
+			obj.topLeft === obj.bottomRight
+				? obj.topLeft
+				: undefined;
+		return { all, ...obj };
+	}, [
+		isBorderRadiusPlaceholder,
+		localBorderRadius,
+		inheritedBorderRadius,
+	] );
 	const hasShadowControl = useHasShadowControl( settings );
 
-	// Shadow
-	const shadow = decodeValue( inheritedValue?.shadow );
+	// Shadow. At rest, the popover toggle button uses the placeholder
+	// treatment, and the popover preset list pre-selects the inherited shadow.
+	// The interceptor below recognises the user's "accept inherited" click as
+	// an explicit commit, mirroring the ToggleGroup pattern in the typography
+	// panel.
+	const localShadow = decodeValue( value?.shadow );
+	const inheritedShadow = decodeValue( inheritedValue?.shadow );
+	const isShadowPlaceholder =
+		localShadow === undefined &&
+		inheritedShadow !== undefined &&
+		inheritedShadow !== '';
+	const shadow = isShadowPlaceholder ? inheritedShadow : localShadow;
 	const shadowPresets = settings?.shadow?.presets ?? {};
 	const mergedShadowPresets =
 		shadowPresets.custom ??
@@ -195,8 +288,30 @@ export default function BorderPanel( {
 			)
 		);
 	};
+	// Display-without-commit interceptor for the shadow preset list. When the
+	// user is at the at-rest preselect (local is undefined, inherited is the
+	// active shadow), `ShadowPresets`' default toggle-off behaviour would
+	// interpret the click on the highlighted preset as `undefined` (clear).
+	// Re-route it to an explicit commit of the inherited value, so clicking
+	// the visible preselected preset is the user's "accept this inherited
+	// value" affordance.
+	const setShadowWithInheritedCommit = ( newValue ) => {
+		if ( isShadowPlaceholder && newValue === undefined ) {
+			setShadow( inheritedShadow );
+			return;
+		}
+		setShadow( newValue );
+	};
 	const hasShadow = () => !! value?.shadow;
 	const resetShadow = () => setShadow( undefined );
+	// A local override exists when the user has set a shadow that shadows an
+	// inherited one. Only then does the toggle render the blue-dot reset
+	// affordance (mirroring the color/gradient controls); a merely-inherited
+	// value at rest shows no reset button.
+	const hasShadowLocalOverride =
+		showInheritanceLabelIndicators &&
+		hasShadow() &&
+		inheritedShadow !== undefined;
 
 	const resetBorder = () => {
 		if ( hasBorderRadius() ) {
@@ -225,9 +340,22 @@ export default function BorderPanel( {
 		}
 
 		// As radius is maintained separately to color, style, and width
-		// maintain its value. Undefined values here will be cleaned when
+		// maintain its value. Read from `value` (local-only) rather than
+		// `border` (the merged display value), otherwise an inherited
+		// radius gets baked into the local override every time the
+		// user touches color/style/width — which both pollutes the
+		// stored attribute and causes the radius `ToolsPanelItem` to
+		// flip into the `has-local-override-from-global-styles` state
+		// even though the user never customised the radius. The
+		// `radius` key must come after the spread so it wins over any
+		// `radius` field forwarded by `BorderBoxControl`'s inner
+		// `BorderControl`, which merges its incoming `value` with the
+		// changed prop. Undefined values here will be cleaned when
 		// global styles are saved.
-		setBorder( { radius: border?.radius, ...updatedBorder } );
+		setBorder( {
+			...updatedBorder,
+			radius: value?.border?.radius,
+		} );
 	};
 
 	const resetAllFilter = useCallback( ( previousValue ) => {
@@ -262,13 +390,41 @@ export default function BorderPanel( {
 			label={ label }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isBorderPlaceholder,
+						isDefinedBorder( value?.border ) &&
+							!! inheritedBorder &&
+							isDefinedBorder( inheritedBorder )
+					) }
 					hasValue={ () => isDefinedBorder( value?.border ) }
 					label={ __( 'Border' ) }
 					onDeselect={ () => resetBorder() }
 					isShownByDefault={ showBorderByDefault }
 					panelId={ panelId }
 				>
+					{ ( showInheritanceLabelIndicators ||
+						hasShadowControl ) && (
+						// Render the visible label as `BaseControl.VisualLabel`
+						// (which produces `.components-base-control__label`)
+						// rather than passing `label` to `BorderBoxControl`,
+						// whose internal `<StyledLabel>` carries no stable
+						// className. The inheritance treatment and the
+						// local-override reset affordance both target
+						// `.components-base-control__label`, so the visible
+						// "Border" label has to be a `BaseControl` label to
+						// receive them.
+						//
+						// Render it whenever a Shadow control is also present so
+						// the two controls stay disambiguated (mirrors the
+						// Shadow label's `hasBorderControl` guard below, and
+						// trunk's `hideLabelFromVision={ ! hasShadowControl }`),
+						// even when inheritance indicators are off (e.g. in
+						// Global Styles).
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Border' ) }
+						</BaseControl.VisualLabel>
+					) }
 					<BorderBoxControl
 						colors={ colors }
 						disableCustomColors={ ! areCustomSolidsEnabled }
@@ -279,34 +435,46 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						hideLabelFromVision={ ! hasShadowControl }
-						label={ __( 'Border' ) }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showBorderRadius && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isBorderRadiusPlaceholder,
+						hasBorderRadius() && inheritedBorderRadius !== undefined
+					) }
 					hasValue={ hasBorderRadius }
 					label={ __( 'Radius' ) }
+					hasInlineEndToggle
 					onDeselect={ () => setBorderRadius( undefined ) }
 					isShownByDefault={ defaultControls.radius }
 					panelId={ panelId }
 				>
 					<BorderRadiusControl
 						presets={ settings?.border?.radiusSizes }
-						values={ borderRadiusValues }
+						values={ borderRadius }
 						onChange={ ( newValue ) => {
 							setBorderRadius( newValue || undefined );
 						} }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasShadowControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isShadowPlaceholder,
+						hasShadow() && inheritedShadow !== undefined
+					) }
 					label={ __( 'Shadow' ) }
 					hasValue={ hasShadow }
 					onDeselect={ resetShadow }
 					isShownByDefault={ defaultControls.shadow }
+					// The shadow toggle renders its own reset affordance (blue
+					// dot for a local override, default reset otherwise) inside
+					// the control, mirroring the color/gradient controls, so the
+					// panel item must not render a second sibling reset dot.
+					showLocalOverrideActionsInLabel={ false }
 					panelId={ panelId }
 				>
 					{ hasBorderControl ? (
@@ -317,10 +485,13 @@ export default function BorderPanel( {
 
 					<ShadowPopover
 						shadow={ shadow }
-						onShadowChange={ setShadow }
+						onShadowChange={ setShadowWithInheritedCommit }
 						settings={ settings }
+						hasLocalValue={ hasShadow() }
+						hasLocalOverride={ hasShadowLocalOverride }
+						onReset={ resetShadow }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 		</Wrapper>
 	);