@wordpress/block-editor 16.0.0 → 16.1.0

package/build/components/global-styles/dimensions-panel.cjs

@@ -34,7 +34,6 @@ __export(dimensions_panel_exports, {
   useHasDimensionsPanel: () => useHasDimensionsPanel
 });
 module.exports = __toCommonJS(dimensions_panel_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
 var import_icons = require("@wordpress/icons");
@@ -48,8 +47,19 @@ var import_aspect_ratio_tool = __toESM(require("../dimensions-tool/aspect-ratio-
 var import_utils2 = require("../../hooks/utils.cjs");
 var import_object = require("../../utils/object.cjs");
 var import_block_style_state = require("../../hooks/block-style-state.cjs");
+var import_inheritance = require("./inheritance/index.cjs");
 var import_jsx_runtime = require("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 = import_block_style_state.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);
 }
@@ -117,8 +127,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] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(rawValue);
+  return quantity;
+}
 function splitStyleValue(value) {
-  if (value && typeof value === "string") {
+  if (hasValue(value) && typeof value === "string") {
     return {
       top: value,
       right: value,
@@ -128,8 +149,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") {
@@ -190,7 +244,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 = import_block_style_state.DEFAULT_BLOCK_STYLE_STATE
+  styleState = import_block_style_state.DEFAULT_BLOCK_STYLE_STATE,
+  showInheritanceLabelIndicators = (0, import_inheritance.isGlobalStylesInheritanceEnabled)()
 }) {
   const { dimensions, spacing } = settings;
   const decodeValue = (rawValue) => {
@@ -210,6 +265,11 @@ function DimensionsPanel({
       rawValue
     );
   };
+  const inheritanceProps = (isInherited, hasLocalOverride, className) => (0, import_inheritance.getInheritanceProps)(
+    showInheritanceLabelIndicators && isInherited,
+    showInheritanceLabelIndicators && hasLocalOverride,
+    className
+  );
   const showSpacingPresetsControl = hasSpacingPresets(settings);
   const units = (0, import_components.__experimentalUseCustomUnits)({
     availableUnits: settings?.spacing?.units || [
@@ -253,67 +313,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(
       (0, import_object.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(
       (0, import_object.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((0, import_object.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((0, import_object.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(
       (0, import_object.setImmutably)(value, ["spacing", "blockGap"], newGapValue)
     );
   };
   const setGapValues = (nextBoxGapValue) => {
-    if (!nextBoxGapValue) {
+    if (!hasValue(nextBoxGapValue)) {
       setGapValue(null);
     }
     if (!isAxialGap && nextBoxGapValue?.hasOwnProperty("top")) {
@@ -326,9 +419,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 = (0, import_object.setImmutably)(
       value,
@@ -346,9 +443,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 = (0, import_object.setImmutably)(
       value,
@@ -366,9 +467,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(
       (0, import_object.setImmutably)(value, ["dimensions", "minWidth"], newValue)
@@ -377,20 +482,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((0, import_object.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 = (0, import_object.setImmutably)(
       value,
@@ -401,9 +513,9 @@ function DimensionsPanel({
       (0, import_object.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,
@@ -424,8 +536,12 @@ function DimensionsPanel({
       children: [
         (showContentSizeControl || showWideSizeControl) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "span-columns", children: (0, import_i18n.__)("Set the width of the main content area.") }),
         showContentSizeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isContentSizePlaceholder,
+              hasUserSetContentSizeValue() && inheritedContentSizeValue !== void 0
+            ),
             label: (0, import_i18n.__)("Content width"),
             hasValue: hasUserSetContentSizeValue,
             onDeselect: resetContentSizeValue,
@@ -436,7 +552,10 @@ function DimensionsPanel({
               {
                 label: (0, import_i18n.__)("Content width"),
                 labelPosition: "top",
-                value: contentSizeValue || "",
+                value: localContentSizeValue ?? inheritedContentSizeValue,
+                placeholder: isContentSizePlaceholder ? getNumericPlaceholder(
+                  inheritedContentSizeValue
+                ) : void 0,
                 onChange: (nextContentSize) => {
                   setContentSizeValue(nextContentSize);
                 },
@@ -447,8 +566,12 @@ function DimensionsPanel({
           }
         ),
         showWideSizeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isWideSizePlaceholder,
+              hasUserSetWideSizeValue() && inheritedWideSizeValue !== void 0
+            ),
             label: (0, import_i18n.__)("Wide width"),
             hasValue: hasUserSetWideSizeValue,
             onDeselect: resetWideSizeValue,
@@ -459,7 +582,10 @@ function DimensionsPanel({
               {
                 label: (0, import_i18n.__)("Wide width"),
                 labelPosition: "top",
-                value: wideSizeValue || "",
+                value: localWideSizeValue ?? inheritedWideSizeValue,
+                placeholder: isWideSizePlaceholder ? getNumericPlaceholder(
+                  inheritedWideSizeValue
+                ) : void 0,
                 onChange: (nextWideSize) => {
                   setWideSizeValue(nextWideSize);
                 },
@@ -470,21 +596,29 @@ function DimensionsPanel({
           }
         ),
         showPaddingControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
             hasValue: hasPaddingValue,
             label: (0, import_i18n.__)("Padding"),
+            hasInlineEndToggle: hasSpacingToggle(
+              paddingSides,
+              showSpacingPresetsControl
+            ),
             onDeselect: resetPaddingValue,
             isShownByDefault: defaultControls.padding ?? DEFAULT_CONTROLS.padding,
-            className: (0, import_clsx.default)({
-              "tools-panel-item-spacing": showSpacingPresetsControl
-            }),
+            ...inheritanceProps(
+              isPaddingInherited,
+              hasPaddingValue() && hasInheritedPadding,
+              {
+                "tools-panel-item-spacing": showSpacingPresetsControl
+              }
+            ),
             panelId,
             children: [
               !showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.BoxControl,
                 {
-                  values: paddingValues,
+                  values: localPaddingValues,
                   onChange: setPaddingValues,
                   label: (0, import_i18n.__)("Padding"),
                   sides: paddingSides,
@@ -493,7 +627,8 @@ function DimensionsPanel({
                   splitOnAxis: isAxialPadding,
                   inputProps: {
                     onMouseOver: onMouseOverPadding,
-                    onMouseOut: onMouseLeaveControls
+                    onMouseOut: onMouseLeaveControls,
+                    placeholder: isPaddingPlaceholder ? inheritedPaddingPlaceholder : void 0
                   }
                 }
               ),
@@ -514,21 +649,29 @@ function DimensionsPanel({
           }
         ),
         showMarginControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
             hasValue: hasMarginValue,
             label: (0, import_i18n.__)("Margin"),
+            hasInlineEndToggle: hasSpacingToggle(
+              marginSides,
+              showSpacingPresetsControl
+            ),
             onDeselect: resetMarginValue,
             isShownByDefault: defaultControls.margin ?? DEFAULT_CONTROLS.margin,
-            className: (0, import_clsx.default)({
-              "tools-panel-item-spacing": showSpacingPresetsControl
-            }),
+            ...inheritanceProps(
+              isMarginInherited,
+              hasMarginValue() && hasInheritedMargin,
+              {
+                "tools-panel-item-spacing": showSpacingPresetsControl
+              }
+            ),
             panelId,
             children: [
               !showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.BoxControl,
                 {
-                  values: marginValues,
+                  values: localMarginValues,
                   onChange: setMarginValues,
                   inputProps: {
                     min: minMarginValue,
@@ -539,7 +682,8 @@ function DimensionsPanel({
                       setMinMarginValue(minimumMargin);
                     },
                     onMouseOver: onMouseOverMargin,
-                    onMouseOut: onMouseLeaveControls
+                    onMouseOut: onMouseLeaveControls,
+                    placeholder: isMarginPlaceholder ? inheritedMarginPlaceholder : void 0
                   },
                   label: (0, import_i18n.__)("Margin"),
                   sides: marginSides,
@@ -566,19 +710,24 @@ function DimensionsPanel({
           }
         ),
         showGapControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
             hasValue: hasGapValue,
             label: (0, import_i18n.__)("Block spacing"),
+            hasInlineEndToggle: isAxialGap,
             onDeselect: resetGapValue,
             isShownByDefault: defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap,
-            className: (0, import_clsx.default)({
-              "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__ */ (0, import_jsx_runtime.jsx)(
@@ -600,7 +749,8 @@ function DimensionsPanel({
                   min: 0,
                   onChange: setGapValue,
                   units,
-                  value: gapValue
+                  value: localGapRaw ?? void 0,
+                  placeholder: isGapPlaceholder ? inheritedGapRaw : void 0
                 }
               )),
               showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -630,8 +780,12 @@ function DimensionsPanel({
           }
         ),
         showMinHeightControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isMinHeightPlaceholder,
+              hasMinHeightValue() && inheritedMinHeightValue !== void 0
+            ),
             hasValue: hasMinHeightValue,
             label: (0, import_i18n.__)("Minimum height"),
             onDeselect: resetMinHeightValue,
@@ -641,16 +795,23 @@ function DimensionsPanel({
               import_dimension_control.default,
               {
                 label: (0, import_i18n.__)("Minimum height"),
-                value: minHeightValue,
+                value: localMinHeightValue ?? inheritedMinHeightValue,
                 onChange: setMinHeightValue,
+                placeholder: isMinHeightPlaceholder ? getNumericPlaceholder(
+                  inheritedMinHeightValue
+                ) : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
           }
         ),
         showMinWidthControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isMinWidthPlaceholder,
+              hasMinWidthValue() && inheritedMinWidthValue !== void 0
+            ),
             hasValue: hasMinWidthValue,
             label: (0, import_i18n.__)("Minimum width"),
             onDeselect: resetMinWidthValue,
@@ -660,16 +821,23 @@ function DimensionsPanel({
               import_dimension_control.default,
               {
                 label: (0, import_i18n.__)("Minimum width"),
-                value: minWidthValue,
+                value: localMinWidthValue ?? inheritedMinWidthValue,
                 onChange: setMinWidthValue,
+                placeholder: isMinWidthPlaceholder ? getNumericPlaceholder(
+                  inheritedMinWidthValue
+                ) : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
           }
         ),
         showHeightControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isHeightPlaceholder,
+              hasHeightValue() && inheritedHeightValue !== void 0
+            ),
             hasValue: hasHeightValue,
             label: (0, import_i18n.__)("Height"),
             onDeselect: resetHeightValue,
@@ -679,16 +847,21 @@ function DimensionsPanel({
               import_dimension_control.default,
               {
                 label: (0, import_i18n.__)("Height"),
-                value: heightValue,
+                value: localHeightValue,
                 onChange: setHeightValue,
+                placeholder: isHeightPlaceholder ? inheritedHeightValue : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
           }
         ),
         showWidthControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isWidthPlaceholder,
+              hasWidthValue() && inheritedWidthValue !== void 0
+            ),
             hasValue: hasWidthValue,
             label: (0, import_i18n.__)("Width"),
             onDeselect: resetWidthValue,
@@ -698,8 +871,9 @@ function DimensionsPanel({
               import_dimension_control.default,
               {
                 label: (0, import_i18n.__)("Width"),
-                value: widthValue,
+                value: localWidthValue,
                 onChange: setWidthValue,
+                placeholder: isWidthPlaceholder ? inheritedWidthValue : void 0,
                 dimensionSizes: dimensions?.dimensionSizes
               }
             )
@@ -712,6 +886,10 @@ function DimensionsPanel({
             value: aspectRatioValue,
             onChange: setAspectRatioValue,
             panelId,
+            ...inheritanceProps(
+              isAspectRatioPlaceholder,
+              hasAspectRatioValue() && inheritedAspectRatioValue !== void 0
+            ),
             isShownByDefault: defaultControls.aspectRatio ?? DEFAULT_CONTROLS.aspectRatio
           }
         )