diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index c98f9bc682d51c..3bdbdbab4b13bf 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -241,6 +241,18 @@ class WritingFlow extends Component { const hasModifier = isShift || event.ctrlKey || event.altKey || event.metaKey; const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge; + // When presing any key other than up or down, the initial vertical + // position must ALWAYS be reset. The vertical position is saved so it + // can be restored as well as possible on sebsequent vertical arrow key + // presses. It may not always be possible to restore the exact same + // position (such as at an empty line), so it wouldn't be good to + // compute the position right before any vertical arrow key press. + if ( ! isVertical ) { + this.verticalRect = null; + } else if ( ! this.verticalRect ) { + this.verticalRect = computeCaretRect(); + } + // This logic inside this condition needs to be checked before // the check for event.nativeEvent.defaultPrevented. // The logic handles meta+a keypress and this event is default prevented @@ -281,12 +293,6 @@ class WritingFlow extends Component { return; } - if ( ! isVertical ) { - this.verticalRect = null; - } else if ( ! this.verticalRect ) { - this.verticalRect = computeCaretRect( target ); - } - // In the case of RTL scripts, right means previous and left means next, // which is the exact reverse of LTR. const { direction } = getComputedStyle( target ); diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap index 0e41868f3cffa7..e4c846f0631d0c 100644 --- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap @@ -197,3 +197,23 @@ exports[`adding blocks should not prematurely multi-select 1`] = `

>

" `; + +exports[`adding blocks should preserve horizontal position when navigating vertically between blocks 1`] = ` +" +

abc

+ + + +

123

+" +`; + +exports[`adding blocks should remember initial vertical position 1`] = ` +" +

1x

+ + + +


2

+" +`; diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index c9ca7bf2021df7..5e870534bf010f 100644 --- a/packages/e2e-tests/specs/writing-flow.test.js +++ b/packages/e2e-tests/specs/writing-flow.test.js @@ -342,4 +342,31 @@ describe( 'adding blocks', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should preserve horizontal position when navigating vertically between blocks', async () => { + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'abc' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '23' ); + await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.type( '1' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); + + it( 'should remember initial vertical position', async () => { + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '1' ); + await page.keyboard.press( 'Enter' ); + await pressKeyWithModifier( 'shift', 'Enter' ); + await page.keyboard.type( '2' ); + await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.type( 'x' ); // Should be right after "1". + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } );