@wordpress/block-editor 8.5.4 → 9.0.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.

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","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\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 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"]}

package/build/hooks/index.js

@@ -66,13 +66,15 @@ require("./generated-class-name");
 
 require("./style");
 
+require("./settings");
+
 require("./color");
 
 var _duotone = require("./duotone");
 
 require("./font-size");
 
-require("./border-color");
+require("./border");
 
 require("./layout");
 

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

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/use-border-props.js

@@ -8,17 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.getBorderClassesAndStyles = getBorderClassesAndStyles;
 exports.useBorderProps = useBorderProps;
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _style = require("./style");
 
-var _colors = require("../components/colors");
-
-var _useSetting = _interopRequireDefault(require("../components/use-setting"));
+var _border = require("./border");
 
-/**
- * External dependencies
- */
+var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("../components/colors-gradients/use-multiple-origin-colors-and-gradients"));
 
 /**
  * Internal dependencies
@@ -26,35 +20,23 @@ var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 // This utility is intended to assist where the serialization of the border
 // block support is being skipped for a block but the border related CSS classes
 // & styles still need to be generated so they can be applied to inner elements.
-const EMPTY_ARRAY = [];
+
 /**
  * Provides the CSS class names and inline styles for a block's border support
  * attributes.
  *
- * @param {Object} attributes             Block attributes.
- * @param {string} attributes.borderColor Selected named border color.
- * @param {Object} attributes.style       Block's styles attribute.
- *
+ * @param {Object} attributes Block attributes.
  * @return {Object} Border block support derived CSS classes & styles.
  */
