Position caret at end of previous block for any type of block removal (…

…WordPress#8961)

* Position caret at end of previous block for any type of block removal

* Remove duplicate selectBlock dispatch

- See REMOVE_BLOCKS effect in editor store's effect.js file. Final action when
removing blocks is to handle selection of the previous block

* Add e2e tests for various ways to delete blocks

* Fix xpath selector for clicking on block settings menu item in e2e tests

* Remove unecessary param

* Use explicit key combination in test instead of predefining in utils

* Move clickOnBlockSettingsMenuItem function into the test file

* Remove duplicate snapshot assertion

* Improvements to clickBlockAppender utils method

- Replace `expect( page ).toClick` with `page.click`. The former won't show
errors when used in a before/after. The latter also seems to better handle
latency issues, the former was failing when used too soon after a page load.
- Add waitForSelector to ensure the block appender is render before attempts
to click it.

* Ensure tests only have a single `it` statement per `describe`

* Remove waitForSelector since puppeteer does this implicitly as the first step of a call to page.click

* Update shortcut for remove block in block-deletion test

packages/editor/src/components/block-list/block.js

@@ -324,12 +324,8 @@ export class BlockListBlock extends Component {
 			case BACKSPACE:
 			case DELETE:
 				// Remove block on backspace.
-				const { clientId, onRemove, previousBlockClientId, onSelect } = this.props;
+				const { clientId, onRemove } = this.props;
 				onRemove( clientId );
-
-				if ( previousBlockClientId ) {
-					onSelect( previousBlockClientId, -1 );
-				}
 				event.preventDefault();
 				break;
 		}

packages/editor/src/store/effects.js

@@ -227,7 +227,7 @@ export default {
 		// Dispatch select block action if the currently selected block
 		// is not already the block we want to be selected.
 		if ( blockClientIdToSelect !== currentSelectedBlock ) {
-			dispatch( selectBlock( blockClientIdToSelect ) );
+			dispatch( selectBlock( blockClientIdToSelect, -1 ) );
 		}
 	},
 };

test/e2e/specs/__snapshots__/block-deletion.test.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph - caret was here</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 1`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 2`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph - caret was here</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph - caret was here</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph - caret was here</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting third third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block deletion - deleting third third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+"<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph - caret was here</p>
+<!-- /wp:paragraph -->"
+`;

test/e2e/specs/block-deletion.test.js

@@ -0,0 +1,104 @@
+/**
+ * Internal dependencies
+ */
+import {
+	clickBlockAppender,
+	getEditedPostContent,
+	newPost,
+	pressWithModifier,
+	META_KEY,
+} from '../support/utils';
+
+const addThreeParagraphsToNewPost = async () => {
+	await newPost();
+
+	// Add demo content
+	await clickBlockAppender();
+	await page.keyboard.type( 'First paragraph' );
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type( 'Second paragraph' );
+	await page.keyboard.press( 'Enter' );
+};
+
+const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
+	await expect( page ).toClick( '.editor-block-settings-menu__toggle' );
+	const itemButton = ( await page.$x( `//*[contains(@class, "editor-block-settings-menu__popover")]//button[contains(text(), '${ buttonLabel }')]` ) )[ 0 ];
+	await itemButton.click();
+};
+
+describe( 'block deletion -', () => {
+	beforeEach( addThreeParagraphsToNewPost );
+
+	describe( 'deleting the third block using the Remove Block menu item', () => {
+		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
+			await clickOnBlockSettingsMenuItem( 'Remove Block' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+
+			// Type additional text and assert that caret position is correct by comparing to snapshot.
+			await page.keyboard.type( ' - caret was here' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'deleting the third block using the Remove Block shortcut', () => {
+		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
+			await pressWithModifier( [ 'Shift', META_KEY ], 'x' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+
+			// Type additional text and assert that caret position is correct by comparing to snapshot.
+			await page.keyboard.type( ' - caret was here' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'deleting the third block using backspace in an empty block', () => {
+		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
+			await page.keyboard.press( 'Backspace' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+
+			// Type additional text and assert that caret position is correct by comparing to snapshot.
+			await page.keyboard.type( ' - caret was here' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'deleting the third block using backspace with block wrapper selection', () => {
+		it( 'results in three remaining blocks and positions the caret at the end of the third block', async () => {
+			// Add an image block since it's easier to click the wrapper on non-textual blocks.
+			await page.keyboard.type( '/image' );
+			await page.keyboard.press( 'Enter' );
+
+			// Click on something that's not a block.
+			await page.click( '.editor-post-title' );
+
+			// Click on the third (image) block so that its wrapper is selected and backspace to delete it.
+			await page.click( '.editor-block-list__block:nth-child(3)' );
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+
+			// Type additional text and assert that caret position is correct by comparing to snapshot.
+			await page.keyboard.type( ' - caret was here' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'deleting third third and fourth blocks using backspace with multi-block selection', () => {
+		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
+			// Add a third paragraph for this test.
+			await page.keyboard.type( 'Third paragraph' );
+			await page.keyboard.press( 'Enter' );
+
+			// Press the up arrow once to select the third and fourth blocks.
+			await pressWithModifier( 'Shift', 'ArrowUp' );
+
+			// Now that the block wrapper is selected, press backspace to delete it.
+			await page.keyboard.press( 'Backspace' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+
+			// Type additional text and assert that caret position is correct by comparing to snapshot.
+			await page.keyboard.type( ' - caret was here' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
+} );

test/e2e/support/utils.js

@@ -206,7 +206,7 @@ export async function ensureSidebarOpened() {
  * Clicks the default block appender.
  */
 export async function clickBlockAppender() {
-	await expect( page ).toClick( '.editor-default-block-appender__content' );
+	await page.click( '.editor-default-block-appender__content' );
 	await waitForRichTextInitialization();
 }
 
@@ -262,7 +262,7 @@ export async function pressWithModifier( modifiers, key ) {
 }
 
 /**
- * Clicks on More Menu item, searchers for the button with the text provided and clicks it.
+ * Clicks on More Menu item, searches for the button with the text provided and clicks it.
  *
  * @param {string} buttonLabel The label to search the button for.
  */