@wordpress/block-editor 16.0.0 → 16.1.0

package/build-module/components/global-styles/dimensions-panel.mjs

@@ -1,13 +1,12 @@
 // packages/block-editor/src/components/global-styles/dimensions-panel.js
-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
+  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+  __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue
 } from "@wordpress/components";
 import { Icon, alignNone, stretchWide } from "@wordpress/icons";
 import { useCallback, useState } from "@wordpress/element";
@@ -24,8 +23,23 @@ import {
   hasPseudoBlockStyleState,
   hasViewportBlockStyleState
 } from "../../hooks/block-style-state.mjs";
+import {
+  getInheritanceProps,
+  InheritanceToolsPanelItem,
+  isGlobalStylesInheritanceEnabled
+} from "./inheritance/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AXIAL_SIDES = ["horizontal", "vertical"];
+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;
+}
 function useHasDimensionsPanel(settings, styleState = DEFAULT_BLOCK_STYLE_STATE) {
   return hasContentSize(settings) || hasWideSize(settings) || hasPadding(settings) || hasMargin(settings) || hasGap(settings) || hasHeight(settings) || hasMinHeight(settings) || hasMinWidth(settings) || hasWidth(settings) || hasAspectRatio(settings, styleState) || hasChildLayout(settings, styleState);
 }
@@ -93,8 +107,19 @@ function filterValuesBySides(values, sides) {
   });
   return filteredValues;
 }
