[Tiny PR] Multi select: fix nested blocks (#18912)

* Multi select: fix nested blocks * Add e2e test
WordPress · Dec 4, 2019 · 3a8dcb6 · 3a8dcb6
1 parent 6b1fd3f
commit 3a8dcb6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -71,6 +71,7 @@ function BlockListBlock( {
 	clientId,
 	rootClientId,
 	isSelected,
+	isMultiSelected,
 	isPartOfMultiSelection,
 	isFirstMultiSelected,
 	isTypingWithinBlock,
@@ -466,7 +467,7 @@ function BlockListBlock( {
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': shouldAppearSelected,
 			'is-navigate-mode': isNavigationMode,
-			'is-multi-selected': isPartOfMultiSelection,
+			'is-multi-selected': isMultiSelected,
 			'is-hovered': shouldAppearHovered,
 			'is-reusable': isReusableBlock( blockType ),
 			'is-dragging': isDragging,
@@ -688,6 +689,7 @@ const applyWithSelect = withSelect(
 		const { name, attributes, isValid } = block || {};
 
 		return {
+			isMultiSelected: isBlockMultiSelected( clientId ),
 			isPartOfMultiSelection:
 				isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
 			isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -183,6 +183,11 @@ class BlockList extends Component {
 
 	setSelection() {
 		const selection = window.getSelection();
+		const {
+			onStopMultiSelect,
+			onMultiSelect,
+			getBlockParents,
+		} = this.props;
 
 		// If no selection is found, end multi selection.
 		if ( ! selection.rangeCount || selection.isCollapsed ) {
@@ -204,12 +209,16 @@ class BlockList extends Component {
 		// If the final selection doesn't leave the block, there is no multi
 		// selection.
 		if ( this.startClientId === clientId ) {
-			this.props.onStopMultiSelect();
+			onStopMultiSelect();
 			return;
 		}
 
-		this.props.onMultiSelect( this.startClientId, clientId );
-		this.props.onStopMultiSelect();
+		const startPath = [ ...getBlockParents( this.startClientId ), this.startClientId ];
+		const endPath = [ ...getBlockParents( clientId ), clientId ];
+		const depth = Math.min( startPath.length, endPath.length ) - 1;
+
+		onMultiSelect( startPath[ depth ], endPath[ depth ] );
+		onStopMultiSelect();
 	}
 
 	render() {
@@ -291,6 +300,7 @@ export default compose( [
 			hasMultiSelection,
 			getGlobalBlockCount,
 			isTyping,
+			getBlockParents,
 		} = select( 'core/block-editor' );
 
 		const { rootClientId } = ownProps;
@@ -308,6 +318,7 @@ export default compose( [
 				! isTyping() &&
 				getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD
 			),
+			getBlockParents,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

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
@@ -293,4 +293,39 @@ describe( 'Multi-block selection', () => {
 		await testNativeSelection();
 		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
 	} );
+
+	it( 'should select by dragging into nested block', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '/cover' );
+		await page.keyboard.press( 'Enter' );
+		await page.click( '.components-circular-option-picker__option' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		const [ coord1, coord2 ] = await page.evaluate( () => {
+			const elements = Array.from( document.querySelectorAll( '.wp-block-paragraph' ) );
+			const rect1 = elements[ 0 ].getBoundingClientRect();
+			const rect2 = elements[ 1 ].getBoundingClientRect();
+			return [
+				{
+					x: rect1.x + ( rect1.width / 2 ),
+					y: rect1.y + ( rect1.height / 2 ),
+				},
+				{
+					x: rect2.x + ( rect2.width / 2 ),
+					y: rect2.y + ( rect2.height / 2 ),
+				},
+			];
+		} );
+
+		await page.mouse.move( coord1.x, coord1.y );
+		await page.mouse.down();
+		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
+		await page.mouse.up();
+
+		await testNativeSelection();
+		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+	} );
 } );