Fix block multi selection in nested blocks (#32536)

* Only allow multi selections for blocks with the same parent * Update unit tests * Update e2e test
WordPress · Jun 14, 2021 · a8d2475 · a8d2475
1 parent 4f9ed27
commit a8d2475
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 3 deletions.
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
@@ -277,6 +277,22 @@ export function stopMultiSelect() {
  * @param {string} end   Last block of the multiselection.
  */
 export function* multiSelect( start, end ) {
+	const startBlockRootClientId = yield controls.select(
+		blockEditorStoreName,
+		'getBlockRootClientId',
+		start
+	);
+	const endBlockRootClientId = yield controls.select(
+		blockEditorStoreName,
+		'getBlockRootClientId',
+		end
+	);
+
+	// Only allow block multi-selections at the same level.
+	if ( startBlockRootClientId !== endBlockRootClientId ) {
+		return;
+	}
+
 	yield {
 		type: 'MULTI_SELECT',
 		start,

diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
@@ -147,16 +147,60 @@ describe( 'actions', () => {
 		} );
 	} );
 	describe( 'multiSelect', () => {
-		it( 'should return MULTI_SELECT action', () => {
+		it( 'should return MULTI_SELECT action if blocks have the same root client id', () => {
 			const start = 'start';
 			const end = 'end';
-			const fulfillment = multiSelect( start, end );
-			expect( fulfillment.next().value ).toEqual( {
+			const multiSelectGenerator = multiSelect( start, end );
+
+			expect( multiSelectGenerator.next().value ).toEqual(
+				controls.select(
+					blockEditorStoreName,
+					'getBlockRootClientId',
+					start
+				)
+			);
+
+			expect( multiSelectGenerator.next( 'parent' ).value ).toEqual(
+				controls.select(
+					blockEditorStoreName,
+					'getBlockRootClientId',
+					end
+				)
+			);
+
+			expect( multiSelectGenerator.next( 'parent' ).value ).toEqual( {
 				type: 'MULTI_SELECT',
 				start,
 				end,
 			} );
 		} );
+
+		it( 'should return undefined if blocks have different root client ids', () => {
+			const start = 'start';
+			const end = 'end';
+			const multiSelectGenerator = multiSelect( start, end );
+
+			expect( multiSelectGenerator.next().value ).toEqual(
+				controls.select(
+					blockEditorStoreName,
+					'getBlockRootClientId',
+					start
+				)
+			);
+
+			expect( multiSelectGenerator.next( 'parent' ).value ).toEqual(
+				controls.select(
+					blockEditorStoreName,
+					'getBlockRootClientId',
+					end
+				)
+			);
+
+			expect( multiSelectGenerator.next( 'another parent' ) ).toEqual( {
+				done: true,
+				value: undefined,
+			} );
+		} );
 	} );
 
 	describe( 'clearSelectedBlock', () => {

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -9,6 +9,7 @@ import {
 	getEditedPostContent,
 	clickBlockToolbarButton,
 	clickButton,
+	clickMenuItem,
 } from '@wordpress/e2e-test-utils';
 
 async function getSelectedFlatIndices() {
@@ -272,6 +273,19 @@ describe( 'Multi-block selection', () => {
 
 		await testNativeSelection();
 		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+
+		// Group the blocks and test that multiselection also works for nested
+		// blocks. Checks for regressions of
+		// https://github.com/WordPress/gutenberg/issues/32056
+
+		await clickBlockToolbarButton( 'Options' );
+		await clickMenuItem( 'Group' );
+		await page.click( '[data-type="core/paragraph"]' );
+		await page.keyboard.down( 'Shift' );
+		await page.click( '[data-type="core/paragraph"]:nth-child(2)' );
+		await page.keyboard.up( 'Shift' );
+		await testNativeSelection();
+		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
 	} );
 
 	it( 'should select by dragging', async () => {