diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index 4d32a8069dc125..e0509e56ff0a6b 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/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; } diff --git a/packages/editor/src/store/effects.js b/packages/editor/src/store/effects.js index 8137c2a1a3b226..db0dad59063bda 100644 --- a/packages/editor/src/store/effects.js +++ b/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 ) ); } }, }; diff --git a/test/e2e/specs/__snapshots__/block-deletion.test.js.snap b/test/e2e/specs/__snapshots__/block-deletion.test.js.snap new file mode 100644 index 00000000000000..9758679af968fd --- /dev/null +++ b/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`] = ` +" +

First paragraph

+ + + +

Second 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`] = ` +" +

First paragraph

+ + + +

Second paragraph - caret was here

+" +`; + +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`] = ` +" +

First paragraph

+ + + +

Second 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`] = ` +" +

First paragraph

+ + + +

Second paragraph - caret was here

+" +`; + +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`] = ` +" +

First paragraph

+ + + +

Second 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`] = ` +" +

First paragraph

+ + + +

Second paragraph - caret was here

+" +`; + +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`] = ` +" +

First paragraph

+ + + +

Second 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`] = ` +" +

First paragraph

+ + + +

Second paragraph - caret was here

+" +`; + +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`] = ` +" +

First paragraph

+ + + +

Second 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`] = ` +" +

First paragraph

+ + + +

Second paragraph - caret was here

+" +`; diff --git a/test/e2e/specs/block-deletion.test.js b/test/e2e/specs/block-deletion.test.js new file mode 100644 index 00000000000000..8cd8b1c5fbbc16 --- /dev/null +++ b/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(); + } ); + } ); +} ); diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js index 1fbe47e9957edc..ea162ed86df7fb 100644 --- a/test/e2e/support/utils.js +++ b/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. */