Input Interaction: allow outer vertical edge to be selected (#14453)

* Input Interaction: allow outer vertical edge to be selected * Add e2e test
WordPress · Mar 20, 2019 · 348b46c · 348b46c
1 parent 2e8c96c
commit 348b46c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -220,7 +220,13 @@ class WritingFlow extends Component {
 	}
 
 	onKeyDown( event ) {
-		const { hasMultiSelection, onMultiSelect, blocks } = this.props;
+		const {
+			hasMultiSelection,
+			onMultiSelect,
+			blocks,
+			selectionBeforeEndClientId,
+			selectionAfterEndClientId,
+		} = this.props;
 
 		const { keyCode, target } = event;
 		const isUp = keyCode === UP;
@@ -281,13 +287,24 @@ class WritingFlow extends Component {
 			this.verticalRect = computeCaretRect( target );
 		}
 
-		if ( isShift && ( hasMultiSelection || (
-			this.isTabbableEdge( target, isReverse ) &&
-			isNavEdge( target, isReverse )
-		) ) ) {
-			// Shift key is down, and there is multi selection or we're at the end of the current block.
-			this.expandSelection( isReverse );
-			event.preventDefault();
+		if ( isShift ) {
+			if (
+				(
+					// Ensure that there is a target block.
+					( isReverse && selectionBeforeEndClientId ) ||
+					( ! isReverse && selectionAfterEndClientId )
+				) && (
+					hasMultiSelection || (
+						this.isTabbableEdge( target, isReverse ) &&
+						isNavEdge( target, isReverse )
+					)
+				)
+			) {
+				// Shift key is down, and there is multi selection or we're at
+				// the end of the current block.
+				this.expandSelection( isReverse );
+				event.preventDefault();
+			}
 		} else if ( hasMultiSelection ) {
 			// Moving from block multi-selection to single block selection
 			this.moveSelection( isReverse );

diff --git a/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Multi-block selection should allow selecting outer edge if there is no sibling block 1`] = `
+"<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = `
 "<!-- wp:paragraph -->
 <p>1.</p>

diff --git a/packages/e2e-tests/specs/multi-block-selection.test.js b/packages/e2e-tests/specs/multi-block-selection.test.js
@@ -180,4 +180,14 @@ describe( 'Multi-block selection', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should allow selecting outer edge if there is no sibling block', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		// This should replace the content.
+		await page.keyboard.type( '2' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );