[Block Editor]: Fix selection by holding shift key for nested blocks (#…

…35668)

* [Block Editor]: Fix selection by holding shift key for nested blocks

* add e2e tests

packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js

@@ -165,15 +165,29 @@ export function useMultiSelection( clientId ) {
 
 				if ( event.shiftKey ) {
 					const blockSelectionStart = getBlockSelectionStart();
-					// Handle the case where we select a single block by
-					// holding the `shiftKey` and don't mark this action
-					// as multiselection.
+					// By checking `blockSelectionStart` to be set, we handle the
+					// case where we select a single block. We also have to check
+					// the selectionEnd (clientId) not to be included in the
+					// `blockSelectionStart`'s parents because the click event is
+					// propagated.
+					const startParents = getBlockParents( blockSelectionStart );
 					if (
 						blockSelectionStart &&
-						blockSelectionStart !== clientId
+						blockSelectionStart !== clientId &&
+						! startParents?.includes( clientId )
 					) {
 						toggleRichText( node, false );
-						multiSelect( blockSelectionStart, clientId );
+						const startPath = [
+							...startParents,
+							blockSelectionStart,
+						];
+						const endPath = [
+							...getBlockParents( clientId ),
+							clientId,
+						];
+						const depth =
+							Math.min( startPath.length, endPath.length ) - 1;
+						multiSelect( startPath[ depth ], endPath[ depth ] );
 						event.preventDefault();
 					}
 				} else if ( hasMultiSelection() ) {

packages/e2e-tests/specs/editor/various/multi-block-selection.test.js

@@ -11,6 +11,7 @@ import {
 	clickButton,
 	clickMenuItem,
 	saveDraft,
+	transformBlockTo,
 } from '@wordpress/e2e-test-utils';
 
 async function getSelectedFlatIndices() {
@@ -311,6 +312,58 @@ describe( 'Multi-block selection', () => {
 	` );
 	} );
 
+	it( 'should properly select multiple blocks if selected nested blocks belong to different parent', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'first' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'group' );
+		// Multiselect via keyboard.
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.up( 'Shift' );
+		await transformBlockTo( 'Group' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'second' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'group' );
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.up( 'Shift' );
+		await transformBlockTo( 'Group' );
+		await page.keyboard.press( 'ArrowDown' );
+
+		// Click the first paragraph in the first Group block while pressing `shift` key.
+		const firstParagraph = await page.waitForXPath( "//p[text()='first']" );
+		await page.keyboard.down( 'Shift' );
+		await firstParagraph.click();
+		await page.keyboard.up( 'Shift' );
+
+		await page.waitForSelector( '.is-multi-selected' );
+		const selectedBlocks = await page.$$( '.is-multi-selected' );
+		expect( selectedBlocks ).toHaveLength( 2 );
+	} );
+	it( 'should properly select part of nested rich text block while holding shift', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'rich text in group' );
+		await transformBlockTo( 'Group' );
+		await page.keyboard.press( 'ArrowDown' );
+
+		await page.keyboard.down( 'Shift' );
+		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const { x, y } = await paragraph.boundingBox();
+		await page.mouse.move( x + 20, y );
+		await page.mouse.down();
+		await page.keyboard.up( 'Shift' );
+		await page.keyboard.type( 'hi' );
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:group -->
+		<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+		<p>hih text in group</p>
+		<!-- /wp:paragraph --></div>
+		<!-- /wp:group -->"
+	` );
+	} );
+
 	it( 'should select by dragging', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1' );