1st
- - - -2nd
- - - -3rd
-" -`; - -exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 2`] = ` -" -3rd
- - - -1st
- - - -2nd
-" -`; - -exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 1`] = ` -" -1st
- - - -2nd
- - - -3rd
-" -`; - -exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 2`] = ` -" -2nd
- - - -3rd
- - - -1st
-" -`; - -exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 1`] = ` -" -1st
- - - -2nd
- - - -3rd
-" -`; - -exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 2`] = ` -" -1st
- - - -3rd
- - - -2nd
-" -`; - -exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 1`] = ` -" -1st
- - - -2nd
- - - -3rd
-" -`; - -exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 2`] = ` -" -3rd
- - - -1st
- - - -2nd
-" -`; - -exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should prevent deleting multiple selected blocks from inputs 1`] = ` -" -1st
- - - -2nd
- - - -3rd
-" -`; - -exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should propagate properly and duplicate selected blocks 1`] = ` -" -1st
- - - -2nd
- - - -3rd
- - - -1st
- - - -2nd
- - - -3rd
-" -`; diff --git a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js deleted file mode 100644 index b8f43f31cd77bb..00000000000000 --- a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js +++ /dev/null @@ -1,110 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createNewPost, - clickBlockAppender, - getEditedPostContent, - pressKeyWithModifier, - clickBlockToolbarButton, - clickMenuItem, - clickOnCloseModalButton, - canvas, -} from '@wordpress/e2e-test-utils'; - -const createTestParagraphBlocks = async () => { - await clickBlockAppender(); - await page.keyboard.type( '1st' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '2nd' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '3rd' ); -}; - -describe( 'block editor keyboard shortcuts', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - describe( 'move blocks', () => { - const moveUp = async () => pressKeyWithModifier( 'secondary', 't' ); - const moveDown = async () => pressKeyWithModifier( 'secondary', 'y' ); - describe( 'single block selected', () => { - it( 'should move the block up', async () => { - await createTestParagraphBlocks(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - await moveUp(); - await moveUp(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should move the block down', async () => { - await createTestParagraphBlocks(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - await page.keyboard.press( 'ArrowUp' ); - await moveDown(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - } ); - - describe( 'multiple blocks selected', () => { - it( 'should move the blocks up', async () => { - await createTestParagraphBlocks(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - await pressKeyWithModifier( 'shift', 'ArrowUp' ); - await canvas().waitForSelector( - '[aria-label="Multiple selected blocks"]' - ); - await moveUp(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should move the blocks down', async () => { - await createTestParagraphBlocks(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - await page.keyboard.press( 'ArrowUp' ); - await pressKeyWithModifier( 'shift', 'ArrowUp' ); - await canvas().waitForSelector( - '[aria-label="Multiple selected blocks"]' - ); - await moveDown(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - } ); - } ); - describe( 'test shortcuts handling through portals in the same tree', () => { - beforeEach( async () => { - await createTestParagraphBlocks(); - // Multiselect via keyboard. - await pressKeyWithModifier( 'primary', 'a' ); - await pressKeyWithModifier( 'primary', 'a' ); - } ); - it( 'should propagate properly and duplicate selected blocks', async () => { - await clickBlockToolbarButton( 'Options' ); - const label = 'Duplicate'; - await page.$x( - `//div[@role="menu"]//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ label }")]` - ); - await pressKeyWithModifier( 'primaryShift', 'd' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - it( 'should prevent deleting multiple selected blocks from inputs', async () => { - await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Create pattern' ); - const reusableBlockNameInputSelector = - '.patterns-menu-items__convert-modal .components-text-control__input'; - const nameInput = await page.waitForSelector( - reusableBlockNameInputSelector - ); - await nameInput.click(); - await page.keyboard.type( 'hi' ); - await page.keyboard.press( 'Backspace' ); - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'Delete' ); - await clickOnCloseModalButton( - '.patterns-menu-items__convert-modal' - ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - } ); -} ); diff --git a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js new file mode 100644 index 00000000000000..0e8c5c8e7bf537 --- /dev/null +++ b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js @@ -0,0 +1,220 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +async function addTestParagraphBlocks( { editor, page } ) { + await test.step( 'add test paragraph blocks', async () => { + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); + await page.keyboard.type( '1st' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '2nd' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '3rd' ); + } ); +} + +test.describe( 'Block editor keyboard shortcuts', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.describe( 'move blocks - single block selected', () => { + test( 'should move the block up', async ( { + editor, + page, + pageUtils, + } ) => { + await addTestParagraphBlocks( { editor, page } ); + await pageUtils.pressKeys( 'secondary+t', { times: 2 } ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: '3rd' }, + }, + { + name: 'core/paragraph', + attributes: { content: '1st' }, + }, + { + name: 'core/paragraph', + attributes: { content: '2nd' }, + }, + ] ); + } ); + + test( 'should move the block down', async ( { + editor, + page, + pageUtils, + } ) => { + await addTestParagraphBlocks( { editor, page } ); + await page.keyboard.press( 'ArrowUp' ); + await pageUtils.pressKeys( 'secondary+y' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: '1st' }, + }, + { + name: 'core/paragraph', + attributes: { content: '3rd' }, + }, + { + name: 'core/paragraph', + attributes: { content: '2nd' }, + }, + ] ); + } ); + } ); + + test.describe( 'move blocks - multiple blocks selected', () => { + test( 'should move the blocks up', async ( { + editor, + page, + pageUtils, + } ) => { + await addTestParagraphBlocks( { editor, page } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await expect( + page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Multiple blocks selected' } ) + ).toBeVisible(); + await pageUtils.pressKeys( 'secondary+t' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: '2nd' }, + }, + { + name: 'core/paragraph', + attributes: { content: '3rd' }, + }, + { + name: 'core/paragraph', + attributes: { content: '1st' }, + }, + ] ); + } ); + + test( 'should move the blocks down', async ( { + editor, + page, + pageUtils, + } ) => { + await addTestParagraphBlocks( { editor, page } ); + await page.keyboard.press( 'ArrowUp' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await expect( + page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Multiple blocks selected' } ) + ).toBeVisible(); + await pageUtils.pressKeys( 'secondary+y' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: '3rd' }, + }, + { + name: 'core/paragraph', + attributes: { content: '1st' }, + }, + { + name: 'core/paragraph', + attributes: { content: '2nd' }, + }, + ] ); + } ); + } ); + + test.describe( 'test shortcuts handling through portals in the same tree', () => { + test( 'should propagate properly and duplicate selected blocks', async ( { + editor, + page, + pageUtils, + } ) => { + await addTestParagraphBlocks( { editor, page } ); + // Multiselect via keyboard. + await pageUtils.pressKeys( 'primary+a', { times: 2 } ); + + await editor.clickBlockToolbarButton( 'Options' ); + await expect( + page + .getByRole( 'menu', { name: 'Options' } ) + .getByRole( 'menuitem', { name: 'Duplicate' } ) + ).toBeVisible(); + + // Duplicate via keyboard. + await pageUtils.pressKeys( 'primaryShift+d' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + }, + { + name: 'core/paragraph', + }, + { + name: 'core/paragraph', + }, + { + name: 'core/paragraph', + }, + { + name: 'core/paragraph', + }, + { + name: 'core/paragraph', + }, + ] ); + } ); + + test( 'should prevent deleting multiple selected blocks from inputs', async ( { + editor, + page, + pageUtils, + } ) => { + await addTestParagraphBlocks( { editor, page } ); + // Multiselect via keyboard. + await pageUtils.pressKeys( 'primary+a', { times: 2 } ); + + await editor.clickBlockToolbarButton( 'Options' ); + await page + .getByRole( 'menu', { name: 'Options' } ) + .getByRole( 'menuitem', { name: 'Create pattern' } ) + .click(); + await page + .getByRole( 'dialog', { name: 'Create pattern' } ) + .getByRole( 'textbox', { name: 'Name' } ) + .fill( 'hi' ); + + await page.keyboard.press( 'Backspace' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'Delete' ); + await page.keyboard.press( 'Escape' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: '1st' }, + }, + { + name: 'core/paragraph', + attributes: { content: '2nd' }, + }, + { + name: 'core/paragraph', + attributes: { content: '3rd' }, + }, + ] ); + } ); + } ); +} );