diff --git a/packages/block-editor/src/components/placeholder/index.js b/packages/block-editor/src/components/placeholder/index.js index ee56b73c52c5b..709bbae648e6a 100644 --- a/packages/block-editor/src/components/placeholder/index.js +++ b/packages/block-editor/src/components/placeholder/index.js @@ -19,7 +19,10 @@ import EmbeddedAdminContext from '../embedded-admin-context'; */ export default function IsolatedPlaceholder( props ) { return ( - + { + const placeholders = document.querySelectorAll( + '.wp-block-editor-placeholder' + ); + + for ( const placeholder of placeholders ) { + const buttons = placeholder.shadowRoot.querySelectorAll( + 'button,label' + ); + + for ( const button of buttons ) { + if ( + button.textContent === text || + button.getAttribute( 'aria-label' ) === text + ) { + return button; + } + } + } + }, + {}, + buttonText + ); + await _button.click(); +} diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 517f7e5b506ce..41a0071d54c62 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -14,6 +14,7 @@ export { clickButton } from './click-button'; export { clickMenuItem } from './click-menu-item'; export { clickOnCloseModalButton } from './click-on-close-modal-button'; export { clickOnMoreMenuItem } from './click-on-more-menu-item'; +export { clickPlaceholderButton } from './click-placeholder-button'; export { createNewPost } from './create-new-post'; export { createUser } from './create-user'; export { createURL } from './create-url'; diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js index 917c5b6a939e1..b6f2ff909c054 100644 --- a/packages/e2e-tests/specs/editor/blocks/columns.test.js +++ b/packages/e2e-tests/specs/editor/blocks/columns.test.js @@ -7,6 +7,7 @@ import { insertBlock, openGlobalBlockInserter, closeGlobalBlockInserter, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; describe( 'Columns', () => { @@ -16,9 +17,8 @@ describe( 'Columns', () => { it( 'restricts all blocks inside the columns block', async () => { await insertBlock( 'Columns' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); await closeGlobalBlockInserter(); + await clickPlaceholderButton( 'Two columns; equal split' ); await page.click( '.edit-post-header-toolbar__list-view-toggle' ); const columnBlockMenuItem = ( await page.$x( diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js index b7a7735980ec4..a65b1906863d6 100644 --- a/packages/e2e-tests/specs/editor/blocks/table.test.js +++ b/packages/e2e-tests/specs/editor/blocks/table.test.js @@ -8,8 +8,11 @@ import { getEditedPostContent, insertBlock, openDocumentSettingsSidebar, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; +const createButtonLabel = 'Create Table'; + /** * Utility function for changing the selected cell alignment. * @@ -20,40 +23,34 @@ async function changeCellAlignment( align ) { await clickButton( `Align column ${ align.toLowerCase() }` ); } -async function createTable( columnCount, rowCount ) { - await insertBlock( 'Table' ); - - if ( columnCount ) { - await page.keyboard.press( 'Backspace' ); - await page.keyboard.type( columnCount ); - } - - // Navigate to "Row count" - await page.keyboard.press( 'Tab' ); - - if ( rowCount ) await page.keyboard.type( rowCount ); - - // Navigate to "Create Table" - await page.keyboard.press( 'Tab' ); - - // Create the table. - await page.keyboard.press( 'Space' ); -} - describe( 'Table', () => { beforeEach( async () => { await createNewPost(); } ); it( 'displays a form for choosing the row and column count of the table', async () => { - await createTable( '5', '10' ); + await insertBlock( 'Table' ); + + await clickPlaceholderButton( 'Column count' ); + await page.keyboard.press( 'Backspace' ); + await page.keyboard.type( '5' ); + + await clickPlaceholderButton( 'Row count' ); + await page.keyboard.press( 'Backspace' ); + await page.keyboard.type( '10' ); + + // Create the table. + await clickPlaceholderButton( createButtonLabel ); // Expect the post content to have a correctly sized table. expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'allows text to by typed into cells', async () => { - await createTable(); + await insertBlock( 'Table' ); + + // Create the table. + await clickPlaceholderButton( createButtonLabel ); // Click the first cell and add some text. await page.click( 'td' ); @@ -76,16 +73,26 @@ describe( 'Table', () => { } ); it( 'allows header and footer rows to be switched on and off', async () => { - await createTable(); + await insertBlock( 'Table' ); await openDocumentSettingsSidebar(); + const headerSwitchSelector = "//label[text()='Header section']"; + const footerSwitchSelector = "//label[text()='Footer section']"; + + // Expect the header and footer switches not to be present before the table has been created. + let headerSwitch = await page.$x( headerSwitchSelector ); + let footerSwitch = await page.$x( footerSwitchSelector ); + expect( headerSwitch ).toHaveLength( 0 ); + expect( footerSwitch ).toHaveLength( 0 ); + + // Create the table. + await clickPlaceholderButton( createButtonLabel ); + // Expect the header and footer switches to be present now that the table has been created. - const headerSwitch = await page.$x( - "//label[text()='Header section']" - ); - const footerSwitch = await page.$x( - "//label[text()='Footer section']" - ); + headerSwitch = await page.$x( headerSwitchSelector ); + footerSwitch = await page.$x( footerSwitchSelector ); + expect( headerSwitch ).toHaveLength( 1 ); + expect( footerSwitch ).toHaveLength( 1 ); // Toggle on the switches and add some content. await headerSwitch[ 0 ].click(); @@ -112,9 +119,12 @@ describe( 'Table', () => { } ); it( 'allows adding and deleting columns across the table header, body and footer', async () => { - await createTable(); + await insertBlock( 'Table' ); await openDocumentSettingsSidebar(); + // Create the table. + await clickPlaceholderButton( createButtonLabel ); + // Toggle on the switches and add some content. const headerSwitch = await page.$x( "//label[text()='Header section']" @@ -145,7 +155,14 @@ describe( 'Table', () => { } ); it( 'allows columns to be aligned', async () => { - await createTable( '4' ); + await insertBlock( 'Table' ); + + await clickPlaceholderButton( 'Column count' ); + await page.keyboard.press( 'Backspace' ); + await page.keyboard.type( '4' ); + + // Create the table. + await clickPlaceholderButton( createButtonLabel ); // Click the first cell and add some text. Don't align. const cells = await page.$$( 'td,th' ); @@ -173,9 +190,12 @@ describe( 'Table', () => { // Testing for regressions of https://github.com/WordPress/gutenberg/issues/14904. it( 'allows cells to be selected when the cell area outside of the RichText is clicked', async () => { - await createTable(); + await insertBlock( 'Table' ); await openDocumentSettingsSidebar(); + // Create the table. + await clickPlaceholderButton( createButtonLabel ); + // Enable fixed width as it exascerbates the amount of empty space around the RichText. const [ fixedWidthSwitch ] = await page.$x( "//label[text()='Fixed width table cells']" @@ -207,7 +227,10 @@ describe( 'Table', () => { } ); it( 'allows a caption to be added', async () => { - await createTable(); + await insertBlock( 'Table' ); + + // Create the table. + await clickPlaceholderButton( createButtonLabel ); // Click the first cell and add some text. await page.click( '.wp-block-table figcaption' ); @@ -217,7 +240,10 @@ describe( 'Table', () => { } ); it( 'up and down arrow navigation', async () => { - await createTable(); + await insertBlock( 'Table' ); + + // Create the table. + await clickPlaceholderButton( createButtonLabel ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( '1' ); diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js index 2f0db814e7f51..cdc8f59562cec 100644 --- a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js @@ -11,6 +11,7 @@ import { openDocumentSettingsSidebar, togglePreferencesOption, toggleMoreMenu, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; describe( 'Block variations', () => { @@ -85,14 +86,7 @@ describe( 'Block variations', () => { } ); test( 'Pick the additional variation in the inserted Columns block', async () => { await insertBlock( 'Columns' ); - - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'Four columns' ); expect( await page.$$( diff --git a/packages/e2e-tests/specs/editor/plugins/image-size.test.js b/packages/e2e-tests/specs/editor/plugins/image-size.test.js index a39fbfdf5a5c7..bf5fc0777f659 100644 --- a/packages/e2e-tests/specs/editor/plugins/image-size.test.js +++ b/packages/e2e-tests/specs/editor/plugins/image-size.test.js @@ -15,6 +15,7 @@ import { deactivatePlugin, insertBlock, openDocumentSettingsSidebar, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; describe( 'changing image size', () => { @@ -29,10 +30,7 @@ describe( 'changing image size', () => { it( 'should insert and change my image size', async () => { await insertBlock( 'Image' ); - - // Tab to the Media Library option. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'Media Library' ); // Wait for media modal to appear and upload image. await page.waitForSelector( '.media-modal input[type=file]' ); diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index 2bc8d5821209c..8a72bfc44e93d 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -8,6 +8,7 @@ import { pressKeyTimes, pressKeyWithModifier, openDocumentSettingsSidebar, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; async function openListViewSidebar() { @@ -37,8 +38,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate using the list view sidebar', async () => { await insertBlock( 'Columns' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'Two columns; equal split' ); // Add a paragraph in the first column. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. @@ -94,8 +94,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'Two columns; equal split' ); // Add a paragraph in the first column. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. @@ -153,7 +152,6 @@ describe( 'Navigating the block hierarchy', () => { // Create an image block too. await page.keyboard.press( 'Enter' ); await insertBlock( 'Image' ); - await page.keyboard.press( 'Escape' ); // Return to first block. await openListViewSidebar(); diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index 5012290dd3dd5..5342f01fe0eed 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js @@ -7,6 +7,10 @@ import { clickBlockToolbarButton, insertBlock, } from '@wordpress/e2e-test-utils'; +/** + * Internal dependencies + */ +import { clickPlaceholderButton } from '../../../../e2e-test-utils/src'; async function focusBlockToolbar() { await pressKeyWithModifier( 'alt', 'F10' ); @@ -90,8 +94,6 @@ describe( 'Toolbar roving tabindex', () => { it( 'ensures image block toolbar uses roving tabindex', async () => { await insertBlock( 'Image' ); - await page.keyboard.press( 'Escape' ); - await page.keyboard.press( 'ArrowUp' ); await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' ); await wrapCurrentBlockWithGroup( 'Image' ); await testGroupKeyboardNavigation( 'Block: Image', 'Image' ); @@ -99,28 +101,11 @@ describe( 'Toolbar roving tabindex', () => { it( 'ensures table block toolbar uses roving tabindex', async () => { await insertBlock( 'Table' ); - await page.keyboard.press( 'Escape' ); - await page.keyboard.press( 'ArrowUp' ); await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' ); // Move focus to the first toolbar item await page.keyboard.press( 'Home' ); await expectLabelToHaveFocus( 'Table' ); - - // Tab to editor content. - await page.keyboard.press( 'Tab' ); - - // Navigate into the placeholder. - await page.keyboard.press( 'ArrowDown' ); - await page.keyboard.press( 'Space' ); - - // Navigate to "Create Table" - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - - // Create the table. - await page.keyboard.press( 'Space' ); - + await clickPlaceholderButton( 'Create Table' ); await page.keyboard.press( 'Tab' ); await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' ); await wrapCurrentBlockWithGroup( 'Table' ); diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index 5d1ee00e9b1f9..6972bb1662ec1 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -9,6 +9,7 @@ import { pressKeyWithModifier, insertBlock, clickBlockToolbarButton, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; const getActiveBlockName = async () => @@ -21,12 +22,12 @@ const addParagraphsAndColumnsDemo = async () => { await clickBlockAppender(); await page.keyboard.type( 'First paragraph' ); await page.keyboard.press( 'Enter' ); - await insertBlock( 'Columns' ); - - // Press the 50/50 option. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); - + await page.keyboard.type( '/columns' ); + await page.waitForXPath( + `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Columns')]` + ); + await page.keyboard.press( 'Enter' ); + await clickPlaceholderButton( 'Two columns; equal split' ); await page.click( ':focus .block-editor-button-block-appender' ); await page.waitForSelector( '.block-editor-inserter__search input:focus' ); await page.keyboard.type( 'Paragraph' ); @@ -588,20 +589,16 @@ describe( 'Writing Flow', () => { await page.mouse.click( x, lowerInserterY ); const type = await page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) + document.activeElement.getAttribute( 'data-type' ) ); - expect( type ).toBe( 'Image' ); + expect( type ).toBe( 'core/image' ); } ); it( 'should only consider the content as one tab stop', async () => { await page.keyboard.press( 'Enter' ); await insertBlock( 'Table' ); - // Tab to the "Create table" button. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - // Create the table. - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'Create Table' ); // Return focus after focus loss. This should be fixed. await page.keyboard.press( 'Tab' ); // Navigate to the second cell. diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index 3b9cfea4c3bd0..57bc37ac2f1ee 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -10,6 +10,10 @@ import { activateTheme, clickButton, } from '@wordpress/e2e-test-utils'; +/** + * Internal dependencies + */ +import { clickPlaceholderButton } from '../../../e2e-test-utils/src'; /** * Internal dependencies @@ -100,13 +104,7 @@ describe( 'Multi-entity save flow', () => { // Add a template part and edit it. await insertBlock( 'Template Part' ); - await page.waitForFunction( () => - document.activeElement.shadowRoot?.querySelector( 'button' ) - ); - await page.keyboard.press( 'Space' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'New template part' ); const confirmTitleButton = await page.waitForSelector( confirmTitleButtonSelector diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 4f868951b8791..c739e6b260d9b 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -11,6 +11,7 @@ import { selectBlockByClientId, clickBlockToolbarButton, canvas, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; /** @@ -280,14 +281,7 @@ describe( 'Template Part', () => { await disablePrePublishChecks(); // Create new template part. await insertBlock( 'Template Part' ); - await page.waitForFunction( () => - document.activeElement.shadowRoot?.querySelector( 'button' ) - ); - // Navigate into the placeholder and "New template part" - await page.keyboard.press( 'Space' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'New template part' ); const confirmTitleButton = await page.waitForSelector( confirmTitleButtonSelector ); @@ -311,13 +305,7 @@ describe( 'Template Part', () => { await createNewPost(); // Try to insert the template part we created. await insertBlock( 'Template Part' ); - await page.waitForFunction( () => - document.activeElement.shadowRoot?.querySelector( 'button' ) - ); - // Navigate into the placeholder and "Choose existing" - await page.keyboard.press( 'Space' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); + await clickPlaceholderButton( 'Choose existing' ); const preview = await page.waitForSelector( '[aria-label="Create New"]' );