@wordpress/block-editor 12.20.0 → 12.21.0

package/src/store/private-selectors.js

@@ -341,14 +341,6 @@ export function getLastFocus( state ) {
 	return state.lastFocus;
 }
 
-export function getAllBlockBindingsSources( state ) {
-	return state.blockBindingsSources;
-}
-
-export function getBlockBindingsSource( state, sourceName ) {
-	return state.blockBindingsSources[ sourceName ];
-}
-
 /**
  * Returns true if the user is dragging anything, or false otherwise. It is possible for a
  * user to be dragging data from outside of the editor, so this selector is separate from

package/src/store/reducer.js

@@ -1521,17 +1521,11 @@ export function isSelectionEnabled( state = true, action ) {
 function removalPromptData( state = false, action ) {
 	switch ( action.type ) {
 		case 'DISPLAY_BLOCK_REMOVAL_PROMPT':
-			const {
-				clientIds,
-				selectPrevious,
-				blockNamesForPrompt,
-				messageType,
-			} = action;
+			const { clientIds, selectPrevious, message } = action;
 			return {
 				clientIds,
 				selectPrevious,
-				blockNamesForPrompt,
-				messageType,
+				message,
 			};
 		case 'CLEAR_BLOCK_REMOVAL_PROMPT':
 			return false;
@@ -2050,20 +2044,6 @@ export function lastFocus( state = false, action ) {
 	return state;
 }
 
-function blockBindingsSources( state = {}, action ) {
-	if ( action.type === 'REGISTER_BLOCK_BINDINGS_SOURCE' ) {
-		return {
-			...state,
-			[ action.sourceName ]: {
-				label: action.sourceLabel,
-				useSource: action.useSource,
-				lockAttributesEditing: action.lockAttributesEditing ?? true,
-			},
-		};
-	}
-	return state;
-}
-
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2095,7 +2075,6 @@ const combinedReducers = combineReducers( {
 	blockRemovalRules,
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
-	blockBindingsSources,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -2231,56 +2231,41 @@ export const __experimentalGetAllowedBlocks = createSelector(
  * @param    {Object}         state            Editor state.
  * @param    {?string}        rootClientId     Optional root client ID of block list.
  *
- * @return {?WPDirectInsertBlock}              The block type to be directly inserted.
+ * @return {WPDirectInsertBlock|undefined}              The block type to be directly inserted.
  *
  * @typedef {Object} WPDirectInsertBlock
  * @property {string}         name             The type of block.
  * @property {?Object}        attributes       Attributes to pass to the newly created block.
  * @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
  */
-export const getDirectInsertBlock = createSelector(
-	( state, rootClientId = null ) => {
-		if ( ! rootClientId ) {
-			return;
-		}
-		const defaultBlock =
-			state.blockListSettings[ rootClientId ]?.defaultBlock;
-		const directInsert =
-			state.blockListSettings[ rootClientId ]?.directInsert;
-		if ( ! defaultBlock || ! directInsert ) {
-			return;
-		}
-		if ( typeof directInsert === 'function' ) {
-			return directInsert( getBlock( state, rootClientId ) )
-				? defaultBlock
-				: null;
-		}
-		return defaultBlock;
-	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.tree.get( rootClientId ),
-	]
-);
+export function getDirectInsertBlock( state, rootClientId = null ) {
+	if ( ! rootClientId ) {
+		return;
+	}
+	const { defaultBlock, directInsert } =
+		state.blockListSettings[ rootClientId ] ?? {};
+	if ( ! defaultBlock || ! directInsert ) {
+		return;
+	}
 
-export const __experimentalGetDirectInsertBlock = createSelector(
-	( state, rootClientId = null ) => {
-		deprecated(
-			'wp.data.select( "core/block-editor" ).__experimentalGetDirectInsertBlock',
-			{
-				alternative:
-					'wp.data.select( "core/block-editor" ).getDirectInsertBlock',
-				since: '6.3',
-				version: '6.4',
-			}
-		);
-		return getDirectInsertBlock( state, rootClientId );
-	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.tree.get( rootClientId ),
-	]
-);
+	return defaultBlock;
+}
+
+export function __experimentalGetDirectInsertBlock(
+	state,
+	rootClientId = null
+) {
+	deprecated(
+		'wp.data.select( "core/block-editor" ).__experimentalGetDirectInsertBlock',
+		{
+			alternative:
+				'wp.data.select( "core/block-editor" ).getDirectInsertBlock',
+			since: '6.3',
+			version: '6.4',
+		}
+	);
+	return getDirectInsertBlock( state, rootClientId );
+}
 
 export const __experimentalGetParsedPattern = createRegistrySelector(
 	( select ) =>
@@ -2293,11 +2278,21 @@ export const __experimentalGetParsedPattern = createRegistrySelector(
 			if ( ! pattern ) {
 				return null;
 			}
+			const blocks = parse( pattern.content, {
+				__unstableSkipMigrationLogs: true,
+			} );
+			if ( blocks.length === 1 ) {
+				blocks[ 0 ].attributes = {
+					...blocks[ 0 ].attributes,
+					metadata: {
+						...( blocks[ 0 ].attributes.metadata || {} ),
+						categories: pattern.categories,
+					},
+				};
+			}
 			return {
 				...pattern,
-				blocks: parse( pattern.content, {
-					__unstableSkipMigrationLogs: true,
-				} ),
+				blocks,
 			};
 		}, getAllPatternsDependants( select ) )
 );

