@wordpress/block-editor 8.6.0 → 9.2.0

package/build/hooks/dimensions.js

@@ -75,7 +75,7 @@ function DimensionsPanel(props) {
     };
   };
 
-  return (0, _element.createElement)(_inspectorControls.default, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inspectorControls.default, {
     __experimentalGroup: "dimensions"
   }, !isPaddingDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
     hasValue: () => (0, _padding.hasPaddingValue)(props),
@@ -98,7 +98,7 @@ function DimensionsPanel(props) {
     resetAllFilter: createResetAllFilter('blockGap'),
     isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.blockGap,
     panelId: props.clientId
-  }, (0, _element.createElement)(_gap.GapEdit, props)));
+  }, (0, _element.createElement)(_gap.GapEdit, props))), !isPaddingDisabled && (0, _element.createElement)(_padding.PaddingVisualizer, props), !isMarginDisabled && (0, _element.createElement)(_margin.MarginVisualizer, props));
 }
 /**
  * Determine whether there is dimensions related block support.
@@ -133,7 +133,7 @@ const useIsDimensionsDisabled = function () {
   return gapDisabled && paddingDisabled && marginDisabled;
 };
 /**
- * Custom hook to retrieve which padding/margin is supported
+ * Custom hook to retrieve which padding/margin/blockGap is supported
  * e.g. top, right, bottom or left.
  *
  * Sides are opted into by default. It is only if a specific side is set to
@@ -142,18 +142,28 @@ const useIsDimensionsDisabled = function () {
  * @param {string} blockName Block name.
  * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
  *
- * @return {Object} Sides supporting custom margin.
+ * @return {?string[]} Strings representing the custom sides available.
  */
 
 
 function useCustomSides(blockName, feature) {
+  var _support$feature;
+
   const support = (0, _blocks.getBlockSupport)(blockName, SPACING_SUPPORT_KEY); // Skip when setting is boolean as theme isn't setting arbitrary sides.
 
   if (!support || typeof support[feature] === 'boolean') {
     return;
-  }
+  } // Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
+
 
-  return support[feature];
+  if (Array.isArray(support[feature])) {
+    return support[feature];
+  } // Finally, attempt to return `.sides` if the setting is an object.
+
+
+  if ((_support$feature = support[feature]) !== null && _support$feature !== void 0 && _support$feature.sides) {
+    return support[feature].sides;
+  }
 }
 /**
  * Custom hook to determine whether the sides configured in the

package/build/hooks/dimensions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/dimensions.js"],"names":["SPACING_SUPPORT_KEY","ALL_SIDES","AXIAL_SIDES","DimensionsPanel","props","isGapDisabled","isPaddingDisabled","isMarginDisabled","isDisabled","useIsDimensionsDisabled","isSupported","hasDimensionsSupport","name","defaultSpacingControls","createResetAllFilter","attribute","newAttributes","style","spacing","undefined","padding","clientId","margin","blockGap","blockName","Platform","OS","gapDisabled","paddingDisabled","marginDisabled","useCustomSides","feature","support","useIsDimensionsSupportValid","sides","some","side","includes","console","warn"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tGapEdit,\n\thasGapSupport,\n\thasGapValue,\n\tresetGap,\n\tuseIsGapDisabled,\n} from './gap';\nimport {\n\tMarginEdit,\n\thasMarginSupport,\n\thasMarginValue,\n\tresetMargin,\n\tuseIsMarginDisabled,\n} from './margin';\nimport {\n\tPaddingEdit,\n\thasPaddingSupport,\n\thasPaddingValue,\n\tresetPadding,\n\tuseIsPaddingDisabled,\n} from './padding';\n\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\n/**\n * Inspector controls for dimensions support.\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Inspector controls for spacing support features.\n */\nexport function DimensionsPanel( props ) {\n\tconst isGapDisabled = useIsGapDisabled( props );\n\tconst isPaddingDisabled = useIsPaddingDisabled( props );\n\tconst isMarginDisabled = useIsMarginDisabled( props );\n\tconst isDisabled = useIsDimensionsDisabled( props );\n\tconst isSupported = hasDimensionsSupport( props.name );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultSpacingControls = getBlockSupport( props.name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {\n\t\t...newAttributes,\n\t\tstyle: {\n\t\t\t...newAttributes.style,\n\t\t\tspacing: {\n\t\t\t\t...newAttributes.style?.spacing,\n\t\t\t\t[ attribute ]: undefined,\n\t\t\t},\n\t\t},\n\t} );\n\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"dimensions\">\n\t\t\t{ ! isPaddingDisabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasPaddingValue( props ) }\n\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\tonDeselect={ () => resetPadding( props ) }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'padding' ) }\n\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.padding }\n\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t>\n\t\t\t\t\t<PaddingEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ ! isMarginDisabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasMarginValue( props ) }\n\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\tonDeselect={ () => resetMargin( props ) }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'margin' ) }\n\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.margin }\n\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t>\n\t\t\t\t\t<MarginEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ ! isGapDisabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasGapValue( props ) }\n\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\tonDeselect={ () => resetGap( props ) }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'blockGap' ) }\n\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.blockGap }\n\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t>\n\t\t\t\t\t<GapEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is dimensions related block support.\n *\n * @param {string} blockName Block name.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( blockName ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\treturn (\n\t\thasGapSupport( blockName ) ||\n\t\thasPaddingSupport( blockName ) ||\n\t\thasMarginSupport( blockName )\n\t);\n}\n\n/**\n * Determines whether dimensions support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} If spacing support is completely disabled.\n */\nconst useIsDimensionsDisabled = ( props = {} ) => {\n\tconst gapDisabled = useIsGapDisabled( props );\n\tconst paddingDisabled = useIsPaddingDisabled( props );\n\tconst marginDisabled = useIsMarginDisabled( props );\n\n\treturn gapDisabled && paddingDisabled && marginDisabled;\n};\n\n/**\n * Custom hook to retrieve which padding/margin is supported\n * e.g. top, right, bottom or left.\n *\n * Sides are opted into by default. It is only if a specific side is set to\n * false that it is omitted.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {Object} Sides supporting custom margin.\n */\nexport function useCustomSides( blockName, feature ) {\n\tconst support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );\n\n\t// Skip when setting is boolean as theme isn't setting arbitrary sides.\n\tif ( ! support || typeof support[ feature ] === 'boolean' ) {\n\t\treturn;\n\t}\n\n\treturn support[ feature ];\n}\n\n/**\n * Custom hook to determine whether the sides configured in the\n * block support are valid. A dimension property cannot declare\n * support for a mix of axial and individual sides.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {boolean} If the feature has a valid configuration of sides.\n */\nexport function useIsDimensionsSupportValid( blockName, feature ) {\n\tconst sides = useCustomSides( blockName, feature );\n\n\tif (\n\t\tsides &&\n\t\tsides.some( ( side ) => ALL_SIDES.includes( side ) ) &&\n\t\tsides.some( ( side ) => AXIAL_SIDES.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support both axial and arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/dimensions.js"],"names":["SPACING_SUPPORT_KEY","ALL_SIDES","AXIAL_SIDES","DimensionsPanel","props","isGapDisabled","isPaddingDisabled","isMarginDisabled","isDisabled","useIsDimensionsDisabled","isSupported","hasDimensionsSupport","name","defaultSpacingControls","createResetAllFilter","attribute","newAttributes","style","spacing","undefined","padding","clientId","margin","blockGap","blockName","Platform","OS","gapDisabled","paddingDisabled","marginDisabled","useCustomSides","feature","support","Array","isArray","sides","useIsDimensionsSupportValid","some","side","includes","console","warn"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tGapEdit,\n\thasGapSupport,\n\thasGapValue,\n\tresetGap,\n\tuseIsGapDisabled,\n} from './gap';\nimport {\n\tMarginEdit,\n\tMarginVisualizer,\n\thasMarginSupport,\n\thasMarginValue,\n\tresetMargin,\n\tuseIsMarginDisabled,\n} from './margin';\nimport {\n\tPaddingEdit,\n\tPaddingVisualizer,\n\thasPaddingSupport,\n\thasPaddingValue,\n\tresetPadding,\n\tuseIsPaddingDisabled,\n} from './padding';\n\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\n/**\n * Inspector controls for dimensions support.\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Inspector controls for spacing support features.\n */\nexport function DimensionsPanel( props ) {\n\tconst isGapDisabled = useIsGapDisabled( props );\n\tconst isPaddingDisabled = useIsPaddingDisabled( props );\n\tconst isMarginDisabled = useIsMarginDisabled( props );\n\tconst isDisabled = useIsDimensionsDisabled( props );\n\tconst isSupported = hasDimensionsSupport( props.name );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultSpacingControls = getBlockSupport( props.name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {\n\t\t...newAttributes,\n\t\tstyle: {\n\t\t\t...newAttributes.style,\n\t\t\tspacing: {\n\t\t\t\t...newAttributes.style?.spacing,\n\t\t\t\t[ attribute ]: undefined,\n\t\t\t},\n\t\t},\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls __experimentalGroup=\"dimensions\">\n\t\t\t\t{ ! isPaddingDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => hasPaddingValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\tonDeselect={ () => resetPadding( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'padding' ) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.padding }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PaddingEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isMarginDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => hasMarginValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\tonDeselect={ () => resetMargin( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'margin' ) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.margin }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MarginEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isGapDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => hasGapValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t\tonDeselect={ () => resetGap( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'blockGap' ) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.blockGap }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<GapEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</InspectorControls>\n\t\t\t{ ! isPaddingDisabled && <PaddingVisualizer { ...props } /> }\n\t\t\t{ ! isMarginDisabled && <MarginVisualizer { ...props } /> }\n\t\t</>\n\t);\n}\n\n/**\n * Determine whether there is dimensions related block support.\n *\n * @param {string} blockName Block name.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( blockName ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\treturn (\n\t\thasGapSupport( blockName ) ||\n\t\thasPaddingSupport( blockName ) ||\n\t\thasMarginSupport( blockName )\n\t);\n}\n\n/**\n * Determines whether dimensions support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} If spacing support is completely disabled.\n */\nconst useIsDimensionsDisabled = ( props = {} ) => {\n\tconst gapDisabled = useIsGapDisabled( props );\n\tconst paddingDisabled = useIsPaddingDisabled( props );\n\tconst marginDisabled = useIsMarginDisabled( props );\n\n\treturn gapDisabled && paddingDisabled && marginDisabled;\n};\n\n/**\n * Custom hook to retrieve which padding/margin/blockGap is supported\n * e.g. top, right, bottom or left.\n *\n * Sides are opted into by default. It is only if a specific side is set to\n * false that it is omitted.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {?string[]} Strings representing the custom sides available.\n */\nexport function useCustomSides( blockName, feature ) {\n\tconst support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );\n\n\t// Skip when setting is boolean as theme isn't setting arbitrary sides.\n\tif ( ! support || typeof support[ feature ] === 'boolean' ) {\n\t\treturn;\n\t}\n\n\t// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).\n\tif ( Array.isArray( support[ feature ] ) ) {\n\t\treturn support[ feature ];\n\t}\n\n\t// Finally, attempt to return `.sides` if the setting is an object.\n\tif ( support[ feature ]?.sides ) {\n\t\treturn support[ feature ].sides;\n\t}\n}\n\n/**\n * Custom hook to determine whether the sides configured in the\n * block support are valid. A dimension property cannot declare\n * support for a mix of axial and individual sides.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {boolean} If the feature has a valid configuration of sides.\n */\nexport function useIsDimensionsSupportValid( blockName, feature ) {\n\tconst sides = useCustomSides( blockName, feature );\n\n\tif (\n\t\tsides &&\n\t\tsides.some( ( side ) => ALL_SIDES.includes( side ) ) &&\n\t\tsides.some( ( side ) => AXIAL_SIDES.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support both axial and arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n"]}

package/build/hooks/index.js

@@ -66,6 +66,8 @@ require("./generated-class-name");
 
 require("./style");
 
+require("./settings");
+
 require("./color");
 
 var _duotone = require("./duotone");

package/build/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport './compat';\nimport './align';\nimport './lock';\nimport './anchor';\nimport './custom-class-name';\nimport './generated-class-name';\nimport './style';\nimport './color';\nimport './duotone';\nimport './font-size';\nimport './border';\nimport './layout';\n\nexport { useCustomSides } from './dimensions';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { useCachedTruthy } from './use-cached-truthy';\nexport { PresetDuotoneFilter } from './duotone';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport './compat';\nimport './align';\nimport './lock';\nimport './anchor';\nimport './custom-class-name';\nimport './generated-class-name';\nimport './style';\nimport './settings';\nimport './color';\nimport './duotone';\nimport './font-size';\nimport './border';\nimport './layout';\n\nexport { useCustomSides } from './dimensions';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { useCachedTruthy } from './use-cached-truthy';\nexport { PresetDuotoneFilter } from './duotone';\n"]}

package/build/hooks/margin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarginEdit = MarginEdit;
+exports.MarginVisualizer = MarginVisualizer;
 exports.hasMarginSupport = hasMarginSupport;
 exports.hasMarginValue = hasMarginValue;
 exports.resetMargin = resetMargin;
@@ -19,12 +20,16 @@ var _blocks = require("@wordpress/blocks");
 
 var _components = require("@wordpress/components");
 
+var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
+
 var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 
 var _dimensions = require("./dimensions");
 
 var _utils = require("./utils");
 
+var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
+
 /**
  * WordPress dependencies
  */
@@ -140,22 +145,10 @@ function MarginEdit(props) {
     });
   };
 