+function getBorderClassesAndStyles(attributes) {
+  var _attributes$style;
 
-function getBorderClassesAndStyles(_ref) {
-  var _style$border;
-
-  let {
-    borderColor,
-    style
-  } = _ref;
-  const borderStyles = (style === null || style === void 0 ? void 0 : style.border) || {};
-  const borderClass = (0, _colors.getColorClassName)('border-color', borderColor);
-  const className = (0, _classnames.default)({
-    [borderClass]: !!borderClass,
-    'has-border-color': borderColor || (style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border.color)
-  });
+  const border = ((_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.border) || {};
+  const className = (0, _border.getBorderClasses)(attributes);
   return {
     className: className || undefined,
     style: (0, _style.getInlineStyles)({
-      border: borderStyles
+      border
     })
   };
 }
@@ -72,12 +54,20 @@ function getBorderClassesAndStyles(_ref) {
 
 
 function useBorderProps(attributes) {
-  const colors = (0, _useSetting.default)('color.palette') || EMPTY_ARRAY;
-  const borderProps = getBorderClassesAndStyles(attributes); // Force inline style to apply border color when themes do not load their
-  // color stylesheets in the editor.
+  const {
+    colors
+  } = (0, _useMultipleOriginColorsAndGradients.default)();
+  const borderProps = getBorderClassesAndStyles(attributes);
+  const {
+    borderColor
+  } = attributes; // Force inline styles to apply named border colors when themes do not load
+  // their color stylesheets in the editor.
 
-  if (attributes.borderColor) {
-    const borderColorObject = (0, _colors.getColorObjectByAttributeValues)(colors, attributes.borderColor);
+  if (borderColor) {
+    const borderColorObject = (0, _border.getMultiOriginColor)({
+      colors,
+      namedColor: borderColor
+    });
     borderProps.style.borderColor = borderColorObject.color;
   }
 

package/build/hooks/use-border-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-border-props.js"],"names":["EMPTY_ARRAY","getBorderClassesAndStyles","borderColor","style","borderStyles","border","borderClass","className","color","undefined","useBorderProps","attributes","colors","borderProps","borderColorObject"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AACA;;AAIA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQA;AACA;AACA;AAEA,MAAMA,WAAW,GAAG,EAApB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,yBAAT,OAA6D;AAAA;;AAAA,MAAzB;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,GAAyB;AACnE,QAAMC,YAAY,GAAG,CAAAD,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,MAAP,KAAiB,EAAtC;AACA,QAAMC,WAAW,GAAG,+BAAmB,cAAnB,EAAmCJ,WAAnC,CAApB;AAEA,QAAMK,SAAS,GAAG,yBAAY;AAC7B,KAAED,WAAF,GAAiB,CAAC,CAAEA,WADS;AAE7B,wBAAoBJ,WAAW,KAAIC,KAAJ,aAAIA,KAAJ,wCAAIA,KAAK,CAAEE,MAAX,kDAAI,cAAeG,KAAnB;AAFF,GAAZ,CAAlB;AAKA,SAAO;AACND,IAAAA,SAAS,EAAEA,SAAS,IAAIE,SADlB;AAENN,IAAAA,KAAK,EAAE,4BAAiB;AAAEE,MAAAA,MAAM,EAAED;AAAV,KAAjB;AAFD,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,cAAT,CAAyBC,UAAzB,EAAsC;AAC5C,QAAMC,MAAM,GAAG,yBAAY,eAAZ,KAAiCZ,WAAhD;AACA,QAAMa,WAAW,GAAGZ,yBAAyB,CAAEU,UAAF,CAA7C,CAF4C,CAI5C;AACA;;AACA,MAAKA,UAAU,CAACT,WAAhB,EAA8B;AAC7B,UAAMY,iBAAiB,GAAG,6CACzBF,MADyB,EAEzBD,UAAU,CAACT,WAFc,CAA1B;AAKAW,IAAAA,WAAW,CAACV,KAAZ,CAAkBD,WAAlB,GAAgCY,iBAAiB,CAACN,KAAlD;AACA;;AAED,SAAOK,WAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport useSetting from '../components/use-setting';\n\n// This utility is intended to assist where the serialization of the border\n// block support is being skipped for a block but the border related CSS classes\n// & styles still need to be generated so they can be applied to inner elements.\n\nconst EMPTY_ARRAY = [];\n\n/**\n * Provides the CSS class names and inline styles for a block's border support\n * attributes.\n *\n * @param {Object} attributes             Block attributes.\n * @param {string} attributes.borderColor Selected named border color.\n * @param {Object} attributes.style       Block's styles attribute.\n *\n * @return {Object} Border block support derived CSS classes & styles.\n */\nexport function getBorderClassesAndStyles( { borderColor, style } ) {\n\tconst borderStyles = style?.border || {};\n\tconst borderClass = getColorClassName( 'border-color', borderColor );\n\n\tconst className = classnames( {\n\t\t[ borderClass ]: !! borderClass,\n\t\t'has-border-color': borderColor || style?.border?.color,\n\t} );\n\n\treturn {\n\t\tclassName: className || undefined,\n\t\tstyle: getInlineStyles( { border: borderStyles } ),\n\t};\n}\n\n/**\n * Derives the border related props for a block from its border block support\n * attributes.\n *\n * Inline styles are forced for named colors to ensure these selections are\n * reflected when themes do not load their color stylesheets in the editor.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} ClassName & style props from border block support.\n */\nexport function useBorderProps( attributes ) {\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\n\t// Force inline style to apply border color when themes do not load their\n\t// color stylesheets in the editor.\n\tif ( attributes.borderColor ) {\n\t\tconst borderColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\tattributes.borderColor\n\t\t);\n\n\t\tborderProps.style.borderColor = borderColorObject.color;\n\t}\n\n\treturn borderProps;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-border-props.js"],"names":["getBorderClassesAndStyles","attributes","border","style","className","undefined","useBorderProps","colors","borderProps","borderColor","borderColorObject","namedColor","color"],"mappings":";;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,yBAAT,CAAoCC,UAApC,EAAiD;AAAA;;AACvD,QAAMC,MAAM,GAAG,sBAAAD,UAAU,CAACE,KAAX,wEAAkBD,MAAlB,KAA4B,EAA3C;AACA,QAAME,SAAS,GAAG,8BAAkBH,UAAlB,CAAlB;AAEA,SAAO;AACNG,IAAAA,SAAS,EAAEA,SAAS,IAAIC,SADlB;AAENF,IAAAA,KAAK,EAAE,4BAAiB;AAAED,MAAAA;AAAF,KAAjB;AAFD,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,cAAT,CAAyBL,UAAzB,EAAsC;AAC5C,QAAM;AAAEM,IAAAA;AAAF,MAAa,mDAAnB;AACA,QAAMC,WAAW,GAAGR,yBAAyB,CAAEC,UAAF,CAA7C;AACA,QAAM;AAAEQ,IAAAA;AAAF,MAAkBR,UAAxB,CAH4C,CAK5C;AACA;;AACA,MAAKQ,WAAL,EAAmB;AAClB,UAAMC,iBAAiB,GAAG,iCAAqB;AAC9CH,MAAAA,MAD8C;AAE9CI,MAAAA,UAAU,EAAEF;AAFkC,KAArB,CAA1B;AAKAD,IAAAA,WAAW,CAACL,KAAZ,CAAkBM,WAAlB,GAAgCC,iBAAiB,CAACE,KAAlD;AACA;;AAED,SAAOJ,WAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getBorderClasses, getMultiOriginColor } from './border';\nimport useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';\n\n// This utility is intended to assist where the serialization of the border\n// block support is being skipped for a block but the border related CSS classes\n// & styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's border support\n * attributes.\n *\n * @param {Object} attributes Block attributes.\n * @return {Object} Border block support derived CSS classes & styles.\n */\nexport function getBorderClassesAndStyles( attributes ) {\n\tconst border = attributes.style?.border || {};\n\tconst className = getBorderClasses( attributes );\n\n\treturn {\n\t\tclassName: className || undefined,\n\t\tstyle: getInlineStyles( { border } ),\n\t};\n}\n\n/**\n * Derives the border related props for a block from its border block support\n * attributes.\n *\n * Inline styles are forced for named colors to ensure these selections are\n * reflected when themes do not load their color stylesheets in the editor.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} ClassName & style props from border block support.\n */\nexport function useBorderProps( attributes ) {\n\tconst { colors } = useMultipleOriginColorsAndGradients();\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst { borderColor } = attributes;\n\n\t// Force inline styles to apply named border colors when themes do not load\n\t// their color stylesheets in the editor.\n\tif ( borderColor ) {\n\t\tconst borderColorObject = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: borderColor,\n\t\t} );\n\n\t\tborderProps.style.borderColor = borderColorObject.color;\n\t}\n\n\treturn borderProps;\n}\n"]}

package/build/store/actions.js

@@ -1274,25 +1274,37 @@ function stopDraggingBlocks() {
 /**
  * Returns an action object used in signalling that the caret has entered formatted text.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 
 
 function enterFormattedText() {
+  (0, _deprecated.default)('wp.data.dispatch( "core/block-editor" ).enterFormattedText', {
+    since: '6.1',
+    version: '6.3'
+  });
   return {
-    type: 'ENTER_FORMATTED_TEXT'
+    type: 'DO_NOTHING'
   };
 }
 /**
  * Returns an action object used in signalling that the user caret has exited formatted text.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 
 
 function exitFormattedText() {
+  (0, _deprecated.default)('wp.data.dispatch( "core/block-editor" ).exitFormattedText', {
+    since: '6.1',
+    version: '6.3'
+  });
   return {
-    type: 'EXIT_FORMATTED_TEXT'
+    type: 'DO_NOTHING'
   };
 }
 /**