@wordpress/block-editor 11.4.0 → 11.5.0

package/build/components/date-format-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"names":["EXAMPLE_DATE","Date","DateFormatPicker","format","defaultFormat","onChange","checked","NonDefaultControls","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","className","__experimentalHint","isCustom","setIsCustom","includes","find","option","selectedItem","Link","value"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we can illustrate the different formats in the dropdown properly,\n// show a date that has a day greater than 12 and a month with more than three\n// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was\n// released.\nconst EXAMPLE_DATE = new Date( 2022, 0, 25 );\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}                          props\n * @param {string|null}                     props.format        The selected date\n *                                                              format. If\n *                                                              `null`,\n *                                                              _Default_ is\n *                                                              selected.\n * @param {string}                          props.defaultFormat The date format that\n *                                                              will be used if the\n *                                                              user selects\n *                                                              'Default'.\n * @param {( format: string|null ) => void} props.onChange      Called when a\n *                                                              selection is\n *                                                              made. If `null`,\n *                                                              _Default_ is\n *                                                              selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __( 'Default format' ) }\n\t\t\t\t\t\t<span className=\"block-editor-date-format-picker__default-format-toggle-control__hint\">\n\t\t\t\t\t\t\t{ dateI18n( defaultFormat, EXAMPLE_DATE ) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t'Y-m-d',\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = suggestedFormats.map(\n\t\t( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, EXAMPLE_DATE ),\n\t\t\tformat: suggestedFormat,\n\t\t} )\n\t);\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() => !! format && ! suggestedFormats.includes( format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\t__nextUnconstrainedWidth\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/formatting-date-and-time/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"names":["EXAMPLE_DATE","Date","DateFormatPicker","format","defaultFormat","onChange","checked","NonDefaultControls","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","className","__experimentalHint","isCustom","setIsCustom","includes","find","option","selectedItem","Link","value"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we can illustrate the different formats in the dropdown properly,\n// show a date that has a day greater than 12 and a month with more than three\n// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was\n// released.\nconst EXAMPLE_DATE = new Date( 2022, 0, 25 );\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}                          props\n * @param {string|null}                     props.format        The selected date\n *                                                              format. If\n *                                                              `null`,\n *                                                              _Default_ is\n *                                                              selected.\n * @param {string}                          props.defaultFormat The date format that\n *                                                              will be used if the\n *                                                              user selects\n *                                                              'Default'.\n * @param {( format: string|null ) => void} props.onChange      Called when a\n *                                                              selection is\n *                                                              made. If `null`,\n *                                                              _Default_ is\n *                                                              selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\tEXAMPLE_DATE\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t'Y-m-d',\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = suggestedFormats.map(\n\t\t( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, EXAMPLE_DATE ),\n\t\t\tformat: suggestedFormat,\n\t\t} )\n\t);\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() => !! format && ! suggestedFormats.includes( format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\t__nextUnconstrainedWidth\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/formatting-date-and-time/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"]}

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