@wordpress/block-editor 16.0.0 → 16.1.0

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,11 +8,11 @@ import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	BoxControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { Icon, alignNone, stretchWide } from '@wordpress/icons';
 import { useCallback, useState } from '@wordpress/element';
@@ -34,9 +33,39 @@ import {
 	hasPseudoBlockStyleState,
 	hasViewportBlockStyleState,
 } from '../../hooks/block-style-state';
+import {
+	getInheritanceProps,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
+/**
+ * Determines whether a spacing control (`BoxControl` or `SpacingSizesControl`)
+ * renders its linked/unlink toggle button, which the local-override reset dot
+ * offsets itself against.
+ *
+ * @param {string[]|undefined} sides            Configurable sides for the control.
+ * @param {boolean}            isPresetsControl Whether the presets-based
+ *                                              `SpacingSizesControl` is used.
+ *
+ * @return {boolean} Whether the toggle button is rendered.
+ */
+function hasSpacingToggle( sides, isPresetsControl ) {
+	if ( sides?.length === 1 ) {
+		return false;
+	}
+	if ( isPresetsControl ) {
+		const hasOnlyAxialSides =
+			sides?.includes( 'horizontal' ) &&
+			sides?.includes( 'vertical' ) &&
+			sides?.length === 2;
+		return ! hasOnlyAxialSides;
+	}
+	return true;
+}
+
 export function useHasDimensionsPanel(
 	settings,
 	styleState = DEFAULT_BLOCK_STYLE_STATE
@@ -153,9 +182,32 @@ function filterValuesBySides( values, sides ) {
 	return filteredValues;
 }
 
+const EMPTY_VALUES = [ undefined, null, '' ];
+
+function hasValue( value ) {
+	return ! EMPTY_VALUES.includes( value );
+}
+
+/**
+ * Extracts the numeric quantity from a raw CSS value so it can be used as a
+ * unit-control placeholder. The control's unit selector already reflects the
+ * inherited unit, so the placeholder must contain only the number (e.g.
+ * `120px` -> `120`) rather than the full unit string.
+ *
+ * @param {string|number|undefined} rawValue Inherited value to parse.
+ * @return {number|undefined} The numeric quantity, or `undefined` when absent.
+ */
+function getNumericPlaceholder( rawValue ) {
+	if ( ! hasValue( rawValue ) ) {
+		return undefined;
+	}
+	const [ quantity ] = parseQuantityAndUnitFromRawValue( rawValue );
+	return quantity;
+}
+
 function splitStyleValue( value ) {
 	// Check for shorthand value (a string value).
-	if ( value && typeof value === 'string' ) {
+	if ( hasValue( value ) && typeof value === 'string' ) {
 		// Convert to value for individual sides for BoxControl.
 		return {
 			top: value,
@@ -168,8 +220,69 @@ function splitStyleValue( value ) {
 	return value;
 }
 
+/**
+ * Returns the common side value of a sides object (top/right/bottom/left)
+ * when all four sides are defined and equal; otherwise returns undefined.
+ *
+ * Used to derive a placeholder string for BoxControl's
+ * `inputProps.placeholder` from an inherited shorthand or
+ * shorthand-equivalent split-side value. When the inherited sides differ
+ * from each other, the placeholder is suppressed because BoxControl's
+ * `inputProps.placeholder` cannot vary per side.
+ *
+ * @param {Object|string|undefined} sidesValue The inherited sides shape.
+ * @return {string|undefined} The common value, or undefined.
+ */
+function getCommonSidesValue( sidesValue ) {
+	if ( ! hasValue( sidesValue ) ) {
+		return undefined;
+	}
+	if ( typeof sidesValue === 'string' ) {
+		return sidesValue !== '' ? sidesValue : undefined;
+	}
+	if ( typeof sidesValue !== 'object' ) {
+		return undefined;
+	}
+	const sideKeys = [ 'top', 'right', 'bottom', 'left' ];
+	const values = sideKeys.map( ( k ) => sidesValue[ k ] );
+	const allDefined = values.every( hasValue );
+	if ( ! allDefined ) {
+		return undefined;
+	}
+	const first = values[ 0 ];
+	return values.every( ( v ) => v === first ) ? first : undefined;
+}
+
+/**
+ * Returns whether a sides object (top/right/bottom/left) or shorthand string
+ * holds any value on at least one side.
+ *
+ * Unlike `getCommonSidesValue`, this does not require every side to be defined
+ * or equal. It is used to drive the inherited-from-Global-Styles label
+ * treatment and the local-override dot, which should reflect the mere presence
+ * of an inherited value regardless of whether the individual sides match (a
+ * constraint that only applies to BoxControl's single-string placeholder).
+ *
+ * @param {Object|string|undefined} sidesValue The sides shape.
+ * @return {boolean} Whether any side holds a value.
+ */
+function hasAnySideValue( sidesValue ) {
+	if ( ! hasValue( sidesValue ) ) {
+		return false;
+	}
+	if ( typeof sidesValue === 'string' ) {
+		return sidesValue !== '';
+	}
+	if ( typeof sidesValue !== 'object' ) {
+		return false;
+	}
+	return [ 'top', 'right', 'bottom', 'left' ].some( ( side ) =>
+		hasValue( sidesValue[ side ] )
+	);
+}
+
 function splitGapValue( value, isAxialGap ) {
-	if ( ! value ) {
+	if ( ! hasValue( value ) ) {
 		return value;
 	}
 
@@ -246,6 +359,7 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 	styleState = DEFAULT_BLOCK_STYLE_STATE,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const { dimensions, spacing } = settings;
 
@@ -266,6 +380,14 @@ export default function DimensionsPanel( {
 			rawValue
 		);
 	};
+	// 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 showSpacingPresetsControl = hasSpacingPresets( settings );
 	const units = useCustomUnits( {
@@ -316,39 +438,77 @@ export default function DimensionsPanel( {
 	// Content Width
 	const showContentSizeControl =
 		hasContentSize( settings ) && includeLayoutControls;
-	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
+	const localContentSizeValue = decodeValue( value?.layout?.contentSize );
+	const inheritedContentSizeValue = decodeValue(
+		inheritedValue?.layout?.contentSize
+	);
+	const isContentSizePlaceholder =
+		! hasValue( value?.layout?.contentSize ) &&
+		hasValue( inheritedContentSizeValue );
 	const setContentSizeValue = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'layout', 'contentSize' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
+	const hasUserSetContentSizeValue = () =>
+		hasValue( value?.layout?.contentSize );
 	const resetContentSizeValue = () => setContentSizeValue( undefined );
 
 	// Wide Width
 	const showWideSizeControl =
 		hasWideSize( settings ) && includeLayoutControls;
-	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
+	const localWideSizeValue = decodeValue( value?.layout?.wideSize );
+	const inheritedWideSizeValue = decodeValue(
+		inheritedValue?.layout?.wideSize
+	);
+	const isWideSizePlaceholder =
+		! hasValue( value?.layout?.wideSize ) &&
+		hasValue( inheritedWideSizeValue );
 	const setWideSizeValue = ( newValue ) => {
 		onChange(
 			setImmutably(
 				value,
 				[ 'layout', 'wideSize' ],
-				newValue || undefined
+				hasValue( newValue ) ? newValue : undefined
 			)
 		);
 	};
-	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
+	const hasUserSetWideSizeValue = () => hasValue( value?.layout?.wideSize );
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
 
 	// Padding
 	const showPaddingControl = hasPadding( settings );
-	const rawPadding = decodeValue( inheritedValue?.spacing?.padding );
-	const paddingValues = splitStyleValue( rawPadding );
+	const inheritedPaddingValues = splitStyleValue(
+		decodeValue( inheritedValue?.spacing?.padding )
+	);
+	// Local-only values feed BoxControl's `values` (with the inherited
+	// surfaced via the at-rest placeholder).
+	const localPaddingValues = splitStyleValue(
+		decodeValue( value?.spacing?.padding )
+	);
+	// Merged local-then-inherited values feed SpacingSizesControl's
+	// `values` because the preset slider has no placeholder slot — the
+	// active chip itself is the at-rest cue.
+	const paddingValues = hasValue( value?.spacing?.padding )
+		? localPaddingValues
+		: inheritedPaddingValues;
+	const inheritedPaddingPlaceholder = getCommonSidesValue(
+		inheritedPaddingValues
+	);
+	const isPaddingPlaceholder =
+		! hasValue( value?.spacing?.padding ) &&
+		inheritedPaddingPlaceholder !== undefined;
+	// Label/dot inheritance treatment is independent of whether the inherited
+	// sides share a common value — it only reflects the presence of an
+	// inherited value (the all-sides-equal constraint applies solely to the
+	// single-string BoxControl placeholder above).
+	const hasInheritedPadding = hasAnySideValue( inheritedPaddingValues );
+	const isPaddingInherited =
+		! hasValue( value?.spacing?.padding ) && hasInheritedPadding;
 	const paddingSides = Array.isArray( settings?.spacing?.padding )
 		? settings?.spacing?.padding
 		: settings?.spacing?.padding?.sides;
@@ -360,15 +520,31 @@ export default function DimensionsPanel( {
 		onChange( setImmutably( value, [ 'spacing', 'padding' ], padding ) );
 	};
 	const hasPaddingValue = () =>
-		!! value?.spacing?.padding &&
+		hasValue( value?.spacing?.padding ) &&
 		Object.keys( value?.spacing?.padding ).length;
 	const resetPaddingValue = () => setPaddingValues( undefined );
 	const onMouseOverPadding = () => onVisualize( 'padding' );
 
 	// Margin
 	const showMarginControl = hasMargin( settings );
-	const rawMargin = decodeValue( inheritedValue?.spacing?.margin );
-	const marginValues = splitStyleValue( rawMargin );
+	const inheritedMarginValues = splitStyleValue(
+		decodeValue( inheritedValue?.spacing?.margin )
+	);
+	const localMarginValues = splitStyleValue(
+		decodeValue( value?.spacing?.margin )
+	);
+	const marginValues = hasValue( value?.spacing?.margin )
+		? localMarginValues
+		: inheritedMarginValues;
+	const inheritedMarginPlaceholder = getCommonSidesValue(
+		inheritedMarginValues
+	);
+	const isMarginPlaceholder =
+		! hasValue( value?.spacing?.margin ) &&
+		inheritedMarginPlaceholder !== undefined;
+	const hasInheritedMargin = hasAnySideValue( inheritedMarginValues );
+	const isMarginInherited =
+		! hasValue( value?.spacing?.margin ) && hasInheritedMargin;
 	const marginSides = Array.isArray( settings?.spacing?.margin )
 		? settings?.spacing?.margin
 		: settings?.spacing?.margin?.sides;
@@ -380,7 +556,7 @@ export default function DimensionsPanel( {
 		onChange( setImmutably( value, [ 'spacing', 'margin' ], margin ) );
 	};
 	const hasMarginValue = () =>
-		!! value?.spacing?.margin &&
+		hasValue( value?.spacing?.margin ) &&
 		Object.keys( value?.spacing?.margin ).length;
 	const resetMarginValue = () => setMarginValues( undefined );
 	const onMouseOverMargin = () => onVisualize( 'margin' );
@@ -392,15 +568,30 @@ export default function DimensionsPanel( {
 		: settings?.spacing?.blockGap?.sides;
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
-	const gapValues = splitGapValue( gapValue, isAxialGap );
+	const localGapRaw = decodeValue( value?.spacing?.blockGap );
+	const inheritedGapRaw = decodeValue( inheritedValue?.spacing?.blockGap );
+	// Merge local-then-inherited so SpacingSizesControl's chip slider and
+	// the axial-gap BoxControl reflect the local value when set and fall
+	// back to the inherited value at rest.
+	const gapRawForDisplay = hasValue( value?.spacing?.blockGap )
+		? localGapRaw
+		: inheritedGapRaw;
+	const gapValues = splitGapValue( gapRawForDisplay, isAxialGap );
+	// Placeholder state for the single-input (non-axial, non-preset) blockGap
+	// path. The axial / preset paths render compound or chip controls without
+	// a native placeholder slot — the displayed `values` themselves are the
+	// at-rest cue for those.
+	const isGapPlaceholder =
+		! hasValue( value?.spacing?.blockGap ) &&
+		typeof inheritedGapRaw === 'string' &&
+		inheritedGapRaw !== '';
 	const setGapValue = ( newGapValue ) => {
 		onChange(
 			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )
 		);
 	};
 	const setGapValues = ( nextBoxGapValue ) => {
-		if ( ! nextBoxGapValue ) {
+		if ( ! hasValue( nextBoxGapValue ) ) {
 			setGapValue( null );
 		}
 		// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
@@ -414,11 +605,17 @@ export default function DimensionsPanel( {
 		}
 	};
 	const resetGapValue = () => setGapValue( undefined );
-	const hasGapValue = () => !! value?.spacing?.blockGap;
+	const hasGapValue = () => hasValue( value?.spacing?.blockGap );
 
 	// Min Height
 	const showMinHeightControl = hasMinHeight( settings );
-	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
+	const localMinHeightValue = decodeValue( value?.dimensions?.minHeight );
+	const inheritedMinHeightValue = decodeValue(
+		inheritedValue?.dimensions?.minHeight
+	);
+	const isMinHeightPlaceholder =
+		! hasValue( value?.dimensions?.minHeight ) &&
+		hasValue( inheritedMinHeightValue );
 	const setMinHeightValue = ( newValue ) => {
 		const tempValue = setImmutably(
 			value,
@@ -437,11 +634,17 @@ export default function DimensionsPanel( {
 	const resetMinHeightValue = () => {
 		setMinHeightValue( undefined );
 	};
-	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
+	const hasMinHeightValue = () => hasValue( value?.dimensions?.minHeight );
 
 	// Height
 	const showHeightControl = hasHeight( settings );
-	const heightValue = decodeValue( inheritedValue?.dimensions?.height );
+	const localHeightValue = decodeValue( value?.dimensions?.height );
+	const inheritedHeightValue = decodeValue(
+		inheritedValue?.dimensions?.height
+	);
+	const isHeightPlaceholder =
+		! hasValue( value?.dimensions?.height ) &&
+		hasValue( inheritedHeightValue );
 	const setHeightValue = ( newValue ) => {
 		const tempValue = setImmutably(
 			value,
@@ -460,11 +663,17 @@ export default function DimensionsPanel( {
 	const resetHeightValue = () => {
 		setHeightValue( undefined );
 	};
-	const hasHeightValue = () => !! value?.dimensions?.height;
+	const hasHeightValue = () => hasValue( value?.dimensions?.height );
 
 	// Min Width
 	const showMinWidthControl = hasMinWidth( settings );
-	const minWidthValue = decodeValue( inheritedValue?.dimensions?.minWidth );
+	const localMinWidthValue = decodeValue( value?.dimensions?.minWidth );
+	const inheritedMinWidthValue = decodeValue(
+		inheritedValue?.dimensions?.minWidth
+	);
+	const isMinWidthPlaceholder =
+		! hasValue( value?.dimensions?.minWidth ) &&
+		hasValue( inheritedMinWidthValue );
 	const setMinWidthValue = ( newValue ) => {
 		onChange(
 			setImmutably( value, [ 'dimensions', 'minWidth' ], newValue )
@@ -473,24 +682,35 @@ export default function DimensionsPanel( {
 	const resetMinWidthValue = () => {
 		setMinWidthValue( undefined );
 	};
-	const hasMinWidthValue = () => !! value?.dimensions?.minWidth;
+	const hasMinWidthValue = () => hasValue( value?.dimensions?.minWidth );
 
 	// Width
 	const showWidthControl = hasWidth( settings );
-	const widthValue = decodeValue( inheritedValue?.dimensions?.width );
+	const localWidthValue = decodeValue( value?.dimensions?.width );
+	const inheritedWidthValue = decodeValue(
+		inheritedValue?.dimensions?.width
+	);
+	const isWidthPlaceholder =
+		! hasValue( value?.dimensions?.width ) &&
+		hasValue( inheritedWidthValue );
 	const setWidthValue = ( newValue ) => {
 		onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) );
 	};
 	const resetWidthValue = () => {
 		setWidthValue( undefined );
 	};
-	const hasWidthValue = () => !! value?.dimensions?.width;
+	const hasWidthValue = () => hasValue( value?.dimensions?.width );
 
 	// Aspect Ratio
 	const showAspectRatioControl = hasAspectRatio( settings, styleState );
-	const aspectRatioValue = decodeValue(
+	const localAspectRatioValue = decodeValue( value?.dimensions?.aspectRatio );
+	const inheritedAspectRatioValue = decodeValue(
 		inheritedValue?.dimensions?.aspectRatio
 	);
+	const aspectRatioValue = localAspectRatioValue ?? inheritedAspectRatioValue;
+	const isAspectRatioPlaceholder =
+		! hasValue( value?.dimensions?.aspectRatio ) &&
+		hasValue( inheritedAspectRatioValue );
 	const setAspectRatioValue = ( newValue ) => {
 		const tempValue = setImmutably(
 			value,
@@ -502,11 +722,17 @@ export default function DimensionsPanel( {
 			setImmutably( tempValue, [ 'dimensions', 'minHeight' ], undefined )
 		);
 	};
-	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
+	const hasAspectRatioValue = () =>
+		hasValue( value?.dimensions?.aspectRatio );
 
-	// Child Layout
+	// Child Layout. There is no Global Styles inheritance model for the
+	// child-layout sub-keys (`selfStretch`, `flexSize`, `columnStart`,
+	// `rowStart`, `columnSpan`, `rowSpan`); they are per-block attributes
+	// only. Render the local value directly so user-set overrides are
+	// reflected in the control rather than washed out by a misshapen
+	// inherited layout payload.
 	const showChildLayoutControl = hasChildLayout( settings, styleState );
-	const childLayout = inheritedValue?.layout;
+	const childLayout = value?.layout;
 
 	const setChildLayout = ( newChildLayout ) => {
 		onChange( {
@@ -533,7 +759,12 @@ export default function DimensionsPanel( {
 				</span>
 			) }
 			{ showContentSizeControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isContentSizePlaceholder,
+						hasUserSetContentSizeValue() &&
+							inheritedContentSizeValue !== undefined
+					) }
 					label={ __( 'Content width' ) }
 					hasValue={ hasUserSetContentSizeValue }
 					onDeselect={ resetContentSizeValue }
@@ -546,7 +777,21 @@ export default function DimensionsPanel( {
 					<UnitControl
 						label={ __( 'Content width' ) }
 						labelPosition="top"
-						value={ contentSizeValue || '' }
+						// Local-then-inherited: render the inherited value as the
+						// control's value at rest so the unit parses from it
+						// (e.g. "620px" keeps its unit rather than the value
+						// string sitting greyed-out behind a default px unit). It
+						// is only written to local on user change.
+						value={
+							localContentSizeValue ?? inheritedContentSizeValue
+						}
+						placeholder={
+							isContentSizePlaceholder
+								? getNumericPlaceholder(
+										inheritedContentSizeValue
+								  )
+								: undefined
+						}
 						onChange={ ( nextContentSize ) => {
 							setContentSizeValue( nextContentSize );
 						} }
@@ -557,10 +802,15 @@ export default function DimensionsPanel( {
 							</InputControlPrefixWrapper>
 						}
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showWideSizeControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isWideSizePlaceholder,
+						hasUserSetWideSizeValue() &&
+							inheritedWideSizeValue !== undefined
+					) }
 					label={ __( 'Wide width' ) }
 					hasValue={ hasUserSetWideSizeValue }
 					onDeselect={ resetWideSizeValue }
@@ -572,7 +822,19 @@ export default function DimensionsPanel( {
 					<UnitControl
 						label={ __( 'Wide width' ) }
 						labelPosition="top"
-						value={ wideSizeValue || '' }
+						// Local-then-inherited: render the inherited value as the
+						// control's value at rest so the unit parses from it
+						// rather than the value string sitting greyed-out behind
+						// a default px unit. It is only written to local on user
+						// change.
+						value={ localWideSizeValue ?? inheritedWideSizeValue }
+						placeholder={
+							isWideSizePlaceholder
+								? getNumericPlaceholder(
+										inheritedWideSizeValue
+								  )
+								: undefined
+						}
 						onChange={ ( nextWideSize ) => {
 							setWideSizeValue( nextWideSize );
 						} }
@@ -583,24 +845,33 @@ export default function DimensionsPanel( {
 							</InputControlPrefixWrapper>
 						}
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showPaddingControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
 					hasValue={ hasPaddingValue }
 					label={ __( 'Padding' ) }
+					hasInlineEndToggle={ hasSpacingToggle(
+						paddingSides,
+						showSpacingPresetsControl
+					) }
 					onDeselect={ resetPaddingValue }
 					isShownByDefault={
 						defaultControls.padding ?? DEFAULT_CONTROLS.padding
 					}
-					className={ clsx( {
-						'tools-panel-item-spacing': showSpacingPresetsControl,
-					} ) }
+					{ ...inheritanceProps(
+						isPaddingInherited,
+						hasPaddingValue() && hasInheritedPadding,
+						{
+							'tools-panel-item-spacing':
+								showSpacingPresetsControl,
+						}
+					) }
 					panelId={ panelId }
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
-							values={ paddingValues }
+							values={ localPaddingValues }
 							onChange={ setPaddingValues }
 							label={ __( 'Padding' ) }
 							sides={ paddingSides }
@@ -610,6 +881,9 @@ export default function DimensionsPanel( {
 							inputProps={ {
 								onMouseOver: onMouseOverPadding,
 								onMouseOut: onMouseLeaveControls,
+								placeholder: isPaddingPlaceholder
+									? inheritedPaddingPlaceholder
+									: undefined,
 							} }
 						/>
 					) }
@@ -625,24 +899,33 @@ export default function DimensionsPanel( {
 							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showMarginControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
 					hasValue={ hasMarginValue }
 					label={ __( 'Margin' ) }
+					hasInlineEndToggle={ hasSpacingToggle(
+						marginSides,
+						showSpacingPresetsControl
+					) }
 					onDeselect={ resetMarginValue }
 					isShownByDefault={
 						defaultControls.margin ?? DEFAULT_CONTROLS.margin
 					}
-					className={ clsx( {
-						'tools-panel-item-spacing': showSpacingPresetsControl,
-					} ) }
+					{ ...inheritanceProps(
+						isMarginInherited,
+						hasMarginValue() && hasInheritedMargin,
+						{
+							'tools-panel-item-spacing':
+								showSpacingPresetsControl,
+						}
+					) }
 					panelId={ panelId }
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
-							values={ marginValues }
+							values={ localMarginValues }
 							onChange={ setMarginValues }
 							inputProps={ {
 								min: minMarginValue,
@@ -655,6 +938,9 @@ export default function DimensionsPanel( {
 								},
 								onMouseOver: onMouseOverMargin,
 								onMouseOut: onMouseLeaveControls,
+								placeholder: isMarginPlaceholder
+									? inheritedMarginPlaceholder
+									: undefined,
 							} }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
@@ -676,22 +962,28 @@ export default function DimensionsPanel( {
 							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showGapControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
 					hasValue={ hasGapValue }
 					label={ __( 'Block spacing' ) }
+					hasInlineEndToggle={ isAxialGap }
 					onDeselect={ resetGapValue }
 					isShownByDefault={
 						defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap
 					}
-					className={ clsx( {
-						'tools-panel-item-spacing': showSpacingPresetsControl,
-						'single-column':
-							// If UnitControl is used, should be single-column.
-							! showSpacingPresetsControl && ! isAxialGap,
-					} ) }
+					{ ...inheritanceProps(
+						isGapPlaceholder,
+						hasGapValue() && inheritedGapRaw !== undefined,
+						{
+							'tools-panel-item-spacing':
+								showSpacingPresetsControl,
+							'single-column':
+								// If UnitControl is used, should be single-column.
+								! showSpacingPresetsControl && ! isAxialGap,
+						}
+					) }
 					panelId={ panelId }
 				>
 					{ ! showSpacingPresetsControl &&
@@ -712,7 +1004,12 @@ export default function DimensionsPanel( {
 								min={ 0 }
 								onChange={ setGapValue }
 								units={ units }
-								value={ gapValue }
+								value={ localGapRaw ?? undefined }
+								placeholder={
+									isGapPlaceholder
+										? inheritedGapRaw
+										: undefined
+								}
 							/>
 						) ) }
 					{ showSpacingPresetsControl && (
@@ -726,7 +1023,7 @@ export default function DimensionsPanel( {
 							allowReset={ false }
 						/>
 					) }
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showChildLayoutControl && (
 				<ChildLayoutControl
@@ -744,7 +1041,12 @@ export default function DimensionsPanel( {
 				/>
 			) }
 			{ showMinHeightControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isMinHeightPlaceholder,
+						hasMinHeightValue() &&
+							inheritedMinHeightValue !== undefined
+					) }
 					hasValue={ hasMinHeightValue }
 					label={ __( 'Minimum height' ) }
 					onDeselect={ resetMinHeightValue }
@@ -755,14 +1057,31 @@ export default function DimensionsPanel( {
 				>
 					<DimensionControl
 						label={ __( 'Minimum height' ) }
-						value={ minHeightValue }
+						// Local-then-inherited: render the inherited value as the
+						// control's value at rest so the unit parses from it
+						// (e.g. "120px" keeps its unit rather than the value
+						// string sitting behind a default px unit). It is only
+						// written to local on user change.
+						value={ localMinHeightValue ?? inheritedMinHeightValue }
 						onChange={ setMinHeightValue }
+						placeholder={
+							isMinHeightPlaceholder
+								? getNumericPlaceholder(
+										inheritedMinHeightValue
+								  )
+								: undefined
+						}
 						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showMinWidthControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isMinWidthPlaceholder,
+						hasMinWidthValue() &&
+							inheritedMinWidthValue !== undefined
+					) }
 					hasValue={ hasMinWidthValue }
 					label={ __( 'Minimum width' ) }
 					onDeselect={ resetMinWidthValue }
@@ -773,14 +1092,29 @@ export default function DimensionsPanel( {
 				>
 					<DimensionControl
 						label={ __( 'Minimum width' ) }
-						value={ minWidthValue }
+						// Local-then-inherited: render the inherited value as the
+						// control's value at rest so the unit parses from it
+						// rather than the value string sitting behind a default
+						// px unit. It is only written to local on user change.
+						value={ localMinWidthValue ?? inheritedMinWidthValue }
 						onChange={ setMinWidthValue }
+						placeholder={
+							isMinWidthPlaceholder
+								? getNumericPlaceholder(
+										inheritedMinWidthValue
+								  )
+								: undefined
+						}
 						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showHeightControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isHeightPlaceholder,
+						hasHeightValue() && inheritedHeightValue !== undefined
+					) }
 					hasValue={ hasHeightValue }
 					label={ __( 'Height' ) }
 					onDeselect={ resetHeightValue }
@@ -791,14 +1125,23 @@ export default function DimensionsPanel( {
 				>
 					<DimensionControl
 						label={ __( 'Height' ) }
-						value={ heightValue }
+						value={ localHeightValue }
 						onChange={ setHeightValue }
+						placeholder={
+							isHeightPlaceholder
+								? inheritedHeightValue
+								: undefined
+						}
 						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showWidthControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isWidthPlaceholder,
+						hasWidthValue() && inheritedWidthValue !== undefined
+					) }
 					hasValue={ hasWidthValue }
 					label={ __( 'Width' ) }
 					onDeselect={ resetWidthValue }
@@ -809,11 +1152,14 @@ export default function DimensionsPanel( {
 				>
 					<DimensionControl
 						label={ __( 'Width' ) }
-						value={ widthValue }
+						value={ localWidthValue }
 						onChange={ setWidthValue }
+						placeholder={
+							isWidthPlaceholder ? inheritedWidthValue : undefined
+						}
 						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showAspectRatioControl && (
 				<AspectRatioTool
@@ -821,6 +1167,11 @@ export default function DimensionsPanel( {
 					value={ aspectRatioValue }
 					onChange={ setAspectRatioValue }
 					panelId={ panelId }
+					{ ...inheritanceProps(
+						isAspectRatioPlaceholder,
+						hasAspectRatioValue() &&
+							inheritedAspectRatioValue !== undefined
+					) }
 					isShownByDefault={
 						defaultControls.aspectRatio ??
 						DEFAULT_CONTROLS.aspectRatio