package/src/store/test/actions.js

@@ -832,10 +832,6 @@ describe( 'actions', () => {
 				blockB.clientId
 			)( { select, dispatch } );
 
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'MERGE_BLOCKS',
-				blocks: [ blockA.clientId, blockB.clientId ],
-			} );
 			expect( dispatch.selectBlock ).toHaveBeenCalledWith( 'chicken' );
 		} );
 

package/src/style.scss

@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-bindings-toolbar-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
@@ -27,6 +28,7 @@
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
 @import "./components/global-styles/style.scss";
+@import "./components/grid-visualizer/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
@@ -52,8 +54,8 @@
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
 @import "./hooks/layout.scss";
-@import "./hooks/padding.scss";
 @import "./hooks/position.scss";
+@import "./hooks/spacing.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";

package/src/utils/calculate-scale.js

@@ -0,0 +1,20 @@
+const clamp = ( lowerlimit, width, upperlimit ) => {
+	if ( width < lowerlimit ) return lowerlimit;
+	if ( width > upperlimit ) return upperlimit;
+	return width;
+};
+
+export default function calculateScale( scaleConfig, width ) {
+	const scaleSlope =
+		( scaleConfig.maxScale - scaleConfig.minScale ) /
+		( scaleConfig.maxWidth - scaleConfig.minWidth );
+
+	const scaleIntercept =
+		scaleConfig.minScale - scaleSlope * scaleConfig.minWidth;
+
+	return clamp(
+		scaleConfig.maxScale,
+		scaleSlope * width + scaleIntercept,
+		scaleConfig.minScale
+	);
+}

package/build/hooks/margin.js

@@ -1,86 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MarginVisualizer = MarginVisualizer;
-var _react = require("react");
-var _element = require("@wordpress/element");
-var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
-var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
-var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function getComputedCSS(element, property) {
-  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
-function MarginVisualizer({
-  clientId,
-  attributes,
-  forceShow
-}) {
-  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
-  const [style, setStyle] = (0, _element.useState)();
-  const margin = attributes?.style?.spacing?.margin;
-  (0, _element.useEffect)(() => {
-    if (!blockElement || null === blockElement.ownerDocument.defaultView) {
-      return;
-    }
-    const top = getComputedCSS(blockElement, 'margin-top');
-    const right = getComputedCSS(blockElement, 'margin-right');
-    const bottom = getComputedCSS(blockElement, 'margin-bottom');
-    const left = getComputedCSS(blockElement, 'margin-left');
-    setStyle({
-      borderTopWidth: top,
-      borderRightWidth: right,
-      borderBottomWidth: bottom,
-      borderLeftWidth: left,
-      top: top ? `-${top}` : 0,
-      right: right ? `-${right}` : 0,
-      bottom: bottom ? `-${bottom}` : 0,
-      left: left ? `-${left}` : 0
-    });
-  }, [blockElement, margin]);
-  const [isActive, setIsActive] = (0, _element.useState)(false);
-  const valueRef = (0, _element.useRef)(margin);
-  const timeoutRef = (0, _element.useRef)();
-  const clearTimer = () => {
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-    }
-  };
-  (0, _element.useEffect)(() => {
-    if (!(0, _isShallowEqual.default)(margin, valueRef.current) && !forceShow) {
-      setIsActive(true);
-      valueRef.current = margin;
-      timeoutRef.current = setTimeout(() => {
-        setIsActive(false);
-      }, 400);
-    }
-    return () => {
-      setIsActive(false);
-      clearTimer();
-    };
-  }, [margin, forceShow]);
-  if (!isActive && !forceShow) {
-    return null;
-  }
-  return (0, _react.createElement)(_blockPopover.default, {
-    clientId: clientId,
-    __unstableCoverTarget: true,
-    __unstableRefreshSize: margin,
-    __unstablePopoverSlot: "block-toolbar",
-    shift: false
-  }, (0, _react.createElement)("div", {
-    className: "block-editor__padding-visualizer",
-    style: style
-  }));
-}
-//# sourceMappingURL=margin.js.map

