@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/build/hooks/layout.js

@@ -66,9 +66,17 @@ const layoutBlockSupportKey = '__experimentalLayout';
  * @return { Array } Array of CSS classname strings.
  */
 
-function getLayoutClasses(layout, layoutDefinitions) {
+function useLayoutClasses(layout, layoutDefinitions) {
   var _layoutDefinitions;
 
+  const rootPaddingAlignment = (0, _data.useSelect)(select => {
+    var _getSettings$__experi;
+
+    const {
+      getSettings
+    } = select(_store.store);
+    return (_getSettings$__experi = getSettings().__experimentalFeatures) === null || _getSettings$__experi === void 0 ? void 0 : _getSettings$__experi.useRootPaddingAwareAlignments;
+  }, []);
   const layoutClassnames = [];
 
   if (layoutDefinitions !== null && layoutDefinitions !== void 0 && (_layoutDefinitions = layoutDefinitions[(layout === null || layout === void 0 ? void 0 : layout.type) || 'default']) !== null && _layoutDefinitions !== void 0 && _layoutDefinitions.className) {
@@ -77,6 +85,10 @@ function getLayoutClasses(layout, layoutDefinitions) {
     layoutClassnames.push(layoutDefinitions === null || layoutDefinitions === void 0 ? void 0 : (_layoutDefinitions2 = layoutDefinitions[(layout === null || layout === void 0 ? void 0 : layout.type) || 'default']) === null || _layoutDefinitions2 === void 0 ? void 0 : _layoutDefinitions2.className);
   }
 
+  if ((layout !== null && layout !== void 0 && layout.inherit || layout !== null && layout !== void 0 && layout.contentSize) && rootPaddingAlignment) {
+    layoutClassnames.push('has-global-padding');
+  }
+
   if (layout !== null && layout !== void 0 && layout.orientation) {
     layoutClassnames.push(`is-${(0, _lodash.kebabCase)(layout.orientation)}`);
   }
@@ -120,26 +132,28 @@ function LayoutPanel(_ref) {
     return null;
   } // Only show the inherit toggle if it's supported,
   // a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
-  // and that the default / flow layout type is in use, as this is the only one that supports inheritance.
+  // and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
 
 
-  const showInheritToggle = !!(allowInheriting && !!defaultThemeLayout && (!(layout !== null && layout !== void 0 && layout.type) || (layout === null || layout === void 0 ? void 0 : layout.type) === 'default' || layout !== null && layout !== void 0 && layout.inherit));
+  const showInheritToggle = !!(allowInheriting && !!defaultThemeLayout && (!(layout !== null && layout !== void 0 && layout.type) || (layout === null || layout === void 0 ? void 0 : layout.type) === 'default' || (layout === null || layout === void 0 ? void 0 : layout.type) === 'constrained' || layout !== null && layout !== void 0 && layout.inherit));
   const usedLayout = layout || defaultBlockLayout || {};
   const {
     inherit = false,
-    type = 'default'
+    type = 'default',
+    contentSize = null
   } = usedLayout;
   /**
-   * `themeSupportsLayout` is only relevant to the `default/flow`
-   * layout and it should not be taken into account when other
+   * `themeSupportsLayout` is only relevant to the `default/flow` or
+   * `constrained` layouts and it should not be taken into account when other
    * `layout` types are used.
    */
 
-  if (type === 'default' && !themeSupportsLayout) {
+  if ((type === 'default' || type === 'constrained') && !themeSupportsLayout) {
     return null;
   }
 
   const layoutType = (0, _layouts.getLayoutType)(type);
+  const constrainedType = (0, _layouts.getLayoutType)('constrained');
 
   const onChangeType = newType => setAttributes({
     layout: {
@@ -154,19 +168,23 @@ function LayoutPanel(_ref) {
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components2.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Layout')
   }, showInheritToggle && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToggleControl, {
-    label: (0, _i18n.__)('Inner blocks use full width'),
-    checked: !inherit,
+    label: (0, _i18n.__)('Inner blocks respect content width'),
+    checked: (layoutType === null || layoutType === void 0 ? void 0 : layoutType.name) === 'constrained' || !!inherit || !!contentSize,
     onChange: () => setAttributes({
       layout: {
-        inherit: !inherit
+        type: (layoutType === null || layoutType === void 0 ? void 0 : layoutType.name) === 'constrained' ? 'default' : 'constrained'
       }
     })
   }), (0, _element.createElement)("p", {
     className: "block-editor-hooks__layout-controls-helptext"
-  }, !!inherit ? (0, _i18n.__)('Nested blocks use theme content width with options for full and wide widths.') : (0, _i18n.__)('Nested blocks will fill the width of this container.'))), !inherit && allowSwitching && (0, _element.createElement)(LayoutTypeSwitcher, {
+  }, !!inherit || (layoutType === null || layoutType === void 0 ? void 0 : layoutType.name) === 'constrained' ? (0, _i18n.__)('Nested blocks use theme content width with options for full and wide widths.') : (0, _i18n.__)('Nested blocks will fill the width of this container.'))), !inherit && allowSwitching && (0, _element.createElement)(LayoutTypeSwitcher, {
     type: type,
     onChange: onChangeType
-  }), !inherit && layoutType && (0, _element.createElement)(layoutType.inspectorControls, {
+  }), layoutType && layoutType.name !== 'default' && (0, _element.createElement)(layoutType.inspectorControls, {
+    layout: usedLayout,
+    onChange: onChangeLayout,
+    layoutBlockSupport: layoutBlockSupport
+  }), constrainedType && !!contentSize && (0, _element.createElement)(constrainedType.inspectorControls, {
     layout: usedLayout,
     onChange: onChangeLayout,
     layoutBlockSupport: layoutBlockSupport
@@ -252,7 +270,14 @@ const withLayoutStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock
     name,
     attributes
   } = props;
-  const shouldRenderLayoutStyles = (0, _blocks.hasBlockSupport)(name, layoutBlockSupportKey);
+  const hasLayoutBlockSupport = (0, _blocks.hasBlockSupport)(name, layoutBlockSupportKey);
+  const disableLayoutStyles = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_store.store);
+    return !!getSettings().disableLayoutStyles;
+  });
+  const shouldRenderLayoutStyles = hasLayoutBlockSupport && !disableLayoutStyles;
   const id = (0, _compose.useInstanceId)(BlockListBlock);
   const defaultThemeLayout = (0, _useSetting.default)('layout') || {};
   const element = (0, _element.useContext)(_blockList.default.__unstableElementContext);
@@ -262,8 +287,10 @@ const withLayoutStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock
   const {
     default: defaultBlockLayout
   } = (0, _blocks.getBlockSupport)(name, layoutBlockSupportKey) || {};
-  const usedLayout = layout !== null && layout !== void 0 && layout.inherit ? defaultThemeLayout : layout || defaultBlockLayout || {};
-  const layoutClasses = shouldRenderLayoutStyles ? getLayoutClasses(usedLayout, defaultThemeLayout === null || defaultThemeLayout === void 0 ? void 0 : defaultThemeLayout.definitions) : null;
+  const usedLayout = layout !== null && layout !== void 0 && layout.inherit || layout !== null && layout !== void 0 && layout.contentSize || layout !== null && layout !== void 0 && layout.wideSize ? { ...layout,
+    type: 'constrained'
+  } : layout || defaultBlockLayout || {};
+  const layoutClasses = hasLayoutBlockSupport ? useLayoutClasses(usedLayout, defaultThemeLayout === null || defaultThemeLayout === void 0 ? void 0 : defaultThemeLayout.definitions) : null;
   const selector = `.${(0, _blocks.getBlockDefaultClassName)(name)}.wp-container-${id}`;
   const blockGapSupport = (0, _useSetting.default)('spacing.blockGap');
   const hasBlockGapSupport = blockGapSupport !== null; // Get CSS string for the current layout type.

package/build/hooks/layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/layout.js"],"names":["layoutBlockSupportKey","getLayoutClasses","layout","layoutDefinitions","layoutClassnames","type","className","push","orientation","justifyContent","flexWrap","LayoutPanel","setAttributes","attributes","name","blockName","defaultThemeLayout","themeSupportsLayout","select","getSettings","blockEditorStore","supportsLayout","layoutBlockSupport","allowSwitching","allowEditing","allowInheriting","default","defaultBlockLayout","showInheritToggle","inherit","usedLayout","layoutType","onChangeType","newType","onChangeLayout","newLayout","LayoutTypeSwitcher","onChange","map","label","addAttribute","settings","withInspectorControls","BlockEdit","props","supportLayout","withLayoutStyles","BlockListBlock","shouldRenderLayoutStyles","id","element","BlockList","__unstableElementContext","layoutClasses","definitions","selector","blockGapSupport","hasBlockGapSupport","css","fullLayoutType","getLayoutStyle","style"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { has, kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport {\n\tgetBlockDefaultClassName,\n\tgetBlockSupport,\n\thasBlockSupport,\n} from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tButton,\n\tButtonGroup,\n\tToggleControl,\n\tPanelBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { InspectorControls } from '../components';\nimport useSetting from '../components/use-setting';\nimport { LayoutStyle } from '../components/block-list/layout';\nimport BlockList from '../components/block-list';\nimport { getLayoutType, getLayoutTypes } from '../layouts';\n\nconst layoutBlockSupportKey = '__experimentalLayout';\n\n/**\n * Generates the utility classnames for the given blocks layout attributes.\n * This method was primarily added to reintroduce classnames that were removed\n * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather\n * than providing an extensive list of all possible layout classes. The plan is to\n * have the style engine generate a more extensive list of utility classnames which\n * will then replace this method.\n *\n * @param { Object } layout            Layout object.\n * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json.\n *\n * @return { Array } Array of CSS classname strings.\n */\nfunction getLayoutClasses( layout, layoutDefinitions ) {\n\tconst layoutClassnames = [];\n\n\tif ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {\n\t\tlayoutClassnames.push(\n\t\t\tlayoutDefinitions?.[ layout?.type || 'default' ]?.className\n\t\t);\n\t}\n\n\tif ( layout?.orientation ) {\n\t\tlayoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );\n\t}\n\n\tif ( layout?.justifyContent ) {\n\t\tlayoutClassnames.push(\n\t\t\t`is-content-justification-${ kebabCase( layout.justifyContent ) }`\n\t\t);\n\t}\n\n\tif ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) {\n\t\tlayoutClassnames.push( 'is-nowrap' );\n\t}\n\n\treturn layoutClassnames;\n}\n\nfunction LayoutPanel( { setAttributes, attributes, name: blockName } ) {\n\tconst { layout } = attributes;\n\tconst defaultThemeLayout = useSetting( 'layout' );\n\tconst themeSupportsLayout = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().supportsLayout;\n\t}, [] );\n\n\tconst layoutBlockSupport = getBlockSupport(\n\t\tblockName,\n\t\tlayoutBlockSupportKey,\n\t\t{}\n\t);\n\tconst {\n\t\tallowSwitching,\n\t\tallowEditing = true,\n\t\tallowInheriting = true,\n\t\tdefault: defaultBlockLayout,\n\t} = layoutBlockSupport;\n\n\tif ( ! allowEditing ) {\n\t\treturn null;\n\t}\n\n\t// Only show the inherit toggle if it's supported,\n\t// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),\n\t// and that the default / flow layout type is in use, as this is the only one that supports inheritance.\n\tconst showInheritToggle = !! (\n\t\tallowInheriting &&\n\t\t!! defaultThemeLayout &&\n\t\t( ! layout?.type || layout?.type === 'default' || layout?.inherit )\n\t);\n\n\tconst usedLayout = layout || defaultBlockLayout || {};\n\tconst { inherit = false, type = 'default' } = usedLayout;\n\t/**\n\t * `themeSupportsLayout` is only relevant to the `default/flow`\n\t * layout and it should not be taken into account when other\n\t * `layout` types are used.\n\t */\n\tif ( type === 'default' && ! themeSupportsLayout ) {\n\t\treturn null;\n\t}\n\tconst layoutType = getLayoutType( type );\n\n\tconst onChangeType = ( newType ) =>\n\t\tsetAttributes( { layout: { type: newType } } );\n\tconst onChangeLayout = ( newLayout ) =>\n\t\tsetAttributes( { layout: newLayout } );\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Layout' ) }>\n\t\t\t\t\t{ showInheritToggle && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Inner blocks use full width' ) }\n\t\t\t\t\t\t\t\tchecked={ ! inherit }\n\t\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tlayout: { inherit: ! inherit },\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\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t\t\t\t{ !! inherit\n\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t'Nested blocks use theme content width with options for full and wide widths.'\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t'Nested blocks will fill the width of this container.'\n\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! inherit && allowSwitching && (\n\t\t\t\t\t\t<LayoutTypeSwitcher\n\t\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\t\tonChange={ onChangeType }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! inherit && layoutType && (\n\t\t\t\t\t\t<layoutType.inspectorControls\n\t\t\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\t\t\tonChange={ onChangeLayout }\n\t\t\t\t\t\t\tlayoutBlockSupport={ layoutBlockSupport }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t\t{ ! inherit && layoutType && (\n\t\t\t\t<layoutType.toolBarControls\n\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\tonChange={ onChangeLayout }\n\t\t\t\t\tlayoutBlockSupport={ layoutBlockSupport }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction LayoutTypeSwitcher( { type, onChange } ) {\n\treturn (\n\t\t<ButtonGroup>\n\t\t\t{ getLayoutTypes().map( ( { name, label } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ name }\n\t\t\t\t\t\tisPressed={ type === name }\n\t\t\t\t\t\tonClick={ () => onChange( name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ButtonGroup>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include `layout`.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\tif ( has( settings.attributes, [ 'layout', 'type' ] ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tlayout: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override the default edit UI to include layout controls\n *\n * @param {Function} BlockEdit Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withInspectorControls = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst { name: blockName } = props;\n\t\tconst supportLayout = hasBlockSupport(\n\t\t\tblockName,\n\t\t\tlayoutBlockSupportKey\n\t\t);\n\n\t\treturn [\n\t\t\tsupportLayout && <LayoutPanel key=\"layout\" { ...props } />,\n\t\t\t<BlockEdit key=\"edit\" { ...props } />,\n\t\t];\n\t},\n\t'withInspectorControls'\n);\n\n/**\n * Override the default block element to add the layout styles.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withLayoutStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst { name, attributes } = props;\n\t\tconst shouldRenderLayoutStyles = hasBlockSupport(\n\t\t\tname,\n\t\t\tlayoutBlockSupportKey\n\t\t);\n\t\tconst id = useInstanceId( BlockListBlock );\n\t\tconst defaultThemeLayout = useSetting( 'layout' ) || {};\n\t\tconst element = useContext( BlockList.__unstableElementContext );\n\t\tconst { layout } = attributes;\n\t\tconst { default: defaultBlockLayout } =\n\t\t\tgetBlockSupport( name, layoutBlockSupportKey ) || {};\n\t\tconst usedLayout = layout?.inherit\n\t\t\t? defaultThemeLayout\n\t\t\t: layout || defaultBlockLayout || {};\n\t\tconst layoutClasses = shouldRenderLayoutStyles\n\t\t\t? getLayoutClasses( usedLayout, defaultThemeLayout?.definitions )\n\t\t\t: null;\n\t\tconst selector = `.${ getBlockDefaultClassName(\n\t\t\tname\n\t\t) }.wp-container-${ id }`;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapSupport = blockGapSupport !== null;\n\n\t\t// Get CSS string for the current layout type.\n\t\t// The CSS and `style` element is only output if it is not empty.\n\t\tlet css;\n\t\tif ( shouldRenderLayoutStyles ) {\n\t\t\tconst fullLayoutType = getLayoutType(\n\t\t\t\tusedLayout?.type || 'default'\n\t\t\t);\n\t\t\tcss = fullLayoutType?.getLayoutStyle?.( {\n\t\t\t\tblockName: name,\n\t\t\t\tselector,\n\t\t\t\tlayout: usedLayout,\n\t\t\t\tlayoutDefinitions: defaultThemeLayout?.definitions,\n\t\t\t\tstyle: attributes?.style,\n\t\t\t\thasBlockGapSupport,\n\t\t\t} );\n\t\t}\n\n\t\t// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.\n\t\tconst className = classnames(\n\t\t\tprops?.className,\n\t\t\t{\n\t\t\t\t[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.\n\t\t\t},\n\t\t\tlayoutClasses\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ shouldRenderLayoutStyles &&\n\t\t\t\t\telement &&\n\t\t\t\t\t!! css &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<LayoutStyle\n\t\t\t\t\t\t\tblockName={ name }\n\t\t\t\t\t\t\tselector={ selector }\n\t\t\t\t\t\t\tcss={ css }\n\t\t\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\t\t\tstyle={ attributes?.style }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\telement\n\t\t\t\t\t) }\n\t\t\t\t<BlockListBlock { ...props } className={ className } />\n\t\t\t</>\n\t\t);\n\t}\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/layout/addAttribute',\n\taddAttribute\n);\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/editor/layout/with-layout-styles',\n\twithLayoutStyles\n);\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/layout/with-inspector-controls',\n\twithInspectorControls\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/layout.js"],"names":["layoutBlockSupportKey","useLayoutClasses","layout","layoutDefinitions","rootPaddingAlignment","select","getSettings","blockEditorStore","__experimentalFeatures","useRootPaddingAwareAlignments","layoutClassnames","type","className","push","inherit","contentSize","orientation","justifyContent","flexWrap","LayoutPanel","setAttributes","attributes","name","blockName","defaultThemeLayout","themeSupportsLayout","supportsLayout","layoutBlockSupport","allowSwitching","allowEditing","allowInheriting","default","defaultBlockLayout","showInheritToggle","usedLayout","layoutType","constrainedType","onChangeType","newType","onChangeLayout","newLayout","LayoutTypeSwitcher","onChange","map","label","addAttribute","settings","withInspectorControls","BlockEdit","props","supportLayout","withLayoutStyles","BlockListBlock","hasLayoutBlockSupport","disableLayoutStyles","shouldRenderLayoutStyles","id","element","BlockList","__unstableElementContext","wideSize","layoutClasses","definitions","selector","blockGapSupport","hasBlockGapSupport","css","fullLayoutType","getLayoutStyle","style"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { has, kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport {\n\tgetBlockDefaultClassName,\n\tgetBlockSupport,\n\thasBlockSupport,\n} from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tButton,\n\tButtonGroup,\n\tToggleControl,\n\tPanelBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { InspectorControls } from '../components';\nimport useSetting from '../components/use-setting';\nimport { LayoutStyle } from '../components/block-list/layout';\nimport BlockList from '../components/block-list';\nimport { getLayoutType, getLayoutTypes } from '../layouts';\n\nconst layoutBlockSupportKey = '__experimentalLayout';\n\n/**\n * Generates the utility classnames for the given blocks layout attributes.\n * This method was primarily added to reintroduce classnames that were removed\n * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather\n * than providing an extensive list of all possible layout classes. The plan is to\n * have the style engine generate a more extensive list of utility classnames which\n * will then replace this method.\n *\n * @param { Object } layout            Layout object.\n * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json.\n *\n * @return { Array } Array of CSS classname strings.\n */\nfunction useLayoutClasses( layout, layoutDefinitions ) {\n\tconst rootPaddingAlignment = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().__experimentalFeatures\n\t\t\t?.useRootPaddingAwareAlignments;\n\t}, [] );\n\tconst layoutClassnames = [];\n\n\tif ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {\n\t\tlayoutClassnames.push(\n\t\t\tlayoutDefinitions?.[ layout?.type || 'default' ]?.className\n\t\t);\n\t}\n\n\tif ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) {\n\t\tlayoutClassnames.push( 'has-global-padding' );\n\t}\n\n\tif ( layout?.orientation ) {\n\t\tlayoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );\n\t}\n\n\tif ( layout?.justifyContent ) {\n\t\tlayoutClassnames.push(\n\t\t\t`is-content-justification-${ kebabCase( layout.justifyContent ) }`\n\t\t);\n\t}\n\n\tif ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) {\n\t\tlayoutClassnames.push( 'is-nowrap' );\n\t}\n\n\treturn layoutClassnames;\n}\n\nfunction LayoutPanel( { setAttributes, attributes, name: blockName } ) {\n\tconst { layout } = attributes;\n\tconst defaultThemeLayout = useSetting( 'layout' );\n\tconst themeSupportsLayout = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().supportsLayout;\n\t}, [] );\n\n\tconst layoutBlockSupport = getBlockSupport(\n\t\tblockName,\n\t\tlayoutBlockSupportKey,\n\t\t{}\n\t);\n\tconst {\n\t\tallowSwitching,\n\t\tallowEditing = true,\n\t\tallowInheriting = true,\n\t\tdefault: defaultBlockLayout,\n\t} = layoutBlockSupport;\n\n\tif ( ! allowEditing ) {\n\t\treturn null;\n\t}\n\n\t// Only show the inherit toggle if it's supported,\n\t// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),\n\t// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.\n\tconst showInheritToggle = !! (\n\t\tallowInheriting &&\n\t\t!! defaultThemeLayout &&\n\t\t( ! layout?.type ||\n\t\t\tlayout?.type === 'default' ||\n\t\t\tlayout?.type === 'constrained' ||\n\t\t\tlayout?.inherit )\n\t);\n\n\tconst usedLayout = layout || defaultBlockLayout || {};\n\tconst {\n\t\tinherit = false,\n\t\ttype = 'default',\n\t\tcontentSize = null,\n\t} = usedLayout;\n\t/**\n\t * `themeSupportsLayout` is only relevant to the `default/flow` or\n\t * `constrained` layouts and it should not be taken into account when other\n\t * `layout` types are used.\n\t */\n\tif (\n\t\t( type === 'default' || type === 'constrained' ) &&\n\t\t! themeSupportsLayout\n\t) {\n\t\treturn null;\n\t}\n\tconst layoutType = getLayoutType( type );\n\n\tconst constrainedType = getLayoutType( 'constrained' );\n\n\tconst onChangeType = ( newType ) =>\n\t\tsetAttributes( { layout: { type: newType } } );\n\tconst onChangeLayout = ( newLayout ) =>\n\t\tsetAttributes( { layout: newLayout } );\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Layout' ) }>\n\t\t\t\t\t{ showInheritToggle && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t'Inner blocks respect content width'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\tlayoutType?.name === 'constrained' ||\n\t\t\t\t\t\t\t\t\t!! inherit ||\n\t\t\t\t\t\t\t\t\t!! contentSize\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\t\t\t\ttype:\n\t\t\t\t\t\t\t\t\t\t\t\tlayoutType?.name ===\n\t\t\t\t\t\t\t\t\t\t\t\t'constrained'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'constrained',\n\t\t\t\t\t\t\t\t\t\t},\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\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t\t\t\t{ !! inherit ||\n\t\t\t\t\t\t\t\tlayoutType?.name === 'constrained'\n\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t'Nested blocks use theme content width with options for full and wide widths.'\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t'Nested blocks will fill the width of this container.'\n\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! inherit && allowSwitching && (\n\t\t\t\t\t\t<LayoutTypeSwitcher\n\t\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\t\tonChange={ onChangeType }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ layoutType && layoutType.name !== 'default' && (\n\t\t\t\t\t\t<layoutType.inspectorControls\n\t\t\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\t\t\tonChange={ onChangeLayout }\n\t\t\t\t\t\t\tlayoutBlockSupport={ layoutBlockSupport }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ constrainedType && !! contentSize && (\n\t\t\t\t\t\t<constrainedType.inspectorControls\n\t\t\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\t\t\tonChange={ onChangeLayout }\n\t\t\t\t\t\t\tlayoutBlockSupport={ layoutBlockSupport }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t\t{ ! inherit && layoutType && (\n\t\t\t\t<layoutType.toolBarControls\n\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\tonChange={ onChangeLayout }\n\t\t\t\t\tlayoutBlockSupport={ layoutBlockSupport }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction LayoutTypeSwitcher( { type, onChange } ) {\n\treturn (\n\t\t<ButtonGroup>\n\t\t\t{ getLayoutTypes().map( ( { name, label } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ name }\n\t\t\t\t\t\tisPressed={ type === name }\n\t\t\t\t\t\tonClick={ () => onChange( name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ButtonGroup>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include `layout`.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\tif ( has( settings.attributes, [ 'layout', 'type' ] ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tlayout: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override the default edit UI to include layout controls\n *\n * @param {Function} BlockEdit Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withInspectorControls = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst { name: blockName } = props;\n\t\tconst supportLayout = hasBlockSupport(\n\t\t\tblockName,\n\t\t\tlayoutBlockSupportKey\n\t\t);\n\n\t\treturn [\n\t\t\tsupportLayout && <LayoutPanel key=\"layout\" { ...props } />,\n\t\t\t<BlockEdit key=\"edit\" { ...props } />,\n\t\t];\n\t},\n\t'withInspectorControls'\n);\n\n/**\n * Override the default block element to add the layout styles.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withLayoutStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst { name, attributes } = props;\n\t\tconst hasLayoutBlockSupport = hasBlockSupport(\n\t\t\tname,\n\t\t\tlayoutBlockSupportKey\n\t\t);\n\t\tconst disableLayoutStyles = useSelect( ( select ) => {\n\t\t\tconst { getSettings } = select( blockEditorStore );\n\t\t\treturn !! getSettings().disableLayoutStyles;\n\t\t} );\n\t\tconst shouldRenderLayoutStyles =\n\t\t\thasLayoutBlockSupport && ! disableLayoutStyles;\n\t\tconst id = useInstanceId( BlockListBlock );\n\t\tconst defaultThemeLayout = useSetting( 'layout' ) || {};\n\t\tconst element = useContext( BlockList.__unstableElementContext );\n\t\tconst { layout } = attributes;\n\t\tconst { default: defaultBlockLayout } =\n\t\t\tgetBlockSupport( name, layoutBlockSupportKey ) || {};\n\t\tconst usedLayout =\n\t\t\tlayout?.inherit || layout?.contentSize || layout?.wideSize\n\t\t\t\t? { ...layout, type: 'constrained' }\n\t\t\t\t: layout || defaultBlockLayout || {};\n\t\tconst layoutClasses = hasLayoutBlockSupport\n\t\t\t? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )\n\t\t\t: null;\n\t\tconst selector = `.${ getBlockDefaultClassName(\n\t\t\tname\n\t\t) }.wp-container-${ id }`;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapSupport = blockGapSupport !== null;\n\n\t\t// Get CSS string for the current layout type.\n\t\t// The CSS and `style` element is only output if it is not empty.\n\t\tlet css;\n\t\tif ( shouldRenderLayoutStyles ) {\n\t\t\tconst fullLayoutType = getLayoutType(\n\t\t\t\tusedLayout?.type || 'default'\n\t\t\t);\n\t\t\tcss = fullLayoutType?.getLayoutStyle?.( {\n\t\t\t\tblockName: name,\n\t\t\t\tselector,\n\t\t\t\tlayout: usedLayout,\n\t\t\t\tlayoutDefinitions: defaultThemeLayout?.definitions,\n\t\t\t\tstyle: attributes?.style,\n\t\t\t\thasBlockGapSupport,\n\t\t\t} );\n\t\t}\n\n\t\t// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.\n\t\tconst className = classnames(\n\t\t\tprops?.className,\n\t\t\t{\n\t\t\t\t[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.\n\t\t\t},\n\t\t\tlayoutClasses\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ shouldRenderLayoutStyles &&\n\t\t\t\t\telement &&\n\t\t\t\t\t!! css &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<LayoutStyle\n\t\t\t\t\t\t\tblockName={ name }\n\t\t\t\t\t\t\tselector={ selector }\n\t\t\t\t\t\t\tcss={ css }\n\t\t\t\t\t\t\tlayout={ usedLayout }\n\t\t\t\t\t\t\tstyle={ attributes?.style }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\telement\n\t\t\t\t\t) }\n\t\t\t\t<BlockListBlock { ...props } className={ className } />\n\t\t\t</>\n\t\t);\n\t}\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/layout/addAttribute',\n\taddAttribute\n);\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/editor/layout/with-layout-styles',\n\twithLayoutStyles\n);\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/layout/with-inspector-controls',\n\twithInspectorControls\n);\n"]}

