@wordpress/block-editor 9.7.0 → 9.7.1-next.d6164808d3.0

package/src/layouts/flow.js

@@ -1,122 +1,32 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
-import { getCSSRules } from '@wordpress/style-engine';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import { appendSelectors, getBlockGapCSS } from './utils';
+
+import { getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
 	name: 'default',
 	label: __( 'Flow' ),
-	inspectorControls: function DefaultLayoutInspectorControls( {
-		layout,
-		onChange,
-	} ) {
-		const { wideSize, contentSize } = layout;
-		const units = useCustomUnits( {
-			availableUnits: useSetting( 'spacing.units' ) || [
-				'%',
-				'px',
-				'em',
-				'rem',
-				'vw',
-			],
-		} );
-
-		return (
-			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<div className="block-editor-hooks__layout-controls-reset">
-					<Button
-						variant="secondary"
-						isSmall
-						disabled={ ! contentSize && ! wideSize }
-						onClick={ () =>
-							onChange( {
-								contentSize: undefined,
-								wideSize: undefined,
-								inherit: false,
-							} )
-						}
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</div>
-
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
-			</>
-		);
+	inspectorControls: function DefaultLayoutInspectorControls() {
+		return null;
 	},
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
-		layout = {},
 		style,
 		blockName,
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { contentSize, wideSize } = layout;
 		const blockGapStyleValue = getGapBoxControlValueFromStyle(
 			style?.spacing?.blockGap
 		);
@@ -128,46 +38,7 @@ export default {
 				? blockGapStyleValue?.top
 				: '';
 
-		let output =
-			!! contentSize || !! wideSize
-				? `
-					${ appendSelectors(
-						selector,
-						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
-					) } {
-						max-width: ${ contentSize ?? wideSize };
-						margin-left: auto !important;
-						margin-right: auto !important;
-					}
-					${ appendSelectors( selector, '> .alignwide' ) }  {
-						max-width: ${ wideSize ?? contentSize };
-					}
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						max-width: none;
-					}
-				`
-				: '';
-
-		// If there is custom padding, add negative margins for alignfull blocks.
-		if ( style?.spacing?.padding ) {
-			// The style object might be storing a preset so we need to make sure we get a usable value.
-			const paddingValues = getCSSRules( style );
-			paddingValues.forEach( ( rule ) => {
-				if ( rule.key === 'paddingRight' ) {
-					output += `
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
-					}
-					`;
-				} else if ( rule.key === 'paddingLeft' ) {
-					output += `
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
-					}
-					`;
-				}
-			} );
-		}
+		let output = '';
 
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
 		if ( hasBlockGapSupport && blockGapValue ) {
@@ -194,7 +65,6 @@ export default {
 				info: alignmentInfo[ alignment ],
 			} ) );
 		}
-		const { contentSize, wideSize } = layout;
 
 		const alignments = [
 			{ name: 'left' },
@@ -202,45 +72,8 @@ export default {
 			{ name: 'right' },
 		];
 
-		if ( contentSize ) {
-			alignments.unshift( { name: 'full' } );
-		}
-
-		if ( wideSize ) {
-			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
-		}
-
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;
 	},
 };
-
-/**
- * Helper method to assign contextual info to clarify
- * alignment settings.
- *
- * Besides checking if `contentSize` and `wideSize` have a
- * value, we now show this information only if their values
- * are not a `css var`. This needs to change when parsing
- * css variables land.
- *
- * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
- *
- * @param {Object} layout The layout object.
- * @return {Object} An object with contextual info per alignment.
- */
-function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
-	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
-	}
-	if ( sizeRegex.test( wideSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
-	}
-	return alignmentInfo;
-}

package/src/layouts/index.js

@@ -3,8 +3,9 @@
  */
 import flex from './flex';
 import flow from './flow';
+import constrained from './constrained';
 