-  const onChangeShowVisualizer = next => {
-    const newStyle = { ...style,
-      visualizers: {
-        margin: next
-      }
-    };
-    setAttributes({
-      style: (0, _utils.cleanEmptyObject)(newStyle)
-    });
-  };
-
   return _element.Platform.select({
     web: (0, _element.createElement)(_element.Fragment, null, (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,
-      onChangeShowVisualizer: onChangeShowVisualizer,
       label: (0, _i18n.__)('Margin'),
       sides: sides,
       units: units,
@@ -165,4 +158,63 @@ function MarginEdit(props) {
     native: null
   });
 }
+
+function MarginVisualizer(_ref2) {
+  var _attributes$style, _attributes$style$spa;
+
+  let {
+    clientId,
+    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 style = (0, _element.useMemo)(() => {
+    var _margin$top, _margin$right, _margin$bottom, _margin$left;
+
+    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
+    };
+  }, [margin]);
+  const [isActive, setIsActive] = (0, _element.useState)(false);
+  const valueRef = (0, _element.useRef)(margin);
+  const timeoutRef = (0, _element.useRef)();
+
+  const clearTimer = () => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+  };
+
+  (0, _element.useEffect)(() => {
+    if (!(0, _isShallowEqual.default)(margin, valueRef.current)) {
+      setIsActive(true);
+      valueRef.current = margin;
+      clearTimer();
+      timeoutRef.current = setTimeout(() => {
+        setIsActive(false);
+      }, 400);
+    }
+
+    return () => clearTimer();
+  }, [margin]);
+
+  if (!isActive) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_blockPopover.default, {
+    clientId: clientId,
+    __unstableCoverTarget: true,
+    __unstableRefreshSize: margin
+  }, (0, _element.createElement)("div", {
+    className: "block-editor__padding-visualizer",
+    style: style
+  }));
+}
 //# sourceMappingURL=margin.js.map

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","onChangeShowVisualizer","visualizers","Platform","select","web","native"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Platform } from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalBoxControl as BoxControl,\n} from '@wordpress/components';\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';\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\tconst onChangeShowVisualizer = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tvisualizers: {\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\tonChangeShowVisualizer={ onChangeShowVisualizer }\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"]}
+{"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"]}