package/build/hooks/margin.js

@@ -30,6 +30,10 @@ var _utils = require("./utils");
 
 var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
 
+var _spacingSizesControl = _interopRequireDefault(require("../components/spacing-sizes-control"));
+
+var _utils2 = require("../components/spacing-sizes-control/utils");
+
 /**
  * WordPress dependencies
  */
@@ -115,7 +119,7 @@ function useIsMarginDisabled() {
 
 
 function MarginEdit(props) {
-  var _style$spacing;
+  var _style$spacing, _style$spacing2;
 
   const {
     name: blockName,
@@ -124,6 +128,7 @@ function MarginEdit(props) {
     },
     setAttributes
   } = props;
+  const spacingSizes = (0, _useSetting.default)('spacing.spacingSizes');
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _useSetting.default)('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
   });
@@ -146,7 +151,7 @@ function MarginEdit(props) {
   };
 
   return _element.Platform.select({
-    web: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalBoxControl, {
+    web: (0, _element.createElement)(_element.Fragment, null, (!spacingSizes || (spacingSizes === null || spacingSizes === void 0 ? void 0 : spacingSizes.length) === 0) && (0, _element.createElement)(_components.__experimentalBoxControl, {
       values: style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.margin,
       onChange: onChange,
       label: (0, _i18n.__)('Margin'),
@@ -154,6 +159,14 @@ function MarginEdit(props) {
       units: units,
       allowReset: false,
       splitOnAxis: splitOnAxis
+    }), (spacingSizes === null || spacingSizes === void 0 ? void 0 : spacingSizes.length) > 0 && (0, _element.createElement)(_spacingSizesControl.default, {
+      values: style === null || style === void 0 ? void 0 : (_style$spacing2 = style.spacing) === null || _style$spacing2 === void 0 ? void 0 : _style$spacing2.margin,
+      onChange: onChange,
+      label: (0, _i18n.__)('Margin'),
+      sides: sides,
+      units: units,
+      allowReset: false,
+      splitOnAxis: false
     })),
     native: null
   });
@@ -167,18 +180,21 @@ function MarginVisualizer(_ref2) {
     attributes
   } = _ref2;
   const margin = attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : (_attributes$style$spa = _attributes$style.spacing) === null || _attributes$style$spa === void 0 ? void 0 : _attributes$style$spa.margin;
+  const spacingSizes = (0, _useSetting.default)('spacing.spacingSizes');
   const style = (0, _element.useMemo)(() => {
-    var _margin$top, _margin$right, _margin$bottom, _margin$left;
-
+    const marginTop = margin !== null && margin !== void 0 && margin.top ? (0, _utils2.getCustomValueFromPreset)(margin === null || margin === void 0 ? void 0 : margin.top, spacingSizes) : 0;
+    const marginRight = margin !== null && margin !== void 0 && margin.right ? (0, _utils2.getCustomValueFromPreset)(margin === null || margin === void 0 ? void 0 : margin.right, spacingSizes) : 0;
+    const marginBottom = margin !== null && margin !== void 0 && margin.bottom ? (0, _utils2.getCustomValueFromPreset)(margin === null || margin === void 0 ? void 0 : margin.bottom, spacingSizes) : 0;
+    const marginLeft = margin !== null && margin !== void 0 && margin.left ? (0, _utils2.getCustomValueFromPreset)(margin === null || margin === void 0 ? void 0 : margin.left, spacingSizes) : 0;
     return {
-      borderTopWidth: (_margin$top = margin === null || margin === void 0 ? void 0 : margin.top) !== null && _margin$top !== void 0 ? _margin$top : 0,
-      borderRightWidth: (_margin$right = margin === null || margin === void 0 ? void 0 : margin.right) !== null && _margin$right !== void 0 ? _margin$right : 0,
-      borderBottomWidth: (_margin$bottom = margin === null || margin === void 0 ? void 0 : margin.bottom) !== null && _margin$bottom !== void 0 ? _margin$bottom : 0,
-      borderLeftWidth: (_margin$left = margin === null || margin === void 0 ? void 0 : margin.left) !== null && _margin$left !== void 0 ? _margin$left : 0,
-      top: margin !== null && margin !== void 0 && margin.top ? `-${margin.top}` : 0,
-      right: margin !== null && margin !== void 0 && margin.right ? `-${margin.right}` : 0,
-      bottom: margin !== null && margin !== void 0 && margin.bottom ? `-${margin.bottom}` : 0,
-      left: margin !== null && margin !== void 0 && margin.left ? `-${margin.left}` : 0
+      borderTopWidth: marginTop,
+      borderRightWidth: marginRight,
+      borderBottomWidth: marginBottom,
+      borderLeftWidth: marginLeft,
+      top: marginTop !== 0 ? `-${marginTop}` : 0,
+      right: marginRight !== 0 ? `-${marginRight}` : 0,
+      bottom: marginBottom !== 0 ? `-${marginBottom}` : 0,
+      left: marginLeft !== 0 ? `-${marginLeft}` : 0
     };
   }, [margin]);
   const [isActive, setIsActive] = (0, _element.useState)(false);

package/build/hooks/margin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/margin.js"],"names":["hasMarginSupport","blockType","support","SPACING_SUPPORT_KEY","margin","hasMarginValue","props","attributes","style","spacing","undefined","resetMargin","setAttributes","useIsMarginDisabled","name","blockName","isDisabled","isInvalid","MarginEdit","units","availableUnits","sides","splitOnAxis","some","side","AXIAL_SIDES","includes","onChange","next","newStyle","Platform","select","web","native","MarginVisualizer","clientId","borderTopWidth","top","borderRightWidth","right","borderBottomWidth","bottom","borderLeftWidth","left","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPlatform,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalBoxControl as BoxControl,\n} from '@wordpress/components';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport {\n\tAXIAL_SIDES,\n\tSPACING_SUPPORT_KEY,\n\tuseCustomSides,\n\tuseIsDimensionsSupportValid,\n} from './dimensions';\nimport { cleanEmptyObject } from './utils';\nimport BlockPopover from '../components/block-popover';\n\n/**\n * Determines if there is margin support.\n *\n * @param {string|Object} blockType Block name or Block Type object.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasMarginSupport( blockType ) {\n\tconst support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );\n\treturn !! ( true === support || support?.margin );\n}\n\n/**\n * Checks if there is a current value in the margin block support attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}      Whether or not the block has a margin value set.\n */\nexport function hasMarginValue( props ) {\n\treturn props.attributes.style?.spacing?.margin !== undefined;\n}\n\n/**\n * Resets the margin block support attributes. This can be used when disabling\n * the margin support controls for a block via a `ToolsPanel`.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetMargin( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tmargin: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if margin settings have been disabled.\n *\n * @param {string} name The name of the block.\n *\n * @return {boolean} Whether margin setting is disabled.\n */\nexport function useIsMarginDisabled( { name: blockName } = {} ) {\n\tconst isDisabled = ! useSetting( 'spacing.margin' );\n\tconst isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' );\n\n\treturn ! hasMarginSupport( blockName ) || isDisabled || isInvalid;\n}\n\n/**\n * Inspector control panel containing the margin related configuration\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Margin edit element.\n */\nexport function MarginEdit( props ) {\n\tconst {\n\t\tname: blockName,\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( '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\tconst sides = useCustomSides( blockName, 'margin' );\n\tconst splitOnAxis =\n\t\tsides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\n\tif ( useIsMarginDisabled( props ) ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tmargin: next,\n\t\t\t},\n\t\t};\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\treturn Platform.select( {\n\t\tweb: (\n\t\t\t<>\n\t\t\t\t<BoxControl\n\t\t\t\t\tvalues={ style?.spacing?.margin }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\tsides={ sides }\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tallowReset={ false }\n\t\t\t\t\tsplitOnAxis={ splitOnAxis }\n\t\t\t\t/>\n\t\t\t</>\n\t\t),\n\t\tnative: null,\n\t} );\n}\n\nexport function MarginVisualizer( { clientId, attributes } ) {\n\tconst margin = attributes?.style?.spacing?.margin;\n\tconst style = useMemo( () => {\n\t\treturn {\n\t\t\tborderTopWidth: margin?.top ?? 0,\n\t\t\tborderRightWidth: margin?.right ?? 0,\n\t\t\tborderBottomWidth: margin?.bottom ?? 0,\n\t\t\tborderLeftWidth: margin?.left ?? 0,\n\t\t\ttop: margin?.top ? `-${ margin.top }` : 0,\n\t\t\tright: margin?.right ? `-${ margin.right }` : 0,\n\t\t\tbottom: margin?.bottom ? `-${ margin.bottom }` : 0,\n\t\t\tleft: margin?.left ? `-${ margin.left }` : 0,\n\t\t};\n\t}, [ margin ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( margin );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( margin, valueRef.current ) ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\n\n\t\t\tclearTimer();\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => clearTimer();\n\t}, [ margin ] );\n\n\tif ( ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ margin }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/margin.js"],"names":["hasMarginSupport","blockType","support","SPACING_SUPPORT_KEY","margin","hasMarginValue","props","attributes","style","spacing","undefined","resetMargin","setAttributes","useIsMarginDisabled","name","blockName","isDisabled","isInvalid","MarginEdit","spacingSizes","units","availableUnits","sides","splitOnAxis","some","side","AXIAL_SIDES","includes","onChange","next","newStyle","Platform","select","web","length","native","MarginVisualizer","clientId","marginTop","top","marginRight","right","marginBottom","bottom","marginLeft","left","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPlatform,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalBoxControl as BoxControl,\n} from '@wordpress/components';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport {\n\tAXIAL_SIDES,\n\tSPACING_SUPPORT_KEY,\n\tuseCustomSides,\n\tuseIsDimensionsSupportValid,\n} from './dimensions';\nimport { cleanEmptyObject } from './utils';\nimport BlockPopover from '../components/block-popover';\nimport SpacingSizesControl from '../components/spacing-sizes-control';\nimport { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils';\n\n/**\n * Determines if there is margin support.\n *\n * @param {string|Object} blockType Block name or Block Type object.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasMarginSupport( blockType ) {\n\tconst support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );\n\treturn !! ( true === support || support?.margin );\n}\n\n/**\n * Checks if there is a current value in the margin block support attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}      Whether or not the block has a margin value set.\n */\nexport function hasMarginValue( props ) {\n\treturn props.attributes.style?.spacing?.margin !== undefined;\n}\n\n/**\n * Resets the margin block support attributes. This can be used when disabling\n * the margin support controls for a block via a `ToolsPanel`.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetMargin( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tmargin: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if margin settings have been disabled.\n *\n * @param {string} name The name of the block.\n *\n * @return {boolean} Whether margin setting is disabled.\n */\nexport function useIsMarginDisabled( { name: blockName } = {} ) {\n\tconst isDisabled = ! useSetting( 'spacing.margin' );\n\tconst isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' );\n\n\treturn ! hasMarginSupport( blockName ) || isDisabled || isInvalid;\n}\n\n/**\n * Inspector control panel containing the margin related configuration\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Margin edit element.\n */\nexport function MarginEdit( props ) {\n\tconst {\n\t\tname: blockName,\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst spacingSizes = useSetting( 'spacing.spacingSizes' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( '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\tconst sides = useCustomSides( blockName, 'margin' );\n\tconst splitOnAxis =\n\t\tsides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\n\tif ( useIsMarginDisabled( props ) ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tmargin: next,\n\t\t\t},\n\t\t};\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\treturn Platform.select( {\n\t\tweb: (\n\t\t\t<>\n\t\t\t\t{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (\n\t\t\t\t\t<BoxControl\n\t\t\t\t\t\tvalues={ style?.spacing?.margin }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\tsides={ sides }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ splitOnAxis }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ spacingSizes?.length > 0 && (\n\t\t\t\t\t<SpacingSizesControl\n\t\t\t\t\t\tvalues={ style?.spacing?.margin }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\tsides={ sides }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\tnative: null,\n\t} );\n}\n\nexport function MarginVisualizer( { clientId, attributes } ) {\n\tconst margin = attributes?.style?.spacing?.margin;\n\tconst spacingSizes = useSetting( 'spacing.spacingSizes' );\n\n\tconst style = useMemo( () => {\n\t\tconst marginTop = margin?.top\n\t\t\t? getCustomValueFromPreset( margin?.top, spacingSizes )\n\t\t\t: 0;\n\t\tconst marginRight = margin?.right\n\t\t\t? getCustomValueFromPreset( margin?.right, spacingSizes )\n\t\t\t: 0;\n\t\tconst marginBottom = margin?.bottom\n\t\t\t? getCustomValueFromPreset( margin?.bottom, spacingSizes )\n\t\t\t: 0;\n\t\tconst marginLeft = margin?.left\n\t\t\t? getCustomValueFromPreset( margin?.left, spacingSizes )\n\t\t\t: 0;\n\n\t\treturn {\n\t\t\tborderTopWidth: marginTop,\n\t\t\tborderRightWidth: marginRight,\n\t\t\tborderBottomWidth: marginBottom,\n\t\t\tborderLeftWidth: marginLeft,\n\t\t\ttop: marginTop !== 0 ? `-${ marginTop }` : 0,\n\t\t\tright: marginRight !== 0 ? `-${ marginRight }` : 0,\n\t\t\tbottom: marginBottom !== 0 ? `-${ marginBottom }` : 0,\n\t\t\tleft: marginLeft !== 0 ? `-${ marginLeft }` : 0,\n\t\t};\n\t}, [ margin ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( margin );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( margin, valueRef.current ) ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\n\n\t\t\tclearTimer();\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => clearTimer();\n\t}, [ margin ] );\n\n\tif ( ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ margin }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"]}

package/build/hooks/padding.js

@@ -30,6 +30,10 @@ var _utils = require("./utils");
 
 var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
 
+var _spacingSizesControl = _interopRequireDefault(require("../components/spacing-sizes-control"));
+
+var _utils2 = require("../components/spacing-sizes-control/utils");
+
 /**
  * WordPress dependencies
  */
@@ -115,7 +119,7 @@ function useIsPaddingDisabled() {
 
 
 function PaddingEdit(props) {
-  var _style$spacing;
+  var _style$spacing, _style$spacing2;
 
   const {
     name: blockName,
@@ -124,6 +128,7 @@ function PaddingEdit(props) {
     },
     setAttributes
   } = props;
+  const spacingSizes = (0, _useSetting.default)('spacing.spacingSizes');
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _useSetting.default)('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
   });
@@ -146,7 +151,7 @@ function PaddingEdit(props) {
   };
 
   return _element.Platform.select({
-    web: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalBoxControl, {
+    web: (0, _element.createElement)(_element.Fragment, null, (!spacingSizes || (spacingSizes === null || spacingSizes === void 0 ? void 0 : spacingSizes.length) === 0) && (0, _element.createElement)(_components.__experimentalBoxControl, {
       values: style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.padding,
       onChange: onChange,
       label: (0, _i18n.__)('Padding'),
@@ -154,6 +159,14 @@ function PaddingEdit(props) {
       units: units,
       allowReset: false,
       splitOnAxis: splitOnAxis
+    }), (spacingSizes === null || spacingSizes === void 0 ? void 0 : spacingSizes.length) > 0 && (0, _element.createElement)(_spacingSizesControl.default, {
+      values: style === null || style === void 0 ? void 0 : (_style$spacing2 = style.spacing) === null || _style$spacing2 === void 0 ? void 0 : _style$spacing2.padding,
+      onChange: onChange,
+      label: (0, _i18n.__)('Padding'),
+      sides: sides,
+      units: units,
+      allowReset: false,
+      splitOnAxis: splitOnAxis
     })),
     native: null
   });
@@ -168,13 +181,11 @@ function PaddingVisualizer(_ref2) {
   } = _ref2;
   const padding = attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : (_attributes$style$spa = _attributes$style.spacing) === null || _attributes$style$spa === void 0 ? void 0 : _attributes$style$spa.padding;
   const style = (0, _element.useMemo)(() => {
-    var _padding$top, _padding$right, _padding$bottom, _padding$left;
-
     return {
-      borderTopWidth: (_padding$top = padding === null || padding === void 0 ? void 0 : padding.top) !== null && _padding$top !== void 0 ? _padding$top : 0,
-      borderRightWidth: (_padding$right = padding === null || padding === void 0 ? void 0 : padding.right) !== null && _padding$right !== void 0 ? _padding$right : 0,
-      borderBottomWidth: (_padding$bottom = padding === null || padding === void 0 ? void 0 : padding.bottom) !== null && _padding$bottom !== void 0 ? _padding$bottom : 0,
-      borderLeftWidth: (_padding$left = padding === null || padding === void 0 ? void 0 : padding.left) !== null && _padding$left !== void 0 ? _padding$left : 0
+      borderTopWidth: (0, _utils2.isValueSpacingPreset)(padding === null || padding === void 0 ? void 0 : padding.top) ? (0, _utils2.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.top) : padding === null || padding === void 0 ? void 0 : padding.top,
+      borderRightWidth: (0, _utils2.isValueSpacingPreset)(padding === null || padding === void 0 ? void 0 : padding.right) ? (0, _utils2.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.right) : padding === null || padding === void 0 ? void 0 : padding.right,
+      borderBottomWidth: (0, _utils2.isValueSpacingPreset)(padding === null || padding === void 0 ? void 0 : padding.bottom) ? (0, _utils2.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.bottom) : padding === null || padding === void 0 ? void 0 : padding.bottom,
+      borderLeftWidth: (0, _utils2.isValueSpacingPreset)(padding === null || padding === void 0 ? void 0 : padding.left) ? (0, _utils2.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.left) : padding === null || padding === void 0 ? void 0 : padding.left
     };
   }, [padding]);
   const [isActive, setIsActive] = (0, _element.useState)(false);

package/build/hooks/padding.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/padding.js"],"names":["hasPaddingSupport","blockType","support","SPACING_SUPPORT_KEY","padding","hasPaddingValue","props","attributes","style","spacing","undefined","resetPadding","setAttributes","useIsPaddingDisabled","name","blockName","isDisabled","isInvalid","PaddingEdit","units","availableUnits","sides","splitOnAxis","some","side","AXIAL_SIDES","includes","onChange","next","newStyle","Platform","select","web","native","PaddingVisualizer","clientId","borderTopWidth","top","borderRightWidth","right","borderBottomWidth","bottom","borderLeftWidth","left","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPlatform,\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseMemo,\n} from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalBoxControl as BoxControl,\n} from '@wordpress/components';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport {\n\tAXIAL_SIDES,\n\tSPACING_SUPPORT_KEY,\n\tuseCustomSides,\n\tuseIsDimensionsSupportValid,\n} from './dimensions';\nimport { cleanEmptyObject } from './utils';\nimport BlockPopover from '../components/block-popover';\n\n/**\n * Determines if there is padding support.\n *\n * @param {string|Object} blockType Block name or Block Type object.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasPaddingSupport( blockType ) {\n\tconst support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );\n\treturn !! ( true === support || support?.padding );\n}\n\n/**\n * Checks if there is a current value in the padding block support attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}      Whether or not the block has a padding value set.\n */\nexport function hasPaddingValue( props ) {\n\treturn props.attributes.style?.spacing?.padding !== undefined;\n}\n\n/**\n * Resets the padding block support attributes. This can be used when disabling\n * the padding support controls for a block via a `ToolsPanel`.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetPadding( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tpadding: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if padding settings have been disabled.\n *\n * @param {string} name The name of the block.\n *\n * @return {boolean} Whether padding setting is disabled.\n */\nexport function useIsPaddingDisabled( { name: blockName } = {} ) {\n\tconst isDisabled = ! useSetting( 'spacing.padding' );\n\tconst isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );\n\n\treturn ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;\n}\n\n/**\n * Inspector control panel containing the padding related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Padding edit element.\n */\nexport function PaddingEdit( props ) {\n\tconst {\n\t\tname: blockName,\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( '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\tconst sides = useCustomSides( blockName, 'padding' );\n\tconst splitOnAxis =\n\t\tsides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\n\tif ( useIsPaddingDisabled( props ) ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tpadding: next,\n\t\t\t},\n\t\t};\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\treturn Platform.select( {\n\t\tweb: (\n\t\t\t<>\n\t\t\t\t<BoxControl\n\t\t\t\t\tvalues={ style?.spacing?.padding }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\tsides={ sides }\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tallowReset={ false }\n\t\t\t\t\tsplitOnAxis={ splitOnAxis }\n\t\t\t\t/>\n\t\t\t</>\n\t\t),\n\t\tnative: null,\n\t} );\n}\n\nexport function PaddingVisualizer( { clientId, attributes } ) {\n\tconst padding = attributes?.style?.spacing?.padding;\n\tconst style = useMemo( () => {\n\t\treturn {\n\t\t\tborderTopWidth: padding?.top ?? 0,\n\t\t\tborderRightWidth: padding?.right ?? 0,\n\t\t\tborderBottomWidth: padding?.bottom ?? 0,\n\t\t\tborderLeftWidth: padding?.left ?? 0,\n\t\t};\n\t}, [ padding ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( padding );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( padding, valueRef.current ) ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\n\n\t\t\tclearTimer();\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => clearTimer();\n\t}, [ padding ] );\n\n\tif ( ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ padding }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/padding.js"],"names":["hasPaddingSupport","blockType","support","SPACING_SUPPORT_KEY","padding","hasPaddingValue","props","attributes","style","spacing","undefined","resetPadding","setAttributes","useIsPaddingDisabled","name","blockName","isDisabled","isInvalid","PaddingEdit","spacingSizes","units","availableUnits","sides","splitOnAxis","some","side","AXIAL_SIDES","includes","onChange","next","newStyle","Platform","select","web","length","native","PaddingVisualizer","clientId","borderTopWidth","top","borderRightWidth","right","borderBottomWidth","bottom","borderLeftWidth","left","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPlatform,\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseMemo,\n} from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalBoxControl as BoxControl,\n} from '@wordpress/components';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport {\n\tAXIAL_SIDES,\n\tSPACING_SUPPORT_KEY,\n\tuseCustomSides,\n\tuseIsDimensionsSupportValid,\n} from './dimensions';\nimport { cleanEmptyObject } from './utils';\nimport BlockPopover from '../components/block-popover';\nimport SpacingSizesControl from '../components/spacing-sizes-control';\nimport {\n\tgetSpacingPresetCssVar,\n\tisValueSpacingPreset,\n} from '../components/spacing-sizes-control/utils';\n/**\n * Determines if there is padding support.\n *\n * @param {string|Object} blockType Block name or Block Type object.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasPaddingSupport( blockType ) {\n\tconst support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );\n\treturn !! ( true === support || support?.padding );\n}\n\n/**\n * Checks if there is a current value in the padding block support attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}      Whether or not the block has a padding value set.\n */\nexport function hasPaddingValue( props ) {\n\treturn props.attributes.style?.spacing?.padding !== undefined;\n}\n\n/**\n * Resets the padding block support attributes. This can be used when disabling\n * the padding support controls for a block via a `ToolsPanel`.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetPadding( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tpadding: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if padding settings have been disabled.\n *\n * @param {string} name The name of the block.\n *\n * @return {boolean} Whether padding setting is disabled.\n */\nexport function useIsPaddingDisabled( { name: blockName } = {} ) {\n\tconst isDisabled = ! useSetting( 'spacing.padding' );\n\tconst isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );\n\n\treturn ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;\n}\n\n/**\n * Inspector control panel containing the padding related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Padding edit element.\n */\nexport function PaddingEdit( props ) {\n\tconst {\n\t\tname: blockName,\n\t\tattributes: { style },\n\t\tsetAttributes,\n\t} = props;\n\n\tconst spacingSizes = useSetting( 'spacing.spacingSizes' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( '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\tconst sides = useCustomSides( blockName, 'padding' );\n\tconst splitOnAxis =\n\t\tsides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );\n\n\tif ( useIsPaddingDisabled( props ) ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tspacing: {\n\t\t\t\t...style?.spacing,\n\t\t\t\tpadding: next,\n\t\t\t},\n\t\t};\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\treturn Platform.select( {\n\t\tweb: (\n\t\t\t<>\n\t\t\t\t{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (\n\t\t\t\t\t<BoxControl\n\t\t\t\t\t\tvalues={ style?.spacing?.padding }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\tsides={ sides }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ splitOnAxis }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ spacingSizes?.length > 0 && (\n\t\t\t\t\t<SpacingSizesControl\n\t\t\t\t\t\tvalues={ style?.spacing?.padding }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\tsides={ sides }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ splitOnAxis }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\tnative: null,\n\t} );\n}\n\nexport function PaddingVisualizer( { clientId, attributes } ) {\n\tconst padding = attributes?.style?.spacing?.padding;\n\tconst style = useMemo( () => {\n\t\treturn {\n\t\t\tborderTopWidth: isValueSpacingPreset( padding?.top )\n\t\t\t\t? getSpacingPresetCssVar( padding?.top )\n\t\t\t\t: padding?.top,\n\t\t\tborderRightWidth: isValueSpacingPreset( padding?.right )\n\t\t\t\t? getSpacingPresetCssVar( padding?.right )\n\t\t\t\t: padding?.right,\n\t\t\tborderBottomWidth: isValueSpacingPreset( padding?.bottom )\n\t\t\t\t? getSpacingPresetCssVar( padding?.bottom )\n\t\t\t\t: padding?.bottom,\n\t\t\tborderLeftWidth: isValueSpacingPreset( padding?.left )\n\t\t\t\t? getSpacingPresetCssVar( padding?.left )\n\t\t\t\t: padding?.left,\n\t\t};\n\t}, [ padding ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( padding );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( padding, valueRef.current ) ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\n\n\t\t\tclearTimer();\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => clearTimer();\n\t}, [ padding ] );\n\n\tif ( ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ padding }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"]}