diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index 92b97badc11c3..d03b11d0a84f7 100644 --- 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 index dad6ac487081b..6986ffc94968b 100644 --- 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`] = ` +" +

2

+" +`; + exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = ` "

1.

diff --git a/packages/e2e-tests/specs/multi-block-selection.test.js b/packages/e2e-tests/specs/multi-block-selection.test.js index b65a7afa49b64..76ea211367660 100644 --- 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(); + } ); } );