@wordpress/block-editor 11.4.0 → 11.5.0

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

@@ -0,0 +1,574 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalBoxControl as BoxControl, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalView as View } from '@wordpress/components';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { useCallback, Platform } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import { getValueFromVariable } from './utils';
+import SpacingSizesControl from '../spacing-sizes-control';
+import HeightControl from '../height-control';
+import ChildLayoutControl from '../child-layout-control';
+import { cleanEmptyObject } from '../../hooks/utils';
+const AXIAL_SIDES = ['horizontal', 'vertical'];
+export 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 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 createElement(ToolsPanel, {
+    label: __('Dimensions'),
+    resetAll: resetAll,
+    panelId: panelId
+  }, children);
+}
+
+const DEFAULT_CONTROLS = {
+  contentSize: true,
+  wideSize: true,
+  padding: true,
+  margin: true,
+  blockGap: true,
+  minHeight: true
+};
+export default 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 => getValueFromVariable({
+    settings
+  }, '', rawValue);
+
+  const showSpacingPresetsControl = useHasSpacingPresets(settings);
+  const units = useCustomUnits({
+    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' ? __('Width') : __('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 = useCallback(previousValue => {
+    return { ...previousValue,
+      layout: 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 createElement(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, (showContentSizeControl || showWideSizeControl) && createElement("span", {
+    className: "span-columns"
+  }, __('Set the width of the main content area.')), showContentSizeControl && createElement(ToolsPanelItem, {
+    className: "single-column",
+    label: __('Content size'),
+    hasValue: hasUserSetContentSizeValue,
+    onDeselect: resetContentSizeValue,
+    isShownByDefault: defaultControls.contentSize,
+    panelId: panelId
+  }, createElement(HStack, {
+    alignment: "flex-end",
+    justify: "flex-start"
+  }, createElement(UnitControl, {
+    label: __('Content'),
+    labelPosition: "top",
+    __unstableInputWidth: "80px",
+    value: contentSizeValue || '',
+    onChange: nextContentSize => {
+      setContentSizeValue(nextContentSize);
+    },
+    units: units
+  }), createElement(View, null, createElement(Icon, {
+    icon: positionCenter
+  })))), showWideSizeControl && createElement(ToolsPanelItem, {
+    className: "single-column",
+    label: __('Wide size'),
+    hasValue: hasUserSetWideSizeValue,
+    onDeselect: resetWideSizeValue,
+    isShownByDefault: defaultControls.wideSize,
+    panelId: panelId
+  }, createElement(HStack, {
+    alignment: "flex-end",
+    justify: "flex-start"
+  }, createElement(UnitControl, {
+    label: __('Wide'),
+    labelPosition: "top",
+    __unstableInputWidth: "80px",
+    value: wideSizeValue || '',
+    onChange: nextWideSize => {
+      setWideSizeValue(nextWideSize);
+    },
+    units: units
+  }), createElement(View, null, createElement(Icon, {
+    icon: stretchWide
+  })))), showPaddingControl && createElement(ToolsPanelItem, {
+    hasValue: hasPaddingValue,
+    label: __('Padding'),
+    onDeselect: resetPaddingValue,
+    isShownByDefault: defaultControls.padding,
+    className: classnames({
+      'tools-panel-item-spacing': showSpacingPresetsControl
+    }),
+    panelId: panelId
+  }, !showSpacingPresetsControl && createElement(BoxControl, {
+    values: paddingValues,
+    onChange: setPaddingValues,
+    label: __('Padding'),
+    sides: paddingSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialPadding,
+    onMouseOver: onMouseOverPadding,
+    onMouseOut: onMouseLeaveControls
+  }), showSpacingPresetsControl && createElement(SpacingSizesControl, {
+    values: paddingValues,
+    onChange: setPaddingValues,
+    label: __('Padding'),
+    sides: paddingSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialPadding,
+    onMouseOver: onMouseOverPadding,
+    onMouseOut: onMouseLeaveControls
+  })), showMarginControl && createElement(ToolsPanelItem, {
+    hasValue: hasMarginValue,
+    label: __('Margin'),
+    onDeselect: resetMarginValue,
+    isShownByDefault: defaultControls.margin,
+    className: classnames({
+      'tools-panel-item-spacing': showSpacingPresetsControl
+    }),
+    panelId: panelId
+  }, !showSpacingPresetsControl && createElement(BoxControl, {
+    values: marginValues,
+    onChange: setMarginValues,
+    label: __('Margin'),
+    sides: marginSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialMargin,
+    onMouseOver: onMouseOverMargin,
+    onMouseOut: onMouseLeaveControls
+  }), showSpacingPresetsControl && createElement(SpacingSizesControl, {
+    values: marginValues,
+    onChange: setMarginValues,
+    label: __('Margin'),
+    sides: marginSides,
+    units: units,
+    allowReset: false,
+    splitOnAxis: isAxialMargin,
+    onMouseOver: onMouseOverMargin,
+    onMouseOut: onMouseLeaveControls
+  })), showGapControl && createElement(ToolsPanelItem, {
+    hasValue: hasGapValue,
+    label: __('Block spacing'),
+    onDeselect: resetGapValue,
+    isShownByDefault: defaultControls.blockGap,
+    className: classnames({
+      'tools-panel-item-spacing': showSpacingPresetsControl
+    }),
+    panelId: panelId
+  }, !showSpacingPresetsControl && (isAxialGap ? createElement(BoxControl, {
+    label: __('Block spacing'),
+    min: 0,
+    onChange: setGapValues,
+    units: units,
+    sides: gapSides,
+    values: gapValues,
+    allowReset: false,
+    splitOnAxis: isAxialGap
+  }) : createElement(UnitControl, {
+    label: __('Block spacing'),
+    __unstableInputWidth: "80px",
+    min: 0,
+    onChange: setGapValue,
+    units: units,
+    value: gapValue
+  })), showSpacingPresetsControl && createElement(SpacingSizesControl, {
+    label: __('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 && createElement(ToolsPanelItem, {
+    hasValue: hasMinHeightValue,
+    label: __('Min. height'),
+    onDeselect: resetMinHeightValue,
+    isShownByDefault: defaultControls.minHeight,
+    panelId: panelId
+  }, createElement(HeightControl, {
+    label: __('Min. height'),
+    value: minHeightValue,
+    onChange: setMinHeightValue
+  })), showChildLayoutControl && createElement(VStack, {
+    as: ToolsPanelItem,
+    spacing: 2,
+    hasValue: hasChildLayoutValue,
+    label: childLayoutOrientationLabel,
+    onDeselect: resetChildLayoutValue,
+    isShownByDefault: defaultControls.childLayout,
+    panelId: panelId
+  }, createElement(ChildLayoutControl, {
+    value: childLayout,
+    onChange: setChildLayout,
+    parentLayout: settings === null || settings === void 0 ? void 0 : settings.parentLayout
+  })));
+}
+//# sourceMappingURL=dimensions-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/dimensions-panel.js"],"names":["classnames","__","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","__experimentalBoxControl","BoxControl","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalUnitControl","UnitControl","__experimentalUseCustomUnits","useCustomUnits","__experimentalView","View","Icon","positionCenter","stretchWide","useCallback","Platform","getValueFromVariable","SpacingSizesControl","HeightControl","ChildLayoutControl","cleanEmptyObject","AXIAL_SIDES","useHasDimensionsPanel","settings","hasContentSize","useHasContentSize","hasWideSize","useHasWideSize","hasPadding","useHasPadding","hasMargin","useHasMargin","hasGap","useHasGap","hasMinHeight","useHasMinHeight","hasChildLayout","useHasChildLayout","OS","layout","contentSize","wideSize","spacing","padding","margin","blockGap","dimensions","minHeight","type","parentLayoutType","default","defaultParentLayoutType","allowSizingOnChildren","parentLayout","support","useHasSpacingPresets","custom","theme","defaultPresets","spacingSizes","presets","length","filterValuesBySides","values","sides","filteredValues","forEach","side","top","bottom","left","right","splitStyleValue","value","splitGapValue","DimensionsToolsPanel","resetAllFilter","onChange","panelId","children","resetAll","updatedValue","DEFAULT_CONTROLS","DimensionsPanel","as","Wrapper","inheritedValue","defaultControls","onVisualize","includeLayoutControls","decodeValue","rawValue","showSpacingPresetsControl","units","availableUnits","showContentSizeControl","contentSizeValue","setContentSizeValue","newValue","hasUserSetContentSizeValue","resetContentSizeValue","undefined","showWideSizeControl","wideSizeValue","setWideSizeValue","hasUserSetWideSizeValue","resetWideSizeValue","showPaddingControl","rawPadding","paddingValues","paddingSides","Array","isArray","isAxialPadding","some","includes","setPaddingValues","newPaddingValues","hasPaddingValue","Object","keys","resetPaddingValue","onMouseOverPadding","showMarginControl","rawMargin","marginValues","marginSides","isAxialMargin","setMarginValues","newMarginValues","hasMarginValue","resetMarginValue","onMouseOverMargin","showGapControl","gapValue","gapValues","gapSides","isAxialGap","setGapValue","newGapValue","setGapValues","nextBoxGapValue","hasOwnProperty","resetGapValue","hasGapValue","showMinHeightControl","minHeightValue","setMinHeightValue","resetMinHeightValue","hasMinHeightValue","showChildLayoutControl","childLayout","orientation","childLayoutOrientationLabel","setChildLayout","newChildLayout","resetChildLayoutValue","selfStretch","flexSize","hasChildLayoutValue","previousValue","onMouseLeaveControls","nextContentSize","nextWideSize"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalBoxControl as BoxControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalView as View,\n} from '@wordpress/components';\nimport { Icon, positionCenter, stretchWide } from '@wordpress/icons';\nimport { useCallback, Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValueFromVariable } from './utils';\nimport SpacingSizesControl from '../spacing-sizes-control';\nimport HeightControl from '../height-control';\nimport ChildLayoutControl from '../child-layout-control';\nimport { cleanEmptyObject } from '../../hooks/utils';\n\nconst AXIAL_SIDES = [ 'horizontal', 'vertical' ];\n\nexport function useHasDimensionsPanel( settings ) {\n\tconst hasContentSize = useHasContentSize( settings );\n\tconst hasWideSize = useHasWideSize( settings );\n\tconst hasPadding = useHasPadding( settings );\n\tconst hasMargin = useHasMargin( settings );\n\tconst hasGap = useHasGap( settings );\n\tconst hasMinHeight = useHasMinHeight( settings );\n\tconst hasChildLayout = useHasChildLayout( settings );\n\n\treturn (\n\t\tPlatform.OS === 'web' &&\n\t\t( hasContentSize ||\n\t\t\thasWideSize ||\n\t\t\thasPadding ||\n\t\t\thasMargin ||\n\t\t\thasGap ||\n\t\t\thasMinHeight ||\n\t\t\thasChildLayout )\n\t);\n}\n\nfunction useHasContentSize( settings ) {\n\treturn settings?.layout?.contentSize;\n}\n\nfunction useHasWideSize( settings ) {\n\treturn settings?.layout?.wideSize;\n}\n\nfunction useHasPadding( settings ) {\n\treturn settings?.spacing?.padding;\n}\n\nfunction useHasMargin( settings ) {\n\treturn settings?.spacing?.margin;\n}\n\nfunction useHasGap( settings ) {\n\treturn settings?.spacing?.blockGap;\n}\n\nfunction useHasMinHeight( settings ) {\n\treturn settings?.dimensions?.minHeight;\n}\n\nfunction useHasChildLayout( settings ) {\n\tconst {\n\t\ttype: parentLayoutType = 'default',\n\t\tdefault: { type: defaultParentLayoutType = 'default' } = {},\n\t\tallowSizingOnChildren = false,\n\t} = settings?.parentLayout ?? {};\n\n\tconst support =\n\t\t( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&\n\t\tallowSizingOnChildren;\n\n\treturn !! settings?.layout && support;\n}\n\nfunction useHasSpacingPresets( settings ) {\n\tconst {\n\t\tcustom,\n\t\ttheme,\n\t\tdefault: defaultPresets,\n\t} = settings?.spacing?.spacingSizes || {};\n\tconst presets = custom ?? theme ?? defaultPresets ?? [];\n\n\treturn presets.length > 0;\n}\n\nfunction filterValuesBySides( values, sides ) {\n\tif ( ! sides ) {\n\t\t// If no custom side configuration all sides are opted into by default.\n\t\treturn values;\n\t}\n\n\t// Only include sides opted into within filtered values.\n\tconst filteredValues = {};\n\tsides.forEach( ( side ) => {\n\t\tif ( side === 'vertical' ) {\n\t\t\tfilteredValues.top = values.top;\n\t\t\tfilteredValues.bottom = values.bottom;\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tfilteredValues.left = values.left;\n\t\t\tfilteredValues.right = values.right;\n\t\t}\n\t\tfilteredValues[ side ] = values?.[ side ];\n\t} );\n\n\treturn filteredValues;\n}\n\nfunction splitStyleValue( value ) {\n\t// Check for shorthand value (a string value).\n\tif ( value && typeof value === 'string' ) {\n\t\t// Convert to value for individual sides for BoxControl.\n\t\treturn {\n\t\t\ttop: value,\n\t\t\tright: value,\n\t\t\tbottom: value,\n\t\t\tleft: value,\n\t\t};\n\t}\n\n\treturn value;\n}\n\nfunction splitGapValue( value ) {\n\t// Check for shorthand value (a string value).\n\tif ( value && typeof value === 'string' ) {\n\t\t// If the value is a string, treat it as a single side (top) for the spacing controls.\n\t\treturn {\n\t\t\ttop: value,\n\t\t};\n\t}\n\n\tif ( value ) {\n\t\treturn {\n\t\t\t...value,\n\t\t\tright: value?.left,\n\t\t\tbottom: value?.top,\n\t\t};\n\t}\n\n\treturn value;\n}\n\nfunction DimensionsToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Dimensions' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n};\n\nexport default function DimensionsPanel( {\n\tas: Wrapper = DimensionsToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tonVisualize = () => {},\n\t// Special case because the layout controls are not part of the dimensions panel\n\t// in global styles but not in block inspector.\n\tincludeLayoutControls = false,\n} ) {\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\n\tconst showSpacingPresetsControl = useHasSpacingPresets( settings );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: settings?.spacing?.units || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\t// Content Size\n\tconst showContentSizeControl =\n\t\tuseHasContentSize( settings ) && includeLayoutControls;\n\tconst contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );\n\tconst setContentSizeValue = ( newValue ) => {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tlayout: {\n\t\t\t\t...value?.layout,\n\t\t\t\tcontentSize: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\tconst hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;\n\tconst resetContentSizeValue = () => setContentSizeValue( undefined );\n\n\t// Wide Size\n\tconst showWideSizeControl =\n\t\tuseHasWideSize( settings ) && includeLayoutControls;\n\tconst wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );\n\tconst setWideSizeValue = ( newValue ) => {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tlayout: {\n\t\t\t\t...value?.layout,\n\t\t\t\twideSize: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\tconst hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;\n\tconst resetWideSizeValue = () => setWideSizeValue( undefined );\n\n\t// Padding\n\tconst showPaddingControl = useHasPadding( settings );\n\tconst rawPadding = decodeValue( inheritedValue?.spacing?.padding );\n\tconst paddingValues = splitStyleValue( rawPadding );\n\tconst paddingSides = Array.isArray( settings?.spacing?.padding )\n\t\t? settings?.spacing?.padding\n\t\t: settings?.spacing?.padding?.sides;\n\tconst isAxialPadding =\n\t\tpaddingSides &&\n\t\tpaddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\tconst setPaddingValues = ( newPaddingValues ) => {\n\t\tconst padding = filterValuesBySides( newPaddingValues, paddingSides );\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tspacing: {\n\t\t\t\t...value?.spacing,\n\t\t\t\tpadding,\n\t\t\t},\n\t\t} );\n\t};\n\tconst hasPaddingValue = () =>\n\t\t!! value?.spacing?.padding &&\n\t\tObject.keys( value?.spacing?.padding ).length;\n\tconst resetPaddingValue = () => setPaddingValues( undefined );\n\tconst onMouseOverPadding = () => onVisualize( 'padding' );\n\n\t// Margin\n\tconst showMarginControl = useHasMargin( settings );\n\tconst rawMargin = decodeValue( inheritedValue?.spacing?.margin );\n\tconst marginValues = splitStyleValue( rawMargin );\n\tconst marginSides = Array.isArray( settings?.spacing?.margin )\n\t\t? settings?.spacing?.margin\n\t\t: settings?.spacing?.margin?.sides;\n\tconst isAxialMargin =\n\t\tmarginSides &&\n\t\tmarginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\tconst setMarginValues = ( newMarginValues ) => {\n\t\tconst margin = filterValuesBySides( newMarginValues, marginSides );\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tspacing: {\n\t\t\t\t...value?.spacing,\n\t\t\t\tmargin,\n\t\t\t},\n\t\t} );\n\t};\n\tconst hasMarginValue = () =>\n\t\t!! value?.spacing?.margin &&\n\t\tObject.keys( value?.spacing?.margin ).length;\n\tconst resetMarginValue = () => setMarginValues( undefined );\n\tconst onMouseOverMargin = () => onVisualize( 'margin' );\n\n\t// Block Gap\n\tconst showGapControl = useHasGap( settings );\n\tconst gapValue = decodeValue( inheritedValue?.spacing?.blockGap );\n\tconst gapValues = splitGapValue( gapValue );\n\tconst gapSides = Array.isArray( settings?.spacing?.blockGap )\n\t\t? settings?.spacing?.blockGap\n\t\t: settings?.spacing?.blockGap?.sides;\n\tconst isAxialGap =\n\t\tgapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\tconst setGapValue = ( newGapValue ) => {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tspacing: {\n\t\t\t\t...value?.spacing,\n\t\t\t\tblockGap: newGapValue,\n\t\t\t},\n\t\t} );\n\t};\n\tconst setGapValues = ( nextBoxGapValue ) => {\n\t\tif ( ! nextBoxGapValue ) {\n\t\t\tsetGapValue( null );\n\t\t}\n\t\t// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.\n\t\tif ( ! isAxialGap && nextBoxGapValue?.hasOwnProperty( 'top' ) ) {\n\t\t\tsetGapValue( nextBoxGapValue.top );\n\t\t} else {\n\t\t\tsetGapValue( {\n\t\t\t\ttop: nextBoxGapValue?.top,\n\t\t\t\tleft: nextBoxGapValue?.left,\n\t\t\t} );\n\t\t}\n\t};\n\tconst resetGapValue = () => setGapValue( undefined );\n\tconst hasGapValue = () => !! value?.spacing?.blockGap;\n\n\t// Min Height\n\tconst showMinHeightControl = useHasMinHeight( settings );\n\tconst minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );\n\tconst setMinHeightValue = ( newValue ) => {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tdimensions: {\n\t\t\t\t...value?.dimensions,\n\t\t\t\tminHeight: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\tconst resetMinHeightValue = () => {\n\t\tsetMinHeightValue( undefined );\n\t};\n\tconst hasMinHeightValue = () => !! value?.dimensions?.minHeight;\n\n\t// Child Layout\n\tconst showChildLayoutControl = useHasChildLayout( settings );\n\tconst childLayout = inheritedValue?.layout;\n\tconst { orientation = 'horizontal' } = settings?.parentLayout ?? {};\n\tconst childLayoutOrientationLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst setChildLayout = ( newChildLayout ) => {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tlayout: {\n\t\t\t\t...value?.layout,\n\t\t\t\t...newChildLayout,\n\t\t\t},\n\t\t} );\n\t};\n\tconst resetChildLayoutValue = () => {\n\t\tsetChildLayout( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\tconst hasChildLayoutValue = () => !! value?.layout;\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tlayout: cleanEmptyObject( {\n\t\t\t\t...previousValue?.layout,\n\t\t\t\tcontentSize: undefined,\n\t\t\t\twideSize: undefined,\n\t\t\t\tselfStretch: undefined,\n\t\t\t\tflexSize: undefined,\n\t\t\t} ),\n\t\t\tspacing: {\n\t\t\t\t...previousValue?.spacing,\n\t\t\t\tpadding: undefined,\n\t\t\t\tmargin: undefined,\n\t\t\t\tblockGap: undefined,\n\t\t\t},\n\t\t\tdimensions: {\n\t\t\t\t...previousValue?.dimensions,\n\t\t\t\tminHeight: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst onMouseLeaveControls = () => onVisualize( false );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ ( showContentSizeControl || showWideSizeControl ) && (\n\t\t\t\t<span className=\"span-columns\">\n\t\t\t\t\t{ __( 'Set the width of the main content area.' ) }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ showContentSizeControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Content size' ) }\n\t\t\t\t\thasValue={ hasUserSetContentSizeValue }\n\t\t\t\t\tonDeselect={ resetContentSizeValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.contentSize }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<HStack alignment=\"flex-end\" justify=\"flex-start\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Content' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ contentSizeValue || '' }\n\t\t\t\t\t\t\tonChange={ ( nextContentSize ) => {\n\t\t\t\t\t\t\t\tsetContentSizeValue( nextContentSize );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t<Icon icon={ positionCenter } />\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</HStack>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showWideSizeControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Wide size' ) }\n\t\t\t\t\thasValue={ hasUserSetWideSizeValue }\n\t\t\t\t\tonDeselect={ resetWideSizeValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.wideSize }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<HStack alignment=\"flex-end\" justify=\"flex-start\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Wide' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ wideSizeValue || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWideSize ) => {\n\t\t\t\t\t\t\t\tsetWideSizeValue( nextWideSize );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</HStack>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showPaddingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasPaddingValue }\n\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\tonDeselect={ resetPaddingValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.padding }\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'tools-panel-item-spacing': showSpacingPresetsControl,\n\t\t\t\t\t} ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ ! showSpacingPresetsControl && (\n\t\t\t\t\t\t<BoxControl\n\t\t\t\t\t\t\tvalues={ paddingValues }\n\t\t\t\t\t\t\tonChange={ setPaddingValues }\n\t\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\t\tsides={ paddingSides }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\t\tsplitOnAxis={ isAxialPadding }\n\t\t\t\t\t\t\tonMouseOver={ onMouseOverPadding }\n\t\t\t\t\t\t\tonMouseOut={ onMouseLeaveControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ showSpacingPresetsControl && (\n\t\t\t\t\t\t<SpacingSizesControl\n\t\t\t\t\t\t\tvalues={ paddingValues }\n\t\t\t\t\t\t\tonChange={ setPaddingValues }\n\t\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\t\tsides={ paddingSides }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\t\tsplitOnAxis={ isAxialPadding }\n\t\t\t\t\t\t\tonMouseOver={ onMouseOverPadding }\n\t\t\t\t\t\t\tonMouseOut={ onMouseLeaveControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showMarginControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasMarginValue }\n\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\tonDeselect={ resetMarginValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.margin }\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'tools-panel-item-spacing': showSpacingPresetsControl,\n\t\t\t\t\t} ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ ! showSpacingPresetsControl && (\n\t\t\t\t\t\t<BoxControl\n\t\t\t\t\t\t\tvalues={ marginValues }\n\t\t\t\t\t\t\tonChange={ setMarginValues }\n\t\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\t\tsides={ marginSides }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\t\tsplitOnAxis={ isAxialMargin }\n\t\t\t\t\t\t\tonMouseOver={ onMouseOverMargin }\n\t\t\t\t\t\t\tonMouseOut={ onMouseLeaveControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ showSpacingPresetsControl && (\n\t\t\t\t\t\t<SpacingSizesControl\n\t\t\t\t\t\t\tvalues={ marginValues }\n\t\t\t\t\t\t\tonChange={ setMarginValues }\n\t\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\t\tsides={ marginSides }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\t\tsplitOnAxis={ isAxialMargin }\n\t\t\t\t\t\t\tonMouseOver={ onMouseOverMargin }\n\t\t\t\t\t\t\tonMouseOut={ onMouseLeaveControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showGapControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasGapValue }\n\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\tonDeselect={ resetGapValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.blockGap }\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'tools-panel-item-spacing': showSpacingPresetsControl,\n\t\t\t\t\t} ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ ! showSpacingPresetsControl &&\n\t\t\t\t\t\t( isAxialGap ? (\n\t\t\t\t\t\t\t<BoxControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\tonChange={ setGapValues }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t\tsides={ gapSides }\n\t\t\t\t\t\t\t\tvalues={ gapValues }\n\t\t\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\t\t\tsplitOnAxis={ isAxialGap }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\tonChange={ setGapValue }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t\tvalue={ gapValue }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t{ showSpacingPresetsControl && (\n\t\t\t\t\t\t<SpacingSizesControl\n\t\t\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tonChange={ setGapValues }\n\t\t\t\t\t\t\tsides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.\n\t\t\t\t\t\t\tvalues={ gapValues }\n\t\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\t\tsplitOnAxis={ isAxialGap }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showMinHeightControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasMinHeightValue }\n\t\t\t\t\tlabel={ __( 'Min. height' ) }\n\t\t\t\t\tonDeselect={ resetMinHeightValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.minHeight }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<HeightControl\n\t\t\t\t\t\tlabel={ __( 'Min. height' ) }\n\t\t\t\t\t\tvalue={ minHeightValue }\n\t\t\t\t\t\tonChange={ setMinHeightValue }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showChildLayoutControl && (\n\t\t\t\t<VStack\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\thasValue={ hasChildLayoutValue }\n\t\t\t\t\tlabel={ childLayoutOrientationLabel }\n\t\t\t\t\tonDeselect={ resetChildLayoutValue }\n\t\t\t\t\tisShownByDefault={ defaultControls.childLayout }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ChildLayoutControl\n\t\t\t\t\t\tvalue={ childLayout }\n\t\t\t\t\t\tonChange={ setChildLayout }\n\t\t\t\t\t\tparentLayout={ settings?.parentLayout }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"]}