package/build/hooks/margin.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_isShallowEqual","_interopRequireDefault","_blockPopover","_useBlockRefs","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","MarginVisualizer","clientId","attributes","forceShow","blockElement","useBlockElement","style","setStyle","useState","margin","spacing","useEffect","top","right","bottom","left","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","useRef","timeoutRef","clearTimer","current","window","clearTimeout","isShallowEqual","setTimeout","_react","createElement","default","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/margin.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function MarginVisualizer( { clientId, attributes, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst margin = attributes?.style?.spacing?.margin;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst top = getComputedCSS( blockElement, 'margin-top' );\n\t\tconst right = getComputedCSS( blockElement, 'margin-right' );\n\t\tconst bottom = getComputedCSS( blockElement, 'margin-bottom' );\n\t\tconst left = getComputedCSS( blockElement, 'margin-left' );\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: top,\n\t\t\tborderRightWidth: right,\n\t\t\tborderBottomWidth: bottom,\n\t\t\tborderLeftWidth: left,\n\t\t\ttop: top ? `-${ top }` : 0,\n\t\t\tright: right ? `-${ right }` : 0,\n\t\t\tbottom: bottom ? `-${ bottom }` : 0,\n\t\t\tleft: left ? `-${ left }` : 0,\n\t\t} );\n\t}, [ blockElement, margin ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( margin );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ margin, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ margin }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,eAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,aAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EAC5C,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B;AAEO,SAASK,gBAAgBA,CAAE;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAU,CAAC,EAAG;EACvE,MAAMC,YAAY,GAAG,IAAAC,uCAAe,EAAEJ,QAAS,CAAC;EAChD,MAAM,CAAEK,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAC,CAAC;EAEtC,MAAMC,MAAM,GAAGP,UAAU,EAAEI,KAAK,EAAEI,OAAO,EAAED,MAAM;EAEjD,IAAAE,kBAAS,EAAE,MAAM;IAChB,IACC,CAAEP,YAAY,IACd,IAAI,KAAKA,YAAY,CAACR,aAAa,CAACC,WAAW,EAC9C;MACD;IACD;IAEA,MAAMe,GAAG,GAAGnB,cAAc,CAAEW,YAAY,EAAE,YAAa,CAAC;IACxD,MAAMS,KAAK,GAAGpB,cAAc,CAAEW,YAAY,EAAE,cAAe,CAAC;IAC5D,MAAMU,MAAM,GAAGrB,cAAc,CAAEW,YAAY,EAAE,eAAgB,CAAC;IAC9D,MAAMW,IAAI,GAAGtB,cAAc,CAAEW,YAAY,EAAE,aAAc,CAAC;IAE1DG,QAAQ,CAAE;MACTS,cAAc,EAAEJ,GAAG;MACnBK,gBAAgB,EAAEJ,KAAK;MACvBK,iBAAiB,EAAEJ,MAAM;MACzBK,eAAe,EAAEJ,IAAI;MACrBH,GAAG,EAAEA,GAAG,GAAI,IAAIA,GAAK,EAAC,GAAG,CAAC;MAC1BC,KAAK,EAAEA,KAAK,GAAI,IAAIA,KAAO,EAAC,GAAG,CAAC;MAChCC,MAAM,EAAEA,MAAM,GAAI,IAAIA,MAAQ,EAAC,GAAG,CAAC;MACnCC,IAAI,EAAEA,IAAI,GAAI,IAAIA,IAAM,EAAC,GAAG;IAC7B,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEX,YAAY,EAAEK,MAAM,CAAG,CAAC;EAE7B,MAAM,CAAEW,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAb,iBAAQ,EAAE,KAAM,CAAC;EACnD,MAAMc,QAAQ,GAAG,IAAAC,eAAM,EAAEd,MAAO,CAAC;EACjC,MAAMe,UAAU,GAAG,IAAAD,eAAM,EAAC,CAAC;EAE3B,MAAME,UAAU,GAAGA,CAAA,KAAM;IACxB,IAAKD,UAAU,CAACE,OAAO,EAAG;MACzBC,MAAM,CAACC,YAAY,CAAEJ,UAAU,CAACE,OAAQ,CAAC;IAC1C;EACD,CAAC;EAED,IAAAf,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAE,IAAAkB,uBAAc,EAAEpB,MAAM,EAAEa,QAAQ,CAACI,OAAQ,CAAC,IAAI,CAAEvB,SAAS,EAAG;MAClEkB,WAAW,CAAE,IAAK,CAAC;MACnBC,QAAQ,CAACI,OAAO,GAAGjB,MAAM;MAEzBe,UAAU,CAACE,OAAO,GAAGI,UAAU,CAAE,MAAM;QACtCT,WAAW,CAAE,KAAM,CAAC;MACrB,CAAC,EAAE,GAAI,CAAC;IACT;IAEA,OAAO,MAAM;MACZA,WAAW,CAAE,KAAM,CAAC;MACpBI,UAAU,CAAC,CAAC;IACb,CAAC;EACF,CAAC,EAAE,CAAEhB,MAAM,EAAEN,SAAS,CAAG,CAAC;EAE1B,IAAK,CAAEiB,QAAQ,IAAI,CAAEjB,SAAS,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACC,IAAA4B,MAAA,CAAAC,aAAA,EAACzC,aAAA,CAAA0C,OAAY;IACZhC,QAAQ,EAAGA,QAAU;IACrBiC,qBAAqB;IACrBC,qBAAqB,EAAG1B,MAAQ;IAChC2B,qBAAqB,EAAC,eAAe;IACrCC,KAAK,EAAG;EAAO,GAEf,IAAAN,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC,kCAAkC;IAAChC,KAAK,EAAGA;EAAO,CAAE,CACtD,CAAC;AAEjB"}

