Transforms: add group unwrap (#42685)

WordPress · Jul 29, 2022 · ad50ba2 · ad50ba2
1 parent 118876b
commit ad50ba2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/packages/block-library/src/group/transforms.js b/packages/block-library/src/group/transforms.js
@@ -47,6 +47,13 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) => innerBlocks,
+		},
+	],
 };
 
 export default transforms;
diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js
@@ -210,6 +210,7 @@ const isPossibleTransformForSource = ( transform, direction, blocks ) => {
 	// a Grouping block.
 	if (
 		! isMultiBlock &&
+		direction === 'from' &&
 		isContainerGroupBlock( sourceBlock.name ) &&
 		isContainerGroupBlock( transform.blockName )
 	) {
@@ -490,8 +491,7 @@ export function switchToBlockType( blocks, name ) {
 			transformationsTo,
 			( t ) =>
 				t.type === 'block' &&
-				( isWildcardBlockTransform( t ) ||
-					t.blocks.indexOf( name ) !== -1 ) &&
+				t.blocks.indexOf( name ) !== -1 &&
 				( ! isMultiBlock || t.isMultiBlock ) &&
 				maybeCheckTransformIsMatch( t, blocksArray )
 		) ||
@@ -555,9 +555,16 @@ export function switchToBlockType( blocks, name ) {
 		return null;
 	}
 
-	const hasSwitchedBlock =
-		name === '*' ||
-		some( transformationResults, ( result ) => result.name === name );
+	// When unwrapping blocks (`switchToBlockType( wrapperblocks, '*' )`), do
+	// not run filters on the unwrapped blocks. They shoud remain as they are.
+	if ( name === '*' ) {
+		return transformationResults;
+	}
+
+	const hasSwitchedBlock = some(
+		transformationResults,
+		( result ) => result.name === name
+	);
 
 	// Ensure that at least one block object returned by the transformation has
 	// the expected "destination" block type.

diff --git a/packages/e2e-tests/specs/editor/blocks/group.test.js b/packages/e2e-tests/specs/editor/blocks/group.test.js
@@ -6,6 +6,8 @@ import {
 	searchForBlock,
 	getEditedPostContent,
 	createNewPost,
+	pressKeyWithModifier,
+	transformBlockTo,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Group', () => {
@@ -40,4 +42,37 @@ describe( 'Group', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'can wrap in group and unwrap group', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await transformBlockTo( 'Group' );
+
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:group -->
+			<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+			<p>1</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>2</p>
+			<!-- /wp:paragraph --></div>
+			<!-- /wp:group -->"
+		` );
+
+		await transformBlockTo( 'Unwrap' );
+
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:paragraph -->
+			<p>1</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>2</p>
+			<!-- /wp:paragraph -->"
+		` );
+	} );
 } );