WordPress<\/a>!<\/p>$/',
+ ),
+ 'element styles apply class to wrapper when it has other attributes' => array(
+ 'color_settings' => array( 'link' => true ),
+ 'elements_styles' => array(
+ 'link' => array( 'color' => $color_styles ),
+ ),
+ 'block_markup' => 'Hello WordPress !
',
+ 'expected_markup' => '/^Hello WordPress<\/a>!<\/p>$/',
+ ),
+ );
+ }
+
+ /**
+ * Tests that elements block support generates appropriate styles.
+ *
+ * @covers ::gutenberg_render_elements_support_styles
+ *
+ * @dataProvider data_elements_block_support_styles
+ *
+ * @param mixed $color_settings The color block support settings used for elements support.
+ * @param mixed $elements_styles The elements styles within the block attributes.
+ * @param string $expected_styles Expected styles enqueued by the style engine.
+ */
+ public function test_elements_block_support_styles( $color_settings, $elements_styles, $expected_styles ) {
+ $this->register_block_with_color_settings( $color_settings );
+
+ $block = array(
+ 'blockName' => $this->test_block_name,
+ 'attrs' => array(
+ 'style' => array(
+ 'elements' => $elements_styles,
+ ),
+ ),
+ );
+
+ gutenberg_render_elements_support_styles( null, $block );
+ $actual_stylesheet = gutenberg_style_engine_get_stylesheet_from_context( 'block-supports' );
+
+ $this->assertMatchesRegularExpression(
+ $expected_styles,
+ $actual_stylesheet,
+ 'Elements style rules output should be correct'
+ );
+ }
+
+ /**
+ * Data provider.
+ *
+ * @return array
+ */
+ public function data_elements_block_support_styles() {
+ $color_styles = array(
+ 'text' => 'var:preset|color|vivid-red',
+ 'background' => '#fff',
+ );
+ $color_css_rules = preg_quote( '{color:var(--wp--preset--color--vivid-red);background-color:#fff;}' );
+
+ return array(
+ 'button element styles are not applied if serialization is skipped' => array(
+ 'color_settings' => array(
+ 'button' => true,
+ '__experimentalSkipSerialization' => true,
+ ),
+ 'elements_styles' => array(
+ 'button' => array( 'color' => $color_styles ),
+ ),
+ 'expected_styles' => '/^$/',
+ ),
+ 'link element styles are not applied if serialization is skipped' => array(
+ 'color_settings' => array(
+ 'link' => true,
+ '__experimentalSkipSerialization' => true,
+ ),
+ 'elements_styles' => array(
+ 'link' => array(
+ 'color' => $color_styles,
+ ':hover' => array(
+ 'color' => $color_styles,
+ ),
+ ),
+ ),
+ 'expected_styles' => '/^$/',
+ ),
+ 'heading element styles are not applied if serialization is skipped' => array(
+ 'color_settings' => array(
+ 'heading' => true,
+ '__experimentalSkipSerialization' => true,
+ ),
+ 'elements_styles' => array(
+ 'heading' => array( 'color' => $color_styles ),
+ 'h1' => array( 'color' => $color_styles ),
+ 'h2' => array( 'color' => $color_styles ),
+ 'h3' => array( 'color' => $color_styles ),
+ 'h4' => array( 'color' => $color_styles ),
+ 'h5' => array( 'color' => $color_styles ),
+ 'h6' => array( 'color' => $color_styles ),
+ ),
+ 'expected_styles' => '/^$/',
+ ),
+ 'button element styles are applied' => array(
+ 'color_settings' => array( 'button' => true ),
+ 'elements_styles' => array(
+ 'button' => array( 'color' => $color_styles ),
+ ),
+ 'expected_styles' => '/^.wp-elements-[a-f0-9]{32} .wp-element-button, .wp-elements-[a-f0-9]{32} .wp-block-button__link' . $color_css_rules . '$/',
+ ),
+ 'link element styles are applied' => array(
+ 'color_settings' => array( 'link' => true ),
+ 'elements_styles' => array(
+ 'link' => array(
+ 'color' => $color_styles,
+ ':hover' => array(
+ 'color' => $color_styles,
+ ),
+ ),
+ ),
+ 'expected_styles' => '/^.wp-elements-[a-f0-9]{32} a' . $color_css_rules .
+ '.wp-elements-[a-f0-9]{32} a:hover' . $color_css_rules . '$/',
+ ),
+ 'generic heading element styles are applied' => array(
+ 'color_settings' => array( 'heading' => true ),
+ 'elements_styles' => array(
+ 'heading' => array( 'color' => $color_styles ),
+ ),
+ 'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1, .wp-elements-[a-f0-9]{32} h2, .wp-elements-[a-f0-9]{32} h3, .wp-elements-[a-f0-9]{32} h4, .wp-elements-[a-f0-9]{32} h5, .wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
+ ),
+ 'individual heading element styles are applied' => array(
+ 'color_settings' => array( 'heading' => true ),
+ 'elements_styles' => array(
+ 'h1' => array( 'color' => $color_styles ),
+ 'h2' => array( 'color' => $color_styles ),
+ 'h3' => array( 'color' => $color_styles ),
+ 'h4' => array( 'color' => $color_styles ),
+ 'h5' => array( 'color' => $color_styles ),
+ 'h6' => array( 'color' => $color_styles ),
+ ),
+ 'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1' . $color_css_rules .
+ '.wp-elements-[a-f0-9]{32} h2' . $color_css_rules .
+ '.wp-elements-[a-f0-9]{32} h3' . $color_css_rules .
+ '.wp-elements-[a-f0-9]{32} h4' . $color_css_rules .
+ '.wp-elements-[a-f0-9]{32} h5' . $color_css_rules .
+ '.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
+ ),
+ );
+ }
+}
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index 7084df68443baa..acc7cfde89dbd4 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -94,6 +94,7 @@ function fail_if_died( $message ) {
'gutenberg-experiments' => array(
'gutenberg-widget-experiments' => '1',
'gutenberg-full-site-editing' => 1,
+ 'gutenberg-form-blocks' => 1,
),
);
diff --git a/platform-docs/docs/basic-concepts/internationalization.md b/platform-docs/docs/basic-concepts/internationalization.md
index c15a1e2e68145f..654d70070f1cba 100644
--- a/platform-docs/docs/basic-concepts/internationalization.md
+++ b/platform-docs/docs/basic-concepts/internationalization.md
@@ -4,4 +4,36 @@ sidebar_position: 7
# Internationalization
+The Gutenberg block editor uses the `@wordpress/i18n` package to provide internationalization support.
+
+Translations can be provided by calling the `setLocaleData` function with a domain and a locale data object. The locale data object should be in the [Jed-formatted JSON object shape](http://messageformat.github.io/Jed/).
+
+```js
+import { setLocaleData } from '@wordpress/i18n';
+
+setLocaleData( { 'Type / to choose a block': [ 'Taper / pour choisir un bloc' ] } );
+```
+
# RTL Support
+
+By default, the Gutenberg UI is optimized for left-to-right (LTR) languages. But Gutenberg scripts and styles include support for right-to-left (RTL) languages as well. To enable RTL support, we need to perform a few actions:
+
+First, we need to define that our locale is RTL using `@wordpress/i18n`.
+
+```js
+import { setLocaleData } from '@wordpress/i18n';
+
+setLocaleData( { 'text direction\u0004ltr': [ 'rtl' ] } );
+```
+
+Second, we need to load the RTL CSS stylesheets instead of the LTR ones. For each of the stylesheets that you load from `@wordpress` packages, there's an RTL version that you can use instead.
+
+For example, when loading the `@wordpress/components` stylesheet, you can load the RTL version by using `@wordpress/components/build-style/style-rtl.css` instead of `@wordpress/components/build-style/style.css`.
+
+Finally, make sure to add a `dir` property to the `html` element of your document (or any parent element of your editor).
+
+```html
+
+
+
+```
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index 04cd358729a113..dcddfca2b5b284 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -30,7 +30,9 @@ test.describe( 'Buttons', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/buttons' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Content' );
diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js
index 30f6051fab29bc..2dcc526851743e 100644
--- a/test/e2e/specs/editor/blocks/classic.spec.js
+++ b/test/e2e/specs/editor/blocks/classic.spec.js
@@ -18,15 +18,10 @@ test.use( {
} );
test.describe( 'Classic', () => {
- test.beforeEach( async ( { admin, page } ) => {
+ test.beforeEach( async ( { admin, editor } ) => {
await admin.createNewPost();
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
} );
test.afterAll( async ( { requestUtils } ) => {
@@ -134,12 +129,7 @@ test.describe( 'Classic', () => {
await page.unroute( '**' );
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
const errors = [];
page.on( 'pageerror', ( exception ) => {
diff --git a/test/e2e/specs/editor/blocks/code.spec.js b/test/e2e/specs/editor/blocks/code.spec.js
index c4037d50b7dd51..6abfb15d10b83b 100644
--- a/test/e2e/specs/editor/blocks/code.spec.js
+++ b/test/e2e/specs/editor/blocks/code.spec.js
@@ -12,7 +12,9 @@ test.describe( 'Code', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '```' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( ' {
await expect( warning ).toBeVisible();
await expect( placeholder ).toBeVisible();
- await editor.canvas.click(
- 'role=button[name="Switch to editable mode"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Switch to editable mode"i]' )
+ .click();
const commentTemplate = editor.canvas.locator(
'role=document[name="Block: Comment Template"i]'
diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js
index f950036539c11b..ef693cb8b5bb9e 100644
--- a/test/e2e/specs/editor/blocks/gallery.spec.js
+++ b/test/e2e/specs/editor/blocks/gallery.spec.js
@@ -51,7 +51,9 @@ test.describe( 'Gallery', () => {
plainText: `[gallery ids="${ uploadedMedia.id }"]`,
} );
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+v' );
const img = editor.canvas.locator(
@@ -204,7 +206,9 @@ test.describe( 'Gallery', () => {
} ) => {
await admin.createNewPost();
await editor.insertBlock( { name: 'core/gallery' } );
- await editor.canvas.click( 'role=button[name="Media Library"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Media Library"i]' )
+ .click();
const mediaLibrary = page.locator(
'role=dialog[name="Create gallery"i]'
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 2de22245eb5b08..ccf522d8c4d533 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -29,9 +29,11 @@ test.describe( 'Group', () => {
);
// Select the default, selected Group layout from the variation picker.
- await editor.canvas.click(
- 'role=button[name="Group: Gather blocks in a container."i]'
- );
+ await editor.canvas
+ .locator(
+ 'role=button[name="Group: Gather blocks in a container."i]'
+ )
+ .click();
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
@@ -40,7 +42,9 @@ test.describe( 'Group', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/group' );
await expect(
page.locator( 'role=option[name="Group"i][selected]' )
@@ -48,9 +52,11 @@ test.describe( 'Group', () => {
await page.keyboard.press( 'Enter' );
// Select the default, selected Group layout from the variation picker.
- await editor.canvas.click(
- 'role=button[name="Group: Gather blocks in a container."i]'
- );
+ await editor.canvas
+ .locator(
+ 'role=button[name="Group: Gather blocks in a container."i]'
+ )
+ .click();
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
@@ -60,10 +66,12 @@ test.describe( 'Group', () => {
page,
} ) => {
await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas.click(
- 'button[aria-label="Group: Gather blocks in a container."]'
- );
- await editor.canvas.click( 'role=button[name="Add block"i]' );
+ await editor.canvas
+ .locator(
+ 'button[aria-label="Group: Gather blocks in a container."]'
+ )
+ .click();
+ await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
await page.click(
'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
);
diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
index 4af974d7b4af6f..705bce2c3f2c9a 100644
--- a/test/e2e/specs/editor/blocks/heading.spec.js
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -12,7 +12,9 @@ test.describe( 'Heading', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '### 3' );
await expect.poll( editor.getBlocks ).toMatchObject( [
@@ -27,7 +29,9 @@ test.describe( 'Heading', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '4' );
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.type( '#### ' );
@@ -44,7 +48,9 @@ test.describe( 'Heading', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '## 1. H' );
await expect.poll( editor.getBlocks ).toMatchObject( [
@@ -59,7 +65,9 @@ test.describe( 'Heading', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '## `code`' );
await expect.poll( editor.getBlocks ).toMatchObject( [
@@ -115,7 +123,9 @@ test.describe( 'Heading', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '### Heading' );
await editor.openDocumentSettingsSidebar();
@@ -147,7 +157,9 @@ test.describe( 'Heading', () => {
} );
test( 'should correctly apply named colors', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '## Heading' );
await editor.openDocumentSettingsSidebar();
@@ -185,7 +197,9 @@ test.describe( 'Heading', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '## Heading' );
// Change text alignment
@@ -216,7 +230,9 @@ test.describe( 'Heading', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Paragraph' );
// Change text alignment
@@ -247,7 +263,9 @@ test.describe( 'Heading', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '## Heading' );
// Change text alignment
diff --git a/test/e2e/specs/editor/blocks/html.spec.js b/test/e2e/specs/editor/blocks/html.spec.js
index 99a875f0810183..f034da6efe6173 100644
--- a/test/e2e/specs/editor/blocks/html.spec.js
+++ b/test/e2e/specs/editor/blocks/html.spec.js
@@ -10,7 +10,9 @@ test.describe( 'HTML block', () => {
test( 'can be created by typing "/html"', async ( { editor, page } ) => {
// Create a Custom HTML block with the slash shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .getByRole( 'button', { name: 'Add default block' } )
+ .click();
await page.keyboard.type( '/html' );
await expect(
page.locator( 'role=option[name="Custom HTML"i][selected]' )
@@ -33,7 +35,9 @@ test.describe( 'HTML block', () => {
test( 'should not encode <', async ( { editor, page } ) => {
// Create a Custom HTML block with the slash shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .getByRole( 'button', { name: 'Add default block' } )
+ .click();
await page.keyboard.type( '/html' );
await expect(
page.locator( 'role=option[name="Custom HTML"i][selected]' )
@@ -42,7 +46,6 @@ test.describe( 'HTML block', () => {
await page.keyboard.type( '1 < 2' );
await editor.publishPost();
await page.reload();
- await page.waitForSelector( '[name="editor-canvas"]' );
await expect(
editor.canvas.locator( '[data-type="core/html"] textarea' )
).toBeVisible();
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index b538e7598d96bc..db3ff72e3ab6eb 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -82,9 +82,9 @@ test.describe( 'Image', () => {
await page.keyboard.type( '2' );
expect(
- await editor.canvas.evaluate(
- () => document.activeElement.innerHTML
- )
+ await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.innerHTML )
).toBe( '12' );
} );
@@ -112,9 +112,9 @@ test.describe( 'Image', () => {
await page.keyboard.press( 'Enter' );
expect(
- await editor.canvas.evaluate(
- () => document.activeElement.innerHTML
- )
+ await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.innerHTML )
).toBe( '1 2' );
} );
@@ -166,9 +166,9 @@ test.describe( 'Image', () => {
await page.keyboard.press( 'ArrowRight' );
expect(
- await editor.canvas.evaluate(
- () => document.activeElement.innerHTML
- )
+ await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.innerHTML )
).toBe( 'a ' );
} );
@@ -392,7 +392,7 @@ test.describe( 'Image', () => {
);
await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
- await editor.canvas.focus( '.wp-block-image' );
+ await editor.canvas.locator( '.wp-block-image' ).focus();
await pageUtils.pressKeys( 'primary+z' );
// Expect an empty image block (placeholder) rather than one with a
@@ -406,13 +406,6 @@ test.describe( 'Image', () => {
page,
editor,
} ) => {
- // To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
await editor.insertBlock( { name: 'core/image' } );
const imageBlock = editor.canvas.getByRole( 'document', {
name: 'Block: Image',
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
index f4396982bb997f..6716a8fb5eac41 100644
--- a/test/e2e/specs/editor/blocks/list.spec.js
+++ b/test/e2e/specs/editor/blocks/list.spec.js
@@ -13,7 +13,9 @@ test.describe( 'List (@firefox)', () => {
page,
} ) => {
// Create a block with some text that will trigger a list creation.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* A list item' );
// Create a second list item.
@@ -38,7 +40,9 @@ test.describe( 'List (@firefox)', () => {
pageUtils,
} ) => {
// Create a list with the slash block shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } );
await page.keyboard.type( '* ' );
@@ -56,7 +60,9 @@ test.describe( 'List (@firefox)', () => {
page,
} ) => {
// Create a block with some text that will trigger a list creation.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1) A list item' );
await expect.poll( editor.getEditedPostContent ).toBe(
@@ -73,7 +79,9 @@ test.describe( 'List (@firefox)', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1. ' );
await pageUtils.pressKeys( 'primary+z' );
@@ -88,7 +96,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* ' );
await page.keyboard.press( 'Backspace' );
@@ -103,7 +113,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* ' );
await expect(
editor.canvas.locator( '[data-type="core/list"]' )
@@ -121,7 +133,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* ' );
await editor.showBlockToolbar();
await page.keyboard.press( 'Backspace' );
@@ -137,7 +151,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.evaluate( () => delete window.requestIdleCallback );
await page.keyboard.type( '* ' );
await expect(
@@ -156,7 +172,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* ' );
await page.keyboard.press( 'Escape' );
@@ -171,7 +189,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* a' );
await page.keyboard.press( 'Backspace' );
await page.keyboard.press( 'Backspace' );
@@ -183,7 +203,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* ' );
await expect(
editor.canvas.locator( '[data-type="core/list"]' )
@@ -200,7 +222,9 @@ test.describe( 'List (@firefox)', () => {
test( 'can be created by typing "/list"', async ( { editor, page } ) => {
// Create a list with the slash block shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/list' );
await expect(
page.locator( 'role=option[name="List"i][selected]' )
@@ -221,7 +245,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await editor.transformBlockTo( 'core/list' );
@@ -238,12 +264,16 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'one' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'two' );
await page.keyboard.down( 'Shift' );
- await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' );
+ await editor.canvas
+ .locator( '[data-type="core/paragraph"] >> nth=0' )
+ .click();
await page.keyboard.up( 'Shift' );
await editor.transformBlockTo( 'core/list' );
@@ -265,7 +295,9 @@ test.describe( 'List (@firefox)', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'one' );
await pageUtils.pressKeys( 'shift+Enter' );
await page.keyboard.type( 'two' );
@@ -289,14 +321,18 @@ test.describe( 'List (@firefox)', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'one' );
await pageUtils.pressKeys( 'shift+Enter' );
await page.keyboard.type( '...' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'two' );
await page.keyboard.down( 'Shift' );
- await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' );
+ await editor.canvas
+ .locator( '[data-type="core/paragraph"] >> nth=0' )
+ .click();
await page.keyboard.up( 'Shift' );
await editor.transformBlockTo( 'core/list' );
@@ -559,7 +595,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1. one' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'two' );
@@ -901,7 +939,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* 1' ); // Should be at level 0.
await page.keyboard.press( 'Enter' );
@@ -1015,7 +1055,9 @@ test.describe( 'List (@firefox)', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* 1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( ' a' );
@@ -1046,7 +1088,9 @@ test.describe( 'List (@firefox)', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* 1' );
await page.keyboard.press( 'Enter' );
@@ -1069,7 +1113,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// Tests the shortcut with a non breaking space.
await page.keyboard.type( '*\u00a0' );
@@ -1085,7 +1131,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// Tests the shortcut with a non breaking space.
await page.keyboard.type( '* 1' );
@@ -1149,7 +1197,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* 1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
@@ -1174,7 +1224,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* 1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
@@ -1204,7 +1256,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1. a' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'b' );
@@ -1261,7 +1315,9 @@ test.describe( 'List (@firefox)', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* a' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'b' );
@@ -1304,7 +1360,9 @@ test.describe( 'List (@firefox)', () => {
} );
test( 'can be exited to selected paragraph', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* ' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '1' );
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
index 42ecb29aa6650f..1ddd4af8ab2e13 100644
--- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
@@ -383,12 +383,12 @@ class ColorControl {
await customLink.click();
// Submenu elements.
- const submenuLink = this.editor.canvas
- .locator( 'a' )
- .filter( { hasText: 'Submenu Link' } );
const submenuWrapper = this.editor.canvas
.getByRole( 'document', { name: 'Block: Custom Link' } )
- .filter( { has: submenuLink } );
+ .filter( { hasText: 'Submenu Link' } );
+ const submenuLink = submenuWrapper
+ .locator( 'a' )
+ .filter( { hasText: 'Submenu Link' } );
// Submenu link color.
await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor );
diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
index 1c745d7a0e57ba..7e761f1861856f 100644
--- a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
@@ -27,7 +27,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await requestUtils.createNavigationMenu( {
title: 'Hidden menu',
content: `
@@ -88,7 +88,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await requestUtils.createNavigationMenu( {
title: 'Hidden menu',
content: `
@@ -203,7 +203,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await requestUtils.createNavigationMenu( {
title: 'Hidden menu',
content: `
@@ -268,7 +268,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await requestUtils.createNavigationMenu( {
title: 'Page list menu',
content: `
diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js
index fcc15890a82492..3cf3654870a351 100644
--- a/test/e2e/specs/editor/blocks/paragraph.spec.js
+++ b/test/e2e/specs/editor/blocks/paragraph.spec.js
@@ -28,9 +28,11 @@ test.describe( 'Paragraph', () => {
} );
await page.keyboard.type( '1' );
- const firstBlockTagName = await editor.canvas.evaluate( () => {
- return document.querySelector( '[data-block]' ).tagName;
- } );
+ const firstBlockTagName = await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => {
+ return document.querySelector( '[data-block]' ).tagName;
+ } );
// The outer element should be a paragraph. Blocks should never have any
// additional div wrappers so the markup remains simple and easy to
@@ -61,14 +63,7 @@ test.describe( 'Paragraph', () => {
editor,
pageUtils,
draggingUtils,
- page,
} ) => {
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
await editor.insertBlock( { name: 'core/paragraph' } );
const testImageName = '10x10_e2e_test_image_z9T8jK.png';
@@ -112,7 +107,7 @@ test.describe( 'Paragraph', () => {
attributes: { content: 'My Heading' },
} );
await editor.insertBlock( { name: 'core/paragraph' } );
- await editor.canvas.focus( 'text=My Heading' );
+ await editor.canvas.locator( 'text=My Heading' ).focus();
await editor.showBlockToolbar();
const dragHandle = page.locator(
diff --git a/test/e2e/specs/editor/blocks/pullquote.spec.js b/test/e2e/specs/editor/blocks/pullquote.spec.js
index f2a6698f5065ff..33f833ca536788 100644
--- a/test/e2e/specs/editor/blocks/pullquote.spec.js
+++ b/test/e2e/specs/editor/blocks/pullquote.spec.js
@@ -12,7 +12,9 @@ test.describe( 'Quote', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await editor.transformBlockTo( 'core/quote' );
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 13b7ee341ede72..d25dedd4a0a397 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -33,7 +33,9 @@ test.describe( 'Quote', () => {
page,
} ) => {
// Create a block with some text that will trigger a paragraph creation.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '> A quote' );
// Create a second paragraph.
await page.keyboard.press( 'Enter' );
@@ -56,7 +58,9 @@ test.describe( 'Quote', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await pageUtils.pressKeys( 'ArrowLeft', { times: 'test'.length } );
await page.keyboard.type( '> ' );
@@ -71,7 +75,9 @@ test.describe( 'Quote', () => {
test( 'can be created by typing "/quote"', async ( { editor, page } ) => {
// Create a list with the slash block shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/quote' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'I’m a quote' );
@@ -88,7 +94,9 @@ test.describe( 'Quote', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await editor.transformBlockTo( 'core/quote' );
expect( await editor.getEditedPostContent() ).toBe(
@@ -104,14 +112,16 @@ test.describe( 'Quote', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'one' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'two' );
await page.keyboard.down( 'Shift' );
- await editor.canvas.click(
- 'role=document[name="Block: Paragraph"i] >> text=one'
- );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i] >> text=one' )
+ .click();
await page.keyboard.up( 'Shift' );
await editor.transformBlockTo( 'core/quote' );
expect( await editor.getEditedPostContent() ).toBe(
diff --git a/test/e2e/specs/editor/blocks/separator.spec.js b/test/e2e/specs/editor/blocks/separator.spec.js
index a2e088e14c3983..70c61535e71bf7 100644
--- a/test/e2e/specs/editor/blocks/separator.spec.js
+++ b/test/e2e/specs/editor/blocks/separator.spec.js
@@ -12,7 +12,9 @@ test.describe( 'Separator', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '---' );
await page.keyboard.press( 'Enter' );
diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js
index 77e978a0df3027..f089402514623c 100644
--- a/test/e2e/specs/editor/blocks/spacer.spec.js
+++ b/test/e2e/specs/editor/blocks/spacer.spec.js
@@ -10,7 +10,9 @@ test.describe( 'Spacer', () => {
test( 'can be created by typing "/spacer"', async ( { editor, page } ) => {
// Create a spacer with the slash block shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/spacer' );
await page.keyboard.press( 'Enter' );
@@ -22,7 +24,9 @@ test.describe( 'Spacer', () => {
editor,
} ) => {
// Create a spacer with the slash block shortcut.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/spacer' );
await page.keyboard.press( 'Enter' );
diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index 689989f9022a3d..1e6dfdcd76e188 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/test/e2e/specs/editor/blocks/table.spec.js
@@ -39,7 +39,9 @@ test.describe( 'Table', () => {
await page.keyboard.type( '10' );
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Expect the post content to have a correctly sized table.
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -49,12 +51,14 @@ test.describe( 'Table', () => {
await editor.insertBlock( { name: 'core/table' } );
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Click the first cell and add some text.
- await editor.canvas.click(
- 'role=textbox[name="Body cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+ .click();
await page.keyboard.type( 'This' );
// Navigate to the next cell and add some text.
@@ -92,7 +96,9 @@ test.describe( 'Table', () => {
await expect( footerSwitch ).toBeHidden();
// // Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Expect the header and footer switches to be present now that the table has been created.
await page.click(
@@ -105,19 +111,25 @@ test.describe( 'Table', () => {
await headerSwitch.check();
await footerSwitch.check();
- await editor.canvas.click(
- 'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator(
+ 'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0'
+ )
+ .click();
await page.keyboard.type( 'header' );
- await editor.canvas.click(
- 'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator(
+ 'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0'
+ )
+ .click();
await page.keyboard.type( 'body' );
- await editor.canvas.click(
- 'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator(
+ 'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0'
+ )
+ .click();
await page.keyboard.type( 'footer' );
// Expect the table to have a header, body and footer with written content.
@@ -139,7 +151,9 @@ test.describe( 'Table', () => {
await editor.openDocumentSettingsSidebar();
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Toggle on the switches and add some content.
await page.click(
@@ -147,9 +161,9 @@ test.describe( 'Table', () => {
);
await page.locator( 'role=checkbox[name="Header section"i]' ).check();
await page.locator( 'role=checkbox[name="Footer section"i]' ).check();
- await editor.canvas.click(
- 'role=textbox[name="Body cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+ .click();
// Add a column.
await editor.clickBlockToolbarButton( 'Edit table' );
@@ -158,9 +172,9 @@ test.describe( 'Table', () => {
// Expect the table to have 3 columns across the header, body and footer.
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
- await editor.canvas.click(
- 'role=textbox[name="Body cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+ .click();
// Delete a column.
await editor.clickBlockToolbarButton( 'Edit table' );
@@ -173,12 +187,16 @@ test.describe( 'Table', () => {
test( 'allows columns to be aligned', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/table' } );
- await editor.canvas.click( 'role=spinbutton[name="Column count"i]' );
+ await editor.canvas
+ .locator( 'role=spinbutton[name="Column count"i]' )
+ .click();
await page.keyboard.press( 'Backspace' );
await page.keyboard.type( '4' );
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Click the first cell and add some text. Don't align.
const cells = editor.canvas.locator(
@@ -218,7 +236,9 @@ test.describe( 'Table', () => {
await editor.openDocumentSettingsSidebar();
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Enable fixed width as it exacerbates the amount of empty space around the RichText.
await page.click(
@@ -229,9 +249,9 @@ test.describe( 'Table', () => {
.check();
// Add multiple new lines to the first cell to make it taller.
- await editor.canvas.click(
- 'role=textbox[name="Body cell text"i] >> nth=0'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+ .click();
await page.keyboard.type( '\n\n\n\n' );
// Get the bounding client rect for the second cell.
@@ -251,12 +271,14 @@ test.describe( 'Table', () => {
await editor.insertBlock( { name: 'core/table' } );
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Click the first cell and add some text.
- await editor.canvas.click(
- 'role=document[name="Block: Table"i] >> figcaption'
- );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Table"i] >> figcaption' )
+ .click();
await page.keyboard.type( 'Caption!' );
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
@@ -264,7 +286,9 @@ test.describe( 'Table', () => {
test( 'up and down arrow navigation', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/table' } );
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
await page.keyboard.type( '1' );
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.type( '2' );
@@ -280,7 +304,9 @@ test.describe( 'Table', () => {
await editor.insertBlock( { name: 'core/table' } );
// Create the table.
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
// Focus should be in first td.
await expect(
diff --git a/test/e2e/specs/editor/local/demo.spec.js b/test/e2e/specs/editor/local/demo.spec.js
new file mode 100644
index 00000000000000..acfee9296e2324
--- /dev/null
+++ b/test/e2e/specs/editor/local/demo.spec.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'New editor state', () => {
+ test( 'content should load, making the post dirty', async ( {
+ page,
+ admin,
+ } ) => {
+ await admin.visitAdminPage( 'post-new.php', 'gutenberg-demo' );
+ await page.waitForFunction( () => {
+ if ( ! window?.wp?.data?.dispatch ) {
+ return false;
+ }
+ window.wp.data
+ .dispatch( 'core/preferences' )
+ .set( 'core/edit-post', 'welcomeGuide', false );
+
+ window.wp.data
+ .dispatch( 'core/preferences' )
+ .set( 'core/edit-post', 'fullscreenMode', false );
+
+ return true;
+ } );
+
+ const isDirty = await page.evaluate( () => {
+ return window.wp.data.select( 'core/editor' ).isEditedPostDirty();
+ } );
+ expect( isDirty ).toBe( true );
+
+ await expect(
+ page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', { name: 'Save draft' } )
+ ).toBeEnabled();
+ } );
+} );
diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js
index 0b445aee451c66..9f12c987efd39b 100644
--- a/test/e2e/specs/editor/plugins/block-variations.spec.js
+++ b/test/e2e/specs/editor/plugins/block-variations.spec.js
@@ -48,7 +48,9 @@ test.describe( 'Block variations', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Large Quote' );
await page.keyboard.press( 'Enter' );
@@ -82,7 +84,9 @@ test.describe( 'Block variations', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Heading' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '/Success Message' );
@@ -97,7 +101,9 @@ test.describe( 'Block variations', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Columns' );
await page.keyboard.press( 'Enter' );
@@ -120,7 +126,9 @@ test.describe( 'Block variations', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Large Quote' );
await page.keyboard.press( 'Enter' );
@@ -155,7 +163,9 @@ test.describe( 'Block variations', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Heading' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '/Success Message' );
@@ -189,7 +199,9 @@ test.describe( 'Block variations', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Heading' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '/Warning Message' );
diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
index 1cceddbf04ad12..17a497f26cee02 100644
--- a/test/e2e/specs/editor/plugins/custom-post-types.spec.js
+++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
@@ -20,7 +20,9 @@ test.describe( 'Test Custom Post Types', () => {
page,
} ) => {
await admin.createNewPost( { postType: 'hierar-no-title' } );
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Parent Post' );
await editor.publishPost();
@@ -53,7 +55,9 @@ test.describe( 'Test Custom Post Types', () => {
await page.getByRole( 'listbox' ).getByRole( 'option' ).first().click();
const parentPage = await parentPageLocator.inputValue();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Child Post' );
await editor.publishPost();
await page.reload();
@@ -68,7 +72,9 @@ test.describe( 'Test Custom Post Types', () => {
page,
} ) => {
await admin.createNewPost( { postType: 'leg_block_in_tpl' } );
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Hello there' );
await expect.poll( editor.getBlocks ).toMatchObject( [
diff --git a/test/e2e/specs/editor/plugins/format-api.spec.js b/test/e2e/specs/editor/plugins/format-api.spec.js
index f98d8292ea8f6f..1e631615313bd1 100644
--- a/test/e2e/specs/editor/plugins/format-api.spec.js
+++ b/test/e2e/specs/editor/plugins/format-api.spec.js
@@ -21,7 +21,9 @@ test.describe( 'Using Format API', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'First paragraph' );
await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
await editor.clickBlockToolbarButton( 'More' );
diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js
index b3b5ed68f66f11..95bc5bf8bfd2c0 100644
--- a/test/e2e/specs/editor/plugins/hooks-api.spec.js
+++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js
@@ -22,7 +22,9 @@ test.describe( 'Using Hooks API', () => {
editor,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'First paragraph' );
await page.click(
`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
@@ -37,7 +39,9 @@ test.describe( 'Using Hooks API', () => {
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'First paragraph' );
const paragraphBlock = editor.canvas.locator(
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
index cd6f440d2db0ed..c0627121f16497 100644
--- a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
@@ -107,7 +107,9 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
editor,
page,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/Allowed Blocks Dynamic' );
await page.keyboard.press( 'Enter' );
diff --git a/test/e2e/specs/editor/plugins/nonce.spec.js b/test/e2e/specs/editor/plugins/nonce.spec.js
index a05f3618b36417..0ffe0c5efb8139 100644
--- a/test/e2e/specs/editor/plugins/nonce.spec.js
+++ b/test/e2e/specs/editor/plugins/nonce.spec.js
@@ -12,12 +12,13 @@ test.describe( 'Nonce', () => {
page,
admin,
requestUtils,
+ editor,
} ) => {
await admin.createNewPost();
+ await expect(
+ editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+ ).toBeFocused();
await page.keyboard.press( 'Enter' );
- // Wait until the network is idle.
- // eslint-disable-next-line playwright/no-networkidle
- await page.waitForLoadState( 'networkidle' );
await page.keyboard.type( 'test' );
/**
diff --git a/test/e2e/specs/editor/plugins/post-type-templates.spec.js b/test/e2e/specs/editor/plugins/post-type-templates.spec.js
index c743d08d8ae681..9b2abddb0dd0e2 100644
--- a/test/e2e/specs/editor/plugins/post-type-templates.spec.js
+++ b/test/e2e/specs/editor/plugins/post-type-templates.spec.js
@@ -35,7 +35,9 @@ test.describe( 'Post type templates', () => {
// Remove a block from the template to verify that it's not
// re-added after saving and reloading the editor.
- await editor.canvas.focus( 'role=textbox[name="Add title"i]' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .focus();
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.press( 'Backspace' );
await page.click( 'role=button[name="Save draft"i]' );
@@ -64,10 +66,9 @@ test.describe( 'Post type templates', () => {
} ) => {
// Remove all blocks from the template to verify that they're not
// re-added after saving and reloading the editor.
- await editor.canvas.fill(
- 'role=textbox[name="Add title"i]',
- 'My Empty Book'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .fill( 'My Empty Book' );
await page.keyboard.press( 'ArrowDown' );
await pageUtils.pressKeys( 'primary+A' );
await page.keyboard.press( 'Backspace' );
@@ -125,11 +126,12 @@ test.describe( 'Post type templates', () => {
// Remove the default block template to verify that it's not
// re-added after saving and reloading the editor.
- await editor.canvas.fill(
- 'role=textbox[name="Add title"i]',
- 'My Image Format'
- );
- await editor.canvas.focus( 'role=document[name="Block: Image"i]' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .fill( 'My Image Format' );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Image"i]' )
+ .focus();
await page.keyboard.press( 'Backspace' );
await page.click( 'role=button[name="Save draft"i]' );
await expect(
diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
index c5eafdafe918db..710e06b35e124f 100644
--- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
+++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
@@ -20,7 +20,7 @@ test.describe( 'WP Editor Meta Boxes', () => {
await admin.createNewPost();
// Add title to enable valid non-empty post save.
- await editor.canvas
+ await page
.locator( 'role=textbox[name="Add title"i]' )
.type( 'Hello Meta' );
diff --git a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
index 2c28ba311d8c71..d8dda0cabdf843 100644
--- a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
+++ b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
@@ -22,6 +22,14 @@ test.describe( 'Region navigation (@firefox, @webkit)', () => {
attributes: { content: 'Dummy text' },
} );
+ const dummyParagraph = editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } )
+ .filter( { hasText: 'Dummy text' } );
+
+ await expect( dummyParagraph ).toBeFocused();
+
// Navigate to first region and check that we made it. Must navigate forward 4 times as initial focus is placed in post title field.
await page.keyboard.press( 'Control+`' );
await page.keyboard.press( 'Control+`' );
diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js
index 8b819d3866b6ca..0a5e421debedb7 100644
--- a/test/e2e/specs/editor/various/a11y.spec.js
+++ b/test/e2e/specs/editor/various/a11y.spec.js
@@ -23,15 +23,11 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
editor,
} ) => {
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
+
// On a new post, initial focus is set on the Post title.
await expect(
- editor.canvas.locator( 'role=textbox[name=/Add title/i]' )
+ page.locator( 'role=textbox[name=/Add title/i]' )
).toBeFocused();
// Navigate to the 'Editor settings' region.
await pageUtils.pressKeys( 'ctrl+`' );
@@ -54,14 +50,11 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
test( 'should constrain tabbing within a modal', async ( {
page,
pageUtils,
+ editor,
} ) => {
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
+
// Open keyboard shortcuts modal.
await pageUtils.pressKeys( 'access+h' );
diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
index 0facffd9097e87..15f9d9ea877320 100644
--- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
+++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -22,7 +22,9 @@ test.describe( 'adding inline tokens', () => {
pageUtils,
} ) => {
// Create a paragraph.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'a ' );
diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
index 3cfc838fcadf25..ec0ca999993c2f 100644
--- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
+++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
@@ -100,21 +100,25 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( testData.triggerString );
await expect(
page.locator( `role=option[name="${ testData.optionText }"i]` )
).toBeVisible();
- const ariaOwns = await editor.canvas.evaluate( () => {
- return document.activeElement.getAttribute( 'aria-owns' );
- } );
- const ariaActiveDescendant = await editor.canvas.evaluate( () => {
- return document.activeElement.getAttribute(
- 'aria-activedescendant'
- );
- } );
+ const ariaOwns = await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => {
+ return document.activeElement.getAttribute( 'aria-owns' );
+ } );
+ const ariaActiveDescendant = await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => {
+ return document.activeElement.getAttribute(
+ 'aria-activedescendant'
+ );
+ } );
// Ensure `aria-owns` is part of the same document and ensure the
// selected option is equal to the active descendant.
await expect(
@@ -148,9 +152,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Stuck in the middle with you.' );
await pageUtils.pressKeys( 'ArrowLeft', { times: 'you.'.length } );
await page.keyboard.type( testData.triggerString );
@@ -188,9 +192,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( testData.firstTriggerString );
await expect(
page.locator(
@@ -230,9 +234,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( testData.triggerString );
await expect(
page.locator( `role=option[name="${ testData.optionText }"i]` )
@@ -269,9 +273,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( testData.triggerString );
await expect(
page.locator( `role=option[name="${ testData.optionText }"i]` )
@@ -306,9 +310,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( testData.triggerString );
await expect(
page.locator( `role=option[name="${ testData.optionText }"i]` )
@@ -327,9 +331,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
page,
editor,
} ) => {
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// The 'Grapes' option is disabled in our test plugin, so it should not insert the grapes emoji
await page.keyboard.type( 'Sorry, we are all out of ~g' );
await expect(
@@ -395,9 +399,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
`;
}
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
for ( let i = 0; i < 4; i++ ) {
await page.keyboard.type( testData.triggerString );
@@ -423,28 +427,52 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
- await page.keyboard.type( '@fr' );
+ const typingDelay = 100;
+
+ await editor.canvas
+ .getByRole( 'button', { name: 'Add default block' } )
+ .click();
+
+ await page.keyboard.type( '@fr', { delay: typingDelay } );
await expect(
- page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
+ page.getByRole( 'option', {
+ name: 'Frodo Baggins',
+ selected: true,
+ } )
).toBeVisible();
+
await page.keyboard.press( 'Enter' );
- await page.keyboard.type( ' +bi' );
+ await expect.poll( editor.getBlocks ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: { content: '@ringbearer' },
+ },
+ ] );
+
+ await page.keyboard.type( ' +bi', { delay: typingDelay } );
await expect(
- page.locator( 'role=option', { hasText: 'Bilbo Baggins' } )
+ page.getByRole( 'option', {
+ name: 'Bilbo Baggins',
+ selected: true,
+ } )
).toBeVisible();
await page.keyboard.press( 'Enter' );
- await expect.poll( editor.getEditedPostContent )
- .toBe( `
-@ringbearer +thebetterhobbit
-` );
+
+ await expect.poll( editor.getBlocks ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: { content: '@ringbearer +thebetterhobbit' },
+ },
+ ] );
} );
test( 'should hide UI when selection changes (by keyboard)', async ( {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '@fr' );
await expect(
page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
@@ -460,7 +488,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '@' );
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( 'f' );
@@ -470,7 +500,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
).toBeVisible();
// Use the strong tag to move the selection by mouse within the mention.
- await editor.canvas.click( '[data-type="core/paragraph"] strong' );
+ await editor.canvas
+ .locator( '[data-type="core/paragraph"] strong' )
+ .click();
await expect(
page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
).toBeHidden();
@@ -480,7 +512,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '/' );
await expect(
page.locator( `role=option[name="Image"i]` )
diff --git a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
index 4dc49bc0f7510a..f0bfe5bff203fb 100644
--- a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
+++ b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
@@ -44,9 +44,9 @@ test.describe( 'Navigating the block hierarchy', () => {
} ) => {
await editor.openDocumentSettingsSidebar();
await editor.insertBlock( { name: 'core/columns' } );
- await editor.canvas.click(
- 'role=button[name="Two columns; equal split"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Two columns; equal split"i]' )
+ .click();
// Open the block inserter.
await page.keyboard.press( 'ArrowDown' );
@@ -99,9 +99,9 @@ test.describe( 'Navigating the block hierarchy', () => {
} ) => {
await editor.openDocumentSettingsSidebar();
await editor.insertBlock( { name: 'core/columns' } );
- await editor.canvas.click(
- 'role=button[name="Two columns; equal split"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Two columns; equal split"i]' )
+ .click();
// Open the block inserter.
await page.keyboard.press( 'ArrowDown' );
@@ -155,7 +155,9 @@ test.describe( 'Navigating the block hierarchy', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'You say goodbye' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '## Hello, hello' );
@@ -191,9 +193,11 @@ test.describe( 'Navigating the block hierarchy', () => {
pageUtils,
} ) => {
await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas.click(
- 'role=button[name="Group: Gather blocks in a container."i]'
- );
+ await editor.canvas
+ .locator(
+ 'role=button[name="Group: Gather blocks in a container."i]'
+ )
+ .click();
// Open the block inserter.
await page.keyboard.press( 'ArrowDown' );
@@ -225,7 +229,9 @@ test.describe( 'Navigating the block hierarchy', () => {
] );
// Deselect the blocks.
- await editor.canvas.click( 'role=textbox[name="Add title"i]' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .click();
// Open list view and return to the first block.
await pageUtils.pressKeys( 'access+o' );
diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js
index 67a7f0357bc2a7..b40e7a4b7448a8 100644
--- a/test/e2e/specs/editor/various/block-locking.spec.js
+++ b/test/e2e/specs/editor/various/block-locking.spec.js
@@ -9,7 +9,9 @@ test.describe( 'Block Locking', () => {
} );
test( 'can prevent removal', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Some paragraph' );
await editor.clickBlockOptionsMenuItem( 'Lock' );
@@ -23,7 +25,9 @@ test.describe( 'Block Locking', () => {
} );
test( 'can disable movement', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'First paragraph' );
await page.keyboard.type( 'Enter' );
@@ -47,7 +51,9 @@ test.describe( 'Block Locking', () => {
} );
test( 'can lock everything', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Some paragraph' );
await editor.clickBlockOptionsMenuItem( 'Lock' );
@@ -62,7 +68,9 @@ test.describe( 'Block Locking', () => {
} );
test( 'can unlock from toolbar', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Some paragraph' );
await editor.clickBlockOptionsMenuItem( 'Lock' );
diff --git a/test/e2e/specs/editor/various/block-mover.spec.js b/test/e2e/specs/editor/various/block-mover.spec.js
index 4ed90191f25585..5c3b04a0697743 100644
--- a/test/e2e/specs/editor/various/block-mover.spec.js
+++ b/test/e2e/specs/editor/various/block-mover.spec.js
@@ -23,7 +23,7 @@ test.describe( 'block mover', () => {
} );
// Select a block so the block mover is rendered.
- await editor.canvas.focus( 'text=First Paragraph' );
+ await editor.canvas.locator( 'text=First Paragraph' ).focus();
await editor.showBlockToolbar();
const moveDownButton = page.locator(
@@ -47,7 +47,7 @@ test.describe( 'block mover', () => {
attributes: { content: 'First Paragraph' },
} );
// Select a block so the block mover has the possibility of being rendered.
- await editor.canvas.focus( 'text=First Paragraph' );
+ await editor.canvas.locator( 'text=First Paragraph' ).focus();
await editor.showBlockToolbar();
// Ensure no block mover exists when only one block exists on the page.
diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js
index 59c53682854292..5b8ef6bdcd051b 100644
--- a/test/e2e/specs/editor/various/block-moving-mode.spec.js
+++ b/test/e2e/specs/editor/various/block-moving-mode.spec.js
@@ -47,9 +47,11 @@ test.describe( 'Block moving mode', () => {
test( 'can move block in the nested block', async ( { editor, page } ) => {
// Create two group blocks with some blocks.
await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas.click(
- 'role=button[name="Group: Gather blocks in a container."i]'
- );
+ await editor.canvas
+ .locator(
+ 'role=button[name="Group: Gather blocks in a container."i]'
+ )
+ .click();
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.press( 'Enter' );
await page.getByRole( 'option', { name: 'Paragraph' } ).click();
@@ -58,9 +60,11 @@ test.describe( 'Block moving mode', () => {
await page.keyboard.type( 'Second Paragraph' );
await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas.click(
- 'role=button[name="Group: Gather blocks in a container."i]'
- );
+ await editor.canvas
+ .locator(
+ 'role=button[name="Group: Gather blocks in a container."i]'
+ )
+ .click();
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.press( 'Enter' );
await page.getByRole( 'option', { name: 'Paragraph' } ).click();
@@ -122,9 +126,11 @@ test.describe( 'Block moving mode', () => {
attributes: { content: 'First Paragraph' },
} );
await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas.click(
- 'role=button[name="Group: Gather blocks in a container."i]'
- );
+ await editor.canvas
+ .locator(
+ 'role=button[name="Group: Gather blocks in a container."i]'
+ )
+ .click();
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.press( 'Enter' );
await page.getByRole( 'option', { name: 'Paragraph' } ).click();
diff --git a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
index a1efbfa579b9a7..71522c1d439a54 100644
--- a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
+++ b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Compatibility with classic editor', () => {
editor,
} ) => {
await editor.insertBlock( { name: 'core/html' } );
- await editor.canvas.focus( 'role=textbox[name="HTML"i]' );
+ await editor.canvas.locator( 'role=textbox[name="HTML"i]' ).focus();
await page.keyboard.type( ' ' );
await page.keyboard.type( 'Random Link' );
await page.keyboard.type( ' ' );
diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js
index 03282357a72b65..e7d52562636f3b 100644
--- a/test/e2e/specs/editor/various/content-only-lock.spec.js
+++ b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -24,8 +24,9 @@ test.describe( 'Content-only lock', () => {
` );
await pageUtils.pressKeys( 'secondary+M' );
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
- await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i]' )
+ .click();
await page.keyboard.type( ' World' );
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
@@ -49,8 +50,9 @@ test.describe( 'Content-only lock', () => {
` );
await pageUtils.pressKeys( 'secondary+M' );
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
- await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i]' )
+ .click();
await page.keyboard.type( ' WP' );
await expect.poll( editor.getBlocks ).toMatchObject( [
{
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
index 823926c1121a02..4c249349243669 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -13,7 +13,9 @@ test.describe( 'Copy/cut/paste', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Copy - collapsed selection' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
@@ -32,13 +34,9 @@ test.describe( 'Copy/cut/paste', () => {
pageUtils,
} ) => {
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.switchToLegacyCanvas();
+
+ await page.locator( 'role=button[name="Add default block"i]' ).click();
await page.keyboard.type( 'Cut - collapsed selection' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
@@ -66,7 +64,9 @@ test.describe( 'Copy/cut/paste', () => {
await page.evaluate( () => {
window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
} );
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+v' );
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
@@ -85,7 +85,9 @@ test.describe( 'Copy/cut/paste', () => {
await page.evaluate( () => {
window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
} );
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+v' );
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
@@ -95,7 +97,9 @@ test.describe( 'Copy/cut/paste', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'First block' );
await page.keyboard.press( 'Enter' );
@@ -247,7 +251,9 @@ test.describe( 'Copy/cut/paste', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A block' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'B block' );
@@ -259,9 +265,13 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+ArrowLeft' );
// Sometimes the caret has not moved to the correct position before pressing Enter.
// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
- await editor.canvas.waitForFunction(
- () => window.getSelection().type === 'Caret'
- );
+ await expect
+ .poll( async () =>
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().type )
+ )
+ .toBe( 'Caret' );
// Create a new block at the top of the document to paste there.
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'ArrowUp' );
@@ -274,7 +284,9 @@ test.describe( 'Copy/cut/paste', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A block' );
await editor.insertBlock( { name: 'core/spacer' } );
await page.keyboard.press( 'Enter' );
@@ -287,9 +299,13 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+ArrowLeft' );
// Sometimes the caret has not moved to the correct position before pressing Enter.
// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
- await editor.canvas.waitForFunction(
- () => window.getSelection().type === 'Caret'
- );
+ await expect
+ .poll( async () =>
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().type )
+ )
+ .toBe( 'Caret' );
// Create a new block at the top of the document to paste there.
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'ArrowUp' );
@@ -302,7 +318,9 @@ test.describe( 'Copy/cut/paste', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A block' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'B block' );
@@ -314,9 +332,13 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+ArrowLeft' );
// Sometimes the caret has not moved to the correct position before pressing Enter.
// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
- await editor.canvas.waitForFunction(
- () => window.getSelection().type === 'Caret'
- );
+ await expect
+ .poll( async () =>
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().type )
+ )
+ .toBe( 'Caret' );
// Create a new block at the top of the document to paste there.
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'ArrowUp' );
@@ -329,7 +351,9 @@ test.describe( 'Copy/cut/paste', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A block' );
await editor.insertBlock( { name: 'core/spacer' } );
await page.keyboard.press( 'Enter' );
@@ -342,9 +366,13 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+ArrowLeft' );
// Sometimes the caret has not moved to the correct position before pressing Enter.
// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
- await editor.canvas.waitForFunction(
- () => window.getSelection().type === 'Caret'
- );
+ await expect
+ .poll( async () =>
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().type )
+ )
+ .toBe( 'Caret' );
// Create a new block at the top of the document to paste there.
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'ArrowUp' );
@@ -369,9 +397,13 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+ArrowLeft' );
// Sometimes the caret has not moved to the correct position before pressing Enter.
// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
- await editor.canvas.waitForFunction(
- () => window.getSelection().type === 'Caret'
- );
+ await expect
+ .poll( async () =>
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().type )
+ )
+ .toBe( 'Caret' );
// Create a new block at the top of the document to paste there.
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'ArrowUp' );
@@ -396,9 +428,13 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+ArrowLeft' );
// Sometimes the caret has not moved to the correct position before pressing Enter.
// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
- await editor.canvas.waitForFunction(
- () => window.getSelection().type === 'Caret'
- );
+ await expect
+ .poll( async () =>
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().type )
+ )
+ .toBe( 'Caret' );
// Create a new code block to paste there.
await editor.insertBlock( { name: 'core/code' } );
await pageUtils.pressKeys( 'primary+v' );
@@ -420,9 +456,9 @@ test.describe( 'Copy/cut/paste', () => {
await pageUtils.pressKeys( 'primary+v' );
// Expect the span to be filtered out.
expect(
- await editor.canvas.evaluate(
- () => document.activeElement.innerHTML
- )
+ await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.innerHTML )
).toMatchSnapshot();
} );
@@ -440,9 +476,9 @@ test.describe( 'Copy/cut/paste', () => {
// Ensure the selection is correct.
await page.keyboard.type( 'y' );
expect(
- await editor.canvas.evaluate(
- () => document.activeElement.innerHTML
- )
+ await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.innerHTML )
).toBe( 'axyb' );
} );
diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js
index 2d95e3bdefe975..fb56b43dc6e031 100644
--- a/test/e2e/specs/editor/various/draggable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js
@@ -42,9 +42,9 @@ test.describe( 'Draggable block', () => {
2
` );
- await editor.canvas.focus(
- 'role=document[name="Block: Paragraph"i] >> text=2'
- );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i] >> text=2' )
+ .focus();
await editor.showBlockToolbar();
const dragHandle = page.locator(
@@ -114,9 +114,9 @@ test.describe( 'Draggable block', () => {
2
` );
- await editor.canvas.focus(
- 'role=document[name="Block: Paragraph"i] >> text=1'
- );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i] >> text=1' )
+ .focus();
await editor.showBlockToolbar();
const dragHandle = page.locator(
@@ -197,9 +197,9 @@ test.describe( 'Draggable block', () => {
],
} );
- await editor.canvas.focus(
- 'role=document[name="Block: Paragraph"i] >> text=2'
- );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i] >> text=2' )
+ .focus();
await editor.showBlockToolbar();
const dragHandle = page.locator(
@@ -278,9 +278,9 @@ test.describe( 'Draggable block', () => {
],
} );
- await editor.canvas.focus(
- 'role=document[name="Block: Paragraph"i] >> text=1'
- );
+ await editor.canvas
+ .locator( 'role=document[name="Block: Paragraph"i] >> text=1' )
+ .focus();
await editor.showBlockToolbar();
const dragHandle = page.locator(
@@ -342,13 +342,6 @@ test.describe( 'Draggable block', () => {
editor,
pageUtils,
} ) => {
- // To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
// Insert a row.
await editor.insertBlock( {
name: 'core/group',
@@ -421,7 +414,7 @@ test.describe( 'Draggable block', () => {
'Dragging over the empty group block but outside the appender should still show the blue background'
).toHaveCSS( 'background-color', 'rgb(0, 124, 186)' );
- await drop();
+ await drop( rowBlock );
await expect( rowAppender ).toBeHidden();
await expect.poll( editor.getBlocks ).toMatchObject( [
{
@@ -453,7 +446,7 @@ test.describe( 'Draggable block', () => {
'rgb(0, 124, 186)'
);
- await drop();
+ await drop( columnAppender );
await expect( columnAppender ).toBeHidden();
await expect.poll( editor.getBlocks ).toMatchObject( [
{ name: 'core/group' },
diff --git a/test/e2e/specs/editor/various/font-size-picker.spec.js b/test/e2e/specs/editor/various/font-size-picker.spec.js
index ddc47e3ee6de66..5c6cb4b186e25e 100644
--- a/test/e2e/specs/editor/various/font-size-picker.spec.js
+++ b/test/e2e/specs/editor/various/font-size-picker.spec.js
@@ -24,9 +24,9 @@ test.describe( 'Font Size Picker', () => {
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Paragraph to be made "small"' );
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
@@ -47,9 +47,9 @@ test.describe( 'Font Size Picker', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Paragraph reset - custom size' );
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
@@ -139,9 +139,9 @@ test.describe( 'Font Size Picker', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Paragraph to be made "large"' );
await page.click(
'role=group[name="Font size"i] >> role=button[name="Font size"i]'
@@ -161,9 +161,9 @@ test.describe( 'Font Size Picker', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type(
'Paragraph with font size reset using tools panel menu'
);
@@ -194,9 +194,9 @@ test.describe( 'Font Size Picker', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type(
'Paragraph with font size reset using input field'
);
@@ -231,9 +231,9 @@ test.describe( 'Font Size Picker', () => {
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Paragraph to be made "large"' );
await page.click(
'role=radiogroup[name="Font size"i] >> role=radio[name="Large"i]'
@@ -250,9 +250,9 @@ test.describe( 'Font Size Picker', () => {
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type(
'Paragraph with font size reset using tools panel menu'
);
@@ -281,9 +281,9 @@ test.describe( 'Font Size Picker', () => {
pageUtils,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click(
- 'role=button[name="Add default block"i]'
- );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type(
'Paragraph with font size reset using input field'
);
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
index e3aa17c5a101cb..14a2fc653e3873 100644
--- a/test/e2e/specs/editor/various/footnotes.spec.js
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -27,7 +27,9 @@ test.describe( 'Footnotes', () => {
} );
test( 'can be inserted', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'first paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'second paragraph' );
@@ -38,7 +40,7 @@ test.describe( 'Footnotes', () => {
await page.keyboard.type( 'first footnote' );
- const id1 = await editor.canvas.evaluate( () => {
+ const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
return document.activeElement.id;
} );
@@ -58,7 +60,7 @@ test.describe( 'Footnotes', () => {
},
] );
- await editor.canvas.click( 'p:text("first paragraph")' );
+ await editor.canvas.locator( 'p:text("first paragraph")' ).click();
await editor.showBlockToolbar();
await editor.clickBlockToolbarButton( 'More' );
@@ -66,7 +68,7 @@ test.describe( 'Footnotes', () => {
await page.keyboard.type( 'second footnote' );
- const id2 = await editor.canvas.evaluate( () => {
+ const id2 = await editor.canvas.locator( ':root' ).evaluate( () => {
return document.activeElement.id;
} );
@@ -99,7 +101,7 @@ test.describe( 'Footnotes', () => {
},
] );
- await editor.canvas.click( 'p:text("first paragraph")' );
+ await editor.canvas.locator( 'p:text("first paragraph")' ).click();
await editor.showBlockToolbar();
await editor.clickBlockToolbarButton( 'Move down' );
@@ -133,7 +135,7 @@ test.describe( 'Footnotes', () => {
},
] );
- await editor.canvas.click( `a[href="#${ id2 }-link"]` );
+ await editor.canvas.locator( `a[href="#${ id2 }-link"]` ).click();
await page.keyboard.press( 'Backspace' );
expect( await editor.getBlocks() ).toMatchObject( [
@@ -161,7 +163,7 @@ test.describe( 'Footnotes', () => {
},
] );
- await editor.canvas.click( `a[href="#${ id1 }-link"]` );
+ await editor.canvas.locator( `a[href="#${ id1 }-link"]` ).click();
await page.keyboard.press( 'Backspace' );
expect( await editor.getBlocks() ).toMatchObject( [
@@ -186,14 +188,16 @@ test.describe( 'Footnotes', () => {
} );
test( 'can be inserted in a list', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '* 1' );
await editor.clickBlockToolbarButton( 'More' );
await page.locator( 'button:text("Footnote")' ).click();
await page.keyboard.type( 'a' );
- const id1 = await editor.canvas.evaluate( () => {
+ const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
return document.activeElement.id;
} );
@@ -224,7 +228,9 @@ test.describe( 'Footnotes', () => {
test( 'can be inserted in a table', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/table' } );
- await editor.canvas.click( 'role=button[name="Create Table"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Create Table"i]' )
+ .click();
await page.keyboard.type( '1' );
await editor.showBlockToolbar();
await editor.clickBlockToolbarButton( 'More' );
@@ -232,7 +238,7 @@ test.describe( 'Footnotes', () => {
await page.keyboard.type( 'a' );
- const id1 = await editor.canvas.evaluate( () => {
+ const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
return document.activeElement.id;
} );
@@ -282,7 +288,9 @@ test.describe( 'Footnotes', () => {
} );
test( 'works with revisions', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'first paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'second paragraph' );
@@ -294,11 +302,11 @@ test.describe( 'Footnotes', () => {
// Check if content is correctly slashed on save and restore.
await page.keyboard.type( 'first footnote"' );
- const id1 = await editor.canvas.evaluate( () => {
+ const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
return document.activeElement.id;
} );
- await editor.canvas.click( 'p:text("first paragraph")' );
+ await editor.canvas.locator( 'p:text("first paragraph")' ).click();
await editor.showBlockToolbar();
await editor.clickBlockToolbarButton( 'More' );
@@ -306,7 +314,7 @@ test.describe( 'Footnotes', () => {
await page.keyboard.type( 'second footnote' );
- const id2 = await editor.canvas.evaluate( () => {
+ const id2 = await editor.canvas.locator( ':root' ).evaluate( () => {
return document.activeElement.id;
} );
@@ -322,7 +330,7 @@ test.describe( 'Footnotes', () => {
},
] );
- await editor.canvas.click( 'p:text("first paragraph")' );
+ await editor.canvas.locator( 'p:text("first paragraph")' ).click();
await editor.showBlockToolbar();
await editor.clickBlockToolbarButton( 'Move down' );
@@ -348,7 +356,7 @@ test.describe( 'Footnotes', () => {
await previewPage.close();
await editorPage.bringToFront();
- await editor.canvas.click( 'p:text("first paragraph")' );
+ await editor.canvas.locator( 'p:text("first paragraph")' ).click();
// Open revisions.
await editor.openDocumentSettingsSidebar();
@@ -383,7 +391,9 @@ test.describe( 'Footnotes', () => {
} );
test( 'can be previewed when published', async ( { editor, page } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'a' );
await editor.showBlockToolbar();
@@ -396,7 +406,7 @@ test.describe( 'Footnotes', () => {
const postId = await editor.publishPost();
// Test previewing changes to meta.
- await editor.canvas.click( 'ol.wp-block-footnotes li span' );
+ await editor.canvas.locator( 'ol.wp-block-footnotes li span' ).click();
await page.keyboard.press( 'End' );
await page.keyboard.type( '2' );
@@ -410,8 +420,9 @@ test.describe( 'Footnotes', () => {
await previewPage.close();
await editorPage.bringToFront();
- // Test again, this time with an existing revision (different code path).
- await editor.canvas.click( 'ol.wp-block-footnotes li span' );
+ // Test again, this time with an existing revision (different code
+ // path).
+ await editor.canvas.locator( 'ol.wp-block-footnotes li span' ).click();
await page.keyboard.press( 'End' );
// Test slashing.
await page.keyboard.type( '3"' );
diff --git a/test/e2e/specs/editor/various/inner-blocks-templates.spec.js b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js
index 47ef0dfe747912..0f9aed33d0773b 100644
--- a/test/e2e/specs/editor/various/inner-blocks-templates.spec.js
+++ b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js
@@ -28,11 +28,9 @@ test.describe( 'Inner blocks templates', () => {
name: 'test/test-inner-blocks-async-template',
} );
- const blockWithTemplateContent = page
- .frameLocator( '[name=editor-canvas]' )
- .locator(
- 'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo'
- );
+ const blockWithTemplateContent = editor.canvas.locator(
+ 'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo'
+ );
// The block template content appears asynchronously, so wait for it.
await expect( blockWithTemplateContent ).toBeVisible();
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index cfef686ef5c879..a48fe117c97a2c 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -31,7 +31,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
);
await admin.createNewPost();
- await insertingBlocksUtils.runWithoutIframe();
+ await editor.switchToLegacyCanvas();
// We need a dummy block in place to display the drop indicator due to a bug.
// @see https://github.com/WordPress/gutenberg/issues/44064
@@ -39,7 +39,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
name: 'core/paragraph',
attributes: { content: 'Dummy text' },
} );
- const paragraphBlock = editor.canvas.locator(
+ const paragraphBlock = page.locator(
'[data-type="core/paragraph"] >> text=Dummy text'
);
@@ -109,7 +109,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
insertingBlocksUtils,
} ) => {
await admin.createNewPost();
- await insertingBlocksUtils.runWithoutIframe();
+ await editor.switchToLegacyCanvas();
// We need a dummy block in place to display the drop indicator due to a bug.
// @see https://github.com/WordPress/gutenberg/issues/44064
@@ -120,7 +120,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
const beforeContent = await editor.getEditedPostContent();
- const paragraphBlock = editor.canvas.locator(
+ const paragraphBlock = page.locator(
'[data-type="core/paragraph"] >> text=Dummy text'
);
@@ -175,7 +175,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
);
await admin.createNewPost();
- await insertingBlocksUtils.runWithoutIframe();
+ await editor.switchToLegacyCanvas();
// We need a dummy block in place to display the drop indicator due to a bug.
// @see https://github.com/WordPress/gutenberg/issues/44064
@@ -184,7 +184,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
attributes: { content: 'Dummy text' },
} );
- const paragraphBlock = editor.canvas.locator(
+ const paragraphBlock = page.locator(
'[data-type="core/paragraph"] >> text=Dummy text'
);
@@ -245,7 +245,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
insertingBlocksUtils,
} ) => {
await admin.createNewPost();
- await insertingBlocksUtils.runWithoutIframe();
+ await editor.switchToLegacyCanvas();
// We need a dummy block in place to display the drop indicator due to a bug.
// @see https://github.com/WordPress/gutenberg/issues/44064
@@ -256,7 +256,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
const beforeContent = await editor.getEditedPostContent();
- const paragraphBlock = editor.canvas.locator(
+ const paragraphBlock = page.locator(
'[data-type="core/paragraph"] >> text=Dummy text'
);
@@ -307,10 +307,8 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
admin,
page,
editor,
- insertingBlocksUtils,
} ) => {
await admin.createNewPost();
- await insertingBlocksUtils.runWithoutIframe();
const inserterButton = page.getByRole( 'button', {
name: 'Toggle block inserter',
@@ -390,16 +388,4 @@ class InsertingBlocksUtils {
'data-testid=block-draggable-chip >> visible=true'
);
}
-
- async runWithoutIframe() {
- /**
- * @todo Some drag an drop tests are failing, so run them without iframe for now.
- */
- return await this.page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
- }
}
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
index 8d1f37187fee18..57b958fdfc4b44 100644
--- a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
+++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
@@ -13,7 +13,9 @@ test.describe( 'Keep styles on block transforms', () => {
editor,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '## Heading' );
await page.click( 'role=button[name="Color Text styles"i]' );
await page.click( 'role=option[name="Color: Luminous vivid orange"i]' );
@@ -37,15 +39,10 @@ test.describe( 'Keep styles on block transforms', () => {
pageUtils,
editor,
} ) => {
- // To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Line 1 to be made large' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Line 2 to be made large' );
@@ -78,7 +75,9 @@ test.describe( 'Keep styles on block transforms', () => {
editor,
} ) => {
await editor.openDocumentSettingsSidebar();
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Line 1 to be made large' );
await page.click( 'role=radio[name="Large"i]' );
await editor.showBlockToolbar();
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
index 7fd21085deae2a..222d743acdf395 100644
--- a/test/e2e/specs/editor/various/list-view.spec.js
+++ b/test/e2e/specs/editor/various/list-view.spec.js
@@ -261,13 +261,6 @@ test.describe( 'List View', () => {
page,
pageUtils,
} ) => {
- // To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
await editor.insertBlock( { name: 'core/image' } );
await editor.insertBlock( {
name: 'core/paragraph',
diff --git a/test/e2e/specs/editor/various/mentions.spec.js b/test/e2e/specs/editor/various/mentions.spec.js
index 061b8d67a0801f..fef3b1c3e3d2e1 100644
--- a/test/e2e/specs/editor/various/mentions.spec.js
+++ b/test/e2e/specs/editor/various/mentions.spec.js
@@ -23,7 +23,9 @@ test.describe( 'autocomplete mentions', () => {
} );
test( 'should insert mention', async ( { page, editor } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'I am @ad' );
await expect(
page.locator( 'role=listbox >> role=option[name=/admin/i]' )
@@ -42,7 +44,9 @@ test.describe( 'autocomplete mentions', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Stuck in the middle with you' );
await pageUtils.pressKeys( 'ArrowLeft', { times: 'you'.length } );
await page.keyboard.type( '@j' );
@@ -62,7 +66,9 @@ test.describe( 'autocomplete mentions', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'I am @j' );
await expect(
page.locator( 'role=listbox >> role=option[name=/testuser/i]' )
diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
index 3374a13b98eb79..32fe45e6951bcc 100644
--- a/test/e2e/specs/editor/various/multi-block-selection.spec.js
+++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -248,20 +248,14 @@ test.describe( 'Multi-block selection', () => {
multiBlockSelectionUtils,
} ) => {
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
- await editor.canvas
- .getByRole( 'button', { name: 'Add default block' } )
- .click();
+ await editor.switchToLegacyCanvas();
+
+ await page.getByRole( 'button', { name: 'Add default block' } ).click();
await page.keyboard.type( '1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
- await editor.canvas
+ await page
.getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '1' } )
.click( { modifiers: [ 'Shift' ] } );
@@ -278,11 +272,11 @@ test.describe( 'Multi-block selection', () => {
.getByRole( 'toolbar', { name: 'Block tools' } )
.getByRole( 'button', { name: 'Group' } )
.click();
- await editor.canvas
+ await page
.getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '1' } )
.click();
- await editor.canvas
+ await page
.getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '2' } )
.click( { modifiers: [ 'Shift' ] } );
@@ -300,12 +294,8 @@ test.describe( 'Multi-block selection', () => {
pageUtils,
} ) => {
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
+
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: 'test' },
@@ -317,16 +307,12 @@ test.describe( 'Multi-block selection', () => {
.getByRole( 'button', { name: 'Dismiss this notice' } )
.filter( { hasText: 'Draft saved' } )
).toBeVisible();
+
await page.reload();
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
- await editor.canvas
+ await page
.getByRole( 'document', { name: 'Block: Paragraph' } )
.click( { modifiers: [ 'Shift' ] } );
await pageUtils.pressKeys( 'primary+a' );
@@ -573,37 +559,42 @@ test.describe( 'Multi-block selection', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '12' );
await page.keyboard.press( 'ArrowLeft' );
- const [ coord1, coord2 ] = await editor.canvas.evaluate( () => {
- const selection = window.getSelection();
-
- if ( ! selection.rangeCount ) {
- return;
- }
-
- const range = selection.getRangeAt( 0 );
- const rect1 = range.getClientRects()[ 0 ];
- const element = document.querySelector(
- '[data-type="core/paragraph"]'
- );
- const rect2 = element.getBoundingClientRect();
- const iframeOffset = window.frameElement.getBoundingClientRect();
-
- return [
- {
- x: iframeOffset.x + rect1.x,
- y: iframeOffset.y + rect1.y + rect1.height / 2,
- },
- {
- // Move a bit outside the paragraph.
- x: iframeOffset.x + rect2.x - 5,
- y: iframeOffset.y + rect2.y + rect2.height / 2,
- },
- ];
- } );
+ const [ coord1, coord2 ] = await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => {
+ const selection = window.getSelection();
+
+ if ( ! selection.rangeCount ) {
+ return;
+ }
+
+ const range = selection.getRangeAt( 0 );
+ const rect1 = range.getClientRects()[ 0 ];
+ const element = document.querySelector(
+ '[data-type="core/paragraph"]'
+ );
+ const rect2 = element.getBoundingClientRect();
+ const iframeOffset =
+ window.frameElement.getBoundingClientRect();
+
+ return [
+ {
+ x: iframeOffset.x + rect1.x,
+ y: iframeOffset.y + rect1.y + rect1.height / 2,
+ },
+ {
+ // Move a bit outside the paragraph.
+ x: iframeOffset.x + rect2.x - 5,
+ y: iframeOffset.y + rect2.y + rect2.height / 2,
+ },
+ ];
+ } );
await page.mouse.click( coord1.x, coord1.y );
await page.mouse.down();
@@ -935,7 +926,9 @@ test.describe( 'Multi-block selection', () => {
.toEqual( [] );
await expect
.poll( () =>
- editor.canvas.evaluate( () => window.getSelection().toString() )
+ editor.canvas
+ .locator( ':root' )
+ .evaluate( () => window.getSelection().toString() )
)
.toBe( 'Post title' );
} );
@@ -1184,12 +1177,8 @@ test.describe( 'Multi-block selection', () => {
editor,
} ) => {
// To do: run with iframe.
- await page.evaluate( () => {
- window.wp.blocks.registerBlockType( 'test/v2', {
- apiVersion: '2',
- title: 'test',
- } );
- } );
+ await editor.switchToLegacyCanvas();
+
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: '1 [' },
@@ -1199,25 +1188,29 @@ test.describe( 'Multi-block selection', () => {
attributes: { content: ']2' },
} );
// Focus and move the caret to the end.
- await editor.canvas
+ const secondParagraphBlock = page
.getByRole( 'document', { name: 'Block: Paragraph' } )
- .filter( { hasText: ']2' } )
- .click();
+ .filter( { hasText: ']2' } );
+ const secondParagraphBlockBox =
+ await secondParagraphBlock.boundingBox();
+ await secondParagraphBlock.click( {
+ position: {
+ x: secondParagraphBlockBox.width - 1,
+ y: secondParagraphBlockBox.height / 2,
+ },
+ } );
await page.keyboard.press( 'ArrowLeft' );
- const strongText = editor.canvas
+ const strongText = page
.getByRole( 'region', { name: 'Editor content' } )
.getByText( '1', { exact: true } );
const strongBox = await strongText.boundingBox();
// Focus and move the caret to the end.
- await editor.canvas
- .getByRole( 'document', { name: 'Block: Paragraph' } )
- .filter( { hasText: '1[' } )
- .click( {
- // Ensure clicking on the right half of the element.
- position: { x: strongBox.width - 1, y: strongBox.height / 2 },
- modifiers: [ 'Shift' ],
- } );
+ await strongText.click( {
+ // Ensure clicking on the right half of the element.
+ position: { x: strongBox.width - 1, y: strongBox.height / 2 },
+ modifiers: [ 'Shift' ],
+ } );
await page.keyboard.press( 'Backspace' );
// Ensure selection is in the correct place.
@@ -1354,9 +1347,9 @@ class MultiBlockSelectionUtils {
* Tests if the native selection matches the block selection.
*/
assertNativeSelection = async () => {
- const selection = await this.#editor.canvas.evaluateHandle( () =>
- window.getSelection()
- );
+ const selection = await this.#editor.canvas
+ .locator( ':root' )
+ .evaluateHandle( () => window.getSelection() );
const { isMultiSelected, selectionStart, selectionEnd } =
await this.#page.evaluate( () => {
diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js
index 4b192693c07b07..9d6f4ef45d9db1 100644
--- a/test/e2e/specs/editor/various/new-post.spec.js
+++ b/test/e2e/specs/editor/various/new-post.spec.js
@@ -74,10 +74,9 @@ test.describe( 'new editor state', () => {
await admin.createNewPost();
// Enter a title for this post.
- await editor.canvas.type(
- 'role=textbox[name="Add title"i]',
- 'Here is the title'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( 'Here is the title' );
// Save the post as a draft.
await page.click( 'role=button[name="Save draft"i]' );
await page.waitForSelector(
diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
index 5d63ff789e4ec7..629a437a41665b 100644
--- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
+++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
@@ -156,7 +156,6 @@ class PostEditorTemplateMode {
async createPostAndSaveDraft() {
await this.admin.createNewPost();
- await this.editor.canvas.waitForLoadState();
// Create a random post.
await this.page.keyboard.type( 'Just an FSE Post' );
await this.page.keyboard.press( 'Enter' );
diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
index 3f83221c27b819..365209ef2e4e55 100644
--- a/test/e2e/specs/editor/various/post-visibility.spec.js
+++ b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -78,7 +78,9 @@ test.describe( 'Post visibility', () => {
await admin.createNewPost();
// Enter a title for this post.
- await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Title' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( 'Title' );
await editor.openDocumentSettingsSidebar();
diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js
index a3fa4544f39f84..cfec384adba9bf 100644
--- a/test/e2e/specs/editor/various/preview.spec.js
+++ b/test/e2e/specs/editor/various/preview.spec.js
@@ -27,10 +27,9 @@ test.describe( 'Preview', () => {
editorPage.locator( 'role=button[name="Preview"i]' )
).toBeDisabled();
- await editor.canvas.type(
- 'role=textbox[name="Add title"i]',
- 'Hello World'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( 'Hello World' );
const previewPage = await editor.openPreviewPage( editorPage );
const previewTitle = previewPage.locator( 'role=heading[level=1]' );
@@ -48,7 +47,9 @@ test.describe( 'Preview', () => {
// Return to editor to change title.
await editorPage.bringToFront();
- await editor.canvas.type( 'role=textbox[name="Add title"i]', '!' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( '!' );
await previewUtils.waitForPreviewNavigation( previewPage );
// Title in preview should match updated input.
@@ -70,10 +71,9 @@ test.describe( 'Preview', () => {
// Return to editor to change title.
await editorPage.bringToFront();
- await editor.canvas.fill(
- 'role=textbox[name="Add title"i]',
- 'Hello World! And more.'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .fill( 'Hello World! And more.' );
await previewUtils.waitForPreviewNavigation( previewPage );
// Title in preview should match updated input.
@@ -109,7 +109,9 @@ test.describe( 'Preview', () => {
const editorPage = page;
// Type aaaaa in the title field.
- await editor.canvas.type( 'role=textbox[name="Add title"]', 'aaaaa' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"]' )
+ .type( 'aaaaa' );
await editorPage.keyboard.press( 'Tab' );
// Save the post as a draft.
@@ -129,10 +131,9 @@ test.describe( 'Preview', () => {
await editorPage.bringToFront();
// Append bbbbb to the title, and tab away from the title so blur event is triggered.
- await editor.canvas.fill(
- 'role=textbox[name="Add title"i]',
- 'aaaaabbbbb'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .fill( 'aaaaabbbbb' );
await editorPage.keyboard.press( 'Tab' );
// Save draft and open the preview page right after.
@@ -157,7 +158,9 @@ test.describe( 'Preview', () => {
const editorPage = page;
// Type Lorem in the title field.
- await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Lorem' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( 'Lorem' );
// Open the preview page.
const previewPage = await editor.openPreviewPage( editorPage );
@@ -174,7 +177,9 @@ test.describe( 'Preview', () => {
await page.click( 'role=button[name="Close panel"i]' );
// Change the title and preview again.
- await editor.canvas.type( 'role=textbox[name="Add title"i]', ' Ipsum' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( ' Ipsum' );
await previewUtils.waitForPreviewNavigation( previewPage );
// Title in preview should match updated input.
@@ -196,7 +201,9 @@ test.describe( 'Preview', () => {
).toBeVisible();
// Change the title.
- await editor.canvas.type( 'role=textbox[name="Add title"i]', ' Draft' );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( ' Draft' );
// Open the preview page.
await previewUtils.waitForPreviewNavigation( previewPage );
@@ -227,10 +234,9 @@ test.describe( 'Preview with Custom Fields enabled', () => {
const editorPage = page;
// Add an initial title and content.
- await editor.canvas.type(
- 'role=textbox[name="Add title"i]',
- 'title 1'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( 'title 1' );
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: 'content 1' },
@@ -254,14 +260,12 @@ test.describe( 'Preview with Custom Fields enabled', () => {
// Return to editor and modify the title and content.
await editorPage.bringToFront();
- await editor.canvas.fill(
- 'role=textbox[name="Add title"i]',
- 'title 2'
- );
- await editor.canvas.fill(
- 'role=document >> text="content 1"',
- 'content 2'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .fill( 'title 2' );
+ await editor.canvas
+ .locator( 'role=document >> text="content 1"' )
+ .fill( 'content 2' );
// Open the preview page.
await previewUtils.waitForPreviewNavigation( previewPage );
diff --git a/test/e2e/specs/editor/various/rich-text.spec.js b/test/e2e/specs/editor/various/rich-text.spec.js
index 4ebd2cd450e70b..2969a33d254852 100644
--- a/test/e2e/specs/editor/various/rich-text.spec.js
+++ b/test/e2e/specs/editor/various/rich-text.spec.js
@@ -35,7 +35,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await pageUtils.pressKeys( 'primary+a' );
await pageUtils.pressKeys( 'primary+b' );
@@ -53,7 +55,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Some ' );
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( 'bold' );
@@ -73,7 +77,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+b' );
await pageUtils.pressKeys( 'primary+i' );
await page.keyboard.type( '1' );
@@ -102,11 +108,14 @@ test.describe( 'RichText', () => {
await pageUtils.pressKeys( 'shift+ArrowLeft' );
await pageUtils.pressKeys( 'primary+b' );
- const count = await editor.canvas.evaluate(
- () =>
- document.querySelectorAll( '*[data-rich-text-format-boundary]' )
- .length
- );
+ const count = await editor.canvas
+ .locator( ':root' )
+ .evaluate(
+ () =>
+ document.querySelectorAll(
+ '*[data-rich-text-format-boundary]'
+ ).length
+ );
expect( count ).toBe( 1 );
} );
@@ -114,7 +123,9 @@ test.describe( 'RichText', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'Some ' );
await editor.clickBlockToolbarButton( 'Bold' );
await page.keyboard.type( 'bold' );
@@ -134,7 +145,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A `backtick`' );
expect( await editor.getBlocks() ).toMatchObject( [
@@ -155,7 +168,9 @@ test.describe( 'RichText', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '`a`' );
await page.keyboard.press( 'Backspace' );
@@ -171,7 +186,9 @@ test.describe( 'RichText', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '`a`' );
await page.keyboard.type( 'b' );
await page.keyboard.press( 'Backspace' );
@@ -184,7 +201,9 @@ test.describe( 'RichText', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '`a`' );
await page.evaluate( () => new Promise( window.requestIdleCallback ) );
// Move inside format boundary.
@@ -200,7 +219,9 @@ test.describe( 'RichText', () => {
page,
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A `backtick` and more.' );
expect( await editor.getBlocks() ).toMatchObject( [
@@ -216,7 +237,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'A selection test.' );
await page.keyboard.press( 'Home' );
await page.keyboard.press( 'ArrowRight' );
@@ -246,14 +269,16 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '2' );
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '3' );
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
let called;
const { body } = document;
const config = {
@@ -313,7 +338,7 @@ test.describe( 'RichText', () => {
await page.keyboard.type( '4' );
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
// The selection change event should be called once. If there's only
// one item in `window.unsubscribes`, it means that only one
// function is present to disconnect the `mutationObserver`.
@@ -339,7 +364,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '1' );
await pageUtils.pressKeys( 'primary+b' );
@@ -369,7 +396,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '12' );
await pageUtils.pressKeys( 'primary+b' );
@@ -391,7 +420,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await page.keyboard.press( 'Tab' );
await pageUtils.pressKeys( 'shift+Tab' );
@@ -412,11 +443,13 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
// Simulate moving focus to a different app, then moving focus back,
// without selection being changed.
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
const activeElement = document.activeElement;
activeElement.blur();
activeElement.focus();
@@ -443,7 +476,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
@@ -479,7 +514,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '2' );
await pageUtils.pressKeys( 'primary+a' );
await pageUtils.pressKeys( 'primary+x' );
@@ -500,7 +537,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '2' );
@@ -525,7 +564,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Backspace' );
@@ -545,7 +586,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '1' );
await page.keyboard.type( '2' );
@@ -571,7 +614,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// Add text and select to color.
await page.keyboard.type( '1' );
@@ -626,7 +671,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// Create two lines of text in a paragraph.
await page.keyboard.type( '1' );
await pageUtils.pressKeys( 'shift+Enter' );
@@ -668,7 +715,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// Create an indented list of two lines.
await page.keyboard.type( '* 1' );
@@ -717,7 +766,9 @@ test.describe( 'RichText', () => {
} );
test( 'should navigate arround emoji', async ( { page, editor } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '🍓' );
// Only one press on arrow left should be required to move in front of
// the emoji.
@@ -735,12 +786,14 @@ test.describe( 'RichText', () => {
test( 'should run input rules after composition end', async ( {
editor,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
// Playwright doesn't support composition, so emulate it by inserting
// text in the DOM directly, setting selection in the right place, and
// firing `compositionend`.
// See https://github.com/puppeteer/puppeteer/issues/4981.
- await editor.canvas.evaluate( async () => {
+ await editor.canvas.locator( ':root' ).evaluate( async () => {
document.activeElement.textContent = '`a`';
const selection = window.getSelection();
// The `selectionchange` and `compositionend` events should run in separate event
@@ -767,7 +820,9 @@ test.describe( 'RichText', () => {
editor,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( '1' );
await pageUtils.pressKeys( 'primary+b' );
diff --git a/test/e2e/specs/editor/various/rtl.spec.js b/test/e2e/specs/editor/various/rtl.spec.js
index 8475605e339fcb..aaf1186cc5abae 100644
--- a/test/e2e/specs/editor/various/rtl.spec.js
+++ b/test/e2e/specs/editor/various/rtl.spec.js
@@ -150,7 +150,9 @@ test.describe( 'RTL', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await pageUtils.pressKeys( 'primary+b' );
await page.keyboard.type( ARABIC_ONE );
await pageUtils.pressKeys( 'primary+b' );
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index 1c5e12be8abb11..29e7e5d64522c9 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -4,8 +4,11 @@
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => {
- test.beforeEach( async ( { admin } ) => {
+ test.beforeEach( async ( { admin, editor } ) => {
await admin.createNewPost();
+ await expect(
+ editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+ ).toBeFocused();
} );
test.afterEach( async ( { requestUtils } ) => {
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
index 23186dfff2de96..e706dfc3607dc3 100644
--- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -79,7 +79,9 @@ test.describe( 'Toolbar roving tabindex', () => {
// Move focus to the first toolbar item.
await page.keyboard.press( 'Home' );
await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' );
- await editor.canvas.click( `role=button[name="Create Table"i]` );
+ await editor.canvas
+ .locator( `role=button[name="Create Table"i]` )
+ .click();
await pageUtils.pressKeys( 'Tab' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Body cell text',
diff --git a/test/e2e/specs/editor/various/undo.spec.js b/test/e2e/specs/editor/various/undo.spec.js
index dfdbef60ffaa9c..51683997aaf6f0 100644
--- a/test/e2e/specs/editor/various/undo.spec.js
+++ b/test/e2e/specs/editor/various/undo.spec.js
@@ -20,7 +20,9 @@ test.describe( 'undo', () => {
pageUtils,
undoUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'before pause' );
await editor.page.waitForTimeout( 1000 );
await page.keyboard.type( ' after pause' );
@@ -88,7 +90,9 @@ test.describe( 'undo', () => {
pageUtils,
undoUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'before keyboard ' );
await pageUtils.pressKeys( 'primary+b' );
@@ -160,7 +164,9 @@ test.describe( 'undo', () => {
} );
test( 'should undo bold', async ( { page, pageUtils, editor } ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'test' );
await page.click( 'role=button[name="Save draft"i]' );
await expect(
@@ -169,8 +175,7 @@ test.describe( 'undo', () => {
)
).toBeVisible();
await page.reload();
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
- await editor.canvas.click( '[data-type="core/paragraph"]' );
+ await editor.canvas.locator( '[data-type="core/paragraph"]' ).click();
await pageUtils.pressKeys( 'primary+a' );
await pageUtils.pressKeys( 'primary+b' );
await pageUtils.pressKeys( 'primary+z' );
@@ -190,7 +195,9 @@ test.describe( 'undo', () => {
pageUtils,
undoUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
const firstBlock = await editor.getEditedPostContent();
@@ -333,7 +340,9 @@ test.describe( 'undo', () => {
// See: https://github.com/WordPress/gutenberg/issues/14950
// Issue is demonstrated from an edited post: create, save, and reload.
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( 'original' );
await page.click( 'role=button[name="Save draft"i]' );
await expect(
@@ -342,11 +351,12 @@ test.describe( 'undo', () => {
)
).toBeVisible();
await page.reload();
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
// Issue is demonstrated by forcing state merges (multiple inputs) on
// an existing text after a fresh reload.
- await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' );
+ await editor.canvas
+ .locator( '[data-type="core/paragraph"] >> nth=0' )
+ .click();
await page.keyboard.type( 'modified' );
// The issue is demonstrated after the one second delay to trigger the
@@ -370,7 +380,9 @@ test.describe( 'undo', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await page.click( 'role=button[name="Save draft"i]' );
await expect(
@@ -388,7 +400,9 @@ test.describe( 'undo', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await editor.publishPost();
await pageUtils.pressKeys( 'primary+z' );
@@ -401,7 +415,9 @@ test.describe( 'undo', () => {
page,
pageUtils,
} ) => {
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( '1' );
await page.click( 'role=button[name="Save draft"i]' );
@@ -416,7 +432,7 @@ test.describe( 'undo', () => {
await expect(
page.locator( 'role=button[name="Undo"]' )
).toBeDisabled();
- await editor.canvas.click( '[data-type="core/paragraph"]' );
+ await editor.canvas.locator( '[data-type="core/paragraph"]' ).click();
await page.keyboard.type( '2' );
@@ -446,7 +462,9 @@ test.describe( 'undo', () => {
// block attribute as in the previous action and results in transient edits
// and skipping `undo` history steps.
const text = 'tonis';
- await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Add default block"i]' )
+ .click();
await page.keyboard.type( text );
await editor.publishPost();
await pageUtils.pressKeys( 'primary+z' );
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 81bbcbbc758b93..98bb00a596f03c 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -10,8 +10,11 @@ test.use( {
} );
test.describe( 'Writing Flow (@firefox, @webkit)', () => {
- test.beforeEach( async ( { admin } ) => {
+ test.beforeEach( async ( { admin, editor } ) => {
await admin.createNewPost();
+ await expect(
+ editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+ ).toBeFocused();
} );
test.afterAll( async ( { requestUtils } ) => {
@@ -46,9 +49,11 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/column' );
await page.keyboard.press( 'ArrowUp' );
- const activeElementBlockType = await editor.canvas.evaluate( () =>
- document.activeElement.getAttribute( 'data-type' )
- );
+ const activeElementBlockType = await editor.canvas
+ .locator( ':root' )
+ .evaluate( () =>
+ document.activeElement.getAttribute( 'data-type' )
+ );
expect( activeElementBlockType ).toBe( 'core/columns' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
@@ -515,12 +520,12 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
} ) => {
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
document.activeElement.style.paddingTop = '100px';
} );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.type( '1' );
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
document.activeElement.style.paddingBottom = '100px';
} );
await page.keyboard.press( 'ArrowDown' );
@@ -544,7 +549,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
} ) => {
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
document.activeElement.style.lineHeight = 'normal';
} );
await page.keyboard.press( 'ArrowUp' );
@@ -745,7 +750,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
} ) => {
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );
- await editor.canvas.evaluate( () => {
+ await editor.canvas.locator( ':root' ).evaluate( () => {
document.activeElement.style.paddingLeft = '100px';
} );
await page.keyboard.press( 'Enter' );
@@ -1015,9 +1020,9 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
await page.keyboard.type( 'a' );
async function getHeight() {
- return await editor.canvas.evaluate(
- () => document.activeElement.offsetHeight
- );
+ return await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.offsetHeight );
}
const height = await getHeight();
@@ -1049,9 +1054,9 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
await page.keyboard.type( 'a' );
async function getHeight() {
- return await editor.canvas.evaluate(
- () => document.activeElement.offsetHeight
- );
+ return await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.offsetHeight );
}
const height = await getHeight();
@@ -1084,9 +1089,9 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
await page.keyboard.type( 'a' );
async function getHeight() {
- return await editor.canvas.evaluate(
- () => document.activeElement.offsetHeight
- );
+ return await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.activeElement.offsetHeight );
}
const height = await getHeight();
@@ -1135,19 +1140,23 @@ class WritingFlowUtils {
await this.page.keyboard.press( 'Enter' );
await this.page.keyboard.type( '/columns' );
await this.page.keyboard.press( 'Enter' );
- await this.editor.canvas.click(
- 'role=button[name="Two columns; equal split"i]'
- );
- await this.editor.canvas.click( 'role=button[name="Add block"i]' );
+ await this.editor.canvas
+ .locator( 'role=button[name="Two columns; equal split"i]' )
+ .click();
+ await this.editor.canvas
+ .locator( 'role=button[name="Add block"i]' )
+ .click();
await this.page.click(
'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
);
await this.page.keyboard.type( '1st col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "1st" instead of "First" here.
- await this.editor.canvas.focus(
- 'role=document[name="Block: Column (2 of 2)"i]'
- );
- await this.editor.canvas.click( 'role=button[name="Add block"i]' );
+ await this.editor.canvas
+ .locator( 'role=document[name="Block: Column (2 of 2)"i]' )
+ .focus();
+ await this.editor.canvas
+ .locator( 'role=button[name="Add block"i]' )
+ .click();
await this.page.click(
'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
);
diff --git a/test/e2e/specs/interactivity/directive-init.spec.ts b/test/e2e/specs/interactivity/directive-init.spec.ts
index aa81ab1ea61db2..e18341a48fa3f4 100644
--- a/test/e2e/specs/interactivity/directive-init.spec.ts
+++ b/test/e2e/specs/interactivity/directive-init.spec.ts
@@ -53,7 +53,7 @@ test.describe( 'data-wp-init', () => {
await toggle.click();
- await expect( show ).not.toBeVisible();
+ await expect( show ).toBeHidden();
await expect( isMounted ).toHaveText( 'false' );
} );
@@ -65,7 +65,7 @@ test.describe( 'data-wp-init', () => {
await toggle.click();
- await expect( show ).not.toBeVisible();
+ await expect( show ).toBeHidden();
await expect( isMounted ).toHaveText( 'false' );
await toggle.click();
diff --git a/test/e2e/specs/interactivity/directive-slots.spec.ts b/test/e2e/specs/interactivity/directive-slots.spec.ts
index d93e50f767215f..195af52fdb1bd2 100644
--- a/test/e2e/specs/interactivity/directive-slots.spec.ts
+++ b/test/e2e/specs/interactivity/directive-slots.spec.ts
@@ -108,7 +108,7 @@ test.describe( 'data-wp-slot', () => {
await page.getByTestId( 'slot-5-button' ).click();
await expect( fillContainer ).toBeEmpty();
- await expect( slot5 ).not.toBeVisible();
+ await expect( slot5 ).toBeHidden();
await expect( slots.getByTestId( 'fill' ) ).toBeVisible();
await expect( slots.locator( 'css= > *' ) ).toHaveText( [
'[1]',
diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js
index c1d6cdfea00222..5c46ac769efd3f 100644
--- a/test/e2e/specs/site-editor/block-removal.spec.js
+++ b/test/e2e/specs/site-editor/block-removal.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Site editor block removal prompt', () => {
postId: 'emptytheme//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should appear when attempting to remove Query Block', async ( {
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
index 9d22248bc2362a..60c5ec30b1247f 100644
--- a/test/e2e/specs/site-editor/command-center.spec.js
+++ b/test/e2e/specs/site-editor/command-center.spec.js
@@ -19,6 +19,7 @@ test.describe( 'Site editor command palette', () => {
test( 'Open the command palette and navigate to the page create page', async ( {
page,
+ editor,
} ) => {
await page
.getByRole( 'button', { name: 'Open command palette' } )
@@ -26,13 +27,11 @@ test.describe( 'Site editor command palette', () => {
await page.keyboard.press( 'Meta+k' );
await page.keyboard.type( 'new page' );
await page.getByRole( 'option', { name: 'Add new page' } ).click();
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
- const frame = page.frame( 'editor-canvas' );
await expect( page ).toHaveURL(
'/wp-admin/post-new.php?post_type=page'
);
await expect(
- frame.getByRole( 'textbox', { name: 'Add title' } )
+ editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
).toBeVisible();
} );
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index e6521cb7c540bc..6aca027a30e788 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -14,7 +14,7 @@ test.describe( 'Font Library', () => {
postId: 'emptytheme//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
@@ -39,7 +39,7 @@ test.describe( 'Font Library', () => {
postId: 'twentytwentythree//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
index 02717f1b194327..f255640cb2f12f 100644
--- a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
+++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Global styles sidebar', () => {
postId: 'emptytheme//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should filter blocks list results', async ( { page } ) => {
diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js
index 060daf508491aa..7c9f3fc3a5e232 100644
--- a/test/e2e/specs/site-editor/hybrid-theme.spec.js
+++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js
@@ -40,7 +40,7 @@ test.describe( 'Hybrid theme', () => {
page.getByRole( 'region', { name: 'Editor content' } )
).toBeVisible();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await expect(
editor.canvas.getByRole( 'document', {
diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js
index 02389cc936f06c..4391f134a9f80b 100644
--- a/test/e2e/specs/site-editor/iframe-rendering.spec.js
+++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js
@@ -14,16 +14,15 @@ test.describe( 'Site editor iframe rendering mode', () => {
test( 'Should render editor in standards mode.', async ( {
admin,
- page,
+ editor,
} ) => {
await admin.visitSiteEditor( {
postId: 'emptytheme//index',
postType: 'wp_template',
} );
-
- const compatMode = await page
- .locator( 'iframe[name="editor-canvas"]' )
- .evaluate( ( iframe ) => iframe.contentDocument.compatMode );
+ const compatMode = await editor.canvas
+ .locator( ':root' )
+ .evaluate( () => document.compatMode );
// CSS1Compat = expected standards mode.
// BackCompat = quirks mode.
diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js
index 3057feaf7772b0..ed64574168bd02 100644
--- a/test/e2e/specs/site-editor/list-view.spec.js
+++ b/test/e2e/specs/site-editor/list-view.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Site Editor List View', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should open by default when preference is enabled', async ( {
@@ -105,7 +105,7 @@ test.describe( 'Site Editor List View', () => {
// Since focus is now inside the list view, the shortcut should close
// the sidebar.
await pageUtils.pressKeys( 'access+o' );
- await expect( listView ).not.toBeVisible();
+ await expect( listView ).toBeHidden();
// Focus should now be on the list view toggle button.
await expect(
@@ -129,7 +129,7 @@ test.describe( 'Site Editor List View', () => {
} )
).toBeFocused();
await pageUtils.pressKeys( 'access+o' );
- await expect( listView ).not.toBeVisible();
+ await expect( listView ).toBeHidden();
await expect(
page.getByRole( 'button', { name: 'List View' } )
).toBeFocused();
diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js
index b4d2f1dbda0d03..bb062aafa3e7f3 100644
--- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js
+++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js
@@ -23,7 +23,7 @@ test.describe( 'Site Editor - Multi-entity save flow', () => {
postId: 'emptytheme//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'save flow should work as expected', async ( { editor, page } ) => {
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
index 937b2aea0fb454..9507245c192d2f 100644
--- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Push to Global Styles button', () => {
postId: 'emptytheme//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should apply Heading block styles to all Heading blocks', async ( {
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index f8ab0a534d8580..98cb8e4e74149c 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Site Editor Inserter', () => {
test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'inserter toggle button should toggle global inserter', async ( {
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index eeaa1270f3ff9e..08f5e6463ebc7f 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -20,7 +20,7 @@ test.describe( 'Style Book', () => {
test.beforeEach( async ( { admin, editor, styleBook, page } ) => {
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await styleBook.open();
await expect(
page.locator( 'role=region[name="Style Book"i]' )
@@ -30,16 +30,16 @@ test.describe( 'Style Book', () => {
test( 'should disable toolbar buttons when open', async ( { page } ) => {
await expect(
page.locator( 'role=button[name="Toggle block inserter"i]' )
- ).not.toBeVisible();
+ ).toBeHidden();
await expect(
page.locator( 'role=button[name="Tools"i]' )
- ).not.toBeVisible();
+ ).toBeHidden();
await expect(
page.locator( 'role=button[name="Undo"i]' )
- ).not.toBeVisible();
+ ).toBeHidden();
await expect(
page.locator( 'role=button[name="Redo"i]' )
- ).not.toBeVisible();
+ ).toBeHidden();
await expect(
page.locator( 'role=button[name="View"i]' )
).toBeDisabled();
@@ -139,7 +139,7 @@ test.describe( 'Style Book', () => {
await expect(
styleBookRegion,
'should close when close button is clicked'
- ).not.toBeVisible();
+ ).toBeHidden();
// Open Style Book again.
await page.getByRole( 'button', { name: 'Style Book' } ).click();
@@ -153,7 +153,7 @@ test.describe( 'Style Book', () => {
await expect(
styleBookRegion,
'should close when Escape key is pressed'
- ).not.toBeVisible();
+ ).toBeHidden();
} );
} );
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index ee71e856269b04..8868c733006687 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -39,7 +39,7 @@ test.describe( 'Global styles variations', () => {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await siteEditorStyleVariations.browseStyles();
@@ -76,7 +76,7 @@ test.describe( 'Global styles variations', () => {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await siteEditorStyleVariations.browseStyles();
await page.click( 'role=button[name="pink"i]' );
await page.click(
@@ -117,7 +117,7 @@ test.describe( 'Global styles variations', () => {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await siteEditorStyleVariations.browseStyles();
await page.click( 'role=button[name="yellow"i]' );
await page.click(
@@ -164,7 +164,7 @@ test.describe( 'Global styles variations', () => {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await siteEditorStyleVariations.browseStyles();
await page.click( 'role=button[name="pink"i]' );
await page.click(
@@ -196,15 +196,16 @@ test.describe( 'Global styles variations', () => {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await siteEditorStyleVariations.browseStyles();
await page.click( 'role=button[name="yellow"i]' );
- const frame = page.frame( 'editor-canvas' );
- const paragraph = frame.locator( 'text="My awesome paragraph"' );
+ const paragraph = editor.canvas.locator(
+ 'text="My awesome paragraph"'
+ );
await expect( paragraph ).toHaveCSS( 'color', 'rgb(25, 25, 17)' );
- const body = frame.locator( 'css=body' );
+ const body = editor.canvas.locator( 'css=body' );
await expect( body ).toHaveCSS(
'background-color',
'rgb(255, 239, 11)'
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index cd81a616b1fee1..d1c215ec2a4949 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -28,11 +28,13 @@ test.describe( 'Template Part', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Insert a new template block and 'start blank'.
await editor.insertBlock( { name: 'core/template-part' } );
- await editor.canvas.click( 'role=button[name="Start blank"i]' );
+ await editor.canvas
+ .locator( 'role=button[name="Start blank"i]' )
+ .click();
// Fill in a name in the dialog that pops up.
await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'New' );
@@ -56,7 +58,7 @@ test.describe( 'Template Part', () => {
} ) => {
// Visit the index.
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
const headerTemplateParts = editor.canvas.locator(
'[data-type="core/template-part"]'
);
@@ -66,7 +68,7 @@ test.describe( 'Template Part', () => {
// Insert a new template block and choose an existing header pattern.
await editor.insertBlock( { name: 'core/template-part' } );
- await editor.canvas.click( 'role=button[name="Choose"i]' );
+ await editor.canvas.locator( 'role=button[name="Choose"i]' ).click();
await page.click(
'role=listbox[name="Block Patterns"i] >> role=option[name="header"i]'
);
@@ -83,7 +85,7 @@ test.describe( 'Template Part', () => {
const paragraphText = 'Test 2';
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Add a block and select it.
await editor.insertBlock( {
name: 'core/paragraph',
@@ -108,7 +110,7 @@ test.describe( 'Template Part', () => {
// Check that the header contains the paragraph added earlier.
const templatePartWithParagraph = editor.canvas.locator(
'[data-type="core/template-part"]',
- { has: paragraphBlock }
+ { hasText: paragraphText }
);
await expect( templatePartWithParagraph ).toBeVisible();
@@ -123,7 +125,7 @@ test.describe( 'Template Part', () => {
const paragraphText2 = 'Test 4';
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Add a block and select it.
await editor.insertBlock( {
name: 'core/paragraph',
@@ -158,11 +160,11 @@ test.describe( 'Template Part', () => {
// Check that the header contains the paragraph added earlier.
const templatePartWithParagraph1 = editor.canvas.locator(
'[data-type="core/template-part"]',
- { has: paragraphBlock1 }
+ { hasText: paragraphText1 }
);
const templatePartWithParagraph2 = editor.canvas.locator(
'[data-type="core/template-part"]',
- { has: paragraphBlock2 }
+ { hasText: paragraphText2 }
);
// TODO: I couldn't find an easy way to assert that the same template
@@ -185,7 +187,7 @@ test.describe( 'Template Part', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
@@ -196,14 +198,14 @@ test.describe( 'Template Part', () => {
// Visit the index.
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Check that the header contains the paragraph added earlier.
const paragraph = editor.canvas.locator(
`p >> text="${ paragraphText }"`
);
const templatePartWithParagraph = editor.canvas.locator(
'[data-type="core/template-part"]',
- { has: paragraph }
+ { hasText: paragraphText }
);
await expect( templatePartWithParagraph ).toBeVisible();
@@ -215,7 +217,7 @@ test.describe( 'Template Part', () => {
// There should be a paragraph but no header template part.
await expect( paragraph ).toBeVisible();
- await expect( templatePartWithParagraph ).not.toBeVisible();
+ await expect( templatePartWithParagraph ).toBeHidden();
} );
test( 'shows changes in a template when a template part it contains is modified', async ( {
@@ -228,7 +230,7 @@ test.describe( 'Template Part', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Edit the header.
await editor.insertBlock( {
name: 'core/paragraph',
@@ -241,7 +243,7 @@ test.describe( 'Template Part', () => {
// Visit the index.
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
const paragraph = editor.canvas.locator(
`p >> text="${ paragraphText }"`
);
@@ -261,7 +263,7 @@ test.describe( 'Template Part', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
@@ -300,7 +302,7 @@ test.describe( 'Template Part', () => {
page,
} ) => {
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Add a block and select it.
await editor.insertBlock( {
@@ -341,7 +343,7 @@ test.describe( 'Template Part', () => {
page,
} ) => {
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Select existing header template part.
await editor.selectBlocks(
@@ -355,7 +357,7 @@ test.describe( 'Template Part', () => {
// Verify that the widget area import button is not there.
await expect(
page.getByRole( 'combobox', { name: 'Import widget area' } )
- ).not.toBeVisible();
+ ).toBeHidden();
} );
test( 'Keeps focus in place on undo in template parts', async ( {
@@ -368,7 +370,7 @@ test.describe( 'Template Part', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Select the site title block.
const siteTitle = editor.canvas.getByRole( 'document', {
diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js
index c8edc034901a2b..c281b71d16a183 100644
--- a/test/e2e/specs/site-editor/template-revert.spec.js
+++ b/test/e2e/specs/site-editor/template-revert.spec.js
@@ -23,7 +23,7 @@ test.describe( 'Template Revert', () => {
test.beforeEach( async ( { admin, requestUtils, editor } ) => {
await requestUtils.deleteAllTemplates( 'wp_template' );
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
} );
test( 'should delete the template after saving the reverted template', async ( {
@@ -55,7 +55,7 @@ test.describe( 'Template Revert', () => {
page.locator(
'role=region[name="Editor settings"i] >> role=button[name="Actions"i]'
)
- ).not.toBeVisible();
+ ).toBeHidden();
} );
test( 'should show the original content after revert', async ( {
@@ -277,7 +277,7 @@ test.describe( 'Template Revert', () => {
await editor.saveSiteEditorEntities();
await admin.visitSiteEditor();
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
const contentAfter =
await templateRevertUtils.getCurrentSiteEditorContent();
expect( contentAfter ).toEqual( contentBefore );
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index a7ecebfd9ed443..61fbf7c795a60b 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -31,7 +31,7 @@ test.describe( 'Global styles revisions', () => {
editor,
userGlobalStylesRevisions,
} ) => {
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
const currentRevisions =
await userGlobalStylesRevisions.getGlobalStylesRevisions();
await userGlobalStylesRevisions.openStylesPanel();
@@ -66,7 +66,7 @@ test.describe( 'Global styles revisions', () => {
editor,
userGlobalStylesRevisions,
} ) => {
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await userGlobalStylesRevisions.openStylesPanel();
await page.getByRole( 'button', { name: 'Colors styles' } ).click();
await page
@@ -110,7 +110,7 @@ test.describe( 'Global styles revisions', () => {
editor,
userGlobalStylesRevisions,
} ) => {
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
await userGlobalStylesRevisions.openStylesPanel();
await userGlobalStylesRevisions.openRevisions();
const lastRevisionButton = page
diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js
index f9681a5ea2d46f..8ee6ce0e565572 100644
--- a/test/e2e/specs/site-editor/writing-flow.spec.js
+++ b/test/e2e/specs/site-editor/writing-flow.spec.js
@@ -24,7 +24,7 @@ test.describe( 'Site editor writing flow', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Select the first site title block.
const siteTitleBlock = editor.canvas.locator(
'role=document[name="Block: Site Title"i]'
@@ -52,7 +52,7 @@ test.describe( 'Site editor writing flow', () => {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
- await editor.canvas.click( 'body' );
+ await editor.canvas.locator( 'body' ).click();
// Make sure the sidebar is open.
await editor.openDocumentSettingsSidebar();
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index e771c92fc24eef..6a6a51cae26860 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -36,11 +36,7 @@ test.describe( 'Widgets Customizer', () => {
await requestUtils.activateTheme( 'twentytwentyone' );
} );
- test( 'should add blocks', async ( {
- page,
- widgetsCustomizerPage,
- editor,
- } ) => {
+ test( 'should add blocks', async ( { page, widgetsCustomizerPage } ) => {
const previewFrame = widgetsCustomizerPage.previewFrame;
await widgetsCustomizerPage.visitCustomizerPage();
@@ -86,9 +82,11 @@ test.describe( 'Widgets Customizer', () => {
await page.click( 'role=option[name="Search"i]' );
- await editor.canvas.focus(
- 'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]'
- );
+ await page
+ .locator(
+ 'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]'
+ )
+ .focus();
await page.keyboard.type( 'My ' );
@@ -233,7 +231,6 @@ test.describe( 'Widgets Customizer', () => {
page,
requestUtils,
widgetsCustomizerPage,
- editor,
} ) => {
await requestUtils.addWidgetBlock(
`\nFirst Paragraph
\n`,
@@ -282,7 +279,7 @@ test.describe( 'Widgets Customizer', () => {
await headingWidget.click(); // noop click on the widget text to unfocus the editor and hide toolbar
await editHeadingWidget.click();
- const headingBlock = editor.canvas.locator(
+ const headingBlock = page.locator(
'role=document[name="Block: Heading"i] >> text="First Heading"'
);
await expect( headingBlock ).toBeFocused();
@@ -586,13 +583,12 @@ test.describe( 'Widgets Customizer', () => {
test( 'preserves content in the Custom HTML block', async ( {
page,
widgetsCustomizerPage,
- editor,
} ) => {
await widgetsCustomizerPage.visitCustomizerPage();
await widgetsCustomizerPage.expandWidgetArea( 'Footer #1' );
await widgetsCustomizerPage.addBlock( 'Custom HTML' );
- const HTMLBlockTextarea = editor.canvas.locator(
+ const HTMLBlockTextarea = page.locator(
'role=document[name="Block: Custom HTML"i] >> role=textbox[name="HTML"i]'
);
await HTMLBlockTextarea.type( 'hello' );
diff --git a/test/integration/fixtures/blocks/core__form-input.html b/test/integration/fixtures/blocks/core__form-input.html
new file mode 100644
index 00000000000000..718c592641bc32
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.html
@@ -0,0 +1,3 @@
+
+Name
+
diff --git a/test/integration/fixtures/blocks/core__form-input.json b/test/integration/fixtures/blocks/core__form-input.json
new file mode 100644
index 00000000000000..33802bbcc2088d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.json
@@ -0,0 +1,12 @@
+[
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form-input",
+ "originalUndelimitedContent": "Name ",
+ "originalContent": "\nName \n"
+ },
+ "innerBlocks": []
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__form-input.parsed.json b/test/integration/fixtures/blocks/core__form-input.parsed.json
new file mode 100644
index 00000000000000..73058fc2e17f0b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.parsed.json
@@ -0,0 +1,14 @@
+[
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "label": "Name",
+ "required": true
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nName \n",
+ "innerContent": [
+ "\nName \n"
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__form-input.serialized.html b/test/integration/fixtures/blocks/core__form-input.serialized.html
new file mode 100644
index 00000000000000..4e1f6b77998de9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.serialized.html
@@ -0,0 +1,3 @@
+
+Name
+
diff --git a/test/integration/fixtures/blocks/core__form.html b/test/integration/fixtures/blocks/core__form.html
new file mode 100644
index 00000000000000..ab18e0e11c81a5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.html
@@ -0,0 +1,21 @@
+
+
+
diff --git a/test/integration/fixtures/blocks/core__form.json b/test/integration/fixtures/blocks/core__form.json
new file mode 100644
index 00000000000000..ba07b17e4d00c6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.json
@@ -0,0 +1,63 @@
+[
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form",
+ "originalUndelimitedContent": "\nName \nEmail \nWebsite \nComment \n\n ",
+ "originalContent": "\n\n\nName \n\n\nEmail \n\n\nWebsite \n\n\nComment \n\n\n\n\n \n"
+ },
+ "innerBlocks": [
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form-input",
+ "originalUndelimitedContent": "Name ",
+ "originalContent": "\nName \n"
+ },
+ "innerBlocks": []
+ },
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form-input",
+ "originalUndelimitedContent": "Email ",
+ "originalContent": "\nEmail \n"
+ },
+ "innerBlocks": []
+ },
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form-input",
+ "originalUndelimitedContent": "Website ",
+ "originalContent": "\nWebsite \n"
+ },
+ "innerBlocks": []
+ },
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form-input",
+ "originalUndelimitedContent": "Comment ",
+ "originalContent": "\nComment \n"
+ },
+ "innerBlocks": []
+ },
+ {
+ "name": "core/missing",
+ "isValid": true,
+ "attributes": {
+ "originalName": "core/form-input",
+ "originalUndelimitedContent": "",
+ "originalContent": "\n\n"
+ },
+ "innerBlocks": []
+ }
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__form.parsed.json b/test/integration/fixtures/blocks/core__form.parsed.json
new file mode 100644
index 00000000000000..379bee84c84e10
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.parsed.json
@@ -0,0 +1,84 @@
+[
+ {
+ "blockName": "core/form",
+ "attrs": {},
+ "innerBlocks": [
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "label": "Name",
+ "required": true
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nName \n",
+ "innerContent": [
+ "\nName \n"
+ ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "email",
+ "label": "Email",
+ "required": true
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nEmail \n",
+ "innerContent": [
+ "\nEmail \n"
+ ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "url",
+ "label": "Website"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nWebsite \n",
+ "innerContent": [
+ "\nWebsite \n"
+ ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "textarea",
+ "label": "Comment",
+ "required": true
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nComment \n",
+ "innerContent": [
+ "\nComment \n"
+ ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "submit",
+ "label": "Submit"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ }
+ ],
+ "innerHTML": "\n\n\n\n\n\n\n\n\n \n",
+ "innerContent": [
+ "\n",
+ null,
+ "\n\n",
+ null,
+ "\n\n",
+ null,
+ "\n\n",
+ null,
+ "\n\n",
+ null,
+ " \n"
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__form.serialized.html b/test/integration/fixtures/blocks/core__form.serialized.html
new file mode 100644
index 00000000000000..58a2a49967eb56
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.serialized.html
@@ -0,0 +1,19 @@
+
+
+
+Name
+
+
+Email
+
+
+Website
+
+
+Comment
+
+
+
+
+
+
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 3f105886cd2d11..a76889622b4a2f 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -147,6 +147,14 @@ module.exports = {
devtoolNamespace: 'wp',
filename: './build/[name]/index.min.js',
path: join( __dirname, '..', '..' ),
+ devtoolModuleFilenameTemplate: ( info ) => {
+ if ( info.resourcePath.includes( '/@wordpress/' ) ) {
+ const resourcePath =
+ info.resourcePath.split( '/@wordpress/' )[ 1 ];
+ return `../../packages/${ resourcePath }`;
+ }
+ return `webpack://${ info.namespace }/${ info.resourcePath }`;
+ },
},
plugins: [
...plugins,