package/build/hooks/padding.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaddingEdit = PaddingEdit;
+exports.PaddingVisualizer = PaddingVisualizer;
 exports.hasPaddingSupport = hasPaddingSupport;
 exports.hasPaddingValue = hasPaddingValue;
 exports.resetPadding = resetPadding;
@@ -19,12 +20,16 @@ var _blocks = require("@wordpress/blocks");
 
 var _components = require("@wordpress/components");
 
+var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
+
 var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 
 var _dimensions = require("./dimensions");
 
 var _utils = require("./utils");
 
+var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
+
 /**
  * WordPress dependencies
  */
@@ -140,22 +145,10 @@ function PaddingEdit(props) {
     });
   };
 
-  const onChangeShowVisualizer = next => {
-    const newStyle = { ...style,
-      visualizers: {
-        padding: next
-      }
-    };
-    setAttributes({
-      style: (0, _utils.cleanEmptyObject)(newStyle)
-    });
-  };
-
   return _element.Platform.select({
     web: (0, _element.createElement)(_element.Fragment, null, (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,
-      onChangeShowVisualizer: onChangeShowVisualizer,
       label: (0, _i18n.__)('Padding'),
       sides: sides,
       units: units,
@@ -165,4 +158,59 @@ function PaddingEdit(props) {
     native: null
   });
 }
+
+function PaddingVisualizer(_ref2) {
+  var _attributes$style, _attributes$style$spa;
+
+  let {
+    clientId,
+    attributes
+  } = _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
+    };
+  }, [padding]);
+  const [isActive, setIsActive] = (0, _element.useState)(false);
+  const valueRef = (0, _element.useRef)(padding);
+  const timeoutRef = (0, _element.useRef)();
+
+  const clearTimer = () => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+  };
+
+  (0, _element.useEffect)(() => {
+    if (!(0, _isShallowEqual.default)(padding, valueRef.current)) {
+      setIsActive(true);
+      valueRef.current = padding;
+      clearTimer();
+      timeoutRef.current = setTimeout(() => {
+        setIsActive(false);
+      }, 400);
+    }
+
+    return () => clearTimer();
+  }, [padding]);
+
+  if (!isActive) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_blockPopover.default, {
+    clientId: clientId,
+    __unstableCoverTarget: true,
+    __unstableRefreshSize: padding
+  }, (0, _element.createElement)("div", {
+    className: "block-editor__padding-visualizer",
+    style: style
+  }));
+}
 //# sourceMappingURL=padding.js.map

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","onChangeShowVisualizer","visualizers","Platform","select","web","native"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Platform } from '@wordpress/element';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalBoxControl as BoxControl,\n} from '@wordpress/components';\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';\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\tconst onChangeShowVisualizer = ( next ) => {\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tvisualizers: {\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\tonChangeShowVisualizer={ onChangeShowVisualizer }\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"]}
+{"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":";;;;;;;;;;;;;;AAIA;;AADA;;AAQA;;AACA;;AAIA;;AAKA;;AACA;;AAMA;;AACA;;AA7BA;AACA;AACA;;AAgBA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,iBAAT,CAA4BC,SAA5B,EAAwC;AAC9C,QAAMC,OAAO,GAAG,6BAAiBD,SAAjB,EAA4BE,+BAA5B,CAAhB;AACA,SAAO,CAAC,EAAI,SAASD,OAAT,IAAoBA,OAApB,aAAoBA,OAApB,eAAoBA,OAAO,CAAEE,OAAjC,CAAR;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,eAAT,CAA0BC,KAA1B,EAAkC;AAAA;;AACxC,SAAO,0BAAAA,KAAK,CAACC,UAAN,CAAiBC,KAAjB,0GAAwBC,OAAxB,kFAAiCL,OAAjC,MAA6CM,SAApD;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,YAAT,OAA4D;AAAA,MAArC;AAAEJ,IAAAA,UAAU,GAAG,EAAf;AAAmBK,IAAAA;AAAnB,GAAqC;AAClE,QAAM;AAAEJ,IAAAA;AAAF,MAAYD,UAAlB;AAEAK,EAAAA,aAAa,CAAE;AACdJ,IAAAA,KAAK,EAAE,6BAAkB,EACxB,GAAGA,KADqB;AAExBC,MAAAA,OAAO,EAAE,EACR,IAAGD,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEC,OAAV,CADQ;AAERL,QAAAA,OAAO,EAAEM;AAFD;AAFe,KAAlB;AADO,GAAF,CAAb;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,oBAAT,GAA0D;AAAA,MAA3B;AAAEC,IAAAA,IAAI,EAAEC;AAAR,GAA2B,uEAAL,EAAK;AAChE,QAAMC,UAAU,GAAG,CAAE,yBAAY,iBAAZ,CAArB;AACA,QAAMC,SAAS,GAAG,CAAE,6CAA6BF,SAA7B,EAAwC,SAAxC,CAApB;AAEA,SAAO,CAAEf,iBAAiB,CAAEe,SAAF,CAAnB,IAAoCC,UAApC,IAAkDC,SAAzD;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,CAAsBZ,KAAtB,EAA8B;AAAA;;AACpC,QAAM;AACLQ,IAAAA,IAAI,EAAEC,SADD;AAELR,IAAAA,UAAU,EAAE;AAAEC,MAAAA;AAAF,KAFP;AAGLI,IAAAA;AAHK,MAIFN,KAJJ;AAMA,QAAMa,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAChD,GADgD,EAEhD,IAFgD,EAGhD,IAHgD,EAIhD,KAJgD,EAKhD,IALgD;AADpB,GAAhB,CAAd;AASA,QAAMC,KAAK,GAAG,gCAAgBN,SAAhB,EAA2B,SAA3B,CAAd;AACA,QAAMO,WAAW,GAChBD,KAAK,IAAIA,KAAK,CAACE,IAAN,CAAcC,IAAF,IAAYC,wBAAYC,QAAZ,CAAsBF,IAAtB,CAAxB,CADV;;AAGA,MAAKX,oBAAoB,CAAEP,KAAF,CAAzB,EAAqC;AACpC,WAAO,IAAP;AACA;;AAED,QAAMqB,QAAQ,GAAKC,IAAF,IAAY;AAC5B,UAAMC,QAAQ,GAAG,EAChB,GAAGrB,KADa;AAEhBC,MAAAA,OAAO,EAAE,EACR,IAAGD,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEC,OAAV,CADQ;AAERL,QAAAA,OAAO,EAAEwB;AAFD;AAFO,KAAjB;AAQAhB,IAAAA,aAAa,CAAE;AACdJ,MAAAA,KAAK,EAAE,6BAAkBqB,QAAlB;AADO,KAAF,CAAb;AAGA,GAZD;;AAcA,SAAOC,kBAASC,MAAT,CAAiB;AACvBC,IAAAA,GAAG,EACF,qDACC,4BAAC,oCAAD;AACC,MAAA,MAAM,EAAGxB,KAAH,aAAGA,KAAH,yCAAGA,KAAK,CAAEC,OAAV,mDAAG,eAAgBL,OAD1B;AAEC,MAAA,QAAQ,EAAGuB,QAFZ;AAGC,MAAA,KAAK,EAAG,cAAI,SAAJ,CAHT;AAIC,MAAA,KAAK,EAAGN,KAJT;AAKC,MAAA,KAAK,EAAGF,KALT;AAMC,MAAA,UAAU,EAAG,KANd;AAOC,MAAA,WAAW,EAAGG;AAPf,MADD,CAFsB;AAcvBW,IAAAA,MAAM,EAAE;AAde,GAAjB,CAAP;AAgBA;;AAEM,SAASC,iBAAT,QAAuD;AAAA;;AAAA,MAA3B;AAAEC,IAAAA,QAAF;AAAY5B,IAAAA;AAAZ,GAA2B;AAC7D,QAAMH,OAAO,GAAGG,UAAH,aAAGA,UAAH,4CAAGA,UAAU,CAAEC,KAAf,+EAAG,kBAAmBC,OAAtB,0DAAG,sBAA4BL,OAA5C;AACA,QAAMI,KAAK,GAAG,sBAAS,MAAM;AAAA;;AAC5B,WAAO;AACN4B,MAAAA,cAAc,kBAAEhC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEiC,GAAX,uDAAkB,CAD1B;AAENC,MAAAA,gBAAgB,oBAAElC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEmC,KAAX,2DAAoB,CAF9B;AAGNC,MAAAA,iBAAiB,qBAAEpC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEqC,MAAX,6DAAqB,CAHhC;AAINC,MAAAA,eAAe,mBAAEtC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEuC,IAAX,yDAAmB;AAJ5B,KAAP;AAMA,GAPa,EAOX,CAAEvC,OAAF,CAPW,CAAd;AASA,QAAM,CAAEwC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AACA,QAAMC,QAAQ,GAAG,qBAAQ1C,OAAR,CAAjB;AACA,QAAM2C,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,6BAAgB7C,OAAhB,EAAyB0C,QAAQ,CAACG,OAAlC,CAAP,EAAqD;AACpDJ,MAAAA,WAAW,CAAE,IAAF,CAAX;AACAC,MAAAA,QAAQ,CAACG,OAAT,GAAmB7C,OAAnB;AAEA4C,MAAAA,UAAU;AAEVD,MAAAA,UAAU,CAACE,OAAX,GAAqBG,UAAU,CAAE,MAAM;AACtCP,QAAAA,WAAW,CAAE,KAAF,CAAX;AACA,OAF8B,EAE5B,GAF4B,CAA/B;AAGA;;AAED,WAAO,MAAMG,UAAU,EAAvB;AACA,GAbD,EAaG,CAAE5C,OAAF,CAbH;;AAeA,MAAK,CAAEwC,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,qBAAD;AACC,IAAA,QAAQ,EAAGT,QADZ;AAEC,IAAA,qBAAqB,MAFtB;AAGC,IAAA,qBAAqB,EAAG/B;AAHzB,KAKC;AAAK,IAAA,SAAS,EAAC,kCAAf;AAAkD,IAAA,KAAK,EAAGI;AAA1D,IALD,CADD;AASA","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"]}

