@wordpress/block-editor 11.7.0 → 11.8.0

package/build/hooks/duotone.js

@@ -32,6 +32,10 @@ var _blockList = _interopRequireDefault(require("../components/block-list"));
 
 var _duotone = require("../components/duotone");
 
+var _getBlockCssSelector = require("../components/global-styles/get-block-css-selector");
+
+var _utils = require("../components/global-styles/utils");
+
 var _store = require("../store");
 
 /**
@@ -178,7 +182,9 @@ function DuotonePanel(_ref4) {
 
 
 function addDuotoneAttributes(settings) {
-  if (!(0, _blocks.hasBlockSupport)(settings, 'color.__experimentalDuotone')) {
+  // Previous `color.__experimentalDuotone` support flag is migrated via
+  // block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
+  if (!(0, _blocks.hasBlockSupport)(settings, 'filter.duotone')) {
     return settings;
   } // Allow blocks to specify their own attribute definition with default
   // values if needed.
@@ -205,7 +211,9 @@ function addDuotoneAttributes(settings) {
 
 
 const withDuotoneControls = (0, _compose.createHigherOrderComponent)(BlockEdit => props => {
-  const hasDuotoneSupport = (0, _blocks.hasBlockSupport)(props.name, 'color.__experimentalDuotone');
+  // Previous `color.__experimentalDuotone` support flag is migrated via
+  // block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
+  const hasDuotoneSupport = (0, _blocks.hasBlockSupport)(props.name, 'filter.duotone');
   const isContentLocked = (0, _data.useSelect)(select => {
     return select(_store.store).__unstableGetContentLockingParent(props.clientId);
   }, [props.clientId]); // CAUTION: code added before this line will be executed
@@ -215,69 +223,56 @@ const withDuotoneControls = (0, _compose.createHigherOrderComponent)(BlockEdit =
 
   return (0, _element.createElement)(_element.Fragment, null, hasDuotoneSupport && !isContentLocked && (0, _element.createElement)(DuotonePanel, props), (0, _element.createElement)(BlockEdit, props));
 }, 'withDuotoneControls');
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
-
-function scopeSelector(scope, selector) {
-  const scopes = scope.split(',');
-  const selectors = selector.split(',');
-  const selectorsScoped = [];
-  scopes.forEach(outer => {
-    selectors.forEach(inner => {
-      selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
-    });
-  });
-  return selectorsScoped.join(', ');
-}
-
-function BlockDuotoneStyles(_ref5) {
-  var _getBlockType$selecto, _getBlockType$selecto2;
 
+function DuotoneStyles(_ref5) {
   let {
-    name,
-    duotoneStyle,
-    id
+    id: filterId,
+    selector: duotoneSelector,
+    attribute: duotoneAttr
   } = _ref5;
+  const element = (0, _element.useContext)(_blockList.default.__unstableElementContext);
   const duotonePalette = useMultiOriginPresets({
     presetSetting: 'color.duotone',
     defaultSetting: 'color.defaultDuotone'
+  }); // Possible values for duotone attribute:
+  // 1. Array of colors - e.g. ['#000000', '#ffffff'].
+  // 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''
+  // 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
+
+  const isCustom = Array.isArray(duotoneAttr);
+  const duotonePreset = isCustom ? undefined : getColorsFromDuotonePreset(duotoneAttr, duotonePalette);
+  const isPreset = typeof duotoneAttr === 'string' && duotonePreset;
+  const isCSS = typeof duotoneAttr === 'string' && !isPreset; // Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.
+
+  let colors = null;
+
+  if (isPreset) {
+    // Array of colors.
+    colors = duotonePreset;
+  } else if (isCSS) {
+    // CSS filter property string (e.g. 'unset').
+    colors = duotoneAttr;
+  } else if (isCustom) {
+    // Array of colors.
+    colors = duotoneAttr;
+  } // Build the CSS selectors to which the filter will be applied.
+
+
+  const selectors = duotoneSelector.split(',');
+  const selectorsScoped = selectors.map(selectorPart => {
+    // Extra .editor-styles-wrapper specificity is needed in the editor
+    // since we're not using inline styles to apply the filter. We need to
+    // override duotone applied by global styles and theme.json.
+    // Assuming the selector part is a subclass selector (not a tag name)
+    // so we can prepend the filter id class. If we want to support elements
+    // such as `img` or namespaces, we'll need to add a case for that here.
+    return `.editor-styles-wrapper .${filterId}${selectorPart.trim()}`;
   });
-  const element = (0, _element.useContext)(_blockList.default.__unstableElementContext); // Portals cannot exist without a container.
-  // Guard against empty Duotone styles.
-
-  if (!element || !duotoneStyle) {
-    return null;
-  }
-
-  let colors = duotoneStyle;
-
-  if (!Array.isArray(colors) && colors !== 'unset') {
-    colors = getColorsFromDuotonePreset(colors, duotonePalette);
-  }
-
-  const duotoneSupportSelectors = ((_getBlockType$selecto = (0, _blocks.getBlockType)(name).selectors) === null || _getBlockType$selecto === void 0 ? void 0 : (_getBlockType$selecto2 = _getBlockType$selecto.filter) === null || _getBlockType$selecto2 === void 0 ? void 0 : _getBlockType$selecto2.duotone) || (0, _blocks.getBlockSupport)(name, 'color.__experimentalDuotone'); // Extra .editor-styles-wrapper specificity is needed in the editor
-  // since we're not using inline styles to apply the filter. We need to
-  // override duotone applied by global styles and theme.json.
-
-  const selectorsGroup = scopeSelector(`.editor-styles-wrapper .${id}`, duotoneSupportSelectors);
-  return (0, _element.createPortal)((0, _element.createElement)(InlineDuotone, {
-    selector: selectorsGroup,
-    id: id,
+  const selector = selectorsScoped.join(', ');
+  const isValidFilter = Array.isArray(colors) || colors === 'unset';
+  return element && isValidFilter && (0, _element.createPortal)((0, _element.createElement)(InlineDuotone, {
+    selector: selector,
+    id: filterId,
     colors: colors
   }), element);
 }
@@ -293,18 +288,49 @@ function BlockDuotoneStyles(_ref5) {
 const withDuotoneStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
   var _props$attributes, _props$attributes$sty, _props$attributes$sty2;
 
-  const duotoneSupport = (0, _blocks.getBlockSupport)(props.name, 'color.__experimentalDuotone');
-  const id = `wp-duotone-${(0, _compose.useInstanceId)(BlockListBlock)}`;
-  const className = duotoneSupport ? (0, _classnames.default)(props === null || props === void 0 ? void 0 : props.className, id) : props === null || props === void 0 ? void 0 : props.className;
-  const duotoneStyle = props === null || props === void 0 ? void 0 : (_props$attributes = props.attributes) === null || _props$attributes === void 0 ? void 0 : (_props$attributes$sty = _props$attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.color) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.duotone; // CAUTION: code added before this line will be executed
+  const id = (0, _compose.useInstanceId)(BlockListBlock);
+  const selector = (0, _element.useMemo)(() => {
+    const blockType = (0, _blocks.getBlockType)(props.name);
+
+    if (blockType) {
+      // Backwards compatibility for `supports.color.__experimentalDuotone`
+      // is provided via the `block_type_metadata_settings` filter. If
+      // `supports.filter.duotone` has not been set and the
+      // experimental property has been, the experimental property
+      // value is copied into `supports.filter.duotone`.
+      const duotoneSupport = (0, _blocks.getBlockSupport)(blockType, 'filter.duotone', false);
+
+      if (!duotoneSupport) {
+        return null;
+      } // If the experimental duotone support was set, that value is
+      // to be treated as a selector and requires scoping.
+
+
+      const experimentalDuotone = (0, _blocks.getBlockSupport)(blockType, 'color.__experimentalDuotone', false);
+
+      if (experimentalDuotone) {
+        const rootSelector = (0, _getBlockCssSelector.getBlockCSSSelector)(blockType);
+        return typeof experimentalDuotone === 'string' ? (0, _utils.scopeSelector)(rootSelector, experimentalDuotone) : rootSelector;
+      } // Regular filter.duotone support uses filter.duotone selectors with fallbacks.
+
+
+      return (0, _getBlockCssSelector.getBlockCSSSelector)(blockType, 'filter.duotone', {
+        fallback: true
+      });
+    }
+  }, [props.name]);
+  const attribute = props === null || props === void 0 ? void 0 : (_props$attributes = props.attributes) === null || _props$attributes === void 0 ? void 0 : (_props$attributes$sty = _props$attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.color) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.duotone;
+  const filterClass = `wp-duotone-${id}`;
+  const shouldRender = selector && attribute;
+  const className = shouldRender ? (0, _classnames.default)(props === null || props === void 0 ? void 0 : props.className, filterClass) : props === null || props === void 0 ? void 0 : props.className; // CAUTION: code added before this line will be executed
   // for all blocks, not just those that support duotone. Code added
   // above this line should be carefully evaluated for its impact on
   // performance.
 
-  return (0, _element.createElement)(_element.Fragment, null, duotoneSupport && duotoneStyle && (0, _element.createElement)(BlockDuotoneStyles, {
-    name: props === null || props === void 0 ? void 0 : props.name,
-    duotoneStyle: duotoneStyle,
-    id: id
+  return (0, _element.createElement)(_element.Fragment, null, shouldRender && (0, _element.createElement)(DuotoneStyles, {
+    id: filterClass,
+    selector: selector,
+    attribute: attribute
   }), (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
     className: className
   })));

package/build/hooks/duotone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/duotone.js"],"names":["EMPTY_ARRAY","namesPlugin","InlineDuotone","selector","id","colors","useMultiOriginPresets","presetSetting","defaultSetting","disableDefault","userPresets","themePresets","defaultPresets","getColorsFromDuotonePreset","duotone","duotonePalette","preset","find","slug","undefined","getDuotonePresetFromColors","Array","isArray","duotonePreset","every","val","index","DuotonePanel","attributes","setAttributes","style","duotoneStyle","color","colorPalette","disableCustomColors","disableCustomDuotone","length","duotonePresetOrColors","newDuotone","maybePreset","newStyle","addDuotoneAttributes","settings","Object","assign","type","withDuotoneControls","BlockEdit","props","hasDuotoneSupport","name","isContentLocked","select","blockEditorStore","__unstableGetContentLockingParent","clientId","scopeSelector","scope","scopes","split","selectors","selectorsScoped","forEach","outer","inner","push","trim","join","BlockDuotoneStyles","element","BlockList","__unstableElementContext","duotoneSupportSelectors","filter","selectorsGroup","withDuotoneStyles","BlockListBlock","duotoneSupport","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n} from '@wordpress/blocks';\nimport { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useMemo, useContext, createPortal } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockControls,\n\t__experimentalDuotoneControl as DuotoneControl,\n\tuseSetting,\n} from '../components';\nimport BlockList from '../components/block-list';\nimport {\n\t__unstableDuotoneFilter as DuotoneFilter,\n\t__unstableDuotoneStylesheet as DuotoneStylesheet,\n\t__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,\n} from '../components/duotone';\nimport { store as blockEditorStore } from '../store';\n\nconst EMPTY_ARRAY = [];\n\nextend( [ namesPlugin ] );\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {Object}           props          Duotone props.\n * @param {string}           props.selector Selector to apply the filter to.\n * @param {string}           props.id       Unique id for this duotone filter.\n * @param {string[]|\"unset\"} props.colors   Array of RGB color strings ordered from dark to light.\n *\n * @return {WPElement} Duotone element.\n */\nfunction InlineDuotone( { selector, id, colors } ) {\n\tif ( colors === 'unset' ) {\n\t\treturn <DuotoneUnsetStylesheet selector={ selector } />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DuotoneFilter id={ id } colors={ colors } />\n\t\t\t<DuotoneStylesheet id={ id } selector={ selector } />\n\t\t</>\n\t);\n}\n\nfunction useMultiOriginPresets( { presetSetting, defaultSetting } ) {\n\tconst disableDefault = ! useSetting( defaultSetting );\n\tconst userPresets =\n\t\tuseSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;\n\tconst themePresets =\n\t\tuseSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;\n\tconst defaultPresets =\n\t\tuseSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;\n\treturn useMemo(\n\t\t() => [\n\t\t\t...userPresets,\n\t\t\t...themePresets,\n\t\t\t...( disableDefault ? EMPTY_ARRAY : defaultPresets ),\n\t\t],\n\t\t[ disableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nexport function getColorsFromDuotonePreset( duotone, duotonePalette ) {\n\tif ( ! duotone ) {\n\t\treturn;\n\t}\n\tconst preset = duotonePalette?.find( ( { slug } ) => {\n\t\treturn duotone === `var:preset|duotone|${ slug }`;\n\t} );\n\n\treturn preset ? preset.colors : undefined;\n}\n\nexport function getDuotonePresetFromColors( colors, duotonePalette ) {\n\tif ( ! colors || ! Array.isArray( colors ) ) {\n\t\treturn;\n\t}\n\n\tconst preset = duotonePalette?.find( ( duotonePreset ) => {\n\t\treturn duotonePreset?.colors?.every(\n\t\t\t( val, index ) => val === colors[ index ]\n\t\t);\n\t} );\n\n\treturn preset ? `var:preset|duotone|${ preset.slug }` : undefined;\n}\n\nfunction DuotonePanel( { attributes, setAttributes } ) {\n\tconst style = attributes?.style;\n\tconst duotoneStyle = style?.color?.duotone;\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.palette',\n\t\tdefaultSetting: 'color.defaultPalette',\n\t} );\n\tconst disableCustomColors = ! useSetting( 'color.custom' );\n\tconst disableCustomDuotone =\n\t\t! useSetting( 'color.customDuotone' ) ||\n\t\t( colorPalette?.length === 0 && disableCustomColors );\n\n\tif ( duotonePalette?.length === 0 && disableCustomDuotone ) {\n\t\treturn null;\n\t}\n\n\tconst duotonePresetOrColors = ! Array.isArray( duotoneStyle )\n\t\t? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )\n\t\t: duotoneStyle;\n\n\treturn (\n\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t<DuotoneControl\n\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\tvalue={ duotonePresetOrColors }\n\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\tconst maybePreset = getDuotonePresetFromColors(\n\t\t\t\t\t\tnewDuotone,\n\t\t\t\t\t\tduotonePalette\n\t\t\t\t\t);\n\n\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t...style?.color,\n\t\t\t\t\t\t\tduotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `duotone` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addDuotoneAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, 'color.__experimentalDuotone' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default\n\t// values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\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 toolbar controls for duotone if the\n * block supports duotone.\n *\n * @param {Function} BlockEdit Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneControls = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst hasDuotoneSupport = hasBlockSupport(\n\t\t\tprops.name,\n\t\t\t'color.__experimentalDuotone'\n\t\t);\n\t\tconst isContentLocked = useSelect(\n\t\t\t( select ) => {\n\t\t\t\treturn select(\n\t\t\t\t\tblockEditorStore\n\t\t\t\t).__unstableGetContentLockingParent( props.clientId );\n\t\t\t},\n\t\t\t[ props.clientId ]\n\t\t);\n\n\t\t// CAUTION: code added before this line will be executed\n\t\t// for all blocks, not just those that support duotone. Code added\n\t\t// above this line should be carefully evaluated for its impact on\n\t\t// performance.\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ hasDuotoneSupport && ! isContentLocked && (\n\t\t\t\t\t<DuotonePanel { ...props } />\n\t\t\t\t) }\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneControls'\n);\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param {string} scope    Selector to scope to.\n * @param {string} selector Original selector.\n *\n * @return {string} Scoped selector.\n */\nfunction scopeSelector( scope, selector ) {\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\nfunction BlockDuotoneStyles( { name, duotoneStyle, id } ) {\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\n\tconst element = useContext( BlockList.__unstableElementContext );\n\n\t// Portals cannot exist without a container.\n\t// Guard against empty Duotone styles.\n\tif ( ! element || ! duotoneStyle ) {\n\t\treturn null;\n\t}\n\n\tlet colors = duotoneStyle;\n\n\tif ( ! Array.isArray( colors ) && colors !== 'unset' ) {\n\t\tcolors = getColorsFromDuotonePreset( colors, duotonePalette );\n\t}\n\n\tconst duotoneSupportSelectors =\n\t\tgetBlockType( name ).selectors?.filter?.duotone ||\n\t\tgetBlockSupport( name, 'color.__experimentalDuotone' );\n\n\t// Extra .editor-styles-wrapper specificity is needed in the editor\n\t// since we're not using inline styles to apply the filter. We need to\n\t// override duotone applied by global styles and theme.json.\n\tconst selectorsGroup = scopeSelector(\n\t\t`.editor-styles-wrapper .${ id }`,\n\t\tduotoneSupportSelectors\n\t);\n\n\treturn createPortal(\n\t\t<InlineDuotone\n\t\t\tselector={ selectorsGroup }\n\t\t\tid={ id }\n\t\t\tcolors={ colors }\n\t\t/>,\n\t\telement\n\t);\n}\n\n/**\n * Override the default block element to include duotone styles.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst duotoneSupport = getBlockSupport(\n\t\t\tprops.name,\n\t\t\t'color.__experimentalDuotone'\n\t\t);\n\n\t\tconst id = `wp-duotone-${ useInstanceId( BlockListBlock ) }`;\n\t\tconst className = duotoneSupport\n\t\t\t? classnames( props?.className, id )\n\t\t\t: props?.className;\n\t\tconst duotoneStyle = props?.attributes?.style?.color?.duotone;\n\n\t\t// CAUTION: code added before this line will be executed\n\t\t// for all blocks, not just those that support duotone. Code added\n\t\t// above this line should be carefully evaluated for its impact on\n\t\t// performance.\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ duotoneSupport && duotoneStyle && (\n\t\t\t\t\t<BlockDuotoneStyles\n\t\t\t\t\t\tname={ props?.name }\n\t\t\t\t\t\tduotoneStyle={ duotoneStyle }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BlockListBlock { ...props } className={ className } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/duotone/add-attributes',\n\taddDuotoneAttributes\n);\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/duotone/with-editor-controls',\n\twithDuotoneControls\n);\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/editor/duotone/with-styles',\n\twithDuotoneStyles\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/duotone.js"],"names":["EMPTY_ARRAY","namesPlugin","InlineDuotone","selector","id","colors","useMultiOriginPresets","presetSetting","defaultSetting","disableDefault","userPresets","themePresets","defaultPresets","getColorsFromDuotonePreset","duotone","duotonePalette","preset","find","slug","undefined","getDuotonePresetFromColors","Array","isArray","duotonePreset","every","val","index","DuotonePanel","attributes","setAttributes","style","duotoneStyle","color","colorPalette","disableCustomColors","disableCustomDuotone","length","duotonePresetOrColors","newDuotone","maybePreset","newStyle","addDuotoneAttributes","settings","Object","assign","type","withDuotoneControls","BlockEdit","props","hasDuotoneSupport","name","isContentLocked","select","blockEditorStore","__unstableGetContentLockingParent","clientId","DuotoneStyles","filterId","duotoneSelector","attribute","duotoneAttr","element","BlockList","__unstableElementContext","isCustom","isPreset","isCSS","selectors","split","selectorsScoped","map","selectorPart","trim","join","isValidFilter","withDuotoneStyles","BlockListBlock","blockType","duotoneSupport","experimentalDuotone","rootSelector","fallback","filterClass","shouldRender","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n} from '@wordpress/blocks';\nimport { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useMemo, useContext, createPortal } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockControls,\n\t__experimentalDuotoneControl as DuotoneControl,\n\tuseSetting,\n} from '../components';\nimport BlockList from '../components/block-list';\nimport {\n\t__unstableDuotoneFilter as DuotoneFilter,\n\t__unstableDuotoneStylesheet as DuotoneStylesheet,\n\t__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,\n} from '../components/duotone';\nimport { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';\nimport { scopeSelector } from '../components/global-styles/utils';\nimport { store as blockEditorStore } from '../store';\n\nconst EMPTY_ARRAY = [];\n\nextend( [ namesPlugin ] );\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {Object}           props          Duotone props.\n * @param {string}           props.selector Selector to apply the filter to.\n * @param {string}           props.id       Unique id for this duotone filter.\n * @param {string[]|\"unset\"} props.colors   Array of RGB color strings ordered from dark to light.\n *\n * @return {WPElement} Duotone element.\n */\nfunction InlineDuotone( { selector, id, colors } ) {\n\tif ( colors === 'unset' ) {\n\t\treturn <DuotoneUnsetStylesheet selector={ selector } />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DuotoneFilter id={ id } colors={ colors } />\n\t\t\t<DuotoneStylesheet id={ id } selector={ selector } />\n\t\t</>\n\t);\n}\n\nfunction useMultiOriginPresets( { presetSetting, defaultSetting } ) {\n\tconst disableDefault = ! useSetting( defaultSetting );\n\tconst userPresets =\n\t\tuseSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;\n\tconst themePresets =\n\t\tuseSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;\n\tconst defaultPresets =\n\t\tuseSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;\n\treturn useMemo(\n\t\t() => [\n\t\t\t...userPresets,\n\t\t\t...themePresets,\n\t\t\t...( disableDefault ? EMPTY_ARRAY : defaultPresets ),\n\t\t],\n\t\t[ disableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nexport function getColorsFromDuotonePreset( duotone, duotonePalette ) {\n\tif ( ! duotone ) {\n\t\treturn;\n\t}\n\tconst preset = duotonePalette?.find( ( { slug } ) => {\n\t\treturn duotone === `var:preset|duotone|${ slug }`;\n\t} );\n\n\treturn preset ? preset.colors : undefined;\n}\n\nexport function getDuotonePresetFromColors( colors, duotonePalette ) {\n\tif ( ! colors || ! Array.isArray( colors ) ) {\n\t\treturn;\n\t}\n\n\tconst preset = duotonePalette?.find( ( duotonePreset ) => {\n\t\treturn duotonePreset?.colors?.every(\n\t\t\t( val, index ) => val === colors[ index ]\n\t\t);\n\t} );\n\n\treturn preset ? `var:preset|duotone|${ preset.slug }` : undefined;\n}\n\nfunction DuotonePanel( { attributes, setAttributes } ) {\n\tconst style = attributes?.style;\n\tconst duotoneStyle = style?.color?.duotone;\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.palette',\n\t\tdefaultSetting: 'color.defaultPalette',\n\t} );\n\tconst disableCustomColors = ! useSetting( 'color.custom' );\n\tconst disableCustomDuotone =\n\t\t! useSetting( 'color.customDuotone' ) ||\n\t\t( colorPalette?.length === 0 && disableCustomColors );\n\n\tif ( duotonePalette?.length === 0 && disableCustomDuotone ) {\n\t\treturn null;\n\t}\n\n\tconst duotonePresetOrColors = ! Array.isArray( duotoneStyle )\n\t\t? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )\n\t\t: duotoneStyle;\n\n\treturn (\n\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t<DuotoneControl\n\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\tvalue={ duotonePresetOrColors }\n\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\tconst maybePreset = getDuotonePresetFromColors(\n\t\t\t\t\t\tnewDuotone,\n\t\t\t\t\t\tduotonePalette\n\t\t\t\t\t);\n\n\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t...style?.color,\n\t\t\t\t\t\t\tduotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `duotone` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addDuotoneAttributes( settings ) {\n\t// Previous `color.__experimentalDuotone` support flag is migrated via\n\t// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.\n\tif ( ! hasBlockSupport( settings, 'filter.duotone' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default\n\t// values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\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 toolbar controls for duotone if the\n * block supports duotone.\n *\n * @param {Function} BlockEdit Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneControls = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\t// Previous `color.__experimentalDuotone` support flag is migrated via\n\t\t// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.\n\t\tconst hasDuotoneSupport = hasBlockSupport(\n\t\t\tprops.name,\n\t\t\t'filter.duotone'\n\t\t);\n\n\t\tconst isContentLocked = useSelect(\n\t\t\t( select ) => {\n\t\t\t\treturn select(\n\t\t\t\t\tblockEditorStore\n\t\t\t\t).__unstableGetContentLockingParent( props.clientId );\n\t\t\t},\n\t\t\t[ props.clientId ]\n\t\t);\n\n\t\t// CAUTION: code added before this line will be executed\n\t\t// for all blocks, not just those that support duotone. Code added\n\t\t// above this line should be carefully evaluated for its impact on\n\t\t// performance.\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ hasDuotoneSupport && ! isContentLocked && (\n\t\t\t\t\t<DuotonePanel { ...props } />\n\t\t\t\t) }\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneControls'\n);\n\nfunction DuotoneStyles( {\n\tid: filterId,\n\tselector: duotoneSelector,\n\tattribute: duotoneAttr,\n} ) {\n\tconst element = useContext( BlockList.__unstableElementContext );\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\n\t// Possible values for duotone attribute:\n\t// 1. Array of colors - e.g. ['#000000', '#ffffff'].\n\t// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''\n\t// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.\n\tconst isCustom = Array.isArray( duotoneAttr );\n\tconst duotonePreset = isCustom\n\t\t? undefined\n\t\t: getColorsFromDuotonePreset( duotoneAttr, duotonePalette );\n\tconst isPreset = typeof duotoneAttr === 'string' && duotonePreset;\n\tconst isCSS = typeof duotoneAttr === 'string' && ! isPreset;\n\n\t// Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.\n\tlet colors = null;\n\tif ( isPreset ) {\n\t\t// Array of colors.\n\t\tcolors = duotonePreset;\n\t} else if ( isCSS ) {\n\t\t// CSS filter property string (e.g. 'unset').\n\t\tcolors = duotoneAttr;\n\t} else if ( isCustom ) {\n\t\t// Array of colors.\n\t\tcolors = duotoneAttr;\n\t}\n\n\t// Build the CSS selectors to which the filter will be applied.\n\tconst selectors = duotoneSelector.split( ',' );\n\n\tconst selectorsScoped = selectors.map( ( selectorPart ) => {\n\t\t// Extra .editor-styles-wrapper specificity is needed in the editor\n\t\t// since we're not using inline styles to apply the filter. We need to\n\t\t// override duotone applied by global styles and theme.json.\n\n\t\t// Assuming the selector part is a subclass selector (not a tag name)\n\t\t// so we can prepend the filter id class. If we want to support elements\n\t\t// such as `img` or namespaces, we'll need to add a case for that here.\n\t\treturn `.editor-styles-wrapper .${ filterId }${ selectorPart.trim() }`;\n\t} );\n\n\tconst selector = selectorsScoped.join( ', ' );\n\n\tconst isValidFilter = Array.isArray( colors ) || colors === 'unset';\n\n\treturn (\n\t\telement &&\n\t\tisValidFilter &&\n\t\tcreatePortal(\n\t\t\t<InlineDuotone\n\t\t\t\tselector={ selector }\n\t\t\t\tid={ filterId }\n\t\t\t\tcolors={ colors }\n\t\t\t/>,\n\t\t\telement\n\t\t)\n\t);\n}\n\n/**\n * Override the default block element to include duotone styles.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withDuotoneStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst id = useInstanceId( BlockListBlock );\n\n\t\tconst selector = useMemo( () => {\n\t\t\tconst blockType = getBlockType( props.name );\n\n\t\t\tif ( blockType ) {\n\t\t\t\t// Backwards compatibility for `supports.color.__experimentalDuotone`\n\t\t\t\t// is provided via the `block_type_metadata_settings` filter. If\n\t\t\t\t// `supports.filter.duotone` has not been set and the\n\t\t\t\t// experimental property has been, the experimental property\n\t\t\t\t// value is copied into `supports.filter.duotone`.\n\t\t\t\tconst duotoneSupport = getBlockSupport(\n\t\t\t\t\tblockType,\n\t\t\t\t\t'filter.duotone',\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tif ( ! duotoneSupport ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\t// If the experimental duotone support was set, that value is\n\t\t\t\t// to be treated as a selector and requires scoping.\n\t\t\t\tconst experimentalDuotone = getBlockSupport(\n\t\t\t\t\tblockType,\n\t\t\t\t\t'color.__experimentalDuotone',\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tif ( experimentalDuotone ) {\n\t\t\t\t\tconst rootSelector = getBlockCSSSelector( blockType );\n\t\t\t\t\treturn typeof experimentalDuotone === 'string'\n\t\t\t\t\t\t? scopeSelector( rootSelector, experimentalDuotone )\n\t\t\t\t\t\t: rootSelector;\n\t\t\t\t}\n\n\t\t\t\t// Regular filter.duotone support uses filter.duotone selectors with fallbacks.\n\t\t\t\treturn getBlockCSSSelector( blockType, 'filter.duotone', {\n\t\t\t\t\tfallback: true,\n\t\t\t\t} );\n\t\t\t}\n\t\t}, [ props.name ] );\n\n\t\tconst attribute = props?.attributes?.style?.color?.duotone;\n\n\t\tconst filterClass = `wp-duotone-${ id }`;\n\n\t\tconst shouldRender = selector && attribute;\n\n\t\tconst className = shouldRender\n\t\t\t? classnames( props?.className, filterClass )\n\t\t\t: props?.className;\n\n\t\t// CAUTION: code added before this line will be executed\n\t\t// for all blocks, not just those that support duotone. Code added\n\t\t// above this line should be carefully evaluated for its impact on\n\t\t// performance.\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ shouldRender && (\n\t\t\t\t\t<DuotoneStyles\n\t\t\t\t\t\tid={ filterClass }\n\t\t\t\t\t\tselector={ selector }\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BlockListBlock { ...props } className={ className } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withDuotoneStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/duotone/add-attributes',\n\taddDuotoneAttributes\n);\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/duotone/with-editor-controls',\n\twithDuotoneControls\n);\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/editor/duotone/with-styles',\n\twithDuotoneStyles\n);\n"]}

package/build/hooks/margin.js

@@ -13,7 +13,7 @@ var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equa
 
 var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
 
-var _utils = require("../components/spacing-sizes-control/utils");
+var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
 
 /**
  * WordPress dependencies
@@ -22,6 +22,10 @@ var _utils = require("../components/spacing-sizes-control/utils");
 /**
  * Internal dependencies
  */
+function getComputedCSS(element, property) {
+  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
+}
+
 function MarginVisualizer(_ref) {
   var _attributes$style, _attributes$style$spa;
 
@@ -30,23 +34,29 @@ function MarginVisualizer(_ref) {
     attributes,
     forceShow
   } = _ref;
+  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
+  const [style, setStyle] = (0, _element.useState)();
   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 style = (0, _element.useMemo)(() => {
-    const marginTop = margin !== null && margin !== void 0 && margin.top ? (0, _utils.getSpacingPresetCssVar)(margin === null || margin === void 0 ? void 0 : margin.top) : 0;
-    const marginRight = margin !== null && margin !== void 0 && margin.right ? (0, _utils.getSpacingPresetCssVar)(margin === null || margin === void 0 ? void 0 : margin.right) : 0;
-    const marginBottom = margin !== null && margin !== void 0 && margin.bottom ? (0, _utils.getSpacingPresetCssVar)(margin === null || margin === void 0 ? void 0 : margin.bottom) : 0;
-    const marginLeft = margin !== null && margin !== void 0 && margin.left ? (0, _utils.getSpacingPresetCssVar)(margin === null || margin === void 0 ? void 0 : margin.left) : 0;
-    return {
-      borderTopWidth: marginTop,
-      borderRightWidth: marginRight,
-      borderBottomWidth: marginBottom,
-      borderLeftWidth: marginLeft,
-      top: marginTop ? `calc(${marginTop} * -1)` : 0,
-      right: marginRight ? `calc(${marginRight} * -1)` : 0,
-      bottom: marginBottom ? `calc(${marginBottom} * -1)` : 0,
-      left: marginLeft ? `calc(${marginLeft} * -1)` : 0
-    };
-  }, [margin]);
+  (0, _element.useEffect)(() => {
+    if (!blockElement) {
+      return;
+    }
+
+    const top = getComputedCSS(blockElement, 'margin-top');
+    const right = getComputedCSS(blockElement, 'margin-right');
+    const bottom = getComputedCSS(blockElement, 'margin-bottom');
+    const left = getComputedCSS(blockElement, 'margin-left');
+    setStyle({
+      borderTopWidth: top,
+      borderRightWidth: right,
+      borderBottomWidth: bottom,
+      borderLeftWidth: left,
+      top: top ? `-${top}` : 0,
+      right: right ? `-${right}` : 0,
+      bottom: bottom ? `-${bottom}` : 0,
+      left: left ? `-${left}` : 0
+    });
+  }, [blockElement, margin]);
   const [isActive, setIsActive] = (0, _element.useState)(false);
   const valueRef = (0, _element.useRef)(margin);
   const timeoutRef = (0, _element.useRef)();

package/build/hooks/margin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/margin.js"],"names":["MarginVisualizer","clientId","attributes","forceShow","margin","style","spacing","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 { useMemo, useRef, useState, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';\n\nexport function MarginVisualizer( { clientId, attributes, forceShow } ) {\n\tconst margin = attributes?.style?.spacing?.margin;\n\n\tconst style = useMemo( () => {\n\t\tconst marginTop = margin?.top\n\t\t\t? getSpacingPresetCssVar( margin?.top )\n\t\t\t: 0;\n\t\tconst marginRight = margin?.right\n\t\t\t? getSpacingPresetCssVar( margin?.right )\n\t\t\t: 0;\n\t\tconst marginBottom = margin?.bottom\n\t\t\t? getSpacingPresetCssVar( margin?.bottom )\n\t\t\t: 0;\n\t\tconst marginLeft = margin?.left\n\t\t\t? getSpacingPresetCssVar( margin?.left )\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 ? `calc(${ marginTop } * -1)` : 0,\n\t\t\tright: marginRight ? `calc(${ marginRight } * -1)` : 0,\n\t\t\tbottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,\n\t\t\tleft: marginLeft ? `calc(${ marginLeft } * -1)` : 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 ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\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 () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ margin, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\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\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\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":["getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","MarginVisualizer","clientId","attributes","forceShow","blockElement","style","setStyle","margin","spacing","top","right","bottom","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 { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function MarginVisualizer( { clientId, attributes, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst margin = attributes?.style?.spacing?.margin;\n\n\tuseEffect( () => {\n\t\tif ( ! blockElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst top = getComputedCSS( blockElement, 'margin-top' );\n\t\tconst right = getComputedCSS( blockElement, 'margin-right' );\n\t\tconst bottom = getComputedCSS( blockElement, 'margin-bottom' );\n\t\tconst left = getComputedCSS( blockElement, 'margin-left' );\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: top,\n\t\t\tborderRightWidth: right,\n\t\t\tborderBottomWidth: bottom,\n\t\t\tborderLeftWidth: left,\n\t\t\ttop: top ? `-${ top }` : 0,\n\t\t\tright: right ? `-${ right }` : 0,\n\t\t\tbottom: bottom ? `-${ bottom }` : 0,\n\t\t\tleft: left ? `-${ left }` : 0,\n\t\t} );\n\t}, [ blockElement, 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 ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\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 () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ margin, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\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\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\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

@@ -13,7 +13,7 @@ var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equa
 
 var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
 
-var _utils = require("../components/spacing-sizes-control/utils");
+var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
 
 /**
  * WordPress dependencies
@@ -22,6 +22,10 @@ var _utils = require("../components/spacing-sizes-control/utils");
 /**
  * Internal dependencies
  */
+function getComputedCSS(element, property) {
+  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
+}
+
 function PaddingVisualizer(_ref) {
   var _attributes$style, _attributes$style$spa;
 
@@ -30,15 +34,21 @@ function PaddingVisualizer(_ref) {
     attributes,
     forceShow
   } = _ref;
+  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
+  const [style, setStyle] = (0, _element.useState)();
   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)(() => {
-    return {
-      borderTopWidth: padding !== null && padding !== void 0 && padding.top ? (0, _utils.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.top) : 0,
-      borderRightWidth: padding !== null && padding !== void 0 && padding.right ? (0, _utils.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.right) : 0,
-      borderBottomWidth: padding !== null && padding !== void 0 && padding.bottom ? (0, _utils.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.bottom) : 0,
-      borderLeftWidth: padding !== null && padding !== void 0 && padding.left ? (0, _utils.getSpacingPresetCssVar)(padding === null || padding === void 0 ? void 0 : padding.left) : 0
-    };
-  }, [padding]);
+  (0, _element.useEffect)(() => {
+    if (!blockElement) {
+      return;
+    }
+
+    setStyle({
+      borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
+      borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
+      borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
+      borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
+    });
+  }, [blockElement, padding]);
   const [isActive, setIsActive] = (0, _element.useState)(false);
   const valueRef = (0, _element.useRef)(padding);
   const timeoutRef = (0, _element.useRef)();

package/build/hooks/padding.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/padding.js"],"names":["PaddingVisualizer","clientId","attributes","forceShow","padding","style","spacing","borderTopWidth","top","borderRightWidth","right","borderBottomWidth","bottom","borderLeftWidth","left","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIO,SAASA,iBAAT,OAAkE;AAAA;;AAAA,MAAtC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,UAAZ;AAAwBC,IAAAA;AAAxB,GAAsC;AACxE,QAAMC,OAAO,GAAGF,UAAH,aAAGA,UAAH,4CAAGA,UAAU,CAAEG,KAAf,+EAAG,kBAAmBC,OAAtB,0DAAG,sBAA4BF,OAA5C;AACA,QAAMC,KAAK,GAAG,sBAAS,MAAM;AAC5B,WAAO;AACNE,MAAAA,cAAc,EAAEH,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEI,GAAT,GACb,mCAAwBJ,OAAxB,aAAwBA,OAAxB,uBAAwBA,OAAO,CAAEI,GAAjC,CADa,GAEb,CAHG;AAINC,MAAAA,gBAAgB,EAAEL,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEM,KAAT,GACf,mCAAwBN,OAAxB,aAAwBA,OAAxB,uBAAwBA,OAAO,CAAEM,KAAjC,CADe,GAEf,CANG;AAONC,MAAAA,iBAAiB,EAAEP,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEQ,MAAT,GAChB,mCAAwBR,OAAxB,aAAwBA,OAAxB,uBAAwBA,OAAO,CAAEQ,MAAjC,CADgB,GAEhB,CATG;AAUNC,MAAAA,eAAe,EAAET,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEU,IAAT,GACd,mCAAwBV,OAAxB,aAAwBA,OAAxB,uBAAwBA,OAAO,CAAEU,IAAjC,CADc,GAEd;AAZG,KAAP;AAcA,GAfa,EAeX,CAAEV,OAAF,CAfW,CAAd;AAiBA,QAAM,CAAEW,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AACA,QAAMC,QAAQ,GAAG,qBAAQb,OAAR,CAAjB;AACA,QAAMc,UAAU,GAAG,sBAAnB;;AAEA,QAAMC,UAAU,GAAG,MAAM;AACxB,QAAKD,UAAU,CAACE,OAAhB,EAA0B;AACzBC,MAAAA,MAAM,CAACC,YAAP,CAAqBJ,UAAU,CAACE,OAAhC;AACA;AACD,GAJD;;AAMA,0BAAW,MAAM;AAChB,QAAK,CAAE,6BAAgBhB,OAAhB,EAAyBa,QAAQ,CAACG,OAAlC,CAAF,IAAiD,CAAEjB,SAAxD,EAAoE;AACnEa,MAAAA,WAAW,CAAE,IAAF,CAAX;AACAC,MAAAA,QAAQ,CAACG,OAAT,GAAmBhB,OAAnB;AAEAc,MAAAA,UAAU,CAACE,OAAX,GAAqBG,UAAU,CAAE,MAAM;AACtCP,QAAAA,WAAW,CAAE,KAAF,CAAX;AACA,OAF8B,EAE5B,GAF4B,CAA/B;AAGA;;AAED,WAAO,MAAM;AACZA,MAAAA,WAAW,CAAE,KAAF,CAAX;AACAG,MAAAA,UAAU;AACV,KAHD;AAIA,GAdD,EAcG,CAAEf,OAAF,EAAWD,SAAX,CAdH;;AAgBA,MAAK,CAAEY,QAAF,IAAc,CAAEZ,SAArB,EAAiC;AAChC,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,qBAAD;AACC,IAAA,QAAQ,EAAGF,QADZ;AAEC,IAAA,qBAAqB,MAFtB;AAGC,IAAA,qBAAqB,EAAGG,OAHzB;AAIC,IAAA,qBAAqB,EAAC,eAJvB;AAKC,IAAA,KAAK,EAAG;AALT,KAOC;AAAK,IAAA,SAAS,EAAC,kCAAf;AAAkD,IAAA,KAAK,EAAGC;AAA1D,IAPD,CADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect, useMemo } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';\n\nexport function PaddingVisualizer( { clientId, attributes, forceShow } ) {\n\tconst padding = attributes?.style?.spacing?.padding;\n\tconst style = useMemo( () => {\n\t\treturn {\n\t\t\tborderTopWidth: padding?.top\n\t\t\t\t? getSpacingPresetCssVar( padding?.top )\n\t\t\t\t: 0,\n\t\t\tborderRightWidth: padding?.right\n\t\t\t\t? getSpacingPresetCssVar( padding?.right )\n\t\t\t\t: 0,\n\t\t\tborderBottomWidth: padding?.bottom\n\t\t\t\t? getSpacingPresetCssVar( padding?.bottom )\n\t\t\t\t: 0,\n\t\t\tborderLeftWidth: padding?.left\n\t\t\t\t? getSpacingPresetCssVar( padding?.left )\n\t\t\t\t: 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 ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\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 () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ padding, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\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\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\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":["getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","PaddingVisualizer","clientId","attributes","forceShow","blockElement","style","setStyle","padding","spacing","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,cAAT,CAAyBC,OAAzB,EAAkCC,QAAlC,EAA6C;AAC5C,SAAOD,OAAO,CAACE,aAAR,CAAsBC,WAAtB,CACLC,gBADK,CACaJ,OADb,EAELK,gBAFK,CAEaJ,QAFb,CAAP;AAGA;;AAEM,SAASK,iBAAT,OAAkE;AAAA;;AAAA,MAAtC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,UAAZ;AAAwBC,IAAAA;AAAxB,GAAsC;AACxE,QAAMC,YAAY,GAAG,6CAAiBH,QAAjB,CAArB;AACA,QAAM,CAAEI,KAAF,EAASC,QAAT,IAAsB,wBAA5B;AAEA,QAAMC,OAAO,GAAGL,UAAH,aAAGA,UAAH,4CAAGA,UAAU,CAAEG,KAAf,+EAAG,kBAAmBG,OAAtB,0DAAG,sBAA4BD,OAA5C;AAEA,0BAAW,MAAM;AAChB,QAAK,CAAEH,YAAP,EAAsB;AACrB;AACA;;AAEDE,IAAAA,QAAQ,CAAE;AACTG,MAAAA,cAAc,EAAEhB,cAAc,CAAEW,YAAF,EAAgB,aAAhB,CADrB;AAETM,MAAAA,gBAAgB,EAAEjB,cAAc,CAAEW,YAAF,EAAgB,eAAhB,CAFvB;AAGTO,MAAAA,iBAAiB,EAAElB,cAAc,CAAEW,YAAF,EAAgB,gBAAhB,CAHxB;AAITQ,MAAAA,eAAe,EAAEnB,cAAc,CAAEW,YAAF,EAAgB,cAAhB;AAJtB,KAAF,CAAR;AAMA,GAXD,EAWG,CAAEA,YAAF,EAAgBG,OAAhB,CAXH;AAaA,QAAM,CAAEM,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AACA,QAAMC,QAAQ,GAAG,qBAAQR,OAAR,CAAjB;AACA,QAAMS,UAAU,GAAG,sBAAnB;;AAEA,QAAMC,UAAU,GAAG,MAAM;AACxB,QAAKD,UAAU,CAACE,OAAhB,EAA0B;AACzBC,MAAAA,MAAM,CAACC,YAAP,CAAqBJ,UAAU,CAACE,OAAhC;AACA;AACD,GAJD;;AAMA,0BAAW,MAAM;AAChB,QAAK,CAAE,6BAAgBX,OAAhB,EAAyBQ,QAAQ,CAACG,OAAlC,CAAF,IAAiD,CAAEf,SAAxD,EAAoE;AACnEW,MAAAA,WAAW,CAAE,IAAF,CAAX;AACAC,MAAAA,QAAQ,CAACG,OAAT,GAAmBX,OAAnB;AAEAS,MAAAA,UAAU,CAACE,OAAX,GAAqBG,UAAU,CAAE,MAAM;AACtCP,QAAAA,WAAW,CAAE,KAAF,CAAX;AACA,OAF8B,EAE5B,GAF4B,CAA/B;AAGA;;AAED,WAAO,MAAM;AACZA,MAAAA,WAAW,CAAE,KAAF,CAAX;AACAG,MAAAA,UAAU;AACV,KAHD;AAIA,GAdD,EAcG,CAAEV,OAAF,EAAWJ,SAAX,CAdH;;AAgBA,MAAK,CAAEU,QAAF,IAAc,CAAEV,SAArB,EAAiC;AAChC,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,qBAAD;AACC,IAAA,QAAQ,EAAGF,QADZ;AAEC,IAAA,qBAAqB,MAFtB;AAGC,IAAA,qBAAqB,EAAGM,OAHzB;AAIC,IAAA,qBAAqB,EAAC,eAJvB;AAKC,IAAA,KAAK,EAAG;AALT,KAOC;AAAK,IAAA,SAAS,EAAC,kCAAf;AAAkD,IAAA,KAAK,EAAGF;AAA1D,IAPD,CADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function PaddingVisualizer( { clientId, attributes, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst padding = attributes?.style?.spacing?.padding;\n\n\tuseEffect( () => {\n\t\tif ( ! blockElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: getComputedCSS( blockElement, 'padding-top' ),\n\t\t\tborderRightWidth: getComputedCSS( blockElement, 'padding-right' ),\n\t\t\tborderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),\n\t\t\tborderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),\n\t\t} );\n\t}, [ blockElement, 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 ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\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 () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ padding, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\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\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\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/utils.js

@@ -43,8 +43,11 @@ const cleanEmptyObject = object => {
     return object;
   }
 
-  const cleanedNestedObjects = Object.fromEntries(Object.entries((0, _lodash.mapValues)(object, cleanEmptyObject)).filter(_ref => {
-    let [, value] = _ref;
+  const cleanedNestedObjects = Object.fromEntries(Object.entries(object).map(_ref => {
+    let [key, value] = _ref;
+    return [key, cleanEmptyObject(value)];
+  }).filter(_ref2 => {
+    let [, value] = _ref2;
     return Boolean(value);
   }));
   return (0, _lodash.isEmpty)(cleanedNestedObjects) ? undefined : cleanedNestedObjects;
@@ -85,8 +88,8 @@ function transformStyles(activeSupports, migrationPaths, result, source, index,
   }
 
   let returnBlock = result;
-  Object.entries(activeSupports).forEach(_ref2 => {
-    let [support, isActive] = _ref2;
+  Object.entries(activeSupports).forEach(_ref3 => {
+    let [support, isActive] = _ref3;
 
     if (isActive) {
       migrationPaths[support].forEach(path => {

package/build/hooks/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/utils.js"],"names":["cleanEmptyObject","object","Array","isArray","cleanedNestedObjects","Object","fromEntries","entries","filter","value","Boolean","undefined","transformStyles","activeSupports","migrationPaths","result","source","index","results","values","every","isActive","length","innerBlocks","referenceBlockAttributes","attributes","returnBlock","forEach","support","path","styleValue","shouldSkipSerialization","blockType","featureSet","feature","skipSerialization","__experimentalSkipSerialization","includes","useBlockSettings","name","parentLayout","fontFamilies","fontSizes","customFontSize","fontStyle","fontWeight","lineHeight","textColumns","textDecoration","textTransform","letterSpacing","padding","margin","blockGap","spacingSizes","units","minHeight","layout","borderColor","borderRadius","borderStyle","borderWidth","customColorsEnabled","customColors","themeColors","defaultColors","defaultPalette","userGradientPalette","themeGradientPalette","defaultGradientPalette","defaultGradients","areCustomGradientsEnabled","isBackgroundEnabled","isLinkEnabled","isTextEnabled","rawSettings","color","palette","custom","theme","default","gradients","customGradient","background","link","text","typography","spacing","border","radius","style","width","dimensions"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty, mapValues, get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting } from '../components';\nimport { useSettingsForBlockElement } from '../components/global-styles/hooks';\nimport { immutableSet } from '../utils/object';\n\n/**\n * Removed falsy values from nested object.\n *\n * @param {*} object\n * @return {*} Object cleaned from falsy values\n */\nexport const cleanEmptyObject = ( object ) => {\n\tif (\n\t\tobject === null ||\n\t\ttypeof object !== 'object' ||\n\t\tArray.isArray( object )\n\t) {\n\t\treturn object;\n\t}\n\tconst cleanedNestedObjects = Object.fromEntries(\n\t\tObject.entries( mapValues( object, cleanEmptyObject ) ).filter(\n\t\t\t( [ , value ] ) => Boolean( value )\n\t\t)\n\t);\n\treturn isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;\n};\n\nexport function transformStyles(\n\tactiveSupports,\n\tmigrationPaths,\n\tresult,\n\tsource,\n\tindex,\n\tresults\n) {\n\t// If there are no active supports return early.\n\tif (\n\t\tObject.values( activeSupports ?? {} ).every(\n\t\t\t( isActive ) => ! isActive\n\t\t)\n\t) {\n\t\treturn result;\n\t}\n\t// If the condition verifies we are probably in the presence of a wrapping transform\n\t// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.\n\tif ( results.length === 1 && result.innerBlocks.length === source.length ) {\n\t\treturn result;\n\t}\n\t// For cases where we have a transform from one block to multiple blocks\n\t// or multiple blocks to one block we apply the styles of the first source block\n\t// to the result(s).\n\tlet referenceBlockAttributes = source[ 0 ]?.attributes;\n\t// If we are in presence of transform between more than one block in the source\n\t// that has more than one block in the result\n\t// we apply the styles on source N to the result N,\n\t// if source N does not exists we do nothing.\n\tif ( results.length > 1 && source.length > 1 ) {\n\t\tif ( source[ index ] ) {\n\t\t\treferenceBlockAttributes = source[ index ]?.attributes;\n\t\t} else {\n\t\t\treturn result;\n\t\t}\n\t}\n\tlet returnBlock = result;\n\tObject.entries( activeSupports ).forEach( ( [ support, isActive ] ) => {\n\t\tif ( isActive ) {\n\t\t\tmigrationPaths[ support ].forEach( ( path ) => {\n\t\t\t\tconst styleValue = get( referenceBlockAttributes, path );\n\t\t\t\tif ( styleValue ) {\n\t\t\t\t\treturnBlock = {\n\t\t\t\t\t\t...returnBlock,\n\t\t\t\t\t\tattributes: immutableSet(\n\t\t\t\t\t\t\treturnBlock.attributes,\n\t\t\t\t\t\t\tpath,\n\t\t\t\t\t\t\tstyleValue\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\treturn returnBlock;\n}\n\n/**\n * Check whether serialization of specific block support feature or set should\n * be skipped.\n *\n * @param {string|Object} blockType  Block name or block type object.\n * @param {string}        featureSet Name of block support feature set.\n * @param {string}        feature    Name of the individual feature to check.\n *\n * @return {boolean} Whether serialization should occur.\n */\nexport function shouldSkipSerialization( blockType, featureSet, feature ) {\n\tconst support = getBlockSupport( blockType, featureSet );\n\tconst skipSerialization = support?.__experimentalSkipSerialization;\n\n\tif ( Array.isArray( skipSerialization ) ) {\n\t\treturn skipSerialization.includes( feature );\n\t}\n\n\treturn skipSerialization;\n}\n\n/**\n * Based on the block and its context, returns an object of all the block settings.\n * This object can be passed as a prop to all the Styles UI components\n * (TypographyPanel, DimensionsPanel...).\n *\n * @param {string} name         Block name.\n * @param {*}      parentLayout Parent layout.\n *\n * @return {Object} Settings object.\n */\nexport function useBlockSettings( name, parentLayout ) {\n\tconst fontFamilies = useSetting( 'typography.fontFamilies' );\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst customFontSize = useSetting( 'typography.customFontSize' );\n\tconst fontStyle = useSetting( 'typography.fontStyle' );\n\tconst fontWeight = useSetting( 'typography.fontWeight' );\n\tconst lineHeight = useSetting( 'typography.lineHeight' );\n\tconst textColumns = useSetting( 'typography.textColumns' );\n\tconst textDecoration = useSetting( 'typography.textDecoration' );\n\tconst textTransform = useSetting( 'typography.textTransform' );\n\tconst letterSpacing = useSetting( 'typography.letterSpacing' );\n\tconst padding = useSetting( 'spacing.padding' );\n\tconst margin = useSetting( 'spacing.margin' );\n\tconst blockGap = useSetting( 'spacing.blockGap' );\n\tconst spacingSizes = useSetting( 'spacing.spacingSizes' );\n\tconst units = useSetting( 'spacing.units' );\n\tconst minHeight = useSetting( 'dimensions.minHeight' );\n\tconst layout = useSetting( 'layout' );\n\tconst borderColor = useSetting( 'border.color' );\n\tconst borderRadius = useSetting( 'border.radius' );\n\tconst borderStyle = useSetting( 'border.style' );\n\tconst borderWidth = useSetting( 'border.width' );\n\tconst customColorsEnabled = useSetting( 'color.custom' );\n\tconst customColors = useSetting( 'color.palette.custom' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst defaultColors = useSetting( 'color.palette.default' );\n\tconst defaultPalette = useSetting( 'color.defaultPalette' );\n\tconst userGradientPalette = useSetting( 'color.gradients.custom' );\n\tconst themeGradientPalette = useSetting( 'color.gradients.theme' );\n\tconst defaultGradientPalette = useSetting( 'color.gradients.default' );\n\tconst defaultGradients = useSetting( 'color.defaultGradients' );\n\tconst areCustomGradientsEnabled = useSetting( 'color.customGradient' );\n\tconst isBackgroundEnabled = useSetting( 'color.background' );\n\tconst isLinkEnabled = useSetting( 'color.link' );\n\tconst isTextEnabled = useSetting( 'color.text' );\n\n\tconst rawSettings = useMemo( () => {\n\t\treturn {\n\t\t\tcolor: {\n\t\t\t\tpalette: {\n\t\t\t\t\tcustom: customColors,\n\t\t\t\t\ttheme: themeColors,\n\t\t\t\t\tdefault: defaultColors,\n\t\t\t\t},\n\t\t\t\tgradients: {\n\t\t\t\t\tcustom: userGradientPalette,\n\t\t\t\t\ttheme: themeGradientPalette,\n\t\t\t\t\tdefault: defaultGradientPalette,\n\t\t\t\t},\n\t\t\t\tdefaultGradients,\n\t\t\t\tdefaultPalette,\n\t\t\t\tcustom: customColorsEnabled,\n\t\t\t\tcustomGradient: areCustomGradientsEnabled,\n\t\t\t\tbackground: isBackgroundEnabled,\n\t\t\t\tlink: isLinkEnabled,\n\t\t\t\ttext: isTextEnabled,\n\t\t\t},\n\t\t\ttypography: {\n\t\t\t\tfontFamilies: {\n\t\t\t\t\tcustom: fontFamilies,\n\t\t\t\t},\n\t\t\t\tfontSizes: {\n\t\t\t\t\tcustom: fontSizes,\n\t\t\t\t},\n\t\t\t\tcustomFontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tlineHeight,\n\t\t\t\ttextColumns,\n\t\t\t\ttextDecoration,\n\t\t\t\ttextTransform,\n\t\t\t\tletterSpacing,\n\t\t\t},\n\t\t\tspacing: {\n\t\t\t\tspacingSizes: {\n\t\t\t\t\tcustom: spacingSizes,\n\t\t\t\t},\n\t\t\t\tpadding,\n\t\t\t\tmargin,\n\t\t\t\tblockGap,\n\t\t\t\tunits,\n\t\t\t},\n\t\t\tborder: {\n\t\t\t\tcolor: borderColor,\n\t\t\t\tradius: borderRadius,\n\t\t\t\tstyle: borderStyle,\n\t\t\t\twidth: borderWidth,\n\t\t\t},\n\t\t\tdimensions: {\n\t\t\t\tminHeight,\n\t\t\t},\n\t\t\tlayout,\n\t\t\tparentLayout,\n\t\t};\n\t}, [\n\t\tfontFamilies,\n\t\tfontSizes,\n\t\tcustomFontSize,\n\t\tfontStyle,\n\t\tfontWeight,\n\t\tlineHeight,\n\t\ttextColumns,\n\t\ttextDecoration,\n\t\ttextTransform,\n\t\tletterSpacing,\n\t\tpadding,\n\t\tmargin,\n\t\tblockGap,\n\t\tspacingSizes,\n\t\tunits,\n\t\tminHeight,\n\t\tlayout,\n\t\tparentLayout,\n\t\tborderColor,\n\t\tborderRadius,\n\t\tborderStyle,\n\t\tborderWidth,\n\t\tcustomColorsEnabled,\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tdefaultPalette,\n\t\tuserGradientPalette,\n\t\tthemeGradientPalette,\n\t\tdefaultGradientPalette,\n\t\tdefaultGradients,\n\t\tareCustomGradientsEnabled,\n\t\tisBackgroundEnabled,\n\t\tisLinkEnabled,\n\t\tisTextEnabled,\n\t] );\n\n\treturn useSettingsForBlockElement( rawSettings, name );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/utils.js"],"names":["cleanEmptyObject","object","Array","isArray","cleanedNestedObjects","Object","fromEntries","entries","map","key","value","filter","Boolean","undefined","transformStyles","activeSupports","migrationPaths","result","source","index","results","values","every","isActive","length","innerBlocks","referenceBlockAttributes","attributes","returnBlock","forEach","support","path","styleValue","shouldSkipSerialization","blockType","featureSet","feature","skipSerialization","__experimentalSkipSerialization","includes","useBlockSettings","name","parentLayout","fontFamilies","fontSizes","customFontSize","fontStyle","fontWeight","lineHeight","textColumns","textDecoration","textTransform","letterSpacing","padding","margin","blockGap","spacingSizes","units","minHeight","layout","borderColor","borderRadius","borderStyle","borderWidth","customColorsEnabled","customColors","themeColors","defaultColors","defaultPalette","userGradientPalette","themeGradientPalette","defaultGradientPalette","defaultGradients","areCustomGradientsEnabled","isBackgroundEnabled","isLinkEnabled","isTextEnabled","rawSettings","color","palette","custom","theme","default","gradients","customGradient","background","link","text","typography","spacing","border","radius","style","width","dimensions"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty, get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting } from '../components';\nimport { useSettingsForBlockElement } from '../components/global-styles/hooks';\nimport { immutableSet } from '../utils/object';\n\n/**\n * Removed falsy values from nested object.\n *\n * @param {*} object\n * @return {*} Object cleaned from falsy values\n */\nexport const cleanEmptyObject = ( object ) => {\n\tif (\n\t\tobject === null ||\n\t\ttypeof object !== 'object' ||\n\t\tArray.isArray( object )\n\t) {\n\t\treturn object;\n\t}\n\tconst cleanedNestedObjects = Object.fromEntries(\n\t\tObject.entries( object )\n\t\t\t.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )\n\t\t\t.filter( ( [ , value ] ) => Boolean( value ) )\n\t);\n\treturn isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;\n};\n\nexport function transformStyles(\n\tactiveSupports,\n\tmigrationPaths,\n\tresult,\n\tsource,\n\tindex,\n\tresults\n) {\n\t// If there are no active supports return early.\n\tif (\n\t\tObject.values( activeSupports ?? {} ).every(\n\t\t\t( isActive ) => ! isActive\n\t\t)\n\t) {\n\t\treturn result;\n\t}\n\t// If the condition verifies we are probably in the presence of a wrapping transform\n\t// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.\n\tif ( results.length === 1 && result.innerBlocks.length === source.length ) {\n\t\treturn result;\n\t}\n\t// For cases where we have a transform from one block to multiple blocks\n\t// or multiple blocks to one block we apply the styles of the first source block\n\t// to the result(s).\n\tlet referenceBlockAttributes = source[ 0 ]?.attributes;\n\t// If we are in presence of transform between more than one block in the source\n\t// that has more than one block in the result\n\t// we apply the styles on source N to the result N,\n\t// if source N does not exists we do nothing.\n\tif ( results.length > 1 && source.length > 1 ) {\n\t\tif ( source[ index ] ) {\n\t\t\treferenceBlockAttributes = source[ index ]?.attributes;\n\t\t} else {\n\t\t\treturn result;\n\t\t}\n\t}\n\tlet returnBlock = result;\n\tObject.entries( activeSupports ).forEach( ( [ support, isActive ] ) => {\n\t\tif ( isActive ) {\n\t\t\tmigrationPaths[ support ].forEach( ( path ) => {\n\t\t\t\tconst styleValue = get( referenceBlockAttributes, path );\n\t\t\t\tif ( styleValue ) {\n\t\t\t\t\treturnBlock = {\n\t\t\t\t\t\t...returnBlock,\n\t\t\t\t\t\tattributes: immutableSet(\n\t\t\t\t\t\t\treturnBlock.attributes,\n\t\t\t\t\t\t\tpath,\n\t\t\t\t\t\t\tstyleValue\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\treturn returnBlock;\n}\n\n/**\n * Check whether serialization of specific block support feature or set should\n * be skipped.\n *\n * @param {string|Object} blockType  Block name or block type object.\n * @param {string}        featureSet Name of block support feature set.\n * @param {string}        feature    Name of the individual feature to check.\n *\n * @return {boolean} Whether serialization should occur.\n */\nexport function shouldSkipSerialization( blockType, featureSet, feature ) {\n\tconst support = getBlockSupport( blockType, featureSet );\n\tconst skipSerialization = support?.__experimentalSkipSerialization;\n\n\tif ( Array.isArray( skipSerialization ) ) {\n\t\treturn skipSerialization.includes( feature );\n\t}\n\n\treturn skipSerialization;\n}\n\n/**\n * Based on the block and its context, returns an object of all the block settings.\n * This object can be passed as a prop to all the Styles UI components\n * (TypographyPanel, DimensionsPanel...).\n *\n * @param {string} name         Block name.\n * @param {*}      parentLayout Parent layout.\n *\n * @return {Object} Settings object.\n */\nexport function useBlockSettings( name, parentLayout ) {\n\tconst fontFamilies = useSetting( 'typography.fontFamilies' );\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst customFontSize = useSetting( 'typography.customFontSize' );\n\tconst fontStyle = useSetting( 'typography.fontStyle' );\n\tconst fontWeight = useSetting( 'typography.fontWeight' );\n\tconst lineHeight = useSetting( 'typography.lineHeight' );\n\tconst textColumns = useSetting( 'typography.textColumns' );\n\tconst textDecoration = useSetting( 'typography.textDecoration' );\n\tconst textTransform = useSetting( 'typography.textTransform' );\n\tconst letterSpacing = useSetting( 'typography.letterSpacing' );\n\tconst padding = useSetting( 'spacing.padding' );\n\tconst margin = useSetting( 'spacing.margin' );\n\tconst blockGap = useSetting( 'spacing.blockGap' );\n\tconst spacingSizes = useSetting( 'spacing.spacingSizes' );\n\tconst units = useSetting( 'spacing.units' );\n\tconst minHeight = useSetting( 'dimensions.minHeight' );\n\tconst layout = useSetting( 'layout' );\n\tconst borderColor = useSetting( 'border.color' );\n\tconst borderRadius = useSetting( 'border.radius' );\n\tconst borderStyle = useSetting( 'border.style' );\n\tconst borderWidth = useSetting( 'border.width' );\n\tconst customColorsEnabled = useSetting( 'color.custom' );\n\tconst customColors = useSetting( 'color.palette.custom' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst defaultColors = useSetting( 'color.palette.default' );\n\tconst defaultPalette = useSetting( 'color.defaultPalette' );\n\tconst userGradientPalette = useSetting( 'color.gradients.custom' );\n\tconst themeGradientPalette = useSetting( 'color.gradients.theme' );\n\tconst defaultGradientPalette = useSetting( 'color.gradients.default' );\n\tconst defaultGradients = useSetting( 'color.defaultGradients' );\n\tconst areCustomGradientsEnabled = useSetting( 'color.customGradient' );\n\tconst isBackgroundEnabled = useSetting( 'color.background' );\n\tconst isLinkEnabled = useSetting( 'color.link' );\n\tconst isTextEnabled = useSetting( 'color.text' );\n\n\tconst rawSettings = useMemo( () => {\n\t\treturn {\n\t\t\tcolor: {\n\t\t\t\tpalette: {\n\t\t\t\t\tcustom: customColors,\n\t\t\t\t\ttheme: themeColors,\n\t\t\t\t\tdefault: defaultColors,\n\t\t\t\t},\n\t\t\t\tgradients: {\n\t\t\t\t\tcustom: userGradientPalette,\n\t\t\t\t\ttheme: themeGradientPalette,\n\t\t\t\t\tdefault: defaultGradientPalette,\n\t\t\t\t},\n\t\t\t\tdefaultGradients,\n\t\t\t\tdefaultPalette,\n\t\t\t\tcustom: customColorsEnabled,\n\t\t\t\tcustomGradient: areCustomGradientsEnabled,\n\t\t\t\tbackground: isBackgroundEnabled,\n\t\t\t\tlink: isLinkEnabled,\n\t\t\t\ttext: isTextEnabled,\n\t\t\t},\n\t\t\ttypography: {\n\t\t\t\tfontFamilies: {\n\t\t\t\t\tcustom: fontFamilies,\n\t\t\t\t},\n\t\t\t\tfontSizes: {\n\t\t\t\t\tcustom: fontSizes,\n\t\t\t\t},\n\t\t\t\tcustomFontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tlineHeight,\n\t\t\t\ttextColumns,\n\t\t\t\ttextDecoration,\n\t\t\t\ttextTransform,\n\t\t\t\tletterSpacing,\n\t\t\t},\n\t\t\tspacing: {\n\t\t\t\tspacingSizes: {\n\t\t\t\t\tcustom: spacingSizes,\n\t\t\t\t},\n\t\t\t\tpadding,\n\t\t\t\tmargin,\n\t\t\t\tblockGap,\n\t\t\t\tunits,\n\t\t\t},\n\t\t\tborder: {\n\t\t\t\tcolor: borderColor,\n\t\t\t\tradius: borderRadius,\n\t\t\t\tstyle: borderStyle,\n\t\t\t\twidth: borderWidth,\n\t\t\t},\n\t\t\tdimensions: {\n\t\t\t\tminHeight,\n\t\t\t},\n\t\t\tlayout,\n\t\t\tparentLayout,\n\t\t};\n\t}, [\n\t\tfontFamilies,\n\t\tfontSizes,\n\t\tcustomFontSize,\n\t\tfontStyle,\n\t\tfontWeight,\n\t\tlineHeight,\n\t\ttextColumns,\n\t\ttextDecoration,\n\t\ttextTransform,\n\t\tletterSpacing,\n\t\tpadding,\n\t\tmargin,\n\t\tblockGap,\n\t\tspacingSizes,\n\t\tunits,\n\t\tminHeight,\n\t\tlayout,\n\t\tparentLayout,\n\t\tborderColor,\n\t\tborderRadius,\n\t\tborderStyle,\n\t\tborderWidth,\n\t\tcustomColorsEnabled,\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tdefaultPalette,\n\t\tuserGradientPalette,\n\t\tthemeGradientPalette,\n\t\tdefaultGradientPalette,\n\t\tdefaultGradients,\n\t\tareCustomGradientsEnabled,\n\t\tisBackgroundEnabled,\n\t\tisLinkEnabled,\n\t\tisTextEnabled,\n\t] );\n\n\treturn useSettingsForBlockElement( rawSettings, name );\n}\n"]}

package/build/layouts/utils.js

@@ -80,12 +80,13 @@ function getBlockGapCSS(selector, layoutDefinitions, layoutType, blockGapValue)
 function getAlignmentsInfo(layout) {
   const {
     contentSize,
-    wideSize
+    wideSize,
+    type = 'default'
   } = layout;
   const alignmentInfo = {};
   const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
 
-  if (sizeRegex.test(contentSize)) {
+  if (sizeRegex.test(contentSize) && type === 'constrained') {
     // translators: %s: container size (i.e. 600px etc)
     alignmentInfo.none = (0, _i18n.sprintf)((0, _i18n.__)('Max %s wide'), contentSize);
   }