@wordpress/edit-site 5.3.6 → 5.5.0

package/build/components/global-styles/custom-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/custom-css.js"],"names":["useGlobalStyle","blockEditorPrivateApis","CustomCSSControl","blockName","block","customCSS","setCustomCSS","themeCSS","cssError","setCSSError","ignoreThemeCustomCSS","themeCustomCSS","undefined","handleOnChange","value","transformed","css","handleOnBlur","event","target","originalThemeCustomCSS","replace","info"],"mappings":";;;;;;;;;AAGA;;AACA;;AAQA;;AACA;;AAIA;;AAKA;;AACA;;AAvBA;AACA;AACA;;AAiBA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAAqB,yBAAQC,wBAAR,CAA3B;;AACA,SAASC,gBAAT,OAA2C;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC1C;AACA;AACA,QAAMC,KAAK,GAAG,CAAC,CAAED,SAAH,GAAeA,SAAf,GAA2B,IAAzC;AAEA,QAAM,CAAEE,SAAF,EAAaC,YAAb,IAA8BN,cAAc,CAAE,KAAF,EAASI,KAAT,CAAlD;AACA,QAAM,CAAEG,QAAF,IAAeP,cAAc,CAAE,KAAF,EAASI,KAAT,EAAgB,MAAhB,CAAnC;AACA,QAAM,CAAEI,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,IAAV,CAAlC;AACA,QAAMC,oBAAoB,GAAG,4BAA7B,CAR0C,CAU1C;AACA;AACA;;AACA,QAAMC,cAAc,GACnB,CAAEN,SAAF,IAAeE,QAAf,GACI,MAAM,cACP,wBADO,CAEJ,QAAQA,QAAU,QAAQ,cAAI,sBAAJ,CAA8B,KAH9D,GAIGK,SALJ;;AAOA,WAASC,cAAT,CAAyBC,KAAzB,EAAiC;AAChC;AACA;AACA,QAAKP,QAAQ,IAAIO,KAAK,KAAK,EAA3B,EAAgC;AAC/BR,MAAAA,YAAY,CAAEI,oBAAF,CAAZ;AACA;AACA;;AACDJ,IAAAA,YAAY,CAAEQ,KAAF,CAAZ;;AACA,QAAKN,QAAL,EAAgB;AACf,YAAM,CAAEO,WAAF,IAAkB,kCACvB,CAAE;AAAEC,QAAAA,GAAG,EAAEF;AAAP,OAAF,CADuB,EAEvB,wBAFuB,CAAxB;;AAIA,UAAKC,WAAL,EAAmB;AAClBN,QAAAA,WAAW,CAAE,IAAF,CAAX;AACA;AACD;AACD;;AAED,WAASQ,YAAT,CAAuBC,KAAvB,EAA+B;AAAA;;AAC9B,QAAK,EAAEA,KAAF,aAAEA,KAAF,gCAAEA,KAAK,CAAEC,MAAT,0CAAE,cAAeL,KAAjB,CAAL,EAA8B;AAC7BL,MAAAA,WAAW,CAAE,IAAF,CAAX;AACA;AACA;;AAED,UAAM,CAAEM,WAAF,IAAkB,kCACvB,CAAE;AAAEC,MAAAA,GAAG,EAAEE,KAAK,CAACC,MAAN,CAAaL;AAApB,KAAF,CADuB,EAEvB,wBAFuB,CAAxB;AAKAL,IAAAA,WAAW,CACVM,WAAW,KAAK,IAAhB,GACG,cAAI,4CAAJ,CADH,GAEG,IAHO,CAAX;AAKA;;AAED,QAAMK,sBAAsB,GAC3Bb,QAAQ,IAAIF,SAAZ,IAAyBM,cAAc,KAAKN,SAA5C,GACGE,QADH,GAEGK,SAHJ;AAKA,SACC,qDACGQ,sBAAsB,IACvB,4BAAC,iBAAD,QACC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAG,cAAI,2BAAJ,CADT;AAEC,IAAA,WAAW,EAAG;AAFf,KAIC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,sBADH,CAJD,CADD,CAFF,EAaC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,gBAAJ,CAAZ,CADD,EAEC,4BAAC,2BAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EACJ,CAAAf,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEgB,OAAX,CAAoBX,oBAApB,EAA0C,EAA1C,MACAC,cAJF;AAMC,IAAA,QAAQ,EAAKG,KAAF,IAAaD,cAAc,CAAEC,KAAF,CANvC;AAOC,IAAA,MAAM,EAAGG,YAPV;AAQC,IAAA,SAAS,EAAC,2CARX;AASC,IAAA,UAAU,EAAG;AATd,IAFD,EAaGT,QAAQ,IACT,4BAAC,mBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gBAAD;AACC,IAAA,IAAI,EAAGc,WADR;AAEC,IAAA,SAAS,EAAC;AAFX,IADD,CADD,CAdF,CAbD,CADD;AAwCA;;eAEcpB,gB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\tTextareaControl,\n\tPanel,\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\tTooltip,\n\tIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\ttransformStyles,\n} from '@wordpress/block-editor';\nimport { info } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport Subtitle from './subtitle';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\nfunction CustomCSSControl( { blockName } ) {\n\t// If blockName is defined, we are customizing CSS at the block level:\n\t// styles.blocks.blockName.css\n\tconst block = !! blockName ? blockName : null;\n\n\tconst [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );\n\tconst [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';\n\n\t// If there is custom css from theme.json show it in the edit box\n\t// so the user can selectively overwrite it, rather than have the user CSS\n\t// completely overwrite the theme CSS by default.\n\tconst themeCustomCSS =\n\t\t! customCSS && themeCSS\n\t\t\t? `/* ${ __(\n\t\t\t\t\t'Theme Custom CSS start'\n\t\t\t  ) } */\\n${ themeCSS }\\n/* ${ __( 'Theme Custom CSS end' ) } */`\n\t\t\t: undefined;\n\n\tfunction handleOnChange( value ) {\n\t\t// If there is theme custom CSS, but the user clears the input box then save the\n\t\t// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.\n\t\tif ( themeCSS && value === '' ) {\n\t\t\tsetCustomCSS( ignoreThemeCustomCSS );\n\t\t\treturn;\n\t\t}\n\t\tsetCustomCSS( value );\n\t\tif ( cssError ) {\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: value } ],\n\t\t\t\t'.editor-styles-wrapper'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.editor-styles-wrapper'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\tconst originalThemeCustomCSS =\n\t\tthemeCSS && customCSS && themeCustomCSS !== customCSS\n\t\t\t? themeCSS\n\t\t\t: undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{ originalThemeCustomCSS && (\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelBody\n\t\t\t\t\t\ttitle={ __( 'Original Theme Custom CSS' ) }\n\t\t\t\t\t\tinitialOpen={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<pre className=\"edit-site-global-styles__custom-css-theme-css\">\n\t\t\t\t\t\t\t{ originalThemeCustomCSS }\n\t\t\t\t\t\t</pre>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</Panel>\n\t\t\t) }\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>\n\t\t\t\t<TextareaControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tcustomCSS?.replace( ignoreThemeCustomCSS, '' ) ||\n\t\t\t\t\t\tthemeCustomCSS\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( value ) => handleOnChange( value ) }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tclassName=\"edit-site-global-styles__custom-css-input\"\n\t\t\t\t\tspellCheck={ false }\n\t\t\t\t/>\n\t\t\t\t{ cssError && (\n\t\t\t\t\t<Tooltip text={ cssError }>\n\t\t\t\t\t\t<div className=\"edit-site-global-styles__custom-css-validation-wrapper\">\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles__custom-css-validation-icon\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CustomCSSControl;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/custom-css.js"],"names":["useGlobalStyle","blockEditorPrivateApis","CustomCSSControl","blockName","block","customCSS","setCustomCSS","themeCSS","cssError","setCSSError","ignoreThemeCustomCSS","themeCustomCSS","undefined","handleOnChange","value","transformed","css","handleOnBlur","event","target","originalThemeCustomCSS","replace","info"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\tTextareaControl,\n\tPanel,\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\tTooltip,\n\tIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\ttransformStyles,\n} from '@wordpress/block-editor';\nimport { info } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport Subtitle from './subtitle';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\nfunction CustomCSSControl( { blockName } ) {\n\t// If blockName is defined, we are customizing CSS at the block level:\n\t// styles.blocks.blockName.css\n\tconst block = !! blockName ? blockName : null;\n\n\tconst [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );\n\tconst [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';\n\n\t// If there is custom css from theme.json show it in the edit box\n\t// so the user can selectively overwrite it, rather than have the user CSS\n\t// completely overwrite the theme CSS by default.\n\tconst themeCustomCSS =\n\t\t! customCSS && themeCSS\n\t\t\t? `/* ${ __(\n\t\t\t\t\t'Theme Custom CSS start'\n\t\t\t  ) } */\\n${ themeCSS }\\n/* ${ __( 'Theme Custom CSS end' ) } */`\n\t\t\t: undefined;\n\n\tfunction handleOnChange( value ) {\n\t\t// If there is theme custom CSS, but the user clears the input box then save the\n\t\t// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.\n\t\tif ( themeCSS && value === '' ) {\n\t\t\tsetCustomCSS( ignoreThemeCustomCSS );\n\t\t\treturn;\n\t\t}\n\t\tsetCustomCSS( value );\n\t\tif ( cssError ) {\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: value } ],\n\t\t\t\t'.editor-styles-wrapper'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.editor-styles-wrapper'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\tconst originalThemeCustomCSS =\n\t\tthemeCSS && customCSS && themeCustomCSS !== customCSS\n\t\t\t? themeCSS\n\t\t\t: undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{ originalThemeCustomCSS && (\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelBody\n\t\t\t\t\t\ttitle={ __( 'Original Theme Custom CSS' ) }\n\t\t\t\t\t\tinitialOpen={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<pre className=\"edit-site-global-styles__custom-css-theme-css\">\n\t\t\t\t\t\t\t{ originalThemeCustomCSS }\n\t\t\t\t\t\t</pre>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</Panel>\n\t\t\t) }\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<Subtitle>{ __( 'Additional CSS' ) }</Subtitle>\n\t\t\t\t<TextareaControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tcustomCSS?.replace( ignoreThemeCustomCSS, '' ) ||\n\t\t\t\t\t\tthemeCustomCSS\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( value ) => handleOnChange( value ) }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tclassName=\"edit-site-global-styles__custom-css-input\"\n\t\t\t\t\tspellCheck={ false }\n\t\t\t\t/>\n\t\t\t\t{ cssError && (\n\t\t\t\t\t<Tooltip text={ cssError }>\n\t\t\t\t\t\t<div className=\"edit-site-global-styles__custom-css-validation-wrapper\">\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles__custom-css-validation-icon\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CustomCSSControl;\n"]}

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

@@ -1,33 +1,16 @@
 "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 _blockEditor = require("@wordpress/block-editor");
 
-var _icons = require("@wordpress/icons");
-
-var _hooks = require("./hooks");
-
 var _privateApis = require("../../private-apis");
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -36,490 +19,62 @@ var _privateApis = require("../../private-apis");
  * Internal dependencies
  */
 const {
+  useGlobalStyle,
   useGlobalSetting,
-  useGlobalStyle
+  useSettingsForBlockElement,
+  DimensionsPanel: StylesDimensionsPanel
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
-const AXIAL_SIDES = ['horizontal', 'vertical'];
-
-function useHasDimensionsPanel(name) {
-  const hasContentSize = useHasContentSize(name);
-  const hasWideSize = useHasWideSize(name);
-  const hasPadding = useHasPadding(name);
-  const hasMargin = useHasMargin(name);
-  const hasGap = useHasGap(name);
-  const hasMinHeight = useHasMinHeight(name);
-  return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight;
-}
-
-function useHasContentSize(name) {
-  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = useGlobalSetting('layout.contentSize', name);
-  return settings && supports.includes('contentSize');
-}
-
-function useHasWideSize(name) {
-  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = useGlobalSetting('layout.wideSize', name);
-  return settings && supports.includes('wideSize');
-}
-
-function useHasPadding(name) {
-  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = useGlobalSetting('spacing.padding', name);
-  return settings && supports.includes('padding');
-}
-
-function useHasMargin(name) {
-  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = useGlobalSetting('spacing.margin', name);
-  return settings && supports.includes('margin');
-}
-
-function useHasGap(name) {
-  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = useGlobalSetting('spacing.blockGap', name);
-  return settings && supports.includes('blockGap');
-}
-
-function useHasMinHeight(name) {
-  const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [settings] = useGlobalSetting('dimensions.minHeight', name);
-  return settings && supports.includes('minHeight');
-}
-
-function useHasSpacingPresets() {
-  var _ref, _ref2;
-
-  const [settings] = useGlobalSetting('spacing.spacingSizes');
-  const {
-    custom,
-    theme,
-    default: defaultPresets
-  } = settings || {};
-  const presets = (_ref = (_ref2 = custom !== null && custom !== void 0 ? custom : theme) !== null && _ref2 !== void 0 ? _ref2 : defaultPresets) !== null && _ref !== void 0 ? _ref : [];
-  return settings && 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.
 
+function DimensionsPanel(_ref) {
+  let {
+    name,
+    variation = ''
+  } = _ref;
+  let prefixParts = [];
 
-  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;
-    }
+  if (variation) {
+    prefixParts = ['variations', variation].concat(prefixParts);
+  }
 
-    filteredValues[side] = values[side];
+  const prefix = prefixParts.join('.');
+  const [style] = useGlobalStyle(prefix, name, 'user', false);
+  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
+    shouldDecodeEncode: false
   });
-  return filteredValues;
-}
+  const [rawSettings, setSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name); // These intermediary objects are needed because the "layout" property is stored
+  // in settings rather than styles.
 