-const layoutTypes = [ flow, flex ];
+const layoutTypes = [ flow, flex, constrained ];
 
 /**
  * Retrieves a layout type by name.

package/src/layouts/test/constrained.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import constrained from '../constrained';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return an empty string if no non-default params are provided', () => {
+		const expected = '';
+
+		const result = constrained.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );

package/src/layouts/utils.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Utility to generate the proper CSS selector for layout styles.
  *
@@ -62,3 +67,32 @@ export function getBlockGapCSS(
 	}
 	return output;
 }
+
+/**
+ * Helper method to assign contextual info to clarify
+ * alignment settings.
+ *
+ * Besides checking if `contentSize` and `wideSize` have a
+ * value, we now show this information only if their values
+ * are not a `css var`. This needs to change when parsing
+ * css variables land.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
+ *
+ * @param {Object} layout The layout object.
+ * @return {Object} An object with contextual info per alignment.
+ */
+export function getAlignmentsInfo( layout ) {
+	const { contentSize, wideSize } = layout;
+	const alignmentInfo = {};
+	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	if ( sizeRegex.test( contentSize ) ) {
+		// translators: %s: container size (i.e. 600px etc)
+		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
+	}
+	if ( sizeRegex.test( wideSize ) ) {
+		// translators: %s: container size (i.e. 600px etc)
+		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
+	}
+	return alignmentInfo;
+}

package/src/store/actions.js

