diff --git a/packages/block-editor/src/components/embedded-admin-context/index.js b/packages/block-editor/src/components/embedded-admin-context/index.js index 2f6822dbdc7e23..65a92d68706a12 100644 --- a/packages/block-editor/src/components/embedded-admin-context/index.js +++ b/packages/block-editor/src/components/embedded-admin-context/index.js @@ -47,7 +47,7 @@ export default function EmbeddedAdminContext( props ) { if ( element !== event.path[ 0 ] ) return; if ( event.keyCode !== ENTER && event.keyCode !== SPACE ) return; - focus.focusable.find( root )[ 0 ].focus(); + focus.tabbable.find( root )[ 0 ].focus(); event.preventDefault(); } diff --git a/packages/block-editor/src/components/placeholder/index.js b/packages/block-editor/src/components/placeholder/index.js index 709bbae648e6af..a4bc137b79b8bb 100644 --- a/packages/block-editor/src/components/placeholder/index.js +++ b/packages/block-editor/src/components/placeholder/index.js @@ -26,7 +26,6 @@ export default function IsolatedPlaceholder( props ) { diff --git a/packages/e2e-test-utils/src/click-placeholder-button.js b/packages/e2e-test-utils/src/click-placeholder-button.js index bbd95972f2879e..25b4d7a3a90c01 100644 --- a/packages/e2e-test-utils/src/click-placeholder-button.js +++ b/packages/e2e-test-utils/src/click-placeholder-button.js @@ -12,7 +12,7 @@ export async function clickPlaceholderButton( buttonText ) { for ( const placeholder of placeholders ) { const buttons = placeholder.shadowRoot.querySelectorAll( - 'button,label' + 'button,label,[aria-label]' ); for ( const button of buttons ) { diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 4927188b57d1e9..ee6d7c4da591d0 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -5,6 +5,7 @@ import { activatePlugin, clickBlockToolbarButton, clickMenuItem, + clickPlaceholderButton, createNewPost, deactivatePlugin, getEditedPostContent, @@ -119,14 +120,7 @@ describe( 'cpt locking', () => { } ); it( 'can use the global inserter in inner blocks', async () => { - await page.evaluate( () => { - document - .querySelector( '.wp-block-columns > div' ) - .shadowRoot.querySelector( - '[aria-label="Two columns; equal split"]' - ) - .focus(); - } ); + await clickPlaceholderButton( 'Two columns; equal split' ); await page.keyboard.press( 'Enter' ); await page.click( '.wp-block-column .block-editor-button-block-appender' diff --git a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js index ff5c3578dbed8e..e842b97ce5e5ec 100644 --- a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js +++ b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js @@ -9,6 +9,7 @@ import { createEmbeddingMatcher, createJSONResponse, setUpResponseMocking, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; const MOCK_RESPONSES = [ @@ -43,10 +44,7 @@ describe( 'Embed block inside a locked all parent', () => { it( 'embed block should be able to embed external content', async () => { await insertBlock( 'Test Inner Blocks Locking All Embed' ); - const handle = await page.evaluateHandle( - `document.querySelector('.wp-block-embed [role="button"]').shadowRoot.querySelector('input')` - ); - await handle.click( handle ); + await clickPlaceholderButton( 'Embed URL' ); // This URL should not have a trailing slash. await page.keyboard.type( 'https://twitter.com/wordpress' ); await page.keyboard.press( 'Enter' ); diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js index 4359f4581ae26a..a74fccea923e24 100644 --- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js +++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js @@ -114,7 +114,7 @@ describe( 'block deletion -', () => { // Click on the image block so that its wrapper is selected and backspace to delete it. await page.click( - '.wp-block[data-type="core/image"] [role="button"]' + '.wp-block[data-type="core/image"] .wp-block-editor-placeholder' ); await page.keyboard.press( 'Backspace' ); @@ -190,7 +190,6 @@ describe( 'deleting all blocks', () => { // Add and remove a block. await insertBlock( 'Image' ); await page.waitForSelector( 'figure[data-type="core/image"]' ); - await page.click( 'figure[data-type="core/image"]' ); await page.keyboard.press( 'Backspace' ); // Verify there is no selected block. 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 8a72bfc44e93dd..4a9949d078cd41 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 @@ -94,6 +94,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); + await openDocumentSettingsSidebar(); await clickPlaceholderButton( 'Two columns; equal split' ); // Add a paragraph in the first column. @@ -110,7 +111,6 @@ describe( 'Navigating the block hierarchy', () => { await page.keyboard.press( 'Enter' ); // Move focus to the sidebar area. - await openDocumentSettingsSidebar(); await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index efcf2d17733e55..59b2288888ddf4 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -3,6 +3,7 @@ */ import { clickBlockAppender, + clickPlaceholderButton, createEmbeddingMatcher, createJSONResponse, createNewPost, @@ -191,7 +192,7 @@ describe( 'Embedding content', () => { await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); await page.waitForFunction( () => { const embedPlaceholders = document.querySelectorAll( - '.wp-block-embed [role="button"]' + '.wp-block-editor-placeholder' ); const lastEmbedPlaceholder = embedPlaceholders[ embedPlaceholders.length - 1 ]; @@ -204,7 +205,7 @@ describe( 'Embedding content', () => { await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' ); await page.waitForFunction( () => { const embedPlaceholders = document.querySelectorAll( - '.wp-block-embed [role="button"]' + '.wp-block-editor-placeholder' ); const lastEmbedPlaceholder = embedPlaceholders[ embedPlaceholders.length - 1 ]; @@ -218,7 +219,7 @@ describe( 'Embedding content', () => { await insertEmbed( 'https://twitter.com/thatbunty' ); await page.waitForFunction( () => { const embedPlaceholders = document.querySelectorAll( - '.wp-block-embed [role="button"]' + '.wp-block-editor-placeholder' ); const lastEmbedPlaceholder = embedPlaceholders[ embedPlaceholders.length - 1 ]; @@ -253,22 +254,7 @@ describe( 'Embedding content', () => { it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => { // URL that can't be embedded. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); - - await page.waitForFunction( () => { - const embedPlaceholders = document.querySelectorAll( - '.wp-block-embed [role="button"]' - ); - const lastEmbedPlaceholder = - embedPlaceholders[ embedPlaceholders.length - 1 ]; - return lastEmbedPlaceholder?.shadowRoot.querySelector( - 'input[value="https://twitter.com/wooyaygutenberg123454312"]' - ); - } ); - - const handle = await page.evaluateHandle( - `document.querySelector('.wp-block-embed [role="button"]').shadowRoot.querySelector('.components-placeholder__error').lastElementChild` - ); - await handle.click( handle ); + await clickPlaceholderButton( 'Convert to link' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); @@ -284,17 +270,6 @@ describe( 'Embedding content', () => { // URL that can't be embedded. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); - await page.waitForFunction( () => { - const embedPlaceholders = document.querySelectorAll( - '.wp-block-embed [role="button"]' - ); - const lastEmbedPlaceholder = - embedPlaceholders[ embedPlaceholders.length - 1 ]; - return lastEmbedPlaceholder?.shadowRoot.querySelector( - 'input[value="https://twitter.com/wooyaygutenberg123454312"]' - ); - } ); - // Set up a different mock to make sure that try again actually does make the request again. await setUpResponseMocking( [ { @@ -306,10 +281,7 @@ describe( 'Embedding content', () => { ), }, ] ); - const handle = await page.evaluateHandle( - `document.querySelector('.wp-block-embed [role="button"]').shadowRoot.querySelector('button.is-secondary')` - ); - await handle.click( handle ); + await clickPlaceholderButton( 'Try again' ); await page.waitForSelector( 'figure.wp-block-embed' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); 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 5342f01fe0eede..5bdf72ad8d9853 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 @@ -6,11 +6,8 @@ import { pressKeyWithModifier, clickBlockToolbarButton, insertBlock, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; -/** - * Internal dependencies - */ -import { clickPlaceholderButton } from '../../../../e2e-test-utils/src'; async function focusBlockToolbar() { await pressKeyWithModifier( 'alt', 'F10' ); 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 57bc37ac2f1eee..bd0b1b25157621 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -9,11 +9,8 @@ import { trashAllPosts, activateTheme, clickButton, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; -/** - * Internal dependencies - */ -import { clickPlaceholderButton } from '../../../e2e-test-utils/src'; /** * Internal dependencies