+var EMPTY_VALUES = [void 0, null, ""];
+function hasValue(value) {
+  return !EMPTY_VALUES.includes(value);
+}
+function getNumericPlaceholder(rawValue) {
+  if (!hasValue(rawValue)) {
+    return void 0;
+  }
+  const [quantity] = parseQuantityAndUnitFromRawValue(rawValue);
+  return quantity;
+}
 function splitStyleValue(value) {
-  if (value && typeof value === "string") {
+  if (hasValue(value) && typeof value === "string") {
     return {
       top: value,
       right: value,
@@ -104,8 +129,41 @@ function splitStyleValue(value) {
   }
   return value;
 }
+function getCommonSidesValue(sidesValue) {
+  if (!hasValue(sidesValue)) {
+    return void 0;
+  }
+  if (typeof sidesValue === "string") {
+    return sidesValue !== "" ? sidesValue : void 0;
+  }
+  if (typeof sidesValue !== "object") {
+    return void 0;
+  }
+  const sideKeys = ["top", "right", "bottom", "left"];
+  const values = sideKeys.map((k) => sidesValue[k]);
+  const allDefined = values.every(hasValue);
+  if (!allDefined) {
+    return void 0;
+  }
+  const first = values[0];
+  return values.every((v) => v === first) ? first : void 0;
+}
+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;
   }
   if (typeof value === "string") {
@@ -166,7 +224,8 @@ function DimensionsPanel({
   // Special case because the layout controls are not part of the dimensions panel
   // in global styles but not in block inspector.
   includeLayoutControls = false,
-  styleState = DEFAULT_BLOCK_STYLE_STATE
+  styleState = DEFAULT_BLOCK_STYLE_STATE,
+  showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled()
 }) {
   const { dimensions, spacing } = settings;
   const decodeValue = (rawValue) => {
@@ -186,6 +245,11 @@ function DimensionsPanel({
       rawValue
     );
   };
+  const inheritanceProps = (isInherited, hasLocalOverride, className) => getInheritanceProps(
+    showInheritanceLabelIndicators && isInherited,
+    showInheritanceLabelIndicators && hasLocalOverride,
+    className
+  );
   const showSpacingPresetsControl = hasSpacingPresets(settings);
   const units = useCustomUnits({
     availableUnits: settings?.spacing?.units || [
@@ -229,67 +293,100 @@ function DimensionsPanel({
     };
   }, []);
   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 || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasUserSetContentSizeValue = () => !!value?.layout?.contentSize;
+  const hasUserSetContentSizeValue = () => hasValue(value?.layout?.contentSize);
   const resetContentSizeValue = () => setContentSizeValue(void 0);
   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 || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasUserSetWideSizeValue = () => !!value?.layout?.wideSize;
+  const hasUserSetWideSizeValue = () => hasValue(value?.layout?.wideSize);
   const resetWideSizeValue = () => setWideSizeValue(void 0);
   const showPaddingControl = hasPadding(settings);
-  const rawPadding = decodeValue(inheritedValue?.spacing?.padding);
-  const paddingValues = splitStyleValue(rawPadding);
+  const inheritedPaddingValues = splitStyleValue(
+    decodeValue(inheritedValue?.spacing?.padding)
+  );
+  const localPaddingValues = splitStyleValue(
+    decodeValue(value?.spacing?.padding)
+  );
+  const paddingValues = hasValue(value?.spacing?.padding) ? localPaddingValues : inheritedPaddingValues;
+  const inheritedPaddingPlaceholder = getCommonSidesValue(
+    inheritedPaddingValues
+  );
+  const isPaddingPlaceholder = !hasValue(value?.spacing?.padding) && inheritedPaddingPlaceholder !== void 0;
+  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;
   const isAxialPadding = paddingSides && paddingSides.some((side) => AXIAL_SIDES.includes(side));
   const setPaddingValues = (newPaddingValues) => {
     const padding = filterValuesBySides(newPaddingValues, paddingSides);
     onChange(setImmutably(value, ["spacing", "padding"], padding));
   };
-  const hasPaddingValue = () => !!value?.spacing?.padding && Object.keys(value?.spacing?.padding).length;
+  const hasPaddingValue = () => hasValue(value?.spacing?.padding) && Object.keys(value?.spacing?.padding).length;
   const resetPaddingValue = () => setPaddingValues(void 0);
   const onMouseOverPadding = () => onVisualize("padding");
   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 !== void 0;
+  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;
   const isAxialMargin = marginSides && marginSides.some((side) => AXIAL_SIDES.includes(side));
   const setMarginValues = (newMarginValues) => {
     const margin = filterValuesBySides(newMarginValues, marginSides);
     onChange(setImmutably(value, ["spacing", "margin"], margin));
   };
-  const hasMarginValue = () => !!value?.spacing?.margin && Object.keys(value?.spacing?.margin).length;
+  const hasMarginValue = () => hasValue(value?.spacing?.margin) && Object.keys(value?.spacing?.margin).length;
   const resetMarginValue = () => setMarginValues(void 0);
   const onMouseOverMargin = () => onVisualize("margin");
   const showGapControl = hasGap(settings);
   const gapSides = Array.isArray(settings?.spacing?.blockGap) ? settings?.spacing?.blockGap : 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);
+  const gapRawForDisplay = hasValue(value?.spacing?.blockGap) ? localGapRaw : inheritedGapRaw;
+  const gapValues = splitGapValue(gapRawForDisplay, isAxialGap);
+  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 (!isAxialGap && nextBoxGapValue?.hasOwnProperty("top")) {
@@ -302,9 +399,13 @@ function DimensionsPanel({
     }
   };
   const resetGapValue = () => setGapValue(void 0);
-  const hasGapValue = () => !!value?.spacing?.blockGap;
+  const hasGapValue = () => hasValue(value?.spacing?.blockGap);
   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,
@@ -322,9 +423,13 @@ function DimensionsPanel({
   const resetMinHeightValue = () => {
     setMinHeightValue(void 0);
   };
-  const hasMinHeightValue = () => !!value?.dimensions?.minHeight;
+  const hasMinHeightValue = () => hasValue(value?.dimensions?.minHeight);
   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,
@@ -342,9 +447,13 @@ function DimensionsPanel({
   const resetHeightValue = () => {
     setHeightValue(void 0);
   };
-  const hasHeightValue = () => !!value?.dimensions?.height;
+  const hasHeightValue = () => hasValue(value?.dimensions?.height);
   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)
@@ -353,20 +462,27 @@ function DimensionsPanel({
   const resetMinWidthValue = () => {
     setMinWidthValue(void 0);
   };
-  const hasMinWidthValue = () => !!value?.dimensions?.minWidth;
+  const hasMinWidthValue = () => hasValue(value?.dimensions?.minWidth);
   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(void 0);
   };
-  const hasWidthValue = () => !!value?.dimensions?.width;
+  const hasWidthValue = () => hasValue(value?.dimensions?.width);
   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,
@@ -377,9 +493,9 @@ function DimensionsPanel({
       setImmutably(tempValue, ["dimensions", "minHeight"], void 0)
     );
   };
-  const hasAspectRatioValue = () => !!value?.dimensions?.aspectRatio;
+  const hasAspectRatioValue = () => hasValue(value?.dimensions?.aspectRatio);
   const showChildLayoutControl = hasChildLayout(settings, styleState);
-  const childLayout = inheritedValue?.layout;
+  const childLayout = value?.layout;
   const setChildLayout = (newChildLayout) => {
     onChange({
       ...value,
@@ -400,8 +516,12 @@ function DimensionsPanel({
       children: [
         (showContentSizeControl || showWideSizeControl) && /* @__PURE__ */ jsx("span", { className: "span-columns", children: __("Set the width of the main content area.") }),
         showContentSizeControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isContentSizePlaceholder,
+              hasUserSetContentSizeValue() && inheritedContentSizeValue !== void 0
+            ),
             label: __("Content width"),
             hasValue: hasUserSetContentSizeValue,
             onDeselect: resetContentSizeValue,
@@ -412,7 +532,10 @@ function DimensionsPanel({
               {
                 label: __("Content width"),
                 labelPosition: "top",
-                value: contentSizeValue || "",
+                value: localContentSizeValue ?? inheritedContentSizeValue,
+                placeholder: isContentSizePlaceholder ? getNumericPlaceholder(
+                  inheritedContentSizeValue
+                ) : void 0,
                 onChange: (nextContentSize) => {
                   setContentSizeValue(nextContentSize);
                 },
@@ -423,8 +546,12 @@ function DimensionsPanel({
           }
         ),
         showWideSizeControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isWideSizePlaceholder,
+              hasUserSetWideSizeValue() && inheritedWideSizeValue !== void 0
+            ),
             label: __("Wide width"),
             hasValue: hasUserSetWideSizeValue,
             onDeselect: resetWideSizeValue,
@@ -435,7 +562,10 @@ function DimensionsPanel({
               {
                 label: __("Wide width"),
                 labelPosition: "top",
-                value: wideSizeValue || "",
+                value: localWideSizeValue ?? inheritedWideSizeValue,
+                placeholder: isWideSizePlaceholder ? getNumericPlaceholder(
+                  inheritedWideSizeValue
+                ) : void 0,
                 onChange: (nextWideSize) => {
                   setWideSizeValue(nextWideSize);
                 },
@@ -446,21 +576,29 @@ function DimensionsPanel({
           }
         ),
         showPaddingControl && /* @__PURE__ */ jsxs(
-          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,
             children: [
               !showSpacingPresetsControl && /* @__PURE__ */ jsx(
                 BoxControl,
                 {
-                  values: paddingValues,
+                  values: localPaddingValues,
                   onChange: setPaddingValues,
                   label: __("Padding"),
                   sides: paddingSides,
@@ -469,7 +607,8 @@ function DimensionsPanel({
                   splitOnAxis: isAxialPadding,
                   inputProps: {
                     onMouseOver: onMouseOverPadding,
-                    onMouseOut: onMouseLeaveControls
+                    onMouseOut: onMouseLeaveControls,
+                    placeholder: isPaddingPlaceholder ? inheritedPaddingPlaceholder : void 0
                   }
                 }
               ),
@@ -490,21 +629,29 @@ function DimensionsPanel({
           }
         ),
         showMarginControl && /* @__PURE__ */ jsxs(
-          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,
             children: [
               !showSpacingPresetsControl && /* @__PURE__ */ jsx(
                 BoxControl,
                 {
-                  values: marginValues,
+                  values: localMarginValues,
                   onChange: setMarginValues,
                   inputProps: {
                     min: minMarginValue,
@@ -515,7 +662,8 @@ function DimensionsPanel({
                       setMinMarginValue(minimumMargin);
                     },
                     onMouseOver: onMouseOverMargin,
-                    onMouseOut: onMouseLeaveControls
+                    onMouseOut: onMouseLeaveControls,
+                    placeholder: isMarginPlaceholder ? inheritedMarginPlaceholder : void 0
                   },
                   label: __("Margin"),
                   sides: marginSides,
@@ -542,19 +690,24 @@ function DimensionsPanel({
           }
         ),
         showGapControl && /* @__PURE__ */ jsxs(
-          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 !== void 0,
+              {
+                "tools-panel-item-spacing": showSpacingPresetsControl,
+                "single-column": (
+                  // If UnitControl is used, should be single-column.
+                  !showSpacingPresetsControl && !isAxialGap
+                )
+              }
+            ),
             panelId,
             children: [
               !showSpacingPresetsControl && (isAxialGap ? /* @__PURE__ */ jsx(
@@ -576,7 +729,8 @@ function DimensionsPanel({
                   min: 0,
                   onChange: setGapValue,
                   units,
-                  value: gapValue
+                  value: localGapRaw ?? void 0,
+                  placeholder: isGapPlaceholder ? inheritedGapRaw : void 0
                 }
               )),
               showSpacingPresetsControl && /* @__PURE__ */ jsx(
@@ -606,8 +760,12 @@ function DimensionsPanel({
           }
         ),
         showMinHeightControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isMinHeightPlaceholder,
+              hasMinHeightValue() && inheritedMinHeightValue !== void 0
+            ),
             hasValue: hasMinHeightValue,
             label: __("Minimum height"),
             onDeselect: resetMinHeightValue,
@@ -617,16 +775,23 @@ function DimensionsPanel({
               DimensionControl,
               {
                 label: __("Minimum height"),
-                value: minHeightValue,
+                value: localMinHeightValue ?? inheritedMinHeightValue,
                 onChange: setMinHeightValue,
+                placeholder: isMinHeightPlaceholder ? getNumericPlaceholder(
+                  inheritedMinHeightValue
+                ) : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
           }
         ),
         showMinWidthControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isMinWidthPlaceholder,
+              hasMinWidthValue() && inheritedMinWidthValue !== void 0
+            ),
             hasValue: hasMinWidthValue,
             label: __("Minimum width"),
             onDeselect: resetMinWidthValue,
@@ -636,16 +801,23 @@ function DimensionsPanel({
               DimensionControl,
               {
                 label: __("Minimum width"),
-                value: minWidthValue,
+                value: localMinWidthValue ?? inheritedMinWidthValue,
                 onChange: setMinWidthValue,
+                placeholder: isMinWidthPlaceholder ? getNumericPlaceholder(
+                  inheritedMinWidthValue
+                ) : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
           }
         ),
         showHeightControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isHeightPlaceholder,
+              hasHeightValue() && inheritedHeightValue !== void 0
+            ),
             hasValue: hasHeightValue,
             label: __("Height"),
             onDeselect: resetHeightValue,
@@ -655,16 +827,21 @@ function DimensionsPanel({
               DimensionControl,
               {
                 label: __("Height"),
-                value: heightValue,
+                value: localHeightValue,
                 onChange: setHeightValue,
+                placeholder: isHeightPlaceholder ? inheritedHeightValue : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
           }
         ),
         showWidthControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isWidthPlaceholder,
+              hasWidthValue() && inheritedWidthValue !== void 0
+            ),
             hasValue: hasWidthValue,
             label: __("Width"),
             onDeselect: resetWidthValue,
@@ -674,8 +851,9 @@ function DimensionsPanel({
               DimensionControl,
               {
                 label: __("Width"),
-                value: widthValue,
+                value: localWidthValue,
                 onChange: setWidthValue,
+                placeholder: isWidthPlaceholder ? inheritedWidthValue : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
@@ -688,6 +866,10 @@ function DimensionsPanel({
             value: aspectRatioValue,
             onChange: setAspectRatioValue,
             panelId,
+            ...inheritanceProps(
+              isAspectRatioPlaceholder,
+              hasAspectRatioValue() && inheritedAspectRatioValue !== void 0
+            ),
             isShownByDefault: defaultControls.aspectRatio ?? DEFAULT_CONTROLS.aspectRatio
           }
         )