-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
+  const inheritedStyleWithLayout = (0, _element.useMemo)(() => {
+    return { ...inheritedStyle,
+      layout: settings.layout
     };
-  }
-
-  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
+  }, [inheritedStyle, settings.layout]);
+  const styleWithLayout = (0, _element.useMemo)(() => {
+    return { ...style,
+      layout: settings.layout
     };
-  }
+  }, [style, settings.layout]);
 
-  if (value) {
-    return { ...value,
-      right: value === null || value === void 0 ? void 0 : value.left,
-      bottom: value === null || value === void 0 ? void 0 : value.top
+  const onChange = newStyle => {
+    const updatedStyle = { ...newStyle
     };
-  }
-
-  return value;
-} // Props for managing `layout.contentSize`.
-
-
-function useContentSizeProps(name) {
-  const [contentSizeValue, setContentSizeValue] = useGlobalSetting('layout.contentSize', name);
-  const [userSetContentSizeValue] = useGlobalSetting('layout.contentSize', name, 'user');
-
-  const hasUserSetContentSizeValue = () => !!userSetContentSizeValue;
-
-  const resetContentSizeValue = () => setContentSizeValue('');
-
-  return {
-    contentSizeValue,
-    setContentSizeValue,
-    hasUserSetContentSizeValue,
-    resetContentSizeValue
-  };
-} // Props for managing `layout.wideSize`.
-
-
-function useWideSizeProps(name) {
-  const [wideSizeValue, setWideSizeValue] = useGlobalSetting('layout.wideSize', name);
-  const [userSetWideSizeValue] = useGlobalSetting('layout.wideSize', name, 'user');
+    delete updatedStyle.layout;
+    setStyle(updatedStyle);
 
-  const hasUserSetWideSizeValue = () => !!userSetWideSizeValue;
-
-  const resetWideSizeValue = () => setWideSizeValue('');
-
-  return {
-    wideSizeValue,
-    setWideSizeValue,
-    hasUserSetWideSizeValue,
-    resetWideSizeValue
-  };
-} // Props for managing `spacing.padding`.
-
-
-function usePaddingProps(name) {
-  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const prefix = variation ? `variations.${variation}.` : '';
-  const [rawPadding, setRawPadding] = useGlobalStyle(prefix + 'spacing.padding', name);
-  const paddingValues = splitStyleValue(rawPadding);
-  const paddingSides = (0, _blockEditor.__experimentalUseCustomSides)(name, 'padding');
-  const isAxialPadding = paddingSides && paddingSides.some(side => AXIAL_SIDES.includes(side));
-
-  const setPaddingValues = newPaddingValues => {
-    const padding = filterValuesBySides(newPaddingValues, paddingSides);
-    setRawPadding(padding);
-  };
-
-  const resetPaddingValue = () => setPaddingValues({});
-
-  const [userSetPaddingValue] = useGlobalStyle(prefix + 'spacing.padding', name, 'user'); // The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
-
-  const hasPaddingValue = () => !!userSetPaddingValue;
-
-  return {
-    paddingValues,
-    paddingSides,
-    isAxialPadding,
-    setPaddingValues,
-    resetPaddingValue,
-    hasPaddingValue
-  };
-} // Props for managing `spacing.margin`.
-
-
-function useMarginProps(name) {
-  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const prefix = variation ? `variations.${variation}.` : '';
-  const [rawMargin, setRawMargin] = useGlobalStyle(prefix + 'spacing.margin', name);
-  const marginValues = splitStyleValue(rawMargin);
-  const marginSides = (0, _blockEditor.__experimentalUseCustomSides)(name, 'margin');
-  const isAxialMargin = marginSides && marginSides.some(side => AXIAL_SIDES.includes(side));
-
-  const setMarginValues = newMarginValues => {
-    const margin = filterValuesBySides(newMarginValues, marginSides);
-    setRawMargin(margin);
-  };
-
-  const resetMarginValue = () => setMarginValues({});
-
-  const hasMarginValue = () => !!marginValues && Object.keys(marginValues).length;
-
-  return {
-    marginValues,
-    marginSides,
-    isAxialMargin,
-    setMarginValues,
-    resetMarginValue,
-    hasMarginValue
-  };
-} // Props for managing `spacing.blockGap`.
-
-
-function useBlockGapProps(name) {
-  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const prefix = variation ? `variations.${variation}.` : '';
-  const [gapValue, setGapValue] = useGlobalStyle(prefix + 'spacing.blockGap', name);
-  const gapValues = splitGapValue(gapValue);
-  const gapSides = (0, _blockEditor.__experimentalUseCustomSides)(name, 'blockGap');
-  const isAxialGap = gapSides && gapSides.some(side => AXIAL_SIDES.includes(side));
-
-  const resetGapValue = () => setGapValue(undefined);
-
-  const [userSetGapValue] = useGlobalStyle(prefix + 'spacing.blockGap', name, 'user');
-
-  const hasGapValue = () => !!userSetGapValue;
-
-  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
+    if (newStyle.layout !== settings.layout) {
+      setSettings({ ...rawSettings,
+        layout: newStyle.layout
       });
     }
   };
 
-  return {
-    gapValue,
-    gapValues,
-    gapSides,
-    isAxialGap,
-    setGapValue,
-    setGapValues,
-    resetGapValue,
-    hasGapValue
-  };
-} // Props for managing `dimensions.minHeight`.
-
-
-function useMinHeightProps(name) {
-  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const prefix = variation ? `variations.${variation}.` : '';
-  const [minHeightValue, setMinHeightValue] = useGlobalStyle(prefix + 'dimensions.minHeight', name);
-
-  const resetMinHeightValue = () => setMinHeightValue(undefined);
-
-  const hasMinHeightValue = () => !!minHeightValue;
-
-  return {
-    minHeightValue,
-    setMinHeightValue,
-    resetMinHeightValue,
-    hasMinHeightValue
-  };
-}
-
-function DimensionsPanel(_ref3) {
-  let {
-    name,
-    variation = ''
-  } = _ref3;
-  const showContentSizeControl = useHasContentSize(name);
-  const showWideSizeControl = useHasWideSize(name);
-  const showPaddingControl = useHasPadding(name);
-  const showMarginControl = useHasMargin(name);
-  const showGapControl = useHasGap(name);
-  const showMinHeightControl = useHasMinHeight(name);
-  const showSpacingPresetsControl = useHasSpacingPresets();
-  const units = (0, _components.__experimentalUseCustomUnits)({
-    availableUnits: useGlobalSetting('spacing.units', name)[0] || ['%', 'px', 'em', 'rem', 'vw']
-  }); // Props for managing `layout.contentSize`.
-
-  const {
-    contentSizeValue,
-    setContentSizeValue,
-    hasUserSetContentSizeValue,
-    resetContentSizeValue
-  } = useContentSizeProps(name); // Props for managing `layout.wideSize`.
-
-  const {
-    wideSizeValue,
-    setWideSizeValue,
-    hasUserSetWideSizeValue,
-    resetWideSizeValue
-  } = useWideSizeProps(name); // Props for managing `spacing.padding`.
-
-  const {
-    paddingValues,
-    paddingSides,
-    isAxialPadding,
-    setPaddingValues,
-    resetPaddingValue,
-    hasPaddingValue
-  } = usePaddingProps(name, variation); // Props for managing `spacing.margin`.
-
-  const {
-    marginValues,
-    marginSides,
-    isAxialMargin,
-    setMarginValues,
-    resetMarginValue,
-    hasMarginValue
-  } = useMarginProps(name, variation); // Props for managing `spacing.blockGap`.
-
-  const {
-    gapValue,
-    gapValues,
-    gapSides,
-    isAxialGap,
-    setGapValue,
-    setGapValues,
-    resetGapValue,
-    hasGapValue
-  } = useBlockGapProps(name, variation); // Props for managing `dimensions.minHeight`.
-
-  const {
-    minHeightValue,
-    setMinHeightValue,
-    resetMinHeightValue,
-    hasMinHeightValue
-  } = useMinHeightProps(name, variation);
-
-  const resetAll = () => {
-    resetPaddingValue();
-    resetMarginValue();
-    resetGapValue();
-    resetContentSizeValue();
-    resetWideSizeValue();
-  };
-
-  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Dimensions'),
-    resetAll: resetAll
-  }, (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: true
-  }, (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: true
-  }, (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: true,
-    className: (0, _classnames.default)({
-      'tools-panel-item-spacing': showSpacingPresetsControl
-    })
-  }, !showSpacingPresetsControl && (0, _element.createElement)(_components.__experimentalBoxControl, {
-    values: paddingValues,
-    onChange: setPaddingValues,
-    label: (0, _i18n.__)('Padding'),
-    sides: paddingSides,
-    units: units,
-    allowReset: false,
-    splitOnAxis: isAxialPadding
-  }), showSpacingPresetsControl && (0, _element.createElement)(_blockEditor.__experimentalSpacingSizesControl, {
-    values: paddingValues,
-    onChange: setPaddingValues,
-    label: (0, _i18n.__)('Padding'),
-    sides: paddingSides,
-    units: units,
-    allowReset: false,
-    splitOnAxis: isAxialPadding
-  })), showMarginControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    hasValue: hasMarginValue,
-    label: (0, _i18n.__)('Margin'),
-    onDeselect: resetMarginValue,
-    isShownByDefault: true,
-    className: (0, _classnames.default)({
-      'tools-panel-item-spacing': showSpacingPresetsControl
-    })
-  }, !showSpacingPresetsControl && (0, _element.createElement)(_components.__experimentalBoxControl, {
-    values: marginValues,
-    onChange: setMarginValues,
-    label: (0, _i18n.__)('Margin'),
-    sides: marginSides,
-    units: units,
-    allowReset: false,
-    splitOnAxis: isAxialMargin
-  }), showSpacingPresetsControl && (0, _element.createElement)(_blockEditor.__experimentalSpacingSizesControl, {
-    values: marginValues,
-    onChange: setMarginValues,
-    label: (0, _i18n.__)('Margin'),
-    sides: marginSides,
-    units: units,
-    allowReset: false,
-    splitOnAxis: isAxialMargin
-  })), showGapControl && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    hasValue: hasGapValue,
-    label: (0, _i18n.__)('Block spacing'),
-    onDeselect: resetGapValue,
-    isShownByDefault: true,
-    className: (0, _classnames.default)({
-      'tools-panel-item-spacing': showSpacingPresetsControl
-    })
-  }, !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)(_blockEditor.__experimentalSpacingSizesControl, {
-    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: true
-  }, (0, _element.createElement)(_blockEditor.HeightControl, {
-    label: (0, _i18n.__)('Min. height'),
-    value: minHeightValue,
-    onChange: setMinHeightValue
-  })));
+  return (0, _element.createElement)(StylesDimensionsPanel, {
+    inheritedValue: inheritedStyleWithLayout,
+    value: styleWithLayout,
+    onChange: onChange,
+    settings: settings,
+    includeLayoutControls: true
+  });
 }
 //# sourceMappingURL=dimensions-panel.js.map