package/build/hooks/padding.js

@@ -1,78 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PaddingVisualizer = PaddingVisualizer;
-var _react = require("react");
-var _element = require("@wordpress/element");
-var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
-var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
-var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function getComputedCSS(element, property) {
-  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
-function PaddingVisualizer({
-  clientId,
-  value,
-  forceShow
-}) {
-  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
-  const [style, setStyle] = (0, _element.useState)();
-  const padding = value?.spacing?.padding;
-  (0, _element.useEffect)(() => {
-    if (!blockElement || null === blockElement.ownerDocument.defaultView) {
-      return;
-    }
-    setStyle({
-      borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
-      borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
-      borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
-      borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
-    });
-  }, [blockElement, padding]);
-  const [isActive, setIsActive] = (0, _element.useState)(false);
-  const valueRef = (0, _element.useRef)(padding);
-  const timeoutRef = (0, _element.useRef)();
-  const clearTimer = () => {
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-    }
-  };
-  (0, _element.useEffect)(() => {
-    if (!(0, _isShallowEqual.default)(padding, valueRef.current) && !forceShow) {
-      setIsActive(true);
-      valueRef.current = padding;
-      timeoutRef.current = setTimeout(() => {
-        setIsActive(false);
-      }, 400);
-    }
-    return () => {
-      setIsActive(false);
-      clearTimer();
-    };
-  }, [padding, forceShow]);
-  if (!isActive && !forceShow) {
-    return null;
-  }
-  return (0, _react.createElement)(_blockPopover.default, {
-    clientId: clientId,
-    __unstableCoverTarget: true,
-    __unstableRefreshSize: padding,
-    __unstablePopoverSlot: "block-toolbar",
-    shift: false
-  }, (0, _react.createElement)("div", {
-    className: "block-editor__padding-visualizer",
-    style: style
-  }));
-}
-//# sourceMappingURL=padding.js.map

package/build/hooks/padding.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_isShallowEqual","_interopRequireDefault","_blockPopover","_useBlockRefs","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","PaddingVisualizer","clientId","value","forceShow","blockElement","useBlockElement","style","setStyle","useState","padding","spacing","useEffect","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","useRef","timeoutRef","clearTimer","current","window","clearTimeout","isShallowEqual","setTimeout","_react","createElement","default","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/padding.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function PaddingVisualizer( { clientId, value, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst padding = value?.spacing?.padding;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: getComputedCSS( blockElement, 'padding-top' ),\n\t\t\tborderRightWidth: getComputedCSS( blockElement, 'padding-right' ),\n\t\t\tborderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),\n\t\t\tborderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),\n\t\t} );\n\t}, [ blockElement, padding ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( padding );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ padding, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ padding }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,eAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,aAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EAC5C,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B;AAEO,SAASK,iBAAiBA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAU,CAAC,EAAG;EACnE,MAAMC,YAAY,GAAG,IAAAC,uCAAe,EAAEJ,QAAS,CAAC;EAChD,MAAM,CAAEK,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAC,CAAC;EAEtC,MAAMC,OAAO,GAAGP,KAAK,EAAEQ,OAAO,EAAED,OAAO;EAEvC,IAAAE,kBAAS,EAAE,MAAM;IAChB,IACC,CAAEP,YAAY,IACd,IAAI,KAAKA,YAAY,CAACR,aAAa,CAACC,WAAW,EAC9C;MACD;IACD;IAEAU,QAAQ,CAAE;MACTK,cAAc,EAAEnB,cAAc,CAAEW,YAAY,EAAE,aAAc,CAAC;MAC7DS,gBAAgB,EAAEpB,cAAc,CAAEW,YAAY,EAAE,eAAgB,CAAC;MACjEU,iBAAiB,EAAErB,cAAc,CAAEW,YAAY,EAAE,gBAAiB,CAAC;MACnEW,eAAe,EAAEtB,cAAc,CAAEW,YAAY,EAAE,cAAe;IAC/D,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,YAAY,EAAEK,OAAO,CAAG,CAAC;EAE9B,MAAM,CAAEO,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAT,iBAAQ,EAAE,KAAM,CAAC;EACnD,MAAMU,QAAQ,GAAG,IAAAC,eAAM,EAAEV,OAAQ,CAAC;EAClC,MAAMW,UAAU,GAAG,IAAAD,eAAM,EAAC,CAAC;EAE3B,MAAME,UAAU,GAAGA,CAAA,KAAM;IACxB,IAAKD,UAAU,CAACE,OAAO,EAAG;MACzBC,MAAM,CAACC,YAAY,CAAEJ,UAAU,CAACE,OAAQ,CAAC;IAC1C;EACD,CAAC;EAED,IAAAX,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAE,IAAAc,uBAAc,EAAEhB,OAAO,EAAES,QAAQ,CAACI,OAAQ,CAAC,IAAI,CAAEnB,SAAS,EAAG;MACnEc,WAAW,CAAE,IAAK,CAAC;MACnBC,QAAQ,CAACI,OAAO,GAAGb,OAAO;MAE1BW,UAAU,CAACE,OAAO,GAAGI,UAAU,CAAE,MAAM;QACtCT,WAAW,CAAE,KAAM,CAAC;MACrB,CAAC,EAAE,GAAI,CAAC;IACT;IAEA,OAAO,MAAM;MACZA,WAAW,CAAE,KAAM,CAAC;MACpBI,UAAU,CAAC,CAAC;IACb,CAAC;EACF,CAAC,EAAE,CAAEZ,OAAO,EAAEN,SAAS,CAAG,CAAC;EAE3B,IAAK,CAAEa,QAAQ,IAAI,CAAEb,SAAS,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAwB,MAAA,CAAAC,aAAA,EAACrC,aAAA,CAAAsC,OAAY;IACZ5B,QAAQ,EAAGA,QAAU;IACrB6B,qBAAqB;IACrBC,qBAAqB,EAAGtB,OAAS;IACjCuB,qBAAqB,EAAC,eAAe;IACrCC,KAAK,EAAG;EAAO,GAEf,IAAAN,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC,kCAAkC;IAAC5B,KAAK,EAAGA;EAAO,CAAE,CACtD,CAAC;AAEjB"}

package/build/utils/use-can-block-toolbar-be-focused.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCanBlockToolbarBeFocused = useCanBlockToolbarBeFocused;
-var _data = require("@wordpress/data");
-var _blocks = require("@wordpress/blocks");
-var _store = require("../store");
-var _lockUnlock = require("../lock-unlock");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Returns true if the block toolbar should be able to receive focus.
- *
- * @return {boolean} Whether the block toolbar should be able to receive focus
- */
-function useCanBlockToolbarBeFocused() {
-  return (0, _data.useSelect)(select => {
-    const {
-      __unstableGetEditorMode,
-      getBlock,
-      getSettings,
-      getSelectedBlockClientId,
-      getFirstMultiSelectedBlockClientId
-    } = (0, _lockUnlock.unlock)(select(_store.store));
-    const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
-    const isEmptyDefaultBlock = (0, _blocks.isUnmodifiedDefaultBlock)(getBlock(selectedBlockId) || {});
-
-    // Fixed Toolbar can be focused when:
-    // - a block is selected
-    // - fixed toolbar is on
-    // Block Toolbar Popover can be focused when:
-    // - a block is selected
-    // - we are in edit mode
-    // - it is not an empty default block
-    return !!selectedBlockId && (getSettings().hasFixedToolbar || __unstableGetEditorMode() === 'edit' && !isEmptyDefaultBlock);
-  }, []);
-}
-//# sourceMappingURL=use-can-block-toolbar-be-focused.js.map

package/build/utils/use-can-block-toolbar-be-focused.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_data","require","_blocks","_store","_lockUnlock","useCanBlockToolbarBeFocused","useSelect","select","__unstableGetEditorMode","getBlock","getSettings","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","unlock","blockEditorStore","selectedBlockId","isEmptyDefaultBlock","isUnmodifiedDefaultBlock","hasFixedToolbar"],"sources":["@wordpress/block-editor/src/utils/use-can-block-toolbar-be-focused.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the block toolbar should be able to receive focus.\n *\n * @return {boolean} Whether the block toolbar should be able to receive focus\n */\nexport function useCanBlockToolbarBeFocused() {\n\treturn useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__unstableGetEditorMode,\n\t\t\tgetBlock,\n\t\t\tgetSettings,\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetFirstMultiSelectedBlockClientId,\n\t\t} = unlock( select( blockEditorStore ) );\n\n\t\tconst selectedBlockId =\n\t\t\tgetFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();\n\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\tgetBlock( selectedBlockId ) || {}\n\t\t);\n\n\t\t// Fixed Toolbar can be focused when:\n\t\t// - a block is selected\n\t\t// - fixed toolbar is on\n\t\t// Block Toolbar Popover can be focused when:\n\t\t// - a block is selected\n\t\t// - we are in edit mode\n\t\t// - it is not an empty default block\n\t\treturn (\n\t\t\t!! selectedBlockId &&\n\t\t\t( getSettings().hasFixedToolbar ||\n\t\t\t\t( __unstableGetEditorMode() === 'edit' &&\n\t\t\t\t\t! isEmptyDefaultBlock ) )\n\t\t);\n\t}, [] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACO,SAASI,2BAA2BA,CAAA,EAAG;EAC7C,OAAO,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC/B,MAAM;MACLC,uBAAuB;MACvBC,QAAQ;MACRC,WAAW;MACXC,wBAAwB;MACxBC;IACD,CAAC,GAAG,IAAAC,kBAAM,EAAEN,MAAM,CAAEO,YAAiB,CAAE,CAAC;IAExC,MAAMC,eAAe,GACpBH,kCAAkC,CAAC,CAAC,IAAID,wBAAwB,CAAC,CAAC;IACnE,MAAMK,mBAAmB,GAAG,IAAAC,gCAAwB,EACnDR,QAAQ,CAAEM,eAAgB,CAAC,IAAI,CAAC,CACjC,CAAC;;IAED;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OACC,CAAC,CAAEA,eAAe,KAChBL,WAAW,CAAC,CAAC,CAACQ,eAAe,IAC5BV,uBAAuB,CAAC,CAAC,KAAK,MAAM,IACrC,CAAEQ,mBAAqB,CAAE;EAE7B,CAAC,EAAE,EAAG,CAAC;AACR"}

package/build-module/hooks/margin.js

@@ -1,78 +0,0 @@
-import { createElement } from "react";
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import BlockPopover from '../components/block-popover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-function getComputedCSS(element, property) {
-  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
-export function MarginVisualizer({
-  clientId,
-  attributes,
-  forceShow
-}) {
-  const blockElement = useBlockElement(clientId);
-  const [style, setStyle] = useState();
-  const margin = attributes?.style?.spacing?.margin;
-  useEffect(() => {
-    if (!blockElement || null === blockElement.ownerDocument.defaultView) {
-      return;
-    }
-    const top = getComputedCSS(blockElement, 'margin-top');
-    const right = getComputedCSS(blockElement, 'margin-right');
-    const bottom = getComputedCSS(blockElement, 'margin-bottom');
-    const left = getComputedCSS(blockElement, 'margin-left');
-    setStyle({
-      borderTopWidth: top,
-      borderRightWidth: right,
-      borderBottomWidth: bottom,
-      borderLeftWidth: left,
-      top: top ? `-${top}` : 0,
-      right: right ? `-${right}` : 0,
-      bottom: bottom ? `-${bottom}` : 0,
-      left: left ? `-${left}` : 0
-    });
-  }, [blockElement, margin]);
-  const [isActive, setIsActive] = useState(false);
-  const valueRef = useRef(margin);
-  const timeoutRef = useRef();
-  const clearTimer = () => {
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-    }
-  };
-  useEffect(() => {
-    if (!isShallowEqual(margin, valueRef.current) && !forceShow) {
-      setIsActive(true);
-      valueRef.current = margin;
-      timeoutRef.current = setTimeout(() => {
-        setIsActive(false);
-      }, 400);
-    }
-    return () => {
-      setIsActive(false);
-      clearTimer();
-    };
-  }, [margin, forceShow]);
-  if (!isActive && !forceShow) {
-    return null;
-  }
-  return createElement(BlockPopover, {
-    clientId: clientId,
-    __unstableCoverTarget: true,
-    __unstableRefreshSize: margin,
-    __unstablePopoverSlot: "block-toolbar",
-    shift: false
-  }, createElement("div", {
-    className: "block-editor__padding-visualizer",
-    style: style
-  }));
-}
-//# sourceMappingURL=margin.js.map

package/build-module/hooks/margin.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useState","useRef","useEffect","isShallowEqual","BlockPopover","__unstableUseBlockElement","useBlockElement","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","MarginVisualizer","clientId","attributes","forceShow","blockElement","style","setStyle","margin","spacing","top","right","bottom","left","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout","createElement","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/margin.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function MarginVisualizer( { clientId, attributes, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst margin = attributes?.style?.spacing?.margin;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst top = getComputedCSS( blockElement, 'margin-top' );\n\t\tconst right = getComputedCSS( blockElement, 'margin-right' );\n\t\tconst bottom = getComputedCSS( blockElement, 'margin-bottom' );\n\t\tconst left = getComputedCSS( blockElement, 'margin-left' );\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: top,\n\t\t\tborderRightWidth: right,\n\t\t\tborderBottomWidth: bottom,\n\t\t\tborderLeftWidth: left,\n\t\t\ttop: top ? `-${ top }` : 0,\n\t\t\tright: right ? `-${ right }` : 0,\n\t\t\tbottom: bottom ? `-${ bottom }` : 0,\n\t\t\tleft: left ? `-${ left }` : 0,\n\t\t} );\n\t}, [ blockElement, margin ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( margin );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ margin, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ margin }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":"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"}

package/build-module/hooks/padding.js

@@ -1,70 +0,0 @@
-import { createElement } from "react";
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import BlockPopover from '../components/block-popover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-function getComputedCSS(element, property) {
-  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
-export function PaddingVisualizer({
-  clientId,
-  value,
-  forceShow
-}) {
-  const blockElement = useBlockElement(clientId);
-  const [style, setStyle] = useState();
-  const padding = value?.spacing?.padding;
-  useEffect(() => {
-    if (!blockElement || null === blockElement.ownerDocument.defaultView) {
-      return;
-    }
-    setStyle({
-      borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
-      borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
-      borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
-      borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
-    });
-  }, [blockElement, padding]);
-  const [isActive, setIsActive] = useState(false);
-  const valueRef = useRef(padding);
-  const timeoutRef = useRef();
-  const clearTimer = () => {
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-    }
-  };
-  useEffect(() => {
-    if (!isShallowEqual(padding, valueRef.current) && !forceShow) {
-      setIsActive(true);
-      valueRef.current = padding;
-      timeoutRef.current = setTimeout(() => {
-        setIsActive(false);
-      }, 400);
-    }
-    return () => {
-      setIsActive(false);
-      clearTimer();
-    };
-  }, [padding, forceShow]);
-  if (!isActive && !forceShow) {
-    return null;
-  }
-  return createElement(BlockPopover, {
-    clientId: clientId,
-    __unstableCoverTarget: true,
-    __unstableRefreshSize: padding,
-    __unstablePopoverSlot: "block-toolbar",
-    shift: false
-  }, createElement("div", {
-    className: "block-editor__padding-visualizer",
-    style: style
-  }));
-}
-//# sourceMappingURL=padding.js.map

package/build-module/hooks/padding.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useState","useRef","useEffect","isShallowEqual","BlockPopover","__unstableUseBlockElement","useBlockElement","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","PaddingVisualizer","clientId","value","forceShow","blockElement","style","setStyle","padding","spacing","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout","createElement","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/padding.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function PaddingVisualizer( { clientId, value, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst padding = value?.spacing?.padding;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: getComputedCSS( blockElement, 'padding-top' ),\n\t\t\tborderRightWidth: getComputedCSS( blockElement, 'padding-right' ),\n\t\t\tborderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),\n\t\t\tborderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),\n\t\t} );\n\t}, [ blockElement, padding ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( padding );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ padding, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ padding }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AAChE,OAAOC,cAAc,MAAM,6BAA6B;;AAExD;AACA;AACA;AACA,OAAOC,YAAY,MAAM,6BAA6B;AACtD,SAASC,yBAAyB,IAAIC,eAAe,QAAQ,yDAAyD;AAEtH,SAASC,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EAC5C,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B;AAEA,OAAO,SAASK,iBAAiBA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAU,CAAC,EAAG;EACnE,MAAMC,YAAY,GAAGZ,eAAe,CAAES,QAAS,CAAC;EAChD,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGpB,QAAQ,CAAC,CAAC;EAEtC,MAAMqB,OAAO,GAAGL,KAAK,EAAEM,OAAO,EAAED,OAAO;EAEvCnB,SAAS,CAAE,MAAM;IAChB,IACC,CAAEgB,YAAY,IACd,IAAI,KAAKA,YAAY,CAACR,aAAa,CAACC,WAAW,EAC9C;MACD;IACD;IAEAS,QAAQ,CAAE;MACTG,cAAc,EAAEhB,cAAc,CAAEW,YAAY,EAAE,aAAc,CAAC;MAC7DM,gBAAgB,EAAEjB,cAAc,CAAEW,YAAY,EAAE,eAAgB,CAAC;MACjEO,iBAAiB,EAAElB,cAAc,CAAEW,YAAY,EAAE,gBAAiB,CAAC;MACnEQ,eAAe,EAAEnB,cAAc,CAAEW,YAAY,EAAE,cAAe;IAC/D,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,YAAY,EAAEG,OAAO,CAAG,CAAC;EAE9B,MAAM,CAAEM,QAAQ,EAAEC,WAAW,CAAE,GAAG5B,QAAQ,CAAE,KAAM,CAAC;EACnD,MAAM6B,QAAQ,GAAG5B,MAAM,CAAEoB,OAAQ,CAAC;EAClC,MAAMS,UAAU,GAAG7B,MAAM,CAAC,CAAC;EAE3B,MAAM8B,UAAU,GAAGA,CAAA,KAAM;IACxB,IAAKD,UAAU,CAACE,OAAO,EAAG;MACzBC,MAAM,CAACC,YAAY,CAAEJ,UAAU,CAACE,OAAQ,CAAC;IAC1C;EACD,CAAC;EAED9B,SAAS,CAAE,MAAM;IAChB,IAAK,CAAEC,cAAc,CAAEkB,OAAO,EAAEQ,QAAQ,CAACG,OAAQ,CAAC,IAAI,CAAEf,SAAS,EAAG;MACnEW,WAAW,CAAE,IAAK,CAAC;MACnBC,QAAQ,CAACG,OAAO,GAAGX,OAAO;MAE1BS,UAAU,CAACE,OAAO,GAAGG,UAAU,CAAE,MAAM;QACtCP,WAAW,CAAE,KAAM,CAAC;MACrB,CAAC,EAAE,GAAI,CAAC;IACT;IAEA,OAAO,MAAM;MACZA,WAAW,CAAE,KAAM,CAAC;MACpBG,UAAU,CAAC,CAAC;IACb,CAAC;EACF,CAAC,EAAE,CAAEV,OAAO,EAAEJ,SAAS,CAAG,CAAC;EAE3B,IAAK,CAAEU,QAAQ,IAAI,CAAEV,SAAS,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACCmB,aAAA,CAAChC,YAAY;IACZW,QAAQ,EAAGA,QAAU;IACrBsB,qBAAqB;IACrBC,qBAAqB,EAAGjB,OAAS;IACjCkB,qBAAqB,EAAC,eAAe;IACrCC,KAAK,EAAG;EAAO,GAEfJ,aAAA;IAAKK,SAAS,EAAC,kCAAkC;IAACtB,KAAK,EAAGA;EAAO,CAAE,CACtD,CAAC;AAEjB"}