@@ -1002,7 +1002,7 @@ export const __unstableExpandSelection =
  */
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
-	( { select, dispatch } ) => {
+	( { registry, select, dispatch } ) => {
 		const blocks = [ firstBlockClientId, secondBlockClientId ];
 		dispatch( { type: 'MERGE_BLOCKS', blocks } );
 
@@ -1010,13 +1010,41 @@ export const mergeBlocks =
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		// Only focus the previous block if it's not mergeable.
+		if ( ! blockAType ) return;
+
+		const blockB = select.getBlock( clientIdB );
+
 		if ( blockAType && ! blockAType.merge ) {
-			dispatch.selectBlock( blockA.clientId );
+			// If there's no merge function defined, attempt merging inner
+			// blocks.
+			const blocksWithTheSameType = switchToBlockType(
+				blockB,
+				blockAType.name
+			);
+			// Only focus the previous block if it's not mergeable.
+			if ( blocksWithTheSameType?.length !== 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			const [ blockWithSameType ] = blocksWithTheSameType;
+			if ( blockWithSameType.innerBlocks.length < 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			registry.batch( () => {
+				dispatch.insertBlocks(
+					blockWithSameType.innerBlocks,
+					undefined,
+					clientIdA
+				);
+				dispatch.removeBlock( clientIdB );
+				dispatch.selectBlock(
+					blockWithSameType.innerBlocks[ 0 ].clientId
+				);
+			} );
 			return;
 		}
 
-		const blockB = select.getBlock( clientIdB );
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = select.getSelectionStart();
 		const selectedBlockType =

package/src/store/selectors.js

@@ -10,7 +10,6 @@ import {
 	some,
 	find,
 	filter,
-	mapKeys,
 	orderBy,
 } from 'lodash';
 import createSelector from 'rememo';
@@ -2078,9 +2077,11 @@ export const getBlockTransformItems = createSelector(
 			)
 			.map( buildBlockTypeTransformItem );
 
-		const itemsByName = mapKeys(
-			blockTypeTransformItems,
-			( { name } ) => name
+		const itemsByName = Object.fromEntries(
+			Object.entries( blockTypeTransformItems ).map( ( [ , value ] ) => [
+				value.name,
+				value,
+			] )
 		);
 
 		// Consider unwraping the highest priority.

package/src/style.scss

@@ -63,5 +63,6 @@
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/preview-options/style.scss";
+@import "./components/spacing-sizes-control/style.scss";
 
 @include wordpress-admin-schemes();

package/build/components/block-settings-menu/block-edit-visually-button.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BlockEditVisuallyButton;
-
-var _element = require("@wordpress/element");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _blocks = require("@wordpress/blocks");
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _data = require("@wordpress/data");
-
-var _store = require("../../store");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function BlockEditVisuallyButton(_ref) {
-  let {
-    clientIds,
-    ...props
-  } = _ref;
-  const {
-    block,
-    shouldRender
-  } = (0, _data.useSelect)(select => {
-    const firstBlockClientId = clientIds[0];
-    const {
-      isBlockMultiSelected,
-      getBlockMode,
-      getBlock
-    } = select(_store.store);
-    const isSingleSelected = !isBlockMultiSelected(firstBlockClientId);
-    const isHtmlMode = getBlockMode(firstBlockClientId) === 'html';
-    return {
-      block: getBlock(firstBlockClientId),
-      shouldRender: isSingleSelected && isHtmlMode
-    };
-  }, [clientIds[0]]);
-  const {
-    replaceBlocks
-  } = (0, _data.useDispatch)(_store.store);
-  const onClick = (0, _element.useCallback)(() => {
-    replaceBlocks(block.clientId, (0, _blocks.rawHandler)({
-      HTML: (0, _blocks.getBlockContent)(block)
-    }));
-  }, [block]);
-
-  if (!shouldRender) {
-    return null;
-  }
-
-  return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, (0, _extends2.default)({
-    onClick: onClick
-  }, props), (0, _i18n.__)('Edit visually')));
-}
-//# sourceMappingURL=block-edit-visually-button.js.map

package/build/components/block-settings-menu/block-edit-visually-button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-settings-menu/block-edit-visually-button.js"],"names":["BlockEditVisuallyButton","clientIds","props","block","shouldRender","select","firstBlockClientId","isBlockMultiSelected","getBlockMode","getBlock","blockEditorStore","isSingleSelected","isHtmlMode","replaceBlocks","onClick","clientId","HTML"],"mappings":";;;;;;;;;AAOA;;;;AAJA;;AACA;;AACA;;AACA;;AAMA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;AAGe,SAASA,uBAAT,OAA4D;AAAA,MAA1B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA0B;AAC1E,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA0B,qBAC7BC,MAAF,IAAc;AACb,UAAMC,kBAAkB,GAAGL,SAAS,CAAE,CAAF,CAApC;AACA,UAAM;AAAEM,MAAAA,oBAAF;AAAwBC,MAAAA,YAAxB;AAAsCC,MAAAA;AAAtC,QACLJ,MAAM,CAAEK,YAAF,CADP;AAEA,UAAMC,gBAAgB,GACrB,CAAEJ,oBAAoB,CAAED,kBAAF,CADvB;AAEA,UAAMM,UAAU,GAAGJ,YAAY,CAAEF,kBAAF,CAAZ,KAAuC,MAA1D;AAEA,WAAO;AACNH,MAAAA,KAAK,EAAEM,QAAQ,CAAEH,kBAAF,CADT;AAENF,MAAAA,YAAY,EAAEO,gBAAgB,IAAIC;AAF5B,KAAP;AAIA,GAb8B,EAc/B,CAAEX,SAAS,CAAE,CAAF,CAAX,CAd+B,CAAhC;AAiBA,QAAM;AAAEY,IAAAA;AAAF,MAAoB,uBAAaH,YAAb,CAA1B;AACA,QAAMI,OAAO,GAAG,0BAAa,MAAM;AAClCD,IAAAA,aAAa,CACZV,KAAK,CAACY,QADM,EAEZ,wBAAY;AAAEC,MAAAA,IAAI,EAAE,6BAAiBb,KAAjB;AAAR,KAAZ,CAFY,CAAb;AAIA,GALe,EAKb,CAAEA,KAAF,CALa,CAAhB;;AAOA,MAAK,CAAEC,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,wBAAD,QACC,4BAAC,yBAAD;AAAe,IAAA,OAAO,EAAGU;AAAzB,KAAwCZ,KAAxC,GACG,cAAI,eAAJ,CADH,CADD,CADD;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { rawHandler, getBlockContent } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nexport default function BlockEditVisuallyButton( { clientIds, ...props } ) {\n\tconst { block, shouldRender } = useSelect(\n\t\t( select ) => {\n\t\t\tconst firstBlockClientId = clientIds[ 0 ];\n\t\t\tconst { isBlockMultiSelected, getBlockMode, getBlock } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst isSingleSelected =\n\t\t\t\t! isBlockMultiSelected( firstBlockClientId );\n\t\t\tconst isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';\n\n\t\t\treturn {\n\t\t\t\tblock: getBlock( firstBlockClientId ),\n\t\t\t\tshouldRender: isSingleSelected && isHtmlMode,\n\t\t\t};\n\t\t},\n\t\t[ clientIds[ 0 ] ]\n\t);\n\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst onClick = useCallback( () => {\n\t\treplaceBlocks(\n\t\t\tblock.clientId,\n\t\t\trawHandler( { HTML: getBlockContent( block ) } )\n\t\t);\n\t}, [ block ] );\n\n\tif ( ! shouldRender ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton onClick={ onClick } { ...props }>\n\t\t\t\t{ __( 'Edit visually' ) }\n\t\t\t</ToolbarButton>\n\t\t</ToolbarGroup>\n\t);\n}\n"]}

package/build-module/components/block-settings-menu/block-edit-visually-button.js

@@ -1,56 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { rawHandler, getBlockContent } from '@wordpress/blocks';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-
-import { store as blockEditorStore } from '../../store';
-export default function BlockEditVisuallyButton(_ref) {
-  let {
-    clientIds,
-    ...props
-  } = _ref;
-  const {
-    block,
-    shouldRender
-  } = useSelect(select => {
-    const firstBlockClientId = clientIds[0];
-    const {
-      isBlockMultiSelected,
-      getBlockMode,
-      getBlock
-    } = select(blockEditorStore);
-    const isSingleSelected = !isBlockMultiSelected(firstBlockClientId);
-    const isHtmlMode = getBlockMode(firstBlockClientId) === 'html';
-    return {
-      block: getBlock(firstBlockClientId),
-      shouldRender: isSingleSelected && isHtmlMode
-    };
-  }, [clientIds[0]]);
-  const {
-    replaceBlocks
-  } = useDispatch(blockEditorStore);
-  const onClick = useCallback(() => {
-    replaceBlocks(block.clientId, rawHandler({
-      HTML: getBlockContent(block)
-    }));
-  }, [block]);
-
-  if (!shouldRender) {
-    return null;
-  }
-
-  return createElement(ToolbarGroup, null, createElement(ToolbarButton, _extends({
-    onClick: onClick
-  }, props), __('Edit visually')));
-}
-//# sourceMappingURL=block-edit-visually-button.js.map

package/build-module/components/block-settings-menu/block-edit-visually-button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-settings-menu/block-edit-visually-button.js"],"names":["rawHandler","getBlockContent","ToolbarButton","ToolbarGroup","__","useSelect","useDispatch","useCallback","store","blockEditorStore","BlockEditVisuallyButton","clientIds","props","block","shouldRender","select","firstBlockClientId","isBlockMultiSelected","getBlockMode","getBlock","isSingleSelected","isHtmlMode","replaceBlocks","onClick","clientId","HTML"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,eAArB,QAA4C,mBAA5C;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,uBAA5C;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,WAAT,QAA4B,oBAA5B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,uBAAT,OAA4D;AAAA,MAA1B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA0B;AAC1E,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA0BT,SAAS,CACtCU,MAAF,IAAc;AACb,UAAMC,kBAAkB,GAAGL,SAAS,CAAE,CAAF,CAApC;AACA,UAAM;AAAEM,MAAAA,oBAAF;AAAwBC,MAAAA,YAAxB;AAAsCC,MAAAA;AAAtC,QACLJ,MAAM,CAAEN,gBAAF,CADP;AAEA,UAAMW,gBAAgB,GACrB,CAAEH,oBAAoB,CAAED,kBAAF,CADvB;AAEA,UAAMK,UAAU,GAAGH,YAAY,CAAEF,kBAAF,CAAZ,KAAuC,MAA1D;AAEA,WAAO;AACNH,MAAAA,KAAK,EAAEM,QAAQ,CAAEH,kBAAF,CADT;AAENF,MAAAA,YAAY,EAAEM,gBAAgB,IAAIC;AAF5B,KAAP;AAIA,GAbuC,EAcxC,CAAEV,SAAS,CAAE,CAAF,CAAX,CAdwC,CAAzC;AAiBA,QAAM;AAAEW,IAAAA;AAAF,MAAoBhB,WAAW,CAAEG,gBAAF,CAArC;AACA,QAAMc,OAAO,GAAGhB,WAAW,CAAE,MAAM;AAClCe,IAAAA,aAAa,CACZT,KAAK,CAACW,QADM,EAEZxB,UAAU,CAAE;AAAEyB,MAAAA,IAAI,EAAExB,eAAe,CAAEY,KAAF;AAAvB,KAAF,CAFE,CAAb;AAIA,GAL0B,EAKxB,CAAEA,KAAF,CALwB,CAA3B;;AAOA,MAAK,CAAEC,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,YAAD,QACC,cAAC,aAAD;AAAe,IAAA,OAAO,EAAGS;AAAzB,KAAwCX,KAAxC,GACGR,EAAE,CAAE,eAAF,CADL,CADD,CADD;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { rawHandler, getBlockContent } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nexport default function BlockEditVisuallyButton( { clientIds, ...props } ) {\n\tconst { block, shouldRender } = useSelect(\n\t\t( select ) => {\n\t\t\tconst firstBlockClientId = clientIds[ 0 ];\n\t\t\tconst { isBlockMultiSelected, getBlockMode, getBlock } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst isSingleSelected =\n\t\t\t\t! isBlockMultiSelected( firstBlockClientId );\n\t\t\tconst isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';\n\n\t\t\treturn {\n\t\t\t\tblock: getBlock( firstBlockClientId ),\n\t\t\t\tshouldRender: isSingleSelected && isHtmlMode,\n\t\t\t};\n\t\t},\n\t\t[ clientIds[ 0 ] ]\n\t);\n\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst onClick = useCallback( () => {\n\t\treplaceBlocks(\n\t\t\tblock.clientId,\n\t\t\trawHandler( { HTML: getBlockContent( block ) } )\n\t\t);\n\t}, [ block ] );\n\n\tif ( ! shouldRender ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton onClick={ onClick } { ...props }>\n\t\t\t\t{ __( 'Edit visually' ) }\n\t\t\t</ToolbarButton>\n\t\t</ToolbarGroup>\n\t);\n}\n"]}

package/src/components/block-settings-menu/block-edit-visually-button.js

@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { rawHandler, getBlockContent } from '@wordpress/blocks';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export default function BlockEditVisuallyButton( { clientIds, ...props } ) {
-	const { block, shouldRender } = useSelect(
-		( select ) => {
-			const firstBlockClientId = clientIds[ 0 ];
-			const { isBlockMultiSelected, getBlockMode, getBlock } =
-				select( blockEditorStore );
-			const isSingleSelected =
-				! isBlockMultiSelected( firstBlockClientId );
-			const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';
-
-			return {
-				block: getBlock( firstBlockClientId ),
-				shouldRender: isSingleSelected && isHtmlMode,
-			};
-		},
-		[ clientIds[ 0 ] ]
-	);
-
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const onClick = useCallback( () => {
-		replaceBlocks(
-			block.clientId,
-			rawHandler( { HTML: getBlockContent( block ) } )
-		);
-	}, [ block ] );
-
-	if ( ! shouldRender ) {
-		return null;
-	}
-
-	return (
-		<ToolbarGroup>
-			<ToolbarButton onClick={ onClick } { ...props }>
-				{ __( 'Edit visually' ) }
-			</ToolbarButton>
-		</ToolbarGroup>
-	);
-}