@wordpress/block-editor 11.4.0 → 11.6.0

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

@@ -0,0 +1,594 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DimensionsPanel;
+exports.useHasDimensionsPanel = useHasDimensionsPanel;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _utils = require("./utils");
+
+var _spacingSizesControl = _interopRequireDefault(require("../spacing-sizes-control"));
+
+var _heightControl = _interopRequireDefault(require("../height-control"));
+
+var _childLayoutControl = _interopRequireDefault(require("../child-layout-control"));
+
+var _utils2 = require("../../hooks/utils");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const AXIAL_SIDES = ['horizontal', 'vertical'];
+
+function useHasDimensionsPanel(settings) {
+  const hasContentSize = useHasContentSize(settings);
+  const hasWideSize = useHasWideSize(settings);
+  const hasPadding = useHasPadding(settings);
+  const hasMargin = useHasMargin(settings);
+  const hasGap = useHasGap(settings);
+  const hasMinHeight = useHasMinHeight(settings);
+  const hasChildLayout = useHasChildLayout(settings);
+  return _element.Platform.OS === 'web' && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasChildLayout);
+}
+
+function useHasContentSize(settings) {
+  var _settings$layout;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$layout = settings.layout) === null || _settings$layout === void 0 ? void 0 : _settings$layout.contentSize;
+}
+
+function useHasWideSize(settings) {
+  var _settings$layout2;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$layout2 = settings.layout) === null || _settings$layout2 === void 0 ? void 0 : _settings$layout2.wideSize;
+}
+
+function useHasPadding(settings) {
+  var _settings$spacing;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$spacing = settings.spacing) === null || _settings$spacing === void 0 ? void 0 : _settings$spacing.padding;
+}
+
+function useHasMargin(settings) {
+  var _settings$spacing2;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$spacing2 = settings.spacing) === null || _settings$spacing2 === void 0 ? void 0 : _settings$spacing2.margin;
+}
+
+function useHasGap(settings) {
+  var _settings$spacing3;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$spacing3 = settings.spacing) === null || _settings$spacing3 === void 0 ? void 0 : _settings$spacing3.blockGap;
+}
+
+function useHasMinHeight(settings) {
+  var _settings$dimensions;
+
+  return settings === null || settings === void 0 ? void 0 : (_settings$dimensions = settings.dimensions) === null || _settings$dimensions === void 0 ? void 0 : _settings$dimensions.minHeight;
+}
+
+function useHasChildLayout(settings) {
+  var _settings$parentLayou;
+
+  const {
+    type: parentLayoutType = 'default',
+    default: {
+      type: defaultParentLayoutType = 'default'
+    } = {},
+    allowSizingOnChildren = false
+  } = (_settings$parentLayou = settings === null || settings === void 0 ? void 0 : settings.parentLayout) !== null && _settings$parentLayou !== void 0 ? _settings$parentLayou : {};
+  const support = (defaultParentLayoutType === 'flex' || parentLayoutType === 'flex') && allowSizingOnChildren;
+  return !!(settings !== null && settings !== void 0 && settings.layout) && support;
+}
+
+function useHasSpacingPresets(settings) {
+  var _settings$spacing4, _ref, _ref2;
+
+  const {
+    custom,
+    theme,
+    default: defaultPresets
+  } = (settings === null || settings === void 0 ? void 0 : (_settings$spacing4 = settings.spacing) === null || _settings$spacing4 === void 0 ? void 0 : _settings$spacing4.spacingSizes) || {};
+  const presets = (_ref = (_ref2 = custom !== null && custom !== void 0 ? custom : theme) !== null && _ref2 !== void 0 ? _ref2 : defaultPresets) !== null && _ref !== void 0 ? _ref : [];
+  return presets.length > 0;
+}
+
+function filterValuesBySides(values, sides) {
+  if (!sides) {
+    // If no custom side configuration all sides are opted into by default.
+    return values;
+  } // Only include sides opted into within filtered values.
+
+
+  const filteredValues = {};
+  sides.forEach(side => {
+    if (side === 'vertical') {
+      filteredValues.top = values.top;
+      filteredValues.bottom = values.bottom;
+    }
+
+    if (side === 'horizontal') {
+      filteredValues.left = values.left;
+      filteredValues.right = values.right;
+    }
+
+    filteredValues[side] = values === null || values === void 0 ? void 0 : values[side];
+  });
+  return filteredValues;
+}
+
+function splitStyleValue(value) {
+  // Check for shorthand value (a string value).
+  if (value && typeof value === 'string') {
+    // Convert to value for individual sides for BoxControl.
+    return {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+
+  return value;
+}
+
+function splitGapValue(value) {
+  // Check for shorthand value (a string value).
+  if (value && typeof value === 'string') {
+    // If the value is a string, treat it as a single side (top) for the spacing controls.
+    return {
+      top: value
+    };
+  }
+
+  if (value) {
+    return { ...value,
+      right: value === null || value === void 0 ? void 0 : value.left,
+      bottom: value === null || value === void 0 ? void 0 : value.top
+    };
+  }
+
+  return value;
+}
+
+function DimensionsToolsPanel(_ref3) {
+  let {
+    resetAllFilter,
+    onChange,
+    value,
+    panelId,
+    children
+  } = _ref3;
+
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Dimensions'),
+    resetAll: resetAll,
+    panelId: panelId
+  }, children);
+}
+
+const DEFAULT_CONTROLS = {
+  contentSize: true,
+  wideSize: true,
+  padding: true,
+  margin: true,
+  blockGap: true,
+  minHeight: true
+};
+
+function DimensionsPanel(_ref4) {
+  var _settings$spacing5, _inheritedValue$layou, _inheritedValue$layou2, _inheritedValue$spaci, _settings$spacing6, _settings$spacing7, _settings$spacing8, _settings$spacing8$pa, _inheritedValue$spaci2, _settings$spacing9, _settings$spacing10, _settings$spacing11, _settings$spacing11$m, _inheritedValue$spaci3, _settings$spacing12, _settings$spacing13, _settings$spacing14, _settings$spacing14$b, _inheritedValue$dimen, _settings$parentLayou2;
+
+  let {
+    as: Wrapper = DimensionsToolsPanel,
+    value,
+    onChange,
+    inheritedValue = value,
+    settings,
+    panelId,
+    defaultControls = DEFAULT_CONTROLS,
+    onVisualize = () => {},
+    // Special case because the layout controls are not part of the dimensions panel
+    // in global styles but not in block inspector.
+    includeLayoutControls = false
+  } = _ref4;
+
+  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
+    settings
+  }, '', rawValue);
+
+  const showSpacingPresetsControl = useHasSpacingPresets(settings);
+  const units = (0, _components.__experimentalUseCustomUnits)({
+    availableUnits: (settings === null || settings === void 0 ? void 0 : (_settings$spacing5 = settings.spacing) === null || _settings$spacing5 === void 0 ? void 0 : _settings$spacing5.units) || ['%', 'px', 'em', 'rem', 'vw']
+  }); // Content Size
+
+  const showContentSizeControl = useHasContentSize(settings) && includeLayoutControls;
+  const contentSizeValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$layou = inheritedValue.layout) === null || _inheritedValue$layou === void 0 ? void 0 : _inheritedValue$layou.contentSize);
+
+  const setContentSizeValue = newValue => {
+    onChange({ ...value,
+      layout: { ...(value === null || value === void 0 ? void 0 : value.layout),
+        contentSize: newValue
+      }
+    });
+  };
+
+  const hasUserSetContentSizeValue = () => {
+    var _value$layout;
+
+    return !!(value !== null && value !== void 0 && (_value$layout = value.layout) !== null && _value$layout !== void 0 && _value$layout.contentSize);
+  };
+
+  const resetContentSizeValue = () => setContentSizeValue(undefined); // Wide Size
+
+
+  const showWideSizeControl = useHasWideSize(settings) && includeLayoutControls;
+  const wideSizeValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$layou2 = inheritedValue.layout) === null || _inheritedValue$layou2 === void 0 ? void 0 : _inheritedValue$layou2.wideSize);
+
+  const setWideSizeValue = newValue => {
+    onChange({ ...value,
+      layout: { ...(value === null || value === void 0 ? void 0 : value.layout),
+        wideSize: newValue
+      }
+    });
+  };
+
+  const hasUserSetWideSizeValue = () => {
+    var _value$layout2;
+
+    return !!(value !== null && value !== void 0 && (_value$layout2 = value.layout) !== null && _value$layout2 !== void 0 && _value$layout2.wideSize);
+  };
+
+  const resetWideSizeValue = () => setWideSizeValue(undefined); // Padding
+
+
+  const showPaddingControl = useHasPadding(settings);
+  const rawPadding = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$spaci = inheritedValue.spacing) === null || _inheritedValue$spaci === void 0 ? void 0 : _inheritedValue$spaci.padding);
+  const paddingValues = splitStyleValue(rawPadding);
+  const paddingSides = Array.isArray(settings === null || settings === void 0 ? void 0 : (_settings$spacing6 = settings.spacing) === null || _settings$spacing6 === void 0 ? void 0 : _settings$spacing6.padding) ? settings === null || settings === void 0 ? void 0 : (_settings$spacing7 = settings.spacing) === null || _settings$spacing7 === void 0 ? void 0 : _settings$spacing7.padding : settings === null || settings === void 0 ? void 0 : (_settings$spacing8 = settings.spacing) === null || _settings$spacing8 === void 0 ? void 0 : (_settings$spacing8$pa = _settings$spacing8.padding) === null || _settings$spacing8$pa === void 0 ? void 0 : _settings$spacing8$pa.sides;
+  const isAxialPadding = paddingSides && paddingSides.some(side => AXIAL_SIDES.includes(side));
+
+  const setPaddingValues = newPaddingValues => {
+    const padding = filterValuesBySides(newPaddingValues, paddingSides);
+    onChange({ ...value,
+      spacing: { ...(value === null || value === void 0 ? void 0 : value.spacing),
+        padding
+      }
+    });
+  };
+
+  const hasPaddingValue = () => {
+    var _value$spacing, _value$spacing2;
+
+    return !!(value !== null && value !== void 0 && (_value$spacing = value.spacing) !== null && _value$spacing !== void 0 && _value$spacing.padding) && Object.keys(value === null || value === void 0 ? void 0 : (_value$spacing2 = value.spacing) === null || _value$spacing2 === void 0 ? void 0 : _value$spacing2.padding).length;
+  };
+
+  const resetPaddingValue = () => setPaddingValues(undefined);
+
+  const onMouseOverPadding = () => onVisualize('padding'); // Margin
+
+
+  const showMarginControl = useHasMargin(settings);
+  const rawMargin = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$spaci2 = inheritedValue.spacing) === null || _inheritedValue$spaci2 === void 0 ? void 0 : _inheritedValue$spaci2.margin);
+  const marginValues = splitStyleValue(rawMargin);
+  const marginSides = Array.isArray(settings === null || settings === void 0 ? void 0 : (_settings$spacing9 = settings.spacing) === null || _settings$spacing9 === void 0 ? void 0 : _settings$spacing9.margin) ? settings === null || settings === void 0 ? void 0 : (_settings$spacing10 = settings.spacing) === null || _settings$spacing10 === void 0 ? void 0 : _settings$spacing10.margin : settings === null || settings === void 0 ? void 0 : (_settings$spacing11 = settings.spacing) === null || _settings$spacing11 === void 0 ? void 0 : (_settings$spacing11$m = _settings$spacing11.margin) === null || _settings$spacing11$m === void 0 ? void 0 : _settings$spacing11$m.sides;
+  const isAxialMargin = marginSides && marginSides.some(side => AXIAL_SIDES.includes(side));
+
+  const setMarginValues = newMarginValues => {
+    const margin = filterValuesBySides(newMarginValues, marginSides);
+    onChange({ ...value,
+      spacing: { ...(value === null || value === void 0 ? void 0 : value.spacing),
+        margin
+      }
+    });
+  };
+
+  const hasMarginValue = () => {
+    var _value$spacing3, _value$spacing4;
+
+    return !!(value !== null && value !== void 0 && (_value$spacing3 = value.spacing) !== null && _value$spacing3 !== void 0 && _value$spacing3.margin) && Object.keys(value === null || value === void 0 ? void 0 : (_value$spacing4 = value.spacing) === null || _value$spacing4 === void 0 ? void 0 : _value$spacing4.margin).length;
+  };
+
+  const resetMarginValue = () => setMarginValues(undefined);
+
+  const onMouseOverMargin = () => onVisualize('margin'); // Block Gap
+
+
+  const showGapControl = useHasGap(settings);
+  const gapValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$spaci3 = inheritedValue.spacing) === null || _inheritedValue$spaci3 === void 0 ? void 0 : _inheritedValue$spaci3.blockGap);
+  const gapValues = splitGapValue(gapValue);
+  const gapSides = Array.isArray(settings === null || settings === void 0 ? void 0 : (_settings$spacing12 = settings.spacing) === null || _settings$spacing12 === void 0 ? void 0 : _settings$spacing12.blockGap) ? settings === null || settings === void 0 ? void 0 : (_settings$spacing13 = settings.spacing) === null || _settings$spacing13 === void 0 ? void 0 : _settings$spacing13.blockGap : settings === null || settings === void 0 ? void 0 : (_settings$spacing14 = settings.spacing) === null || _settings$spacing14 === void 0 ? void 0 : (_settings$spacing14$b = _settings$spacing14.blockGap) === null || _settings$spacing14$b === void 0 ? void 0 : _settings$spacing14$b.sides;
+  const isAxialGap = gapSides && gapSides.some(side => AXIAL_SIDES.includes(side));
+
+  const setGapValue = newGapValue => {
+    onChange({ ...value,
+      spacing: { ...(value === null || value === void 0 ? void 0 : value.spacing),
+        blockGap: newGapValue
+      }
+    });
+  };
+
+  const setGapValues = nextBoxGapValue => {
+    if (!nextBoxGapValue) {
+      setGapValue(null);
+    } // If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
+
+
+    if (!isAxialGap && nextBoxGapValue !== null && nextBoxGapValue !== void 0 && nextBoxGapValue.hasOwnProperty('top')) {
+      setGapValue(nextBoxGapValue.top);
+    } else {
+      setGapValue({
+        top: nextBoxGapValue === null || nextBoxGapValue === void 0 ? void 0 : nextBoxGapValue.top,
+        left: nextBoxGapValue === null || nextBoxGapValue === void 0 ? void 0 : nextBoxGapValue.left
+      });
+    }
+  };
+
+  const resetGapValue = () => setGapValue(undefined);
+
+  const hasGapValue = () => {
+    var _value$spacing5;
+
+    return !!(value !== null && value !== void 0 && (_value$spacing5 = value.spacing) !== null && _value$spacing5 !== void 0 && _value$spacing5.blockGap);
+  }; // Min Height
+
+
+  const showMinHeightControl = useHasMinHeight(settings);
+  const minHeightValue = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$dimen = inheritedValue.dimensions) === null || _inheritedValue$dimen === void 0 ? void 0 : _inheritedValue$dimen.minHeight);
+
+  const setMinHeightValue = newValue => {
+    onChange({ ...value,
+      dimensions: { ...(value === null || value === void 0 ? void 0 : value.dimensions),
+        minHeight: newValue
+      }
+    });
+  };
+
+  const resetMinHeightValue = () => {
+    setMinHeightValue(undefined);
+  };
+
+  const hasMinHeightValue = () => {
+    var _value$dimensions;
+
+    return !!(value !== null && value !== void 0 && (_value$dimensions = value.dimensions) !== null && _value$dimensions !== void 0 && _value$dimensions.minHeight);
+  }; // Child Layout
+
+
+  const showChildLayoutControl = useHasChildLayout(settings);
+  const childLayout = inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.layout;
+  const {
+    orientation = 'horizontal'
+  } = (_settings$parentLayou2 = settings === null || settings === void 0 ? void 0 : settings.parentLayout) !== null && _settings$parentLayou2 !== void 0 ? _settings$parentLayou2 : {};
+  const childLayoutOrientationLabel = orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
+
+  const setChildLayout = newChildLayout => {
+    onChange({ ...value,
+      layout: { ...(value === null || value === void 0 ? void 0 : value.layout),
+        ...newChildLayout
+      }
+    });
+  };
+
+  const resetChildLayoutValue = () => {
+    setChildLayout({
+      selfStretch: undefined,
+      flexSize: undefined
+    });
+  };
+
+  const hasChildLayoutValue = () => !!(value !== null && value !== void 0 && value.layout);
+
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return { ...previousValue,
+      layout: (0, _utils2.cleanEmptyObject)({ ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.layout),
+        contentSize: undefined,
+        wideSize: undefined,
+        selfStretch: undefined,
+        flexSize: undefined
+      }),
+      spacing: { ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.spacing),
+        padding: undefined,
+        margin: undefined,
+        blockGap: undefined
+      },
+      dimensions: { ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.dimensions),
+        minHeight: undefined
+      }
+    };
+  }, []);
+
+  const onMouseLeaveControls = () => onVisualize(false);
+
+  return (0, _element.createElement)(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, (showContentSizeControl || showWideSizeControl) && (0, _element.createElement)("span", {
+    className: "span-columns"
+  }, (0, _i18n.__)('Set the width of the main content area.')), showContentSizeControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    label: (0, _i18n.__)('Content size'),
+    hasValue: hasUserSetContentSizeValue,
+    onDeselect: resetContentSizeValue,
+    isShownByDefault: defaultControls.contentSize,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    alignment: "flex-end",
+    justify: "flex-start"
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
+    label: (0, _i18n.__)('Content'),
+    labelPosition: "top",
+    __unstableInputWidth: "80px",
+    value: contentSizeValue || '',
+    onChange: nextContentSize => {
+      setContentSizeValue(nextContentSize);
+    },
+    units: units
+  }), (0, _element.createElement)(_components.__experimentalView, null, (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.positionCenter
+  })))), showWideSizeControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    label: (0, _i18n.__)('Wide size'),
+    hasValue: hasUserSetWideSizeValue,
+    onDeselect: resetWideSizeValue,
+    isShownByDefault: defaultControls.wideSize,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    alignment: "flex-end",
+    justify: "flex-start"
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
+    label: (0, _i18n.__)('Wide'),
+    labelPosition: "top",
+    __unstableInputWidth: "80px",
+    value: wideSizeValue || '',
+    onChange: nextWideSize => {
+      setWideSizeValue(nextWideSize);
+    },
+    units: units
+  }), (0, _element.createElement)(_components.__experimentalView, null, (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.stretchWide
+  })))), showPaddingControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasPaddingValue,
+    label: (0, _i18n.__)('Padding'),
+    onDeselect: resetPaddingValue,
+    isShownByDefault: defaultControls.padding,
+    className: (0, _classnames.default)({
+      'tools-panel-item-spacing': showSpacingPresetsControl
+    }),
+    panelId: panelId
+  }, !showSpacingPresetsControl && (0, _element.createElement)(_components.__experimentalBoxControl, {
+    values: paddingValues,
+    onChange: setPaddingValues,
+    label: (0, _i18n.__)('Padding'),
+    sides: paddingSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialPadding,
+    onMouseOver: onMouseOverPadding,
+    onMouseOut: onMouseLeaveControls
+  }), showSpacingPresetsControl && (0, _element.createElement)(_spacingSizesControl.default, {
+    values: paddingValues,
+    onChange: setPaddingValues,
+    label: (0, _i18n.__)('Padding'),
+    sides: paddingSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialPadding,
+    onMouseOver: onMouseOverPadding,
+    onMouseOut: onMouseLeaveControls
+  })), showMarginControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasMarginValue,
+    label: (0, _i18n.__)('Margin'),
+    onDeselect: resetMarginValue,
+    isShownByDefault: defaultControls.margin,
+    className: (0, _classnames.default)({
+      'tools-panel-item-spacing': showSpacingPresetsControl
+    }),
+    panelId: panelId
+  }, !showSpacingPresetsControl && (0, _element.createElement)(_components.__experimentalBoxControl, {
+    values: marginValues,
+    onChange: setMarginValues,
+    label: (0, _i18n.__)('Margin'),
+    sides: marginSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialMargin,
+    onMouseOver: onMouseOverMargin,
+    onMouseOut: onMouseLeaveControls
+  }), showSpacingPresetsControl && (0, _element.createElement)(_spacingSizesControl.default, {
+    values: marginValues,
+    onChange: setMarginValues,
+    label: (0, _i18n.__)('Margin'),
+    sides: marginSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialMargin,
+    onMouseOver: onMouseOverMargin,
+    onMouseOut: onMouseLeaveControls
+  })), showGapControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasGapValue,
+    label: (0, _i18n.__)('Block spacing'),
+    onDeselect: resetGapValue,
+    isShownByDefault: defaultControls.blockGap,
+    className: (0, _classnames.default)({
+      'tools-panel-item-spacing': showSpacingPresetsControl
+    }),
+    panelId: panelId
+  }, !showSpacingPresetsControl && (isAxialGap ? (0, _element.createElement)(_components.__experimentalBoxControl, {
+    label: (0, _i18n.__)('Block spacing'),
+    min: 0,
+    onChange: setGapValues,
+    units: units,
+    sides: gapSides,
+    values: gapValues,
+    allowReset: false,
+    splitOnAxis: isAxialGap
+  }) : (0, _element.createElement)(_components.__experimentalUnitControl, {
+    label: (0, _i18n.__)('Block spacing'),
+    __unstableInputWidth: "80px",
+    min: 0,
+    onChange: setGapValue,
+    units: units,
+    value: gapValue
+  })), showSpacingPresetsControl && (0, _element.createElement)(_spacingSizesControl.default, {
+    label: (0, _i18n.__)('Block spacing'),
+    min: 0,
+    onChange: setGapValues,
+    sides: isAxialGap ? gapSides : ['top'] // Use 'top' as the shorthand property in non-axial configurations.
+    ,
+    values: gapValues,
+    allowReset: false,
+    splitOnAxis: isAxialGap
+  })), showMinHeightControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasMinHeightValue,
+    label: (0, _i18n.__)('Min. height'),
+    onDeselect: resetMinHeightValue,
+    isShownByDefault: defaultControls.minHeight,
+    panelId: panelId
+  }, (0, _element.createElement)(_heightControl.default, {
+    label: (0, _i18n.__)('Min. height'),
+    value: minHeightValue,
+    onChange: setMinHeightValue
+  })), showChildLayoutControl && (0, _element.createElement)(_components.__experimentalVStack, {
+    as: _components.__experimentalToolsPanelItem,
+    spacing: 2,
+    hasValue: hasChildLayoutValue,
+    label: childLayoutOrientationLabel,
+    onDeselect: resetChildLayoutValue,
+    isShownByDefault: defaultControls.childLayout,
+    panelId: panelId
+  }, (0, _element.createElement)(_childLayoutControl.default, {
+    value: childLayout,
+    onChange: setChildLayout,
+    parentLayout: settings === null || settings === void 0 ? void 0 : settings.parentLayout
+  })));
+}
+//# sourceMappingURL=dimensions-panel.js.map