[Block Conversion]: Show group option in Group blocks (#39094)

* [Block Conversion]: Show `group` option in `Group` blocks * add e2e test
WordPress · Mar 1, 2022 · 1168512 · 1168512
1 parent 98327cd
commit 1168512
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 60 deletions.
diff --git a/...block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js b/...block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
@@ -64,12 +64,7 @@ export default function useConvertToGroupButtonProps() {
 		// Do we have
 		// 1. Grouping block available to be inserted?
 		// 2. One or more blocks selected
-		// (we allow single Blocks to become groups unless
-		// they are a soltiary group block themselves)
-		const _isGroupable =
-			groupingBlockAvailable &&
-			_blocksSelection.length &&
-			! isSingleGroupingBlock;
+		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
 
 		// Do we have a single Group Block selected and does that group have inner blocks?
 		const _isUngroupable =

diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { group as icon } from '@wordpress/icons';
 
 /**
@@ -12,6 +11,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import transforms from './transforms';
 import variations from './variations';
 
 const { name } = metadata;
@@ -80,59 +80,7 @@ export const settings = {
 			},
 		],
 	},
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				isMultiBlock: true,
-				blocks: [ '*' ],
-				__experimentalConvert( blocks ) {
-					// Avoid transforming a single `core/group` Block
-					if (
-						blocks.length === 1 &&
-						blocks[ 0 ].name === 'core/group'
-					) {
-						return;
-					}
-
-					const alignments = [ 'wide', 'full' ];
-
-					// Determine the widest setting of all the blocks to be grouped
-					const widestAlignment = blocks.reduce(
-						( accumulator, block ) => {
-							const { align } = block.attributes;
-							return alignments.indexOf( align ) >
-								alignments.indexOf( accumulator )
-								? align
-								: accumulator;
-						},
-						undefined
-					);
-
-					// Clone the Blocks to be Grouped
-					// Failing to create new block references causes the original blocks
-					// to be replaced in the switchToBlockType call thereby meaning they
-					// are removed both from their original location and within the
-					// new group block.
-					const groupInnerBlocks = blocks.map( ( block ) => {
-						return createBlock(
-							block.name,
-							block.attributes,
-							block.innerBlocks
-						);
-					} );
-
-					return createBlock(
-						'core/group',
-						{
-							align: widestAlignment,
-						},
-						groupInnerBlocks
-					);
-				},
-			},
-		],
-	},
+	transforms,
 	edit,
 	save,
 	deprecated,

diff --git a/packages/block-library/src/group/transforms.js b/packages/block-library/src/group/transforms.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			__experimentalConvert( blocks ) {
+				const alignments = [ 'wide', 'full' ];
+
+				// Determine the widest setting of all the blocks to be grouped
+				const widestAlignment = blocks.reduce(
+					( accumulator, block ) => {
+						const { align } = block.attributes;
+						return alignments.indexOf( align ) >
+							alignments.indexOf( accumulator )
+							? align
+							: accumulator;
+					},
+					undefined
+				);
+
+				// Clone the Blocks to be Grouped
+				// Failing to create new block references causes the original blocks
+				// to be replaced in the switchToBlockType call thereby meaning they
+				// are removed both from their original location and within the
+				// new group block.
+				const groupInnerBlocks = blocks.map( ( block ) => {
+					return createBlock(
+						block.name,
+						block.attributes,
+						block.innerBlocks
+					);
+				} );
+
+				return createBlock(
+					'core/group',
+					{
+						align: widestAlignment,
+					},
+					groupInnerBlocks
+				);
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
@@ -140,6 +140,23 @@ describe( 'Block Grouping', () => {
 			// Make sure the paragraph in reusable block exists.
 			expect( await getParagraphText() ).toEqual( paragraphText );
 		} );
+		it( 'should group another Group block via options toolbar', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( '1' );
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Group' );
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Group' );
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:group -->
+			<div class=\\"wp-block-group\\"><!-- wp:group -->
+			<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+			<p>1</p>
+			<!-- /wp:paragraph --></div>
+			<!-- /wp:group --></div>
+			<!-- /wp:group -->"
+		` );
+		} );
 	} );
 
 	describe( 'Grouping Block availability', () => {