diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index edb33eaa18270..df113a7c40759 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -491,6 +491,11 @@ _Parameters_
- _mocks_ `Array`: Array of mock settings.
+# **showBlockToolbar**
+
+The block toolbar is not always visible while typing.
+Call this function to reveal it.
+
# **switchEditorModeTo**
Switches editor mode.
diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js
index 1e25da1ba2e36..40d2118343d15 100644
--- a/packages/e2e-test-utils/src/click-block-toolbar-button.js
+++ b/packages/e2e-test-utils/src/click-block-toolbar-button.js
@@ -14,14 +14,6 @@ export async function clickBlockToolbarButton( buttonAriaLabel ) {
const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar';
const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`;
- // Hover the block switcher to show the movers
- const switcher = await page.$(
- '.block-editor-block-toolbar .block-editor-block-toolbar__block-switcher-wrapper'
- );
- if ( switcher ) {
- await switcher.hover();
- }
-
const button = await page.waitForSelector( BUTTON_SELECTOR );
await button.evaluate( ( element ) => element.scrollIntoView() );
await button.click();
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index 2afccf59db89d..fba8c67b1c269 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/packages/e2e-test-utils/src/index.js
@@ -59,5 +59,6 @@ export { transformBlockTo } from './transform-block-to';
export { uninstallPlugin } from './uninstall-plugin';
export { visitAdminPage } from './visit-admin-page';
export { waitForWindowDimensions } from './wait-for-window-dimensions';
+export { showBlockToolbar } from './show-block-toolbar';
export * from './mocks';
diff --git a/packages/e2e-test-utils/src/show-block-toolbar.js b/packages/e2e-test-utils/src/show-block-toolbar.js
index f76f0061d2ac7..f1ac720e028d4 100644
--- a/packages/e2e-test-utils/src/show-block-toolbar.js
+++ b/packages/e2e-test-utils/src/show-block-toolbar.js
@@ -1,3 +1,7 @@
+/**
+ * The block toolbar is not always visible while typing.
+ * Call this function to reveal it.
+ */
export async function showBlockToolbar() {
// Move the mouse to disable the isTyping mode
await page.mouse.move( 50, 50 );
diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
index 0ea2b49ffa05f..4a6968c684904 100644
--- a/packages/e2e-test-utils/src/transform-block-to.js
+++ b/packages/e2e-test-utils/src/transform-block-to.js
@@ -25,11 +25,9 @@ export async function transformBlockTo( name ) {
// Find the block button option within the switcher popover.
const xpath = `//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`;
- const insertButton = ( await page.$x( xpath ) )[ 0 ];
-
+ const insertButton = await page.waitForXPath( xpath, { visible: true } );
// Clicks may fail if the button is out of view. Assure it is before click.
await insertButton.evaluate( ( element ) => element.scrollIntoView() );
- await page.waitForXPath( xpath, { visible: true } );
await insertButton.click();
// Wait for the transformed block to appear.
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 ab069ebcfed1e..454476b108ff3 100644
--- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -47,10 +47,6 @@ describe( 'cpt locking', () => {
await page.click(
'.block-editor-rich-text__editable[data-type="core/paragraph"]'
);
- // Hover the block switcher to show the movers
- await page.hover(
- '.block-editor-block-toolbar .block-editor-block-toolbar__block-switcher-wrapper'
- );
expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
await page.click( 'button[aria-label="Move up"]' );
await page.type(
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 00027d94137cf..63aee6d901c18 100644
--- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js
@@ -66,11 +66,6 @@ describe( 'block deletion -', () => {
it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
// The blocks can't be empty to trigger the toolbar
await page.keyboard.type( 'Paragraph to remove' );
-
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
await clickOnBlockSettingsMenuRemoveBlockButton();
expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -156,11 +151,6 @@ describe( 'deleting all blocks', () => {
it( 'results in the default block getting selected', async () => {
await clickBlockAppender();
await page.keyboard.type( 'Paragraph' );
-
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
await clickOnBlockSettingsMenuRemoveBlockButton();
// There is a default block:
diff --git a/packages/e2e-tests/specs/editor/various/block-mover.test.js b/packages/e2e-tests/specs/editor/various/block-mover.test.js
index 3b936f212aba0..c3a04f6f3a6c4 100644
--- a/packages/e2e-tests/specs/editor/various/block-mover.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-mover.test.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { createNewPost } from '@wordpress/e2e-test-utils';
+import { createNewPost, showBlockToolbar } from '@wordpress/e2e-test-utils';
describe( 'block mover', () => {
beforeEach( async () => {
@@ -18,9 +18,7 @@ describe( 'block mover', () => {
// Select a block so the block mover is rendered.
await page.focus( '.block-editor-block-list__block' );
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
+ await showBlockToolbar();
const blockMover = await page.$$( '.block-editor-block-mover' );
// There should be a block mover.
@@ -35,9 +33,7 @@ describe( 'block mover', () => {
// Select a block so the block mover has the possibility of being rendered.
await page.focus( '.block-editor-block-list__block' );
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
+ await showBlockToolbar();
// Ensure no block mover exists when only one block exists on the page.
const blockMover = await page.$$( '.block-editor-block-mover' );
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
index 6aef17cd69594..44ca74c6ae46c 100644
--- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js
+++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -22,10 +22,6 @@ describe( 'Editing modes (visual/HTML)', () => {
);
expect( visualBlock ).toHaveLength( 1 );
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
// Change editing mode from "Visual" to "HTML".
await clickBlockToolbarButton( 'More options' );
let changeModeButton = await page.waitForXPath(
@@ -39,10 +35,6 @@ describe( 'Editing modes (visual/HTML)', () => {
);
expect( htmlBlock ).toHaveLength( 1 );
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
// Change editing mode from "HTML" back to "Visual".
await clickBlockToolbarButton( 'More options' );
changeModeButton = await page.waitForXPath(
@@ -58,10 +50,6 @@ describe( 'Editing modes (visual/HTML)', () => {
} );
it( 'should display sidebar in HTML mode', async () => {
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
// Change editing mode from "Visual" to "HTML".
await clickBlockToolbarButton( 'More options' );
const changeModeButton = await page.waitForXPath(
@@ -78,10 +66,6 @@ describe( 'Editing modes (visual/HTML)', () => {
} );
it( 'should update HTML in HTML mode when sidebar is used', async () => {
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
// Change editing mode from "Visual" to "HTML".
await clickBlockToolbarButton( 'More options' );
const changeModeButton = await page.waitForXPath(
diff --git a/packages/e2e-tests/specs/editor/various/is-typing.test.js b/packages/e2e-tests/specs/editor/various/is-typing.test.js
index 8161118d65944..2416b63473816 100644
--- a/packages/e2e-tests/specs/editor/various/is-typing.test.js
+++ b/packages/e2e-tests/specs/editor/various/is-typing.test.js
@@ -1,7 +1,11 @@
/**
* WordPress dependencies
*/
-import { clickBlockAppender, createNewPost } from '@wordpress/e2e-test-utils';
+import {
+ clickBlockAppender,
+ createNewPost,
+ showBlockToolbar,
+} from '@wordpress/e2e-test-utils';
describe( 'isTyping', () => {
beforeEach( async () => {
@@ -83,8 +87,7 @@ describe( 'isTyping', () => {
await page.keyboard.type( 'Type' );
// Show Toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
+ await showBlockToolbar();
// Open the dropdown
await page.click( '.dropdown-open' );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index d8f4e06458bf7..96ec77412f547 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -7,6 +7,7 @@ import {
pressKeyWithModifier,
clickBlockAppender,
getEditedPostContent,
+ showBlockToolbar,
} from '@wordpress/e2e-test-utils';
async function getActiveLabel() {
@@ -89,10 +90,7 @@ describe( 'Order of block keyboard navigation', () => {
// Select the middle block.
await page.keyboard.press( 'ArrowUp' );
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
-
+ await showBlockToolbar();
await navigateToContentEditorTop();
await tabThroughParagraphBlock( 'Paragraph 1' );
diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
index d13f4dc4a9133..21c50094a0d1f 100644
--- a/packages/e2e-tests/specs/editor/various/links.test.js
+++ b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -7,6 +7,7 @@ import {
getEditedPostContent,
createNewPost,
pressKeyWithModifier,
+ showBlockToolbar,
} from '@wordpress/e2e-test-utils';
describe( 'Links', () => {
@@ -300,9 +301,7 @@ describe( 'Links', () => {
// Make a collapsed selection inside the link
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.press( 'ArrowRight' );
- // Move the mouse to show the block toolbar
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
+ await showBlockToolbar();
const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
await editButton.click();
await waitForAutoFocus();
diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js
index 1ac2080a1631c..17e064b7c5852 100644
--- a/packages/e2e-tests/specs/editor/various/rich-text.test.js
+++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js
@@ -7,6 +7,7 @@ import {
insertBlock,
clickBlockAppender,
pressKeyWithModifier,
+ showBlockToolbar,
} from '@wordpress/e2e-test-utils';
describe( 'RichText', () => {
@@ -84,12 +85,10 @@ describe( 'RichText', () => {
it( 'should return focus when pressing formatting button', async () => {
await clickBlockAppender();
await page.keyboard.type( 'Some ' );
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
+ await showBlockToolbar();
await page.click( '[aria-label="Bold"]' );
await page.keyboard.type( 'bold' );
- await page.mouse.move( 0, 0 );
- await page.mouse.move( 10, 10 );
+ await showBlockToolbar();
await page.click( '[aria-label="Bold"]' );
await page.keyboard.type( '.' );
diff --git a/packages/e2e-tests/specs/experiments/navigation.test.js b/packages/e2e-tests/specs/experiments/navigation.test.js
index 26cc1c339d4db..bf5fd9a339ec0 100644
--- a/packages/e2e-tests/specs/experiments/navigation.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation.test.js
@@ -9,6 +9,7 @@ import {
setUpResponseMocking,
clickBlockToolbarButton,
pressKeyWithModifier,
+ showBlockToolbar,
} from '@wordpress/e2e-test-utils';
/**
@@ -427,8 +428,7 @@ describe( 'Navigation', () => {
type: 'url',
} );
- // Move the mouse to reveal the block movers. Without this the test seems to fail.
- await page.mouse.move( 100, 100 );
+ await showBlockToolbar();
// Add another Link block.
// Using 'click' here checks for regressions of https://github.com/WordPress/gutenberg/issues/18329,