package/build/hooks/settings.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _hooks = require("@wordpress/hooks");
+
+var _blocks = require("@wordpress/blocks");
+
+/**
+ * WordPress dependencies
+ */
+const hasSettingsSupport = blockType => (0, _blocks.hasBlockSupport)(blockType, '__experimentalSettings', false);
+
+function addAttribute(settings) {
+  var _settings$attributes;
+
+  if (!hasSettingsSupport(settings)) {
+    return settings;
+  } // Allow blocks to specify their own attribute definition with default values if needed.
+
+
+  if (!(settings !== null && settings !== void 0 && (_settings$attributes = settings.attributes) !== null && _settings$attributes !== void 0 && _settings$attributes.settings)) {
+    settings.attributes = { ...settings.attributes,
+      settings: {
+        type: 'object'
+      }
+    };
+  }
+
+  return settings;
+}
+
+(0, _hooks.addFilter)('blocks.registerBlockType', 'core/settings/addAttribute', addAttribute);
+//# sourceMappingURL=settings.js.map

package/build/hooks/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/settings.js"],"names":["hasSettingsSupport","blockType","addAttribute","settings","attributes","type"],"mappings":";;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,kBAAkB,GAAKC,SAAF,IAC1B,6BAAiBA,SAAjB,EAA4B,wBAA5B,EAAsD,KAAtD,CADD;;AAGA,SAASC,YAAT,CAAuBC,QAAvB,EAAkC;AAAA;;AACjC,MAAK,CAAEH,kBAAkB,CAAEG,QAAF,CAAzB,EAAwC;AACvC,WAAOA,QAAP;AACA,GAHgC,CAKjC;;;AACA,MAAK,EAAEA,QAAF,aAAEA,QAAF,uCAAEA,QAAQ,CAAEC,UAAZ,iDAAE,qBAAsBD,QAAxB,CAAL,EAAwC;AACvCA,IAAAA,QAAQ,CAACC,UAAT,GAAsB,EACrB,GAAGD,QAAQ,CAACC,UADS;AAErBD,MAAAA,QAAQ,EAAE;AACTE,QAAAA,IAAI,EAAE;AADG;AAFW,KAAtB;AAMA;;AAED,SAAOF,QAAP;AACA;;AAED,sBACC,0BADD,EAEC,4BAFD,EAGCD,YAHD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\nconst hasSettingsSupport = ( blockType ) =>\n\thasBlockSupport( blockType, '__experimentalSettings', false );\n\nfunction addAttribute( settings ) {\n\tif ( ! hasSettingsSupport( settings ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( ! settings?.attributes?.settings ) {\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tsettings: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/settings/addAttribute',\n\taddAttribute\n);\n"]}

package/build/hooks/style.js

@@ -60,7 +60,9 @@ const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
 
 function compileStyleValue(uncompiledValue) {
-  if ((0, _lodash.startsWith)(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) {
+  var _uncompiledValue$star;
+
+  if (uncompiledValue !== null && uncompiledValue !== void 0 && (_uncompiledValue$star = uncompiledValue.startsWith) !== null && _uncompiledValue$star !== void 0 && _uncompiledValue$star.call(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) {
     const variable = uncompiledValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
     return `var(--wp--${variable})`;
   }
@@ -84,13 +86,13 @@ function getInlineStyles() {
     const path = _blocks.__EXPERIMENTAL_STYLE_PROPERTY[propKey].value;
     const subPaths = _blocks.__EXPERIMENTAL_STYLE_PROPERTY[propKey].properties; // Ignore styles on elements because they are handled on the server.
 
-    if ((0, _lodash.has)(styles, path) && 'elements' !== (0, _lodash.first)(path)) {
+    if ((0, _lodash.has)(styles, path) && 'elements' !== (path === null || path === void 0 ? void 0 : path[0])) {
       // Checking if style value is a string allows for shorthand css
       // option and backwards compatibility for border radius support.
       const styleValue = (0, _lodash.get)(styles, path);
 
       if (!_blocks.__EXPERIMENTAL_STYLE_PROPERTY[propKey].useEngine) {
-        if (!!subPaths && !(0, _lodash.isString)(styleValue)) {
+        if (!!subPaths && typeof styleValue !== 'string') {
           Object.entries(subPaths).forEach(entry => {
             const [name, subPath] = entry;
             const value = (0, _lodash.get)(styleValue, [subPath]);
@@ -107,14 +109,8 @@ function getInlineStyles() {
   }); // The goal is to move everything to server side generated engine styles
   // This is temporary as we absorb more and more styles into the engine.
 
-  const extraRules = (0, _styleEngine.getCSSRules)(styles, {
-    selector: 'self'
-  });
+  const extraRules = (0, _styleEngine.getCSSRules)(styles);
   extraRules.forEach(rule => {
-    if (rule.selector !== 'self') {
-      throw "This style can't be added as inline style";
-    }
-
     output[rule.key] = rule.value;
   });
   return output;
@@ -122,14 +118,18 @@ function getInlineStyles() {
 
 function compileElementsStyles(selector) {
   let elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return (0, _lodash.map)(elements, (styles, element) => {
+  return Object.entries(elements).map(_ref => {
+    let [element, styles] = _ref;
     const elementStyles = getInlineStyles(styles);
 
     if (!(0, _lodash.isEmpty)(elementStyles)) {
       // The .editor-styles-wrapper selector is required on elements styles. As it is
       // added to all other editor styles, not providing it causes reset and global
       // styles to override element styles because of higher specificity.
-      return [`.editor-styles-wrapper .${selector} ${_blocks.__EXPERIMENTAL_ELEMENTS[element]}{`, ...(0, _lodash.map)(elementStyles, (value, property) => `\t${(0, _lodash.kebabCase)(property)}: ${value};`), '}'].join('\n');
+      return [`.editor-styles-wrapper .${selector} ${_blocks.__EXPERIMENTAL_ELEMENTS[element]}{`, ...Object.entries(elementStyles).map(_ref2 => {
+        let [cssProperty, value] = _ref2;
+        return `\t${(0, _lodash.kebabCase)(cssProperty)}: ${value};`;
+      }), '}'].join('\n');
     }
 
     return '';
@@ -227,7 +227,8 @@ function addSaveProps(props, blockType, attributes) {
   let {
     style
   } = attributes;
-  (0, _lodash.forEach)(skipPaths, (path, indicator) => {
+  Object.entries(skipPaths).forEach(_ref3 => {
+    let [indicator, path] = _ref3;
     const skipSerialization = (0, _blocks.getBlockSupport)(blockType, indicator);
 
     if (skipSerialization === true) {