@wordpress/block-editor 12.19.5 → 12.21.0

package/src/store/actions.js

@@ -331,36 +331,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
-function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
-	const preferredStyleVariations =
-		blockEditorSettings?.__experimentalPreferredStyleVariations?.value ??
-		{};
-	return blocks.map( ( block ) => {
-		const blockName = block.name;
-		if ( ! hasBlockSupport( blockName, 'defaultStylePicker', true ) ) {
-			return block;
-		}
-		if ( ! preferredStyleVariations[ blockName ] ) {
-			return block;
-		}
-		const className = block.attributes?.className;
-		if ( className?.includes( 'is-style-' ) ) {
-			return block;
-		}
-		const { attributes = {} } = block;
-		const blockStyle = preferredStyleVariations[ blockName ];
-		return {
-			...block,
-			attributes: {
-				...attributes,
-				className: `${
-					className || ''
-				} is-style-${ blockStyle }`.trim(),
-			},
-		};
-	} );
-}
-
 /* eslint-disable jsdoc/valid-types */
 /**
  * Action that replaces given blocks with one or more replacement blocks.
@@ -378,10 +348,7 @@ export const replaceBlocks =
 	( { select, dispatch, registry } ) => {
 		/* eslint-enable jsdoc/valid-types */
 		clientIds = castArray( clientIds );
-		blocks = getBlocksWithDefaultStylesApplied(
-			castArray( blocks ),
-			select.getSettings()
-		);
+		blocks = castArray( blocks );
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 		// Replace is valid if the new blocks can be inserted in the root block.
 		for ( let index = 0; index < blocks.length; index++ ) {
@@ -594,10 +561,7 @@ export const insertBlocks =
 			);
 		}
 
-		blocks = getBlocksWithDefaultStylesApplied(
-			castArray( blocks ),
-			select.getSettings()
-		);
+		blocks = castArray( blocks );
 		const allowedBlocks = [];
 		for ( const block of blocks ) {
 			const isValid = select.canInsertBlockType(
@@ -960,10 +924,8 @@ export const __unstableExpandSelection =
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
 	( { registry, select, dispatch } ) => {
-		const blocks = [ firstBlockClientId, secondBlockClientId ];
-		dispatch( { type: 'MERGE_BLOCKS', blocks } );
-
-		const [ clientIdA, clientIdB ] = blocks;
+		const clientIdA = firstBlockClientId;
+		const clientIdB = secondBlockClientId;
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 

package/src/store/private-actions.js

@@ -123,61 +123,36 @@ export const privateRemoveBlocks =
 		//
 		// @see https://github.com/WordPress/gutenberg/pull/51145
 		const rules = ! forceRemove && select.getBlockRemovalRules();
-		if ( rules ) {
-			const blockNamesForPrompt = new Set();
-
-			// Given a list of client IDs of blocks that the user intended to
-			// remove, perform a tree search (BFS) to find all block names
-			// corresponding to "important" blocks, i.e. blocks that require a
-			// removal prompt.
-			const queue = [ ...clientIds ];
-			let messageType = 'templates';
-			while ( queue.length ) {
-				const clientId = queue.shift();
-				const blockName = select.getBlockName( clientId );
-				if ( rules[ blockName ] ) {
-					blockNamesForPrompt.add( blockName );
-				}
 
-				if ( rules[ 'bindings/core/pattern-overrides' ] ) {
-					const parentPatternBlocks =
-						select.getBlockParentsByBlockName(
-							clientId,
-							'core/block'
-						);
-					// We only need to run this check when editing the original pattern, not pattern instances.
-					if ( parentPatternBlocks?.length > 0 ) {
-						continue;
-					}
-					const blockAttributes =
-						select.getBlockAttributes( clientId );
-					if (
-						blockAttributes?.metadata?.bindings &&
-						JSON.stringify(
-							blockAttributes.metadata.bindings
-						).includes( 'core/pattern-overrides' )
-					) {
-						blockNamesForPrompt.add( blockName );
-						messageType = 'patternOverrides';
-					}
+		if ( rules ) {
+			function flattenBlocks( blocks ) {
+				const result = [];
+				const stack = [ ...blocks ];
+				while ( stack.length ) {
+					const { innerBlocks, ...block } = stack.shift();
+					stack.push( ...innerBlocks );
+					result.push( block );
 				}
-
-				const innerBlocks = select.getBlockOrder( clientId );
-				queue.push( ...innerBlocks );
+				return result;
 			}
 
-			// If any such blocks were found, trigger the removal prompt and
-			// skip any other steps (thus postponing actual removal).
-			if ( blockNamesForPrompt.size ) {
-				dispatch(
-					displayBlockRemovalPrompt(
-						clientIds,
-						selectPrevious,
-						Array.from( blockNamesForPrompt ),
-						messageType
-					)
-				);
-				return;
+			const blockList = clientIds.map( select.getBlock );
+			const flattenedBlocks = flattenBlocks( blockList );
+
+			// Find the first message and use it.
+			let message;
+			for ( const rule of rules ) {
+				message = rule.callback( flattenedBlocks );
+				if ( message ) {
+					dispatch(
+						displayBlockRemovalPrompt(
+							clientIds,
+							selectPrevious,
+							message
+						)
+					);
+					return;
+				}
 			}
 		}
 
@@ -228,31 +203,21 @@ export const ensureDefaultBlock =
  *
  * Contrast with `setBlockRemovalRules`.
  *
- * @param {string|string[]} clientIds           Client IDs of blocks to remove.
- * @param {boolean}         selectPrevious      True if the previous block
- *                                              or the immediate parent
- *                                              (if no previous block exists)
- *                                              should be selected
- *                                              when a block is removed.
- * @param {string[]}        blockNamesForPrompt Names of the blocks that
- *                                              triggered the need for
- *                                              confirmation before removal.
- * @param {string}          messageType         The type of message to display.
+ * @param {string|string[]} clientIds      Client IDs of blocks to remove.
+ * @param {boolean}         selectPrevious True if the previous block or the
+ *                                         immediate parent (if no previous
+ *                                         block exists) should be selected
+ *                                         when a block is removed.
+ * @param {string}          message        Message to display in the prompt.
  *
  * @return {Object} Action object.
  */
-function displayBlockRemovalPrompt(
-	clientIds,
-	selectPrevious,
-	blockNamesForPrompt,
-	messageType
-) {
+function displayBlockRemovalPrompt( clientIds, selectPrevious, message ) {
 	return {
 		type: 'DISPLAY_BLOCK_REMOVAL_PROMPT',
 		clientIds,
 		selectPrevious,
-		blockNamesForPrompt,
-		messageType,
+		message,
 	};
 }
 

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;

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

@@ -380,107 +380,6 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'insertBlocks', () => {
-		it( 'should apply default styles to blocks if blocks do not contain a style', () => {
-			const ribsBlock = {
-				clientId: 'ribs',
-				name: 'core/test-ribs',
-			};
-			const chickenBlock = {
-				clientId: 'chicken',
-				name: 'core/test-chicken',
-			};
-			const chickenRibsBlock = {
-				clientId: 'chicken-ribs',
-				name: 'core/test-chicken-ribs',
-			};
-			const blocks = [ ribsBlock, chickenBlock, chickenRibsBlock ];
-
-			const select = {
-				getSettings: () => ( {
-					__experimentalPreferredStyleVariations: {
-						value: {
-							'core/test-ribs': 'squared',
-							'core/test-chicken-ribs': 'colorful',
-						},
-					},
-				} ),
-				canInsertBlockType: () => true,
-			};
-			const dispatch = jest.fn();
-
-			insertBlocks(
-				blocks,
-				5,
-				'testrootid',
-				false
-			)( { select, dispatch } );
-
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'INSERT_BLOCKS',
-				blocks: [
-					{
-						...ribsBlock,
-						attributes: { className: 'is-style-squared' },
-					},
-					chickenBlock,
-					{
-						...chickenRibsBlock,
-						attributes: { className: 'is-style-colorful' },
-					},
-				],
-				index: 5,
-				rootClientId: 'testrootid',
-				time: expect.any( Number ),
-				updateSelection: false,
-				initialPosition: null,
-			} );
-		} );
-
-		it( 'should keep styles explicitly set even if different from the default', () => {
-			const ribsWithStyleBlock = {
-				clientId: 'ribs',
-				name: 'core/test-ribs',
-				attributes: {
-					className: 'is-style-colorful',
-				},
-			};
-			const blocks = [ ribsWithStyleBlock ];
-
-			const select = {
-				getSettings: () => ( {
-					__experimentalPreferredStyleVariations: {
-						value: {
-							'core/test-ribs': 'squared',
-						},
-					},
-				} ),
-				canInsertBlockType: () => true,
-			};
-			const dispatch = jest.fn();
-
-			insertBlocks(
-				blocks,
-				5,
-				'testrootid',
-				false
-			)( { select, dispatch } );
-
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'INSERT_BLOCKS',
-				blocks: [
-					{
-						...ribsWithStyleBlock,
-						attributes: { className: 'is-style-colorful' },
-					},
-				],
-				index: 5,
-				rootClientId: 'testrootid',
-				time: expect.any( Number ),
-				updateSelection: false,
-				initialPosition: null,
-			} );
-		} );
-
 		it( 'should filter the allowed blocks in INSERT_BLOCKS action', () => {
 			const ribsBlock = {
 				clientId: 'ribs',
@@ -933,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

@@ -17,7 +17,6 @@
 @import "./components/block-popover/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-rename/style.scss";
-@import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";
 @import "./components/block-switcher/style.scss";
 @import "./components/block-types-list/style.scss";
@@ -29,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";
@@ -54,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/components/default-style-picker/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DefaultStylePicker;
-var _react = require("react");
-var _blocks = require("@wordpress/blocks");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _data = require("@wordpress/data");
-var _store = require("../../store");
-var _utils = require("../block-styles/utils");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function DefaultStylePicker({
-  blockName
-}) {
-  const {
-    preferredStyle,
-    onUpdatePreferredStyleVariations,
-    styles
-  } = (0, _data.useSelect)(select => {
-    var _preferredStyleVariat;
-    const settings = select(_store.store).getSettings();
-    const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
-    return {
-      preferredStyle: preferredStyleVariations?.value?.[blockName],
-      onUpdatePreferredStyleVariations: (_preferredStyleVariat = preferredStyleVariations?.onChange) !== null && _preferredStyleVariat !== void 0 ? _preferredStyleVariat : null,
-      styles: select(_blocks.store).getBlockStyles(blockName)
-    };
-  }, [blockName]);
-  const selectOptions = (0, _element.useMemo)(() => [{
-    label: (0, _i18n.__)('Not set'),
-    value: ''
-  }, ...styles.map(({
-    label,
-    name
-  }) => ({
-    label,
-    value: name
-  }))], [styles]);
-  const defaultStyleName = (0, _element.useMemo)(() => (0, _utils.getDefaultStyle)(styles)?.name, [styles]);
-  const selectOnChange = (0, _element.useCallback)(blockStyle => {
-    onUpdatePreferredStyleVariations(blockName, blockStyle);
-  }, [blockName, onUpdatePreferredStyleVariations]);
-
-  // Until the functionality is migrated to global styles,
-  // only show the default style picker if a non-default style has already been selected.
-  if (!preferredStyle || preferredStyle === defaultStyleName) {
-    return null;
-  }
-  return onUpdatePreferredStyleVariations && (0, _react.createElement)("div", {
-    className: "default-style-picker__default-switcher"
-  }, (0, _react.createElement)(_components.SelectControl, {
-    __nextHasNoMarginBottom: true,
-    options: selectOptions,
-    value: preferredStyle || '',
-    label: (0, _i18n.__)('Default Style'),
-    onChange: selectOnChange
-  }));
-}
-//# sourceMappingURL=index.js.map

package/build/components/default-style-picker/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_blocks","require","_element","_i18n","_components","_data","_store","_utils","DefaultStylePicker","blockName","preferredStyle","onUpdatePreferredStyleVariations","styles","useSelect","select","_preferredStyleVariat","settings","blockEditorStore","getSettings","preferredStyleVariations","__experimentalPreferredStyleVariations","value","onChange","blocksStore","getBlockStyles","selectOptions","useMemo","label","__","map","name","defaultStyleName","getDefaultStyle","selectOnChange","useCallback","blockStyle","_react","createElement","className","SelectControl","__nextHasNoMarginBottom","options"],"sources":["@wordpress/block-editor/src/components/default-style-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { getDefaultStyle } from '../block-styles/utils';\n\nexport default function DefaultStylePicker( { blockName } ) {\n\tconst { preferredStyle, onUpdatePreferredStyleVariations, styles } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\t\tconst preferredStyleVariations =\n\t\t\t\t\tsettings.__experimentalPreferredStyleVariations;\n\t\t\t\treturn {\n\t\t\t\t\tpreferredStyle:\n\t\t\t\t\t\tpreferredStyleVariations?.value?.[ blockName ],\n\t\t\t\t\tonUpdatePreferredStyleVariations:\n\t\t\t\t\t\tpreferredStyleVariations?.onChange ?? null,\n\t\t\t\t\tstyles: select( blocksStore ).getBlockStyles( blockName ),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ blockName ]\n\t\t);\n\tconst selectOptions = useMemo(\n\t\t() => [\n\t\t\t{ label: __( 'Not set' ), value: '' },\n\t\t\t...styles.map( ( { label, name } ) => ( { label, value: name } ) ),\n\t\t],\n\t\t[ styles ]\n\t);\n\tconst defaultStyleName = useMemo(\n\t\t() => getDefaultStyle( styles )?.name,\n\t\t[ styles ]\n\t);\n\tconst selectOnChange = useCallback(\n\t\t( blockStyle ) => {\n\t\t\tonUpdatePreferredStyleVariations( blockName, blockStyle );\n\t\t},\n\t\t[ blockName, onUpdatePreferredStyleVariations ]\n\t);\n\n\t// Until the functionality is migrated to global styles,\n\t// only show the default style picker if a non-default style has already been selected.\n\tif ( ! preferredStyle || preferredStyle === defaultStyleName ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tonUpdatePreferredStyleVariations && (\n\t\t\t<div className=\"default-style-picker__default-switcher\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\toptions={ selectOptions }\n\t\t\t\t\tvalue={ preferredStyle || '' }\n\t\t\t\t\tlabel={ __( 'Default Style' ) }\n\t\t\t\t\tonChange={ selectOnChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAbA;AACA;AACA;;AAOA;AACA;AACA;;AAIe,SAASO,kBAAkBA,CAAE;EAAEC;AAAU,CAAC,EAAG;EAC3D,MAAM;IAAEC,cAAc;IAAEC,gCAAgC;IAAEC;EAAO,CAAC,GACjE,IAAAC,eAAS,EACNC,MAAM,IAAM;IAAA,IAAAC,qBAAA;IACb,MAAMC,QAAQ,GAAGF,MAAM,CAAEG,YAAiB,CAAC,CAACC,WAAW,CAAC,CAAC;IACzD,MAAMC,wBAAwB,GAC7BH,QAAQ,CAACI,sCAAsC;IAChD,OAAO;MACNV,cAAc,EACbS,wBAAwB,EAAEE,KAAK,GAAIZ,SAAS,CAAE;MAC/CE,gCAAgC,GAAAI,qBAAA,GAC/BI,wBAAwB,EAAEG,QAAQ,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,IAAI;MAC3CH,MAAM,EAAEE,MAAM,CAAES,aAAY,CAAC,CAACC,cAAc,CAAEf,SAAU;IACzD,CAAC;EACF,CAAC,EACD,CAAEA,SAAS,CACZ,CAAC;EACF,MAAMgB,aAAa,GAAG,IAAAC,gBAAO,EAC5B,MAAM,CACL;IAAEC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;IAAEP,KAAK,EAAE;EAAG,CAAC,EACrC,GAAGT,MAAM,CAACiB,GAAG,CAAE,CAAE;IAAEF,KAAK;IAAEG;EAAK,CAAC,MAAQ;IAAEH,KAAK;IAAEN,KAAK,EAAES;EAAK,CAAC,CAAG,CAAC,CAClE,EACD,CAAElB,MAAM,CACT,CAAC;EACD,MAAMmB,gBAAgB,GAAG,IAAAL,gBAAO,EAC/B,MAAM,IAAAM,sBAAe,EAAEpB,MAAO,CAAC,EAAEkB,IAAI,EACrC,CAAElB,MAAM,CACT,CAAC;EACD,MAAMqB,cAAc,GAAG,IAAAC,oBAAW,EAC/BC,UAAU,IAAM;IACjBxB,gCAAgC,CAAEF,SAAS,EAAE0B,UAAW,CAAC;EAC1D,CAAC,EACD,CAAE1B,SAAS,EAAEE,gCAAgC,CAC9C,CAAC;;EAED;EACA;EACA,IAAK,CAAED,cAAc,IAAIA,cAAc,KAAKqB,gBAAgB,EAAG;IAC9D,OAAO,IAAI;EACZ;EAEA,OACCpB,gCAAgC,IAC/B,IAAAyB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAwC,GACtD,IAAAF,MAAA,CAAAC,aAAA,EAACjC,WAAA,CAAAmC,aAAa;IACbC,uBAAuB;IACvBC,OAAO,EAAGhB,aAAe;IACzBJ,KAAK,EAAGX,cAAc,IAAI,EAAI;IAC9BiB,KAAK,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;IAC/BN,QAAQ,EAAGW;EAAgB,CAC3B,CACG,CACL;AAEH"}

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