From d2f347691e8e73782c83ca64cc48a55332ed3808 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 25 May 2023 12:43:28 +0200 Subject: [PATCH 1/8] Post editor: iframe if all blocks are v3 --- .../create-block/block-anatomy.md | 2 +- .../getting-started/create-block/wp-plugin.md | 2 +- .../applying-styles-with-stylesheets.md | 2 +- .../block-controls-toolbar-and-sidebar.md | 4 +- .../block-supports-in-dynamic-blocks.md | 8 +- .../block-supports-in-static-blocks.md | 6 +- .../block-tutorial/creating-dynamic-blocks.md | 10 +- ...roducing-attributes-and-editable-fields.md | 4 +- .../writing-your-first-block-type.md | 4 +- docs/how-to-guides/internationalization.md | 4 +- docs/how-to-guides/metabox.md | 2 +- .../block-api/block-edit-save.md | 8 +- .../block-api/block-metadata.md | 6 +- lib/blocks.php | 1 + .../src/components/block-edit/test/edit.js | 2 +- .../components/inspector-controls/README.md | 2 +- .../block-library/src/archives/block.json | 2 +- packages/block-library/src/audio/block.json | 2 +- packages/block-library/src/avatar/block.json | 2 +- packages/block-library/src/block/block.json | 2 +- packages/block-library/src/button/block.json | 2 +- packages/block-library/src/buttons/block.json | 2 +- .../block-library/src/calendar/block.json | 2 +- .../block-library/src/categories/block.json | 2 +- packages/block-library/src/code/block.json | 2 +- packages/block-library/src/column/block.json | 2 +- packages/block-library/src/columns/block.json | 2 +- .../src/comment-author-avatar/block.json | 2 +- .../src/comment-author-name/block.json | 2 +- .../src/comment-content/block.json | 2 +- .../block-library/src/comment-date/block.json | 2 +- .../src/comment-edit-link/block.json | 2 +- .../src/comment-reply-link/block.json | 2 +- .../src/comment-template/block.json | 2 +- .../src/comments-pagination-next/block.json | 2 +- .../comments-pagination-numbers/block.json | 2 +- .../comments-pagination-previous/block.json | 2 +- .../src/comments-pagination/block.json | 2 +- .../src/comments-title/block.json | 2 +- .../block-library/src/comments/block.json | 2 +- .../block-library/src/comments/deprecated.js | 2 +- packages/block-library/src/cover/block.json | 2 +- packages/block-library/src/details/block.json | 3 +- packages/block-library/src/embed/block.json | 2 +- packages/block-library/src/file/block.json | 2 +- .../block-library/src/freeform/block.json | 2 +- packages/block-library/src/gallery/block.json | 2 +- packages/block-library/src/group/block.json | 2 +- packages/block-library/src/heading/block.json | 2 +- .../block-library/src/home-link/block.json | 2 +- packages/block-library/src/html/block.json | 2 +- packages/block-library/src/image/block.json | 2 +- .../src/latest-comments/block.json | 2 +- .../block-library/src/latest-posts/block.json | 2 +- .../block-library/src/list-item/block.json | 2 +- packages/block-library/src/list/block.json | 2 +- .../block-library/src/loginout/block.json | 2 +- .../block-library/src/media-text/block.json | 2 +- packages/block-library/src/missing/block.json | 2 +- packages/block-library/src/more/block.json | 2 +- .../src/navigation-link/block.json | 2 +- .../src/navigation-submenu/block.json | 2 +- .../block-library/src/navigation/block.json | 2 +- .../block-library/src/nextpage/block.json | 2 +- .../src/page-list-item/block.json | 2 +- .../src/page-list-item/index.php | 14 +++ .../block-library/src/page-list/block.json | 2 +- .../block-library/src/paragraph/block.json | 2 +- packages/block-library/src/pattern/block.json | 2 +- .../src/post-author-biography/block.json | 2 +- .../src/post-author-name/block.json | 2 +- .../block-library/src/post-author/block.json | 2 +- .../block-library/src/post-comment/block.json | 2 +- .../src/post-comments-count/block.json | 2 +- .../src/post-comments-form/block.json | 2 +- .../src/post-comments-link/block.json | 2 +- .../block-library/src/post-content/block.json | 2 +- .../block-library/src/post-date/block.json | 2 +- .../block-library/src/post-excerpt/block.json | 2 +- .../src/post-featured-image/block.json | 2 +- .../src/post-navigation-link/block.json | 2 +- .../src/post-template/block.json | 2 +- .../block-library/src/post-terms/block.json | 2 +- .../src/post-time-to-read/block.json | 2 +- .../block-library/src/post-title/block.json | 2 +- .../block-library/src/preformatted/block.json | 2 +- .../block-library/src/pullquote/block.json | 2 +- .../src/query-no-results/block.json | 2 +- .../src/query-pagination-next/block.json | 2 +- .../src/query-pagination-numbers/block.json | 2 +- .../src/query-pagination-previous/block.json | 2 +- .../src/query-pagination/block.json | 2 +- .../block-library/src/query-title/block.json | 2 +- packages/block-library/src/query/block.json | 2 +- packages/block-library/src/quote/block.json | 2 +- .../block-library/src/read-more/block.json | 2 +- packages/block-library/src/rss/block.json | 2 +- packages/block-library/src/search/block.json | 2 +- .../block-library/src/separator/block.json | 2 +- .../block-library/src/shortcode/block.json | 2 +- .../block-library/src/site-logo/block.json | 2 +- .../block-library/src/site-tagline/block.json | 2 +- .../block-library/src/site-title/block.json | 2 +- .../block-library/src/social-link/block.json | 2 +- .../block-library/src/social-links/block.json | 2 +- packages/block-library/src/spacer/block.json | 2 +- .../src/table-of-contents/block.json | 2 +- packages/block-library/src/table/block.json | 2 +- .../block-library/src/tag-cloud/block.json | 2 +- .../src/template-part/block.json | 2 +- .../src/term-description/block.json | 2 +- .../block-library/src/text-columns/block.json | 2 +- packages/block-library/src/verse/block.json | 2 +- packages/block-library/src/video/block.json | 2 +- packages/blocks/src/api/test/registration.js | 8 +- packages/create-block/lib/templates.js | 2 +- .../src/page-utils/drag-files.ts | 26 ++-- .../src/page-utils/press-keys.ts | 10 +- .../src/click-block-appender.js | 7 +- packages/e2e-test-utils/src/inserter.js | 2 +- .../src/press-key-with-modifier.js | 15 ++- .../plugins/iframed-block/block.json | 2 +- .../plugins/iframed-inline-styles/block.json | 2 +- .../plugins/iframed-inline-styles/editor.js | 2 +- .../plugins/iframed-masonry-block/block.json | 2 +- .../plugins/iframed-masonry-block/editor.js | 2 +- .../iframed-multiple-stylesheets/block.json | 2 +- .../iframed-multiple-stylesheets/editor.js | 2 +- .../specs/editor/blocks/post-title.test.js | 7 +- .../specs/editor/blocks/site-title.test.js | 5 +- .../specs/editor/plugins/annotations.test.js | 19 +-- .../editor/plugins/block-variations.test.js | 11 +- .../specs/editor/plugins/cpt-locking.test.js | 27 ++-- .../plugins/iframed-inline-styles.test.js | 6 +- .../plugins/iframed-masonry-block.test.js | 2 +- ...iframed-multiple-block-stylesheets.test.js | 2 +- .../inner-blocks-allowed-blocks.test.js | 13 +- ...blocks-prioritized-inserter-blocks.test.js | 3 +- .../various/adding-inline-tokens.test.js | 1 - .../specs/editor/various/autosave.test.js | 3 +- .../block-editor-keyboard-shortcuts.test.js | 5 +- .../editor/various/block-grouping.test.js | 9 +- .../block-hierarchy-navigation.test.js | 19 +-- .../editor/various/change-detection.test.js | 39 +++--- .../specs/editor/various/editor-modes.test.js | 13 +- .../specs/editor/various/embedding.test.js | 36 +++--- .../editor/various/inserting-blocks.test.js | 33 ++--- .../editor/various/invalid-block.test.js | 5 +- .../various/keyboard-navigable-blocks.test.js | 33 +++-- .../specs/editor/various/links.test.js | 13 +- .../editor/various/navigable-toolbar.test.js | 28 ++--- .../editor/various/publish-button.test.js | 5 +- .../editor/various/publish-panel.test.js | 7 +- .../specs/editor/various/publishing.test.js | 14 ++- .../editor/various/reusable-blocks.test.js | 37 +++--- .../specs/editor/various/rich-text.test.js | 13 +- .../editor/various/sidebar-permalink.test.js | 7 +- .../specs/editor/various/taxonomies.test.js | 7 +- .../specs/editor/various/typewriter.test.js | 118 ++++++++++-------- .../src/components/visual-editor/index.js | 12 +- packages/server-side-render/README.md | 2 +- .../src/blocks/legacy-widget/block.json | 2 +- .../src/blocks/widget-group/block.json | 2 +- phpunit/block-supports/border-test.php | 2 +- phpunit/block-supports/colors-test.php | 6 +- phpunit/block-supports/dimensions-test.php | 6 +- phpunit/block-supports/position-test.php | 2 +- phpunit/block-supports/spacing-test.php | 6 +- phpunit/block-supports/typography-test.php | 14 +-- phpunit/bootstrap.php | 2 +- phpunit/class-wp-theme-json-resolver-test.php | 2 +- phpunit/fixtures/block.json | 2 +- schemas/json/block.json | 4 +- test/e2e/specs/editor/blocks/avatar.spec.js | 2 +- test/e2e/specs/editor/blocks/buttons.spec.js | 6 +- test/e2e/specs/editor/blocks/classic.spec.js | 18 ++- test/e2e/specs/editor/blocks/code.spec.js | 2 +- test/e2e/specs/editor/blocks/columns.spec.js | 12 +- test/e2e/specs/editor/blocks/comments.spec.js | 2 +- test/e2e/specs/editor/blocks/cover.spec.js | 22 ++-- test/e2e/specs/editor/blocks/gallery.spec.js | 15 +-- test/e2e/specs/editor/blocks/group.spec.js | 10 +- test/e2e/specs/editor/blocks/heading.spec.js | 18 +-- test/e2e/specs/editor/blocks/html.spec.js | 7 +- test/e2e/specs/editor/blocks/image.spec.js | 47 +++---- test/e2e/specs/editor/blocks/list.spec.js | 72 ++++++----- .../e2e/specs/editor/blocks/paragraph.spec.js | 34 ++--- .../e2e/specs/editor/blocks/pullquote.spec.js | 2 +- test/e2e/specs/editor/blocks/quote.spec.js | 12 +- .../e2e/specs/editor/blocks/separator.spec.js | 2 +- test/e2e/specs/editor/blocks/spacer.spec.js | 8 +- test/e2e/specs/editor/blocks/table.spec.js | 65 ++++++---- .../editor/plugins/custom-post-types.spec.js | 6 +- .../specs/editor/plugins/format-api.spec.js | 2 +- .../specs/editor/plugins/hooks-api.spec.js | 7 +- .../editor/plugins/iframed-block.spec.js | 4 +- .../specs/editor/plugins/image-size.spec.js | 2 +- .../plugins/post-type-templates.spec.js | 8 +- .../editor/plugins/wp-editor-meta-box.spec.js | 5 +- test/e2e/specs/editor/various/a11y.spec.js | 4 +- .../editor/various/block-deletion.spec.js | 6 +- .../specs/editor/various/block-mover.spec.js | 4 +- .../compatibility-classic-editor.spec.js | 2 +- .../editor/various/content-only-lock.spec.js | 2 +- .../editor/various/copy-cut-paste.spec.js | 41 +++--- .../editor/various/draggable-blocks.spec.js | 24 ++-- .../editor/various/font-size-picker.spec.js | 32 +++-- .../various/inner-blocks-templates.spec.js | 2 +- .../editor/various/inserting-blocks.spec.js | 8 +- .../keep-styles-on-block-transforms.spec.js | 6 +- .../specs/editor/various/list-view.spec.js | 4 +- .../e2e/specs/editor/various/mentions.spec.js | 6 +- .../various/multi-block-selection.spec.js | 4 +- .../various/new-post-default-content.spec.js | 2 +- .../e2e/specs/editor/various/new-post.spec.js | 11 +- .../editor/various/post-visibility.spec.js | 2 +- test/e2e/specs/editor/various/preview.spec.js | 28 +++-- test/e2e/specs/editor/various/rtl.spec.js | 2 +- .../editor/various/splitting-merging.spec.js | 6 +- .../various/toolbar-roving-tabindex.spec.js | 18 +-- test/e2e/specs/editor/various/undo.spec.js | 28 +++-- .../specs/editor/various/writing-flow.spec.js | 62 ++++----- .../specs/widgets/customizing-widgets.spec.js | 14 ++- 223 files changed, 931 insertions(+), 741 deletions(-) create mode 100644 packages/block-library/src/page-list-item/index.php diff --git a/docs/getting-started/create-block/block-anatomy.md b/docs/getting-started/create-block/block-anatomy.md index 83dbcf1469632..d53b1c9d6f5eb 100644 --- a/docs/getting-started/create-block/block-anatomy.md +++ b/docs/getting-started/create-block/block-anatomy.md @@ -44,7 +44,7 @@ Most of the properties are set in the `src/block.json` file. ```json { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "create-block/gutenpride", "version": "0.1.0", "title": "Gutenpride", diff --git a/docs/getting-started/create-block/wp-plugin.md b/docs/getting-started/create-block/wp-plugin.md index 33142659680b9..465060daba7c3 100644 --- a/docs/getting-started/create-block/wp-plugin.md +++ b/docs/getting-started/create-block/wp-plugin.md @@ -104,7 +104,7 @@ The `register_block_type` function registers the block we are going to create an ```json { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "create-block/gutenpride", "version": "0.1.0", "title": "Gutenpride", diff --git a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md index 19598965bb7dc..fc8dc01531c5d 100644 --- a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md +++ b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md @@ -205,7 +205,7 @@ For example: ```json { - "apiVersion": 2, + "apiVersion": 3, "name": "gutenberg-examples/example-02-stylesheets", "title": "Example: Stylesheets", "icon": "universal-access-alt", diff --git a/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md b/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md index cd110973b124f..93e5e54d84869 100644 --- a/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md +++ b/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md @@ -24,7 +24,7 @@ import { } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-04-controls-esnext', { - apiVersion: 2, + apiVersion: 3, title: 'Example: Controls (esnext)', icon: 'universal-access-alt', category: 'design', @@ -208,7 +208,7 @@ import { } from '@wordpress/block-editor'; registerBlockType( 'create-block/gutenpride', { - apiVersion: 2, + apiVersion: 3, attributes: { message: { type: 'string', diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md index b458b135104f9..dc022622c80c2 100644 --- a/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md +++ b/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md @@ -20,7 +20,7 @@ import { } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-dynamic', { - apiVersion: 2, + apiVersion: 3, title: 'Example: last post title', icon: 'megaphone', category: 'widgets', @@ -119,7 +119,7 @@ function gutenberg_examples_dynamic() { register_block_type( 'gutenberg-examples/example-dynamic', array( - 'api_version' => 2, + 'api_version' => 3, 'category' => 'widgets', 'attributes' => array( 'bgColor' => array( 'type' => 'string' ), @@ -144,7 +144,7 @@ import { useSelect } from '@wordpress/data'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-dynamic-block-supports', { - apiVersion: 2, + apiVersion: 3, title: 'Example: last post title(block supports)', icon: 'megaphone', category: 'widgets', @@ -195,7 +195,7 @@ function gutenberg_examples_dynamic_block_supports() { register_block_type( 'gutenberg-examples/example-dynamic-block-supports', array( - 'api_version' => 2, + 'api_version' => 3, 'category' => 'widgets', 'supports' => array( 'color' => true ), 'render_callback' => 'gutenberg_examples_dynamic_block_supports_render_callback', diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md index ee478602fd1e9..b343280cae43f 100644 --- a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md +++ b/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md @@ -16,7 +16,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps, RichText } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { - apiVersion: 2, + apiVersion: 3, title: 'Example: Basic with block supports', icon: 'universal-access-alt', category: 'design', @@ -73,7 +73,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { var useBlockProps = blockEditor.useBlockProps; blocks.registerBlockType( 'gutenberg-examples/example-03-editable', { - apiVersion: 2, + apiVersion: 3, title: 'Example: Basic with block supports', icon: 'universal-access-alt', category: 'design', @@ -127,7 +127,7 @@ Now, let's alter the block.json file for that block, and add the supports key. ( ```json { - "apiVersion": 2, + "apiVersion": 3, "name": "gutenberg-examples/example-03-editable-esnext", "title": "Example: Basic with block supports", "icon": "universal-access-alt", diff --git a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md index 9f5eff3883b6a..9d1e4dbdf5255 100644 --- a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md +++ b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md @@ -26,7 +26,7 @@ import { useSelect } from '@wordpress/data'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-dynamic', { - apiVersion: 2, + apiVersion: 3, title: 'Example: last post', icon: 'megaphone', category: 'widgets', @@ -62,7 +62,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', { useBlockProps = blockEditor.useBlockProps; registerBlockType( 'gutenberg-examples/example-dynamic', { - apiVersion: 2, + apiVersion: 3, title: 'Example: last post', icon: 'megaphone', category: 'widgets', @@ -132,7 +132,7 @@ function gutenberg_examples_dynamic() { ); register_block_type( 'gutenberg-examples/example-dynamic', array( - 'api_version' => 2, + 'api_version' => 3, 'editor_script' => 'gutenberg-examples-dynamic', 'render_callback' => 'gutenberg_examples_dynamic_render_callback' ) ); @@ -165,7 +165,7 @@ import ServerSideRender from '@wordpress/server-side-render'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-dynamic', { - apiVersion: 2, + apiVersion: 3, title: 'Example: last post', icon: 'megaphone', category: 'widgets', @@ -194,7 +194,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', { useBlockProps = blockEditor.useBlockProps; registerBlockType( 'gutenberg-examples/example-dynamic', { - apiVersion: 2, + apiVersion: 3, title: 'Example: last post', icon: 'megaphone', category: 'widgets', diff --git a/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md b/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md index b0def1aff4d08..8f4c54451cdb2 100644 --- a/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md +++ b/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md @@ -60,7 +60,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps, RichText } from '@wordpress/block-editor'; registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { - apiVersion: 2, + apiVersion: 3, title: 'Example: Editable (esnext)', icon: 'universal-access-alt', category: 'design', @@ -117,7 +117,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { var useBlockProps = blockEditor.useBlockProps; blocks.registerBlockType( 'gutenberg-examples/example-03-editable', { - apiVersion: 2, + apiVersion: 3, title: 'Example: Editable', icon: 'universal-access-alt', category: 'design', diff --git a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md index 83a3cd156251b..40f9dcfcfb5fd 100644 --- a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md +++ b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md @@ -43,7 +43,7 @@ Create a basic `block.json` file there: ```json { - "apiVersion": 2, + "apiVersion": 3, "title": "Example: Basic (ESNext)", "name": "gutenberg-examples/example-01-basic-esnext", "category": "layout", @@ -56,7 +56,7 @@ Create a basic `block.json` file there: ```json { - "apiVersion": 2, + "apiVersion": 3, "title": "Example: Basic", "name": "gutenberg-examples/example-01-basic", "category": "layout", diff --git a/docs/how-to-guides/internationalization.md b/docs/how-to-guides/internationalization.md index fa28b78b37690..af68da2719335 100644 --- a/docs/how-to-guides/internationalization.md +++ b/docs/how-to-guides/internationalization.md @@ -28,7 +28,7 @@ function myguten_block_init() { ); register_block_type( 'myguten/simple', array( - 'api_version' => 2, + 'api_version' => 3, 'editor_script' => 'myguten-script', ) ); } @@ -46,7 +46,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'myguten/simple', { - apiVersion: 2, + apiVersion: 3, title: __( 'Simple Block', 'myguten' ), category: 'widgets', diff --git a/docs/how-to-guides/metabox.md b/docs/how-to-guides/metabox.md index 382afd602ed3d..7a8686968d2cf 100644 --- a/docs/how-to-guides/metabox.md +++ b/docs/how-to-guides/metabox.md @@ -152,7 +152,7 @@ function myguten_render_paragraph( $block_attributes, $content ) { } register_block_type( 'core/paragraph', array( - 'api_version' => 2, + 'api_version' => 3, 'render_callback' => 'myguten_render_paragraph', ) ); ``` diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md index f585d73454727..843a8d5be12d3 100644 --- a/docs/reference-guides/block-api/block-edit-save.md +++ b/docs/reference-guides/block-api/block-edit-save.md @@ -14,7 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor'; // ... const blockSettings = { - apiVersion: 2, + apiVersion: 3, // ... @@ -30,7 +30,7 @@ const blockSettings = { ```js var blockSettings = { - apiVersion: 2, + apiVersion: 3, // ... @@ -58,7 +58,7 @@ import { useBlockProps } from '@wordpress/block-editor'; // ... const blockSettings = { - apiVersion: 2, + apiVersion: 3, // ... @@ -76,7 +76,7 @@ const blockSettings = { ```js var blockSettings = { - apiVersion: 2, + apiVersion: 3, // ... diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md index 9bfdce9279ff2..216509ab1df13 100644 --- a/docs/reference-guides/block-api/block-metadata.md +++ b/docs/reference-guides/block-api/block-metadata.md @@ -7,7 +7,7 @@ Starting in WordPress 5.8 release, we recommend using the `block.json` metadata ```json { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "my-plugin/notice", "title": "Notice", "category": "text", @@ -150,10 +150,10 @@ This section describes all the properties that can be added to the `block.json` - Default: `1` ```json -{ "apiVersion": 2 } +{ "apiVersion": 3 } ``` -The version of the Block API used by the block. The most recent version is `2` and it was introduced in WordPress 5.6. +The version of the Block API used by the block. The most recent version is `3` and it was introduced in WordPress 6.3. See the [the API versions documentation](/docs/reference-guides/block-api/block-api-versions.md) for more details. diff --git a/lib/blocks.php b/lib/blocks.php index 5c1d81f120c4a..fdbc555a2f944 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -77,6 +77,7 @@ function gutenberg_reregister_core_block_types() { 'navigation-link.php' => 'core/navigation-link', 'navigation-submenu.php' => 'core/navigation-submenu', 'page-list.php' => 'core/page-list', + 'page-list-item.php' => 'core/page-list-item', 'pattern.php' => 'core/pattern', 'post-author.php' => 'core/post-author', 'post-author-name.php' => 'core/post-author-name', diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js index 26d90bcd5b281..0eb4c72cbbfc9 100644 --- a/packages/block-editor/src/components/block-edit/test/edit.js +++ b/packages/block-editor/src/components/block-edit/test/edit.js @@ -107,7 +107,7 @@ describe( 'Edit', () => { it( 'should assign context', () => { const edit = ( { context } ) => context.value; registerBlockType( 'core/test-block', { - apiVersion: 2, + apiVersion: 3, category: 'text', title: 'block title', usesContext: [ 'value' ], diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md index 0ce3310b7b1fb..cc68c7cae7c78 100644 --- a/packages/block-editor/src/components/inspector-controls/README.md +++ b/packages/block-editor/src/components/inspector-controls/README.md @@ -23,7 +23,7 @@ import { } from '@wordpress/block-editor'; registerBlockType( 'my-plugin/inspector-controls-example', { - apiVersion: 2, + apiVersion: 3, title: 'Inspector controls example', diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json index edc6895e14b06..ec0d926281d2e 100644 --- a/packages/block-library/src/archives/block.json +++ b/packages/block-library/src/archives/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/archives", "title": "Archives", "category": "widgets", diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json index 13aed788968fb..adcf67e4dc10c 100644 --- a/packages/block-library/src/audio/block.json +++ b/packages/block-library/src/audio/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/audio", "title": "Audio", "category": "media", diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json index 3fbb6dd9221ae..b39a9bedc82cf 100644 --- a/packages/block-library/src/avatar/block.json +++ b/packages/block-library/src/avatar/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/avatar", "title": "Avatar", "category": "theme", diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index f472fd0f4760a..78fed058a5bd1 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/block", "title": "Reusable block", "category": "reusable", diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index a8d7caaba6e0c..e337aa857fc17 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/button", "title": "Button", "category": "design", diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 71d5aa302cfc9..26bce09b17840 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/buttons", "title": "Buttons", "category": "design", diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index c772cf58411f0..c74003cc8ba65 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/calendar", "title": "Calendar", "category": "widgets", diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json index a90a527e35c45..9ad4be3a96fd3 100644 --- a/packages/block-library/src/categories/block.json +++ b/packages/block-library/src/categories/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/categories", "title": "Categories List", "category": "widgets", diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json index 660a2faafaf92..7f58e79d22175 100644 --- a/packages/block-library/src/code/block.json +++ b/packages/block-library/src/code/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/code", "title": "Code", "category": "text", diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index 6c032d347248e..1ff0bb8935167 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/column", "title": "Column", "category": "design", diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index d4198afeda11f..91230ef739eb9 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/columns", "title": "Columns", "category": "design", diff --git a/packages/block-library/src/comment-author-avatar/block.json b/packages/block-library/src/comment-author-avatar/block.json index 2b6cefd6db998..b0c8c322410d2 100644 --- a/packages/block-library/src/comment-author-avatar/block.json +++ b/packages/block-library/src/comment-author-avatar/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "__experimental": "fse", "name": "core/comment-author-avatar", "title": "Comment Author Avatar (deprecated)", diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json index cfa036fa80e2d..8b8f972218928 100644 --- a/packages/block-library/src/comment-author-name/block.json +++ b/packages/block-library/src/comment-author-name/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comment-author-name", "title": "Comment Author Name", "category": "theme", diff --git a/packages/block-library/src/comment-content/block.json b/packages/block-library/src/comment-content/block.json index 69917ccce6aea..a7cce6bd58f4f 100644 --- a/packages/block-library/src/comment-content/block.json +++ b/packages/block-library/src/comment-content/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comment-content", "title": "Comment Content", "category": "theme", diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json index ea1e263338139..16af1f2c2ca95 100644 --- a/packages/block-library/src/comment-date/block.json +++ b/packages/block-library/src/comment-date/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comment-date", "title": "Comment Date", "category": "theme", diff --git a/packages/block-library/src/comment-edit-link/block.json b/packages/block-library/src/comment-edit-link/block.json index e695ddc3801f7..e9a74429ec6e3 100644 --- a/packages/block-library/src/comment-edit-link/block.json +++ b/packages/block-library/src/comment-edit-link/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comment-edit-link", "title": "Comment Edit Link", "category": "theme", diff --git a/packages/block-library/src/comment-reply-link/block.json b/packages/block-library/src/comment-reply-link/block.json index 7ed60f34f581f..2f23a2b87a2d0 100644 --- a/packages/block-library/src/comment-reply-link/block.json +++ b/packages/block-library/src/comment-reply-link/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comment-reply-link", "title": "Comment Reply Link", "category": "theme", diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json index 9d0eb98684f14..2e51e06b7e357 100644 --- a/packages/block-library/src/comment-template/block.json +++ b/packages/block-library/src/comment-template/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comment-template", "title": "Comment Template", "category": "design", diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json index f0cee1a1cdbe6..d0137546182ee 100644 --- a/packages/block-library/src/comments-pagination-next/block.json +++ b/packages/block-library/src/comments-pagination-next/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comments-pagination-next", "title": "Comments Next Page", "category": "theme", diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json index 0ab4f965ff1cd..9118f2fd79ca2 100644 --- a/packages/block-library/src/comments-pagination-numbers/block.json +++ b/packages/block-library/src/comments-pagination-numbers/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comments-pagination-numbers", "title": "Comments Page Numbers", "category": "theme", diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json index 211e1a33305a0..255bd2b271a17 100644 --- a/packages/block-library/src/comments-pagination-previous/block.json +++ b/packages/block-library/src/comments-pagination-previous/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comments-pagination-previous", "title": "Comments Previous Page", "category": "theme", diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json index d7c8be4b8eaa2..cd9f60f8c7463 100644 --- a/packages/block-library/src/comments-pagination/block.json +++ b/packages/block-library/src/comments-pagination/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comments-pagination", "title": "Comments Pagination", "category": "theme", diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json index 3c5db438a3fe6..12b105afe9a31 100644 --- a/packages/block-library/src/comments-title/block.json +++ b/packages/block-library/src/comments-title/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comments-title", "title": "Comments Title", "category": "theme", diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json index 19490f6e99eb4..06d6c28e5ad2c 100644 --- a/packages/block-library/src/comments/block.json +++ b/packages/block-library/src/comments/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/comments", "title": "Comments", "category": "theme", diff --git a/packages/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js index bba13be11e754..67a1640859289 100644 --- a/packages/block-library/src/comments/deprecated.js +++ b/packages/block-library/src/comments/deprecated.js @@ -12,7 +12,7 @@ const v1 = { default: 'div', }, }, - apiVersion: 2, + apiVersion: 3, supports: { align: [ 'wide', 'full' ], html: false, diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index f7e117add4065..8b4c706a332cc 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/cover", "title": "Cover", "category": "media", diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json index 4eb7af8d5ce62..a96707fa63494 100644 --- a/packages/block-library/src/details/block.json +++ b/packages/block-library/src/details/block.json @@ -1,6 +1,7 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, + "__experimental": true, "name": "core/details", "title": "Details", "category": "text", diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index e56c5b894dabe..9ca54db871db1 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/embed", "title": "Embed", "category": "embed", diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index 08a78f3a94ce4..12edc20630d1e 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/file", "title": "File", "category": "media", diff --git a/packages/block-library/src/freeform/block.json b/packages/block-library/src/freeform/block.json index 84b57b75326c0..f98e183117762 100644 --- a/packages/block-library/src/freeform/block.json +++ b/packages/block-library/src/freeform/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/freeform", "title": "Classic", "category": "text", diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 0400430b95ee6..d352acd2833b8 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/gallery", "title": "Gallery", "category": "media", diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index d9411b75a90a3..9a2d61056fb30 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/group", "title": "Group", "category": "design", diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index f9d701eace964..ff2a5d267511b 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/heading", "title": "Heading", "category": "text", diff --git a/packages/block-library/src/home-link/block.json b/packages/block-library/src/home-link/block.json index df964ad76bc68..0929dee8aaa4c 100644 --- a/packages/block-library/src/home-link/block.json +++ b/packages/block-library/src/home-link/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/home-link", "category": "design", "parent": [ "core/navigation" ], diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json index c1e1e94b87496..b1a2ad60625d1 100644 --- a/packages/block-library/src/html/block.json +++ b/packages/block-library/src/html/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/html", "title": "Custom HTML", "category": "widgets", diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 791e09f73c800..d51d70dd711f0 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/image", "title": "Image", "category": "media", diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json index 80fa4f5d2d063..b7a91ebf13746 100644 --- a/packages/block-library/src/latest-comments/block.json +++ b/packages/block-library/src/latest-comments/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/latest-comments", "title": "Latest Comments", "category": "widgets", diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json index 9b451f5875c73..56cdc7af46087 100644 --- a/packages/block-library/src/latest-posts/block.json +++ b/packages/block-library/src/latest-posts/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/latest-posts", "title": "Latest Posts", "category": "widgets", diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json index 745d6e30b4dd6..41221f1c31772 100644 --- a/packages/block-library/src/list-item/block.json +++ b/packages/block-library/src/list-item/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/list-item", "title": "List item", "category": "text", diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json index 4e1089b088738..e7ef850d29ba5 100644 --- a/packages/block-library/src/list/block.json +++ b/packages/block-library/src/list/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/list", "title": "List", "category": "text", diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json index 3ba18dcf17143..b2a91da8eda67 100644 --- a/packages/block-library/src/loginout/block.json +++ b/packages/block-library/src/loginout/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/loginout", "title": "Login/out", "category": "theme", diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index ac88c9ca6d4df..8ffc653d68414 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/media-text", "title": "Media & Text", "category": "media", diff --git a/packages/block-library/src/missing/block.json b/packages/block-library/src/missing/block.json index 9a44caa248509..0bc512bbbf709 100644 --- a/packages/block-library/src/missing/block.json +++ b/packages/block-library/src/missing/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/missing", "title": "Unsupported", "category": "text", diff --git a/packages/block-library/src/more/block.json b/packages/block-library/src/more/block.json index 25f1df23771f3..bfd95652ea176 100644 --- a/packages/block-library/src/more/block.json +++ b/packages/block-library/src/more/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/more", "title": "More", "category": "design", diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json index ae151a279e5ac..b2cbeaed63d3e 100644 --- a/packages/block-library/src/navigation-link/block.json +++ b/packages/block-library/src/navigation-link/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/navigation-link", "title": "Custom Link", "category": "design", diff --git a/packages/block-library/src/navigation-submenu/block.json b/packages/block-library/src/navigation-submenu/block.json index f311a9f36e41a..91364109ea740 100644 --- a/packages/block-library/src/navigation-submenu/block.json +++ b/packages/block-library/src/navigation-submenu/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/navigation-submenu", "title": "Submenu", "category": "design", diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index ce2bed0d8837f..ba84263013ab5 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/navigation", "title": "Navigation", "category": "theme", diff --git a/packages/block-library/src/nextpage/block.json b/packages/block-library/src/nextpage/block.json index 6a133264d6747..ab88d4a7be4f0 100644 --- a/packages/block-library/src/nextpage/block.json +++ b/packages/block-library/src/nextpage/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/nextpage", "title": "Page Break", "category": "design", diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json index 04e7f7f574dd2..abd86924949ab 100644 --- a/packages/block-library/src/page-list-item/block.json +++ b/packages/block-library/src/page-list-item/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "core/page-list-item", "title": "Page List Item", "category": "widgets", diff --git a/packages/block-library/src/page-list-item/index.php b/packages/block-library/src/page-list-item/index.php new file mode 100644 index 0000000000000..2955c795aec2b --- /dev/null +++ b/packages/block-library/src/page-list-item/index.php @@ -0,0 +1,14 @@ + { const blockName = 'core/test-block-with-incompatible-keys'; unstable__bootstrapServerSideBlockDefinitions( { [ blockName ]: { - api_version: 2, + api_version: 3, provides_context: { fontSize: 'fontSize', }, @@ -375,7 +375,7 @@ describe( 'blocks', () => { }; registerBlockType( blockName, blockType ); expect( getBlockType( blockName ) ).toEqual( { - apiVersion: 2, + apiVersion: 3, name: blockName, save: expect.any( Function ), title: 'block title', @@ -403,7 +403,7 @@ describe( 'blocks', () => { } ); unstable__bootstrapServerSideBlockDefinitions( { [ blockName ]: { - apiVersion: 2, + apiVersion: 3, category: 'ignored', }, } ); @@ -413,7 +413,7 @@ describe( 'blocks', () => { }; registerBlockType( blockName, blockType ); expect( getBlockType( blockName ) ).toEqual( { - apiVersion: 2, + apiVersion: 3, name: blockName, save: expect.any( Function ), title: 'block title', diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 48649527ecc84..018385c9fde82 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -220,7 +220,7 @@ const getPluginTemplate = async ( templateName ) => { const getDefaultValues = ( pluginTemplate, variant ) => { return { $schema: 'https://schemas.wp.org/trunk/block.json', - apiVersion: 2, + apiVersion: 3, namespace: 'create-block', category: 'widgets', author: 'The WordPress Contributors', diff --git a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts index ea59c4602b1f6..f6378b73e33ec 100644 --- a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts +++ b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts @@ -9,7 +9,7 @@ import { getType } from 'mime'; * Internal dependencies */ import type { PageUtils } from './index'; -import type { Locator } from '@playwright/test'; +import type { ElementHandle, Locator } from '@playwright/test'; type FileObject = { name: string; @@ -141,21 +141,25 @@ async function dragFiles( /** * Drop the files at the current position. + * + * @param locator */ - drop: async () => { - const topMostElement = await this.page.evaluateHandle( - ( { x, y } ) => { - return document.elementFromPoint( x, y ); - }, - position - ); - const elementHandle = topMostElement.asElement(); + drop: async ( locator: Locator | ElementHandle | null ) => { + if ( ! locator ) { + const topMostElement = await this.page.evaluateHandle( + ( { x, y } ) => { + return document.elementFromPoint( x, y ); + }, + position + ); + locator = topMostElement.asElement(); + } - if ( ! elementHandle ) { + if ( ! locator ) { throw new Error( 'Element not found.' ); } - await elementHandle.dispatchEvent( 'drop', { dataTransfer } ); + await locator.dispatchEvent( 'drop', { dataTransfer } ); await cdpSession.detach(); }, diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts index 2d93a184913bb..9929ebf19d01a 100644 --- a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts +++ b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts @@ -49,6 +49,9 @@ export function setClipboardData( async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { clipboardDataHolder = await page.evaluate( ( [ _type, _clipboardData ] ) => { + const canvasDoc = + // @ts-ignore + document.activeElement?.contentDocument ?? document; const clipboardDataTransfer = new DataTransfer(); if ( _type === 'paste' ) { @@ -61,7 +64,7 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { _clipboardData.html ); } else { - const selection = window.getSelection()!; + const selection = canvasDoc.defaultView.getSelection()!; const plainText = selection.toString(); let html = plainText; if ( selection.rangeCount ) { @@ -70,7 +73,8 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { html = Array.from( fragment.childNodes ) .map( ( node ) => - ( node as Element ).outerHTML ?? node.nodeValue + ( node as Element ).outerHTML ?? + ( node as Element ).nodeValue ) .join( '' ); } @@ -78,7 +82,7 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { clipboardDataTransfer.setData( 'text/html', html ); } - document.activeElement?.dispatchEvent( + canvasDoc.activeElement?.dispatchEvent( new ClipboardEvent( _type, { bubbles: true, cancelable: true, diff --git a/packages/e2e-test-utils/src/click-block-appender.js b/packages/e2e-test-utils/src/click-block-appender.js index caae3dbf11dc7..b1c69789544c7 100644 --- a/packages/e2e-test-utils/src/click-block-appender.js +++ b/packages/e2e-test-utils/src/click-block-appender.js @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import { canvas } from './canvas'; + /** * Clicks the default block appender. */ @@ -6,7 +11,7 @@ export async function clickBlockAppender() { await page.evaluate( () => window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock() ); - const appender = await page.waitForSelector( + const appender = await canvas().waitForSelector( '.block-editor-default-block-appender__content' ); await appender.click(); diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index 84521728160be..58f6d01a66514 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -261,7 +261,7 @@ export async function insertFromGlobalInserter( category, searchTerm ) { // Extra wait for the reusable block to be ready. if ( category === 'Reusable' ) { - await page.waitForSelector( + await canvas().waitForSelector( '.block-library-block__reusable-block-container' ); } diff --git a/packages/e2e-test-utils/src/press-key-with-modifier.js b/packages/e2e-test-utils/src/press-key-with-modifier.js index 265c186752f8d..71d8ed72e8de7 100644 --- a/packages/e2e-test-utils/src/press-key-with-modifier.js +++ b/packages/e2e-test-utils/src/press-key-with-modifier.js @@ -24,8 +24,9 @@ import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes'; async function emulateSelectAll() { await page.evaluate( () => { const isMac = /Mac|iPod|iPhone|iPad/.test( window.navigator.platform ); + const canvasDoc = document.activeElement.contentDocument ?? document; - document.activeElement.dispatchEvent( + canvasDoc.activeElement.dispatchEvent( new KeyboardEvent( 'keydown', { bubbles: true, cancelable: true, @@ -58,14 +59,14 @@ async function emulateSelectAll() { } ); const wasPrevented = - ! document.activeElement.dispatchEvent( preventableEvent ) || + ! canvasDoc.activeElement.dispatchEvent( preventableEvent ) || preventableEvent.defaultPrevented; if ( ! wasPrevented ) { - document.execCommand( 'selectall', false, null ); + canvasDoc.execCommand( 'selectall', false, null ); } - document.activeElement.dispatchEvent( + canvasDoc.activeElement.dispatchEvent( new KeyboardEvent( 'keyup', { bubbles: true, cancelable: true, @@ -103,10 +104,12 @@ export async function setClipboardData( { plainText = '', html = '' } ) { async function emulateClipboard( type ) { await page.evaluate( ( _type ) => { + const canvasDoc = document.activeElement.contentDocument ?? document; + if ( _type !== 'paste' ) { window._clipboardData = new DataTransfer(); - const selection = window.getSelection(); + const selection = canvasDoc.defaultView.getSelection(); const plainText = selection.toString(); let html = plainText; @@ -123,7 +126,7 @@ async function emulateClipboard( type ) { window._clipboardData.setData( 'text/html', html ); } - document.activeElement.dispatchEvent( + canvasDoc.activeElement.dispatchEvent( new ClipboardEvent( _type, { bubbles: true, cancelable: true, diff --git a/packages/e2e-tests/plugins/iframed-block/block.json b/packages/e2e-tests/plugins/iframed-block/block.json index f1110534e27dc..85f86dea8131d 100644 --- a/packages/e2e-tests/plugins/iframed-block/block.json +++ b/packages/e2e-tests/plugins/iframed-block/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "test/iframed-block", "title": "Iframed Block", "category": "text", diff --git a/packages/e2e-tests/plugins/iframed-inline-styles/block.json b/packages/e2e-tests/plugins/iframed-inline-styles/block.json index 9e30ecfd6ca54..293b5af5e971f 100644 --- a/packages/e2e-tests/plugins/iframed-inline-styles/block.json +++ b/packages/e2e-tests/plugins/iframed-inline-styles/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "test/iframed-inline-styles", "title": "Iframed Inline Styles", "category": "text", diff --git a/packages/e2e-tests/plugins/iframed-inline-styles/editor.js b/packages/e2e-tests/plugins/iframed-inline-styles/editor.js index 1898e63075895..719c36a912b5d 100644 --- a/packages/e2e-tests/plugins/iframed-inline-styles/editor.js +++ b/packages/e2e-tests/plugins/iframed-inline-styles/editor.js @@ -4,7 +4,7 @@ const { useBlockProps } = blockEditor; registerBlockType( 'test/iframed-inline-styles', { - apiVersion: 2, + apiVersion: 3, edit: function Edit() { return el( 'div', useBlockProps(), 'Edit' ); }, diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/block.json b/packages/e2e-tests/plugins/iframed-masonry-block/block.json index 6b7c995df9649..b9b3f17234e30 100644 --- a/packages/e2e-tests/plugins/iframed-masonry-block/block.json +++ b/packages/e2e-tests/plugins/iframed-masonry-block/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "test/iframed-masonry-block", "title": "Iframed Masonry Block", "category": "text", diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js index 82b0c8d83a7da..eebd7d370e085 100644 --- a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js +++ b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js @@ -31,7 +31,7 @@ ]; registerBlockType( 'test/iframed-masonry-block', { - apiVersion: 2, + apiVersion: 3, edit: function Edit() { const ref = useRefEffect( ( node ) => { const { ownerDocument } = node; diff --git a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json index fbd2e65e13397..4db03f471177d 100644 --- a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json +++ b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "test/iframed-multiple-stylesheets", "title": "Iframed Multiple Stylesheets", "category": "text", diff --git a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js index be3ded2d9e2b7..fce08fadff850 100644 --- a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js +++ b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js @@ -4,7 +4,7 @@ const { useBlockProps } = blockEditor; registerBlockType( 'test/iframed-multiple-stylesheets', { - apiVersion: 2, + apiVersion: 3, edit: function Edit() { return el( 'div', useBlockProps(), 'Edit' ); }, diff --git a/packages/e2e-tests/specs/editor/blocks/post-title.test.js b/packages/e2e-tests/specs/editor/blocks/post-title.test.js index 621e6815cfba8..44ba119e73113 100644 --- a/packages/e2e-tests/specs/editor/blocks/post-title.test.js +++ b/packages/e2e-tests/specs/editor/blocks/post-title.test.js @@ -5,6 +5,7 @@ import { createNewPost, insertBlock, saveDraft, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Post Title block', () => { @@ -17,8 +18,8 @@ describe( 'Post Title block', () => { await insertBlock( 'Post Title' ); const editablePostTitleSelector = '.wp-block-post-title[contenteditable="true"]'; - await page.waitForSelector( editablePostTitleSelector ); - await page.focus( editablePostTitleSelector ); + await canvas().waitForSelector( editablePostTitleSelector ); + await canvas().focus( editablePostTitleSelector ); // Create a second list item. await page.keyboard.type( 'Just tweaking the post title' ); @@ -26,7 +27,7 @@ describe( 'Post Title block', () => { await saveDraft(); await page.reload(); await page.waitForSelector( '.edit-post-layout' ); - const title = await page.$eval( + const title = await canvas().$eval( '.editor-post-title__input', ( element ) => element.textContent ); diff --git a/packages/e2e-tests/specs/editor/blocks/site-title.test.js b/packages/e2e-tests/specs/editor/blocks/site-title.test.js index 32428a73c8e20..d24b79b6bb372 100644 --- a/packages/e2e-tests/specs/editor/blocks/site-title.test.js +++ b/packages/e2e-tests/specs/editor/blocks/site-title.test.js @@ -9,6 +9,7 @@ import { pressKeyWithModifier, setOption, openDocumentSettingsSidebar, + canvas, } from '@wordpress/e2e-test-utils'; const saveEntities = async () => { @@ -45,8 +46,8 @@ describe( 'Site Title block', () => { await insertBlock( 'Site Title' ); const editableSiteTitleSelector = '[aria-label="Block: Site Title"] a[contenteditable="true"]'; - await page.waitForSelector( editableSiteTitleSelector ); - await page.focus( editableSiteTitleSelector ); + await canvas().waitForSelector( editableSiteTitleSelector ); + await canvas().focus( editableSiteTitleSelector ); await pressKeyWithModifier( 'primary', 'a' ); await page.keyboard.type( 'New Site Title' ); diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js index 85265bf424abc..214f38a36b0df 100644 --- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/annotations.test.js @@ -8,6 +8,7 @@ import { clickOnMoreMenuItem, createNewPost, deactivatePlugin, + canvas, } from '@wordpress/e2e-test-utils'; const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => { @@ -51,7 +52,7 @@ describe( 'Annotations', () => { await page.$x( "//button[contains(text(), 'Add annotation')]" ) )[ 0 ]; await addAnnotationButton.click(); - await page.evaluate( () => + await canvas().evaluate( () => document.querySelector( '.wp-block-paragraph' ).focus() ); } @@ -67,7 +68,7 @@ describe( 'Annotations', () => { await page.$x( "//button[contains(text(), 'Remove annotations')]" ) )[ 0 ]; await addAnnotationButton.click(); - await page.evaluate( () => + await canvas().evaluate( () => document.querySelector( '[contenteditable]' ).focus() ); } @@ -78,11 +79,11 @@ describe( 'Annotations', () => { * @return {Promise} The annotated text. */ async function getAnnotatedText() { - const annotations = await page.$$( ANNOTATIONS_SELECTOR ); + const annotations = await canvas().$$( ANNOTATIONS_SELECTOR ); const annotation = annotations[ 0 ]; - return await page.evaluate( ( el ) => el.innerText, annotation ); + return await canvas().evaluate( ( el ) => el.innerText, annotation ); } /** @@ -91,7 +92,7 @@ describe( 'Annotations', () => { * @return {Promise} Inner HTML. */ async function getRichTextInnerHTML() { - const htmlContent = await page.$$( '.wp-block-paragraph' ); + const htmlContent = await canvas().$$( '.wp-block-paragraph' ); return await page.evaluate( ( el ) => { return el.innerHTML; }, htmlContent[ 0 ] ); @@ -102,12 +103,12 @@ describe( 'Annotations', () => { await clickOnMoreMenuItem( 'Annotations' ); - let annotations = await page.$$( ANNOTATIONS_SELECTOR ); + let annotations = await canvas().$$( ANNOTATIONS_SELECTOR ); expect( annotations ).toHaveLength( 0 ); await annotateFirstBlock( 9, 13 ); - annotations = await page.$$( ANNOTATIONS_SELECTOR ); + annotations = await canvas().$$( ANNOTATIONS_SELECTOR ); expect( annotations ).toHaveLength( 1 ); const text = await getAnnotatedText(); @@ -115,7 +116,7 @@ describe( 'Annotations', () => { await clickOnBlockSettingsMenuItem( 'Edit as HTML' ); - const htmlContent = await page.$$( + const htmlContent = await canvas().$$( '.block-editor-block-list__block-html-textarea' ); const html = await page.evaluate( ( el ) => { @@ -136,7 +137,7 @@ describe( 'Annotations', () => { await page.keyboard.type( 'D' ); await removeAnnotations(); - const htmlContent = await page.$$( '.wp-block-paragraph' ); + const htmlContent = await canvas().$$( '.wp-block-paragraph' ); const html = await page.evaluate( ( el ) => { return el.innerHTML; }, htmlContent[ 0 ] ); diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js index 886382a4667b1..4a24cd3f478d2 100644 --- a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js @@ -11,6 +11,7 @@ import { openDocumentSettingsSidebar, togglePreferencesOption, toggleMoreMenu, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Block variations', () => { @@ -45,7 +46,7 @@ describe( 'Block variations', () => { await insertBlock( 'Large Quote' ); expect( - await page.$( + await canvas().$( '.wp-block[data-type="core/quote"] blockquote.is-style-large' ) ).toBeDefined(); @@ -58,7 +59,7 @@ describe( 'Block variations', () => { await page.keyboard.press( 'Enter' ); expect( - await page.$( + await canvas().$( '.wp-block[data-type="core/quote"] blockquote.is-style-large' ) ).toBeDefined(); @@ -75,7 +76,7 @@ describe( 'Block variations', () => { test( 'Insert the Success Message block variation', async () => { await insertBlock( 'Success Message' ); - const successMessageBlock = await page.$( + const successMessageBlock = await canvas().$( '.wp-block[data-type="core/paragraph"]' ); expect( successMessageBlock ).toBeDefined(); @@ -86,12 +87,12 @@ describe( 'Block variations', () => { test( 'Pick the additional variation in the inserted Columns block', async () => { await insertBlock( 'Columns' ); - const fourColumnsVariation = await page.waitForSelector( + const fourColumnsVariation = await canvas().waitForSelector( '.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]' ); await fourColumnsVariation.click(); expect( - await page.$$( + await canvas().$$( '.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]' ) ).toHaveLength( 4 ); diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 1a4d8e2b6d433..447be0793fafb 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -12,6 +12,7 @@ import { pressKeyTimes, pressKeyWithModifier, setPostContent, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'cpt locking', () => { @@ -35,7 +36,7 @@ describe( 'cpt locking', () => { }; const shouldNotAllowBlocksToBeRemoved = async () => { - await page.type( + await canvas().type( '.block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); @@ -46,12 +47,12 @@ describe( 'cpt locking', () => { }; const shouldAllowBlocksToBeMoved = async () => { - await page.click( + await canvas().click( 'div > .block-editor-rich-text__editable[data-type="core/paragraph"]' ); expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull(); await page.click( 'button[aria-label="Move up"]' ); - await page.type( + await canvas().type( 'div > .block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); @@ -71,14 +72,14 @@ describe( 'cpt locking', () => { ); it( 'should not allow blocks to be moved', async () => { - await page.click( + await canvas().click( '.block-editor-rich-text__editable[data-type="core/paragraph"]' ); expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull(); } ); it( 'should not error when deleting the cotents of a paragraph', async () => { - await page.click( + await canvas().click( '.block-editor-block-list__block[data-type="core/paragraph"]' ); const textToType = 'Paragraph'; @@ -88,7 +89,7 @@ describe( 'cpt locking', () => { } ); it( 'should insert line breaks when using enter and shift-enter', async () => { - await page.click( + await canvas().click( '.block-editor-block-list__block[data-type="core/paragraph"]' ); await page.keyboard.type( 'First line' ); @@ -118,12 +119,14 @@ describe( 'cpt locking', () => { } ); it( 'should not allow blocks to be inserted in inner blocks', async () => { - await page.click( 'button[aria-label="Two columns; equal split"]' ); + await canvas().click( + 'button[aria-label="Two columns; equal split"]' + ); await page.evaluate( () => new Promise( window.requestIdleCallback ) ); expect( - await page.$( + await canvas().$( '.wp-block-column .block-editor-button-block-appender' ) ).toBeNull(); @@ -173,7 +176,7 @@ describe( 'cpt locking', () => { } ); it( 'should allow blocks to be removed', async () => { - await page.type( + await canvas().type( '.block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); @@ -193,7 +196,7 @@ describe( 'cpt locking', () => { } ); it( 'should allow blocks to be removed', async () => { - await page.type( + await canvas().type( 'div > .block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); @@ -219,7 +222,7 @@ describe( 'cpt locking', () => { ); it( 'should not allow blocks to be moved', async () => { - await page.click( + await canvas().click( '.block-editor-rich-text__editable[data-type="core/paragraph"]' ); expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull(); @@ -239,7 +242,7 @@ describe( 'cpt locking', () => { ); it( 'should not allow blocks to be moved', async () => { - await page.click( + await canvas().click( '.block-editor-rich-text__editable[data-type="core/paragraph"]' ); expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull(); diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js index 3dff32c0843c4..eafc0b1f48b61 100644 --- a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js +++ b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js @@ -35,8 +35,10 @@ describe( 'iframed inline styles', () => { await insertBlock( 'Iframed Inline Styles' ); expect( await getEditedPostContent() ).toMatchSnapshot(); - expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' ); - expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' ); + expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' ); + expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe( + '2px' + ); await createNewTemplate( 'Iframed Test' ); diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js index 47767edc8e5d2..503beeb92e164 100644 --- a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js +++ b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js @@ -39,7 +39,7 @@ describe( 'iframed masonry block', () => { await insertBlock( 'Iframed Masonry Block' ); expect( await getEditedPostContent() ).toMatchSnapshot(); - expect( await didMasonryLoadCorrectly( page ) ).toBe( true ); + expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true ); await createNewTemplate( 'Iframed Test' ); await canvas().waitForSelector( '.grid-item[style]' ); diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js index 9d8e5975d3f2e..23058b48b8da4 100644 --- a/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js +++ b/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js @@ -35,7 +35,7 @@ describe( 'iframed multiple block stylesheets', () => { it( 'should load multiple block stylesheets in iframe', async () => { await insertBlock( 'Iframed Multiple Stylesheets' ); - await page.waitForSelector( + await canvas().waitForSelector( '.wp-block-test-iframed-multiple-stylesheets' ); await createNewTemplate( 'Iframed Test' ); diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js index 4431d3bd5802f..aec9987f596a8 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js @@ -10,6 +10,7 @@ import { openGlobalBlockInserter, closeGlobalBlockInserter, clickBlockToolbarButton, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Allowed Blocks Setting on InnerBlocks', () => { @@ -32,8 +33,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => { const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`; await insertBlock( 'Allowed Blocks Unset' ); await closeGlobalBlockInserter(); - await page.waitForSelector( childParagraphSelector ); - await page.click( childParagraphSelector ); + await canvas().waitForSelector( childParagraphSelector ); + await canvas().click( childParagraphSelector ); await openGlobalBlockInserter(); await expect( ( @@ -47,8 +48,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => { const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`; await insertBlock( 'Allowed Blocks Set' ); await closeGlobalBlockInserter(); - await page.waitForSelector( childParagraphSelector ); - await page.click( childParagraphSelector ); + await canvas().waitForSelector( childParagraphSelector ); + await canvas().click( childParagraphSelector ); await openGlobalBlockInserter(); const allowedBlocks = await getAllBlockInserterItemTitles(); expect( allowedBlocks.sort() ).toEqual( [ @@ -66,8 +67,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => { const parentBlockSelector = '[data-type="test/allowed-blocks-dynamic"]'; const blockAppender = '.block-list-appender button'; const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`; - await page.waitForSelector( appenderSelector ); - await page.click( appenderSelector ); + await canvas().waitForSelector( appenderSelector ); + await canvas().click( appenderSelector ); expect( await getAllBlockInserterItemTitles() ).toEqual( [ 'Image', 'List', diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 77ae8d3827432..7621fbea12140 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -8,6 +8,7 @@ import { getAllBlockInserterItemTitles, insertBlock, closeGlobalBlockInserter, + canvas, } from '@wordpress/e2e-test-utils'; const QUICK_INSERTER_RESULTS_SELECTOR = @@ -108,7 +109,7 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { describe( 'Slash inserter', () => { it( 'uses the priority ordering if prioritzed blocks setting is set', async () => { await insertBlock( 'Prioritized Inserter Blocks Set' ); - await page.click( '[data-type="core/image"]' ); + await canvas().click( '[data-type="core/image"]' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/' ); // Wait for the results to display. diff --git a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js index 513a9fa7af27b..7c04bae1f95dd 100644 --- a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js +++ b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js @@ -68,7 +68,6 @@ describe( 'adding inline tokens', () => { '.block-editor-format-toolbar__image-popover' ); await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); await page.keyboard.type( '20' ); await page.keyboard.press( 'Enter' ); diff --git a/packages/e2e-tests/specs/editor/various/autosave.test.js b/packages/e2e-tests/specs/editor/various/autosave.test.js index abf4ad8b83e68..528efc2d46316 100644 --- a/packages/e2e-tests/specs/editor/various/autosave.test.js +++ b/packages/e2e-tests/specs/editor/various/autosave.test.js @@ -9,6 +9,7 @@ import { publishPost, saveDraft, toggleOfflineMode, + canvas, } from '@wordpress/e2e-test-utils'; // Constant to override editor preference @@ -258,7 +259,7 @@ describe( 'autosave', () => { await page.keyboard.type( 'before publish' ); await publishPost(); - await page.click( '[data-type="core/paragraph"]' ); + await canvas().click( '[data-type="core/paragraph"]' ); await page.keyboard.type( ' after publish' ); // Trigger remote autosave. diff --git a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js index e6e156ca8ee15..f1e6be7b816ab 100644 --- a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js +++ b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js @@ -9,6 +9,7 @@ import { clickBlockToolbarButton, clickMenuItem, clickOnCloseModalButton, + canvas, } from '@wordpress/e2e-test-utils'; const createTestParagraphBlocks = async () => { @@ -51,7 +52,7 @@ describe( 'block editor keyboard shortcuts', () => { await createTestParagraphBlocks(); expect( await getEditedPostContent() ).toMatchSnapshot(); await pressKeyWithModifier( 'shift', 'ArrowUp' ); - await page.waitForSelector( + await canvas().waitForSelector( '[aria-label="Multiple selected blocks"]' ); await moveUp(); @@ -63,7 +64,7 @@ describe( 'block editor keyboard shortcuts', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); await page.keyboard.press( 'ArrowUp' ); await pressKeyWithModifier( 'shift', 'ArrowUp' ); - await page.waitForSelector( + await canvas().waitForSelector( '[aria-label="Multiple selected blocks"]' ); await moveDown(); diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js index 07dcabcbf0526..f67273a550d1c 100644 --- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js +++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js @@ -14,6 +14,7 @@ import { activatePlugin, deactivatePlugin, createReusableBlock, + canvas, } from '@wordpress/e2e-test-utils'; async function insertBlocksOfSameType() { @@ -115,8 +116,8 @@ describe( 'Block Grouping', () => { const getParagraphText = async () => { const paragraphInReusableSelector = '.block-editor-block-list__block[data-type="core/block"] p'; - await page.waitForSelector( paragraphInReusableSelector ); - return page.$eval( + await canvas().waitForSelector( paragraphInReusableSelector ); + return canvas().$eval( paragraphInReusableSelector, ( element ) => element.innerText ); @@ -128,14 +129,14 @@ describe( 'Block Grouping', () => { await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Group' ); - let group = await page.$$( '[data-type="core/group"]' ); + let group = await canvas().$$( '[data-type="core/group"]' ); expect( group ).toHaveLength( 1 ); // Make sure the paragraph in reusable block exists. expect( await getParagraphText() ).toMatch( paragraphText ); await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Ungroup' ); - group = await page.$$( '[data-type="core/group"]' ); + group = await canvas().$$( '[data-type="core/group"]' ); expect( group ).toHaveLength( 0 ); // Make sure the paragraph in reusable block exists. expect( await getParagraphText() ).toEqual( paragraphText ); diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index 2d05fc08baf7f..9737007ce656e 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -10,6 +10,7 @@ import { openDocumentSettingsSidebar, getListViewBlocks, switchBlockInspectorTab, + canvas, } from '@wordpress/e2e-test-utils'; async function openListViewSidebar() { @@ -53,7 +54,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate using the list view sidebar', async () => { await insertBlock( 'Columns' ); - await page.click( '[aria-label="Two columns; equal split"]' ); + await canvas().click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. @@ -114,7 +115,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); await openDocumentSettingsSidebar(); - await page.click( '[aria-label="Two columns; equal split"]' ); + await canvas().click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. @@ -143,11 +144,13 @@ describe( 'Navigating the block hierarchy', () => { await pressKeyWithModifier( 'ctrlShift', '`' ); await pressKeyTimes( 'Tab', 3 ); await pressKeyTimes( 'ArrowDown', 4 ); - await page.waitForSelector( + await canvas().waitForSelector( '.is-highlighted[aria-label="Block: Column (3 of 3)"]' ); await page.keyboard.press( 'Enter' ); - await page.waitForSelector( '.is-selected[data-type="core/column"]' ); + await canvas().waitForSelector( + '.is-selected[data-type="core/column"]' + ); // Insert text in the last column block. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. @@ -190,12 +193,12 @@ describe( 'Navigating the block hierarchy', () => { // Insert a group block. await insertBlock( 'Group' ); // Select the default, selected Group layout from the variation picker. - await page.click( + await canvas().click( 'button[aria-label="Group: Gather blocks in a container."]' ); // Insert some random blocks. // The last block shouldn't be a textual block. - await page.click( '.block-list-appender .block-editor-inserter' ); + await canvas().click( '.block-list-appender .block-editor-inserter' ); const paragraphMenuItem = ( await page.$x( `//button//span[contains(text(), 'Paragraph')]` ) )[ 0 ]; @@ -207,7 +210,7 @@ describe( 'Navigating the block hierarchy', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); // Unselect the blocks. - await page.click( '.editor-post-title' ); + await canvas().click( '.editor-post-title' ); // Try selecting the group block using the Outline. await page.click( @@ -217,7 +220,7 @@ describe( 'Navigating the block hierarchy', () => { await groupMenuItem.click(); // The group block's wrapper should be selected. - const isGroupBlockSelected = await page.evaluate( + const isGroupBlockSelected = await canvas().evaluate( () => document.activeElement.getAttribute( 'data-type' ) === 'core/group' diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js index dab3765ef0d14..97157060d3624 100644 --- a/packages/e2e-tests/specs/editor/various/change-detection.test.js +++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js @@ -11,6 +11,7 @@ import { openDocumentSettingsSidebar, isCurrentURL, openTypographyToolsPanelMenu, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Change detection', () => { @@ -78,7 +79,7 @@ describe( 'Change detection', () => { } ); it( 'Should autosave post', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Force autosave to occur immediately. await Promise.all( [ @@ -94,7 +95,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Toggle post as needing review (not persisted for autosave). await ensureSidebarOpened(); @@ -117,7 +118,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); await publishPost(); @@ -130,7 +131,7 @@ describe( 'Change detection', () => { ] ); // Should be dirty after autosave change of published post. - await page.type( '.editor-post-title__input', '!' ); + await canvas().type( '.editor-post-title__input', '!' ); await Promise.all( [ page.waitForSelector( @@ -162,7 +163,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if property changed without save', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); await assertIsDirty( true ); } ); @@ -175,7 +176,7 @@ describe( 'Change detection', () => { } ); it( 'Should not prompt if changes saved', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); await saveDraft(); @@ -192,7 +193,7 @@ describe( 'Change detection', () => { } ); it( 'Should not save if all changes saved', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); await saveDraft(); @@ -205,7 +206,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if save failed', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); await page.setOfflineMode( true ); @@ -231,7 +232,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if changes and save is in-flight', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. Other requests should be allowed to continue, @@ -247,7 +248,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if changes made while save is in-flight', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. Other requests should be allowed to continue, @@ -257,7 +258,7 @@ describe( 'Change detection', () => { // Keyboard shortcut Ctrl+S save. await pressKeyWithModifier( 'primary', 'S' ); - await page.type( '.editor-post-title__input', '!' ); + await canvas().type( '.editor-post-title__input', '!' ); await page.waitForSelector( '.editor-post-save-draft' ); await releaseSaveIntercept(); @@ -266,7 +267,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if property changes made while save is in-flight, and save completes', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. @@ -282,7 +283,7 @@ describe( 'Change detection', () => { ); // Dirty post while save is in-flight. - await page.type( '.editor-post-title__input', '!' ); + await canvas().type( '.editor-post-title__input', '!' ); // Allow save to complete. Disabling interception flushes pending. await Promise.all( [ savedPromise, releaseSaveIntercept() ] ); @@ -291,7 +292,7 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if block revision is made while save is in-flight, and save completes', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. @@ -324,7 +325,7 @@ describe( 'Change detection', () => { await saveDraft(); // Verify that the title is empty. - const title = await page.$eval( + const title = await canvas().$eval( '.editor-post-title__input', // Trim padding non-breaking space. ( element ) => element.textContent.trim() @@ -337,7 +338,7 @@ describe( 'Change detection', () => { it( 'should not prompt to confirm unsaved changes when trashing an existing post', async () => { // Enter title. - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Save. await saveDraft(); @@ -381,7 +382,7 @@ describe( 'Change detection', () => { ] ); // Change the paragraph's `drop cap`. - await page.click( '[data-type="core/paragraph"]' ); + await canvas().click( '[data-type="core/paragraph"]' ); await openTypographyToolsPanelMenu(); await page.click( 'button[aria-label="Show Drop cap"]' ); @@ -390,7 +391,7 @@ describe( 'Change detection', () => { "//label[contains(text(), 'Drop cap')]" ); await dropCapToggle.click(); - await page.click( '[data-type="core/paragraph"]' ); + await canvas().click( '[data-type="core/paragraph"]' ); // Check that the post is dirty. await page.waitForSelector( '.editor-post-save-draft' ); @@ -402,7 +403,7 @@ describe( 'Change detection', () => { ] ); // Change the paragraph's `drop cap` again. - await page.click( '[data-type="core/paragraph"]' ); + await canvas().click( '[data-type="core/paragraph"]' ); await dropCapToggle.click(); // Check that the post is dirty. diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js index de328b87f736d..81878ebf7208e 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -11,6 +11,7 @@ import { pressKeyTimes, pressKeyWithModifier, openTypographyToolsPanelMenu, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Editing modes (visual/HTML)', () => { @@ -22,7 +23,7 @@ describe( 'Editing modes (visual/HTML)', () => { it( 'should switch between visual and HTML modes', async () => { // This block should be in "visual" mode by default. - let visualBlock = await page.$$( '[data-block].rich-text' ); + let visualBlock = await canvas().$$( '[data-block].rich-text' ); expect( visualBlock ).toHaveLength( 1 ); // Change editing mode from "Visual" to "HTML". @@ -30,7 +31,7 @@ describe( 'Editing modes (visual/HTML)', () => { await clickMenuItem( 'Edit as HTML' ); // Wait for the block to be converted to HTML editing mode. - const htmlBlock = await page.$$( + const htmlBlock = await canvas().$$( '[data-block] .block-editor-block-list__block-html-textarea' ); expect( htmlBlock ).toHaveLength( 1 ); @@ -40,7 +41,7 @@ describe( 'Editing modes (visual/HTML)', () => { await clickMenuItem( 'Edit visually' ); // This block should be in "visual" mode by default. - visualBlock = await page.$$( '[data-block].rich-text' ); + visualBlock = await canvas().$$( '[data-block].rich-text' ); expect( visualBlock ).toHaveLength( 1 ); } ); @@ -67,7 +68,7 @@ describe( 'Editing modes (visual/HTML)', () => { await clickMenuItem( 'Edit as HTML' ); // Make sure the paragraph content is rendered as expected. - let htmlBlockContent = await page.$eval( + let htmlBlockContent = await canvas().$eval( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea', ( node ) => node.textContent ); @@ -83,7 +84,7 @@ describe( 'Editing modes (visual/HTML)', () => { await dropCapToggle.click(); // Make sure the HTML content updated. - htmlBlockContent = await page.$eval( + htmlBlockContent = await canvas().$eval( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea', ( node ) => node.textContent ); @@ -138,7 +139,7 @@ describe( 'Editing modes (visual/HTML)', () => { const editPosition = textContent.indexOf( 'Hello' ); // Replace the word 'Hello' with 'Hi'. - await page.click( '.editor-post-title__input' ); + await canvas().click( '.editor-post-title__input' ); await page.keyboard.press( 'Tab' ); await pressKeyTimes( 'ArrowRight', editPosition ); await pressKeyTimes( 'Delete', 5 ); diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index a7522b88e7729..4461fc6233053 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -3,7 +3,6 @@ */ import { clickBlockAppender, - clickButton, createEmbeddingMatcher, createJSONResponse, createNewPost, @@ -12,6 +11,7 @@ import { insertBlock, publishPost, setUpResponseMocking, + canvas, } from '@wordpress/e2e-test-utils'; const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = { @@ -178,24 +178,24 @@ describe( 'Embedding content', () => { it( 'should render embeds in the correct state', async () => { // Valid embed. Should render valid figure element. await insertEmbed( 'https://twitter.com/notnownikki' ); - await page.waitForSelector( 'figure.wp-block-embed' ); + await canvas().waitForSelector( 'figure.wp-block-embed' ); // Valid provider; invalid content. Should render failed, edit state. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); - await page.waitForSelector( + await canvas().waitForSelector( 'input[value="https://twitter.com/wooyaygutenberg123454312"]' ); // WordPress invalid content. Should render failed, edit state. await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' ); - await page.waitForSelector( + await canvas().waitForSelector( 'input[value="https://wordpress.org/gutenberg/handbook/"]' ); // Provider whose oembed API has gone wrong. Should render failed, edit // state. await insertEmbed( 'https://twitter.com/thatbunty' ); - await page.waitForSelector( + await canvas().waitForSelector( 'input[value="https://twitter.com/thatbunty"]' ); @@ -204,18 +204,18 @@ describe( 'Embedding content', () => { await insertEmbed( 'https://wordpress.org/gutenberg/handbook/block-api/attributes/' ); - await page.waitForSelector( 'figure.wp-block-embed' ); + await canvas().waitForSelector( 'figure.wp-block-embed' ); // Video content. Should render valid figure element, and include the // aspect ratio class. await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' ); - await page.waitForSelector( + await canvas().waitForSelector( 'figure.wp-block-embed.is-type-video.wp-embed-aspect-16-9' ); // Photo content. Should render valid figure element. await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' ); - await page.waitForSelector( + await canvas().waitForSelector( 'iframe[title="Embedded content from cloudup"' ); @@ -230,18 +230,21 @@ describe( 'Embedding content', () => { // has styles applied which depend on resize observer, wait for the // expected size class to settle before clicking, since otherwise a race // condition could occur on the placeholder layout vs. click intent. - await page.waitForSelector( + await canvas().waitForSelector( '.components-placeholder.is-large .components-placeholder__error' ); - await clickButton( 'Convert to link' ); + const button = await canvas().waitForXPath( + `//button[contains(text(), 'Convert to link')]` + ); + await button.click(); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => { await insertEmbed( 'https://twitter.com/notnownikki/' ); // The twitter block should appear correctly. - await page.waitForSelector( 'figure.wp-block-embed' ); + await canvas().waitForSelector( 'figure.wp-block-embed' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); @@ -253,7 +256,7 @@ describe( 'Embedding content', () => { // has styles applied which depend on resize observer, wait for the // expected size class to settle before clicking, since otherwise a race // condition could occur on the placeholder layout vs. click intent. - await page.waitForSelector( + await canvas().waitForSelector( '.components-placeholder.is-large .components-placeholder__error' ); @@ -268,8 +271,11 @@ describe( 'Embedding content', () => { ), }, ] ); - await clickButton( 'Try again' ); - await page.waitForSelector( 'figure.wp-block-embed' ); + const button = await canvas().waitForXPath( + `//button[contains(text(), 'Try again')]` + ); + await button.click(); + await canvas().waitForSelector( 'figure.wp-block-embed' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); @@ -292,6 +298,6 @@ describe( 'Embedding content', () => { await insertEmbed( postUrl ); // Check the block has become a WordPress block. - await page.waitForSelector( 'figure.wp-block-embed' ); + await canvas().waitForSelector( 'figure.wp-block-embed' ); } ); } ); diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js index 918737e2b3899..84c251d653468 100644 --- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js @@ -11,6 +11,7 @@ import { searchForBlock, setBrowserViewport, pressKeyWithModifier, + canvas, } from '@wordpress/e2e-test-utils'; /** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */ @@ -165,7 +166,7 @@ describe( 'Inserting blocks', () => { await page.keyboard.press( 'Enter' ); expect( - await page.waitForSelector( '[data-type="core/tag-cloud"]' ) + await canvas().waitForSelector( '[data-type="core/tag-cloud"]' ) ).not.toBeNull(); } ); @@ -175,7 +176,7 @@ describe( 'Inserting blocks', () => { await page.keyboard.type( '1.1' ); // After inserting the Buttons block the inner button block should be selected. - const selectedButtonBlocks = await page.$$( + const selectedButtonBlocks = await canvas().$$( '.wp-block-button.is-selected' ); expect( selectedButtonBlocks.length ).toBe( 1 ); @@ -185,7 +186,7 @@ describe( 'Inserting blocks', () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock() ); // Specifically click the root container appender. - await page.click( + await canvas().click( '.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle' ); @@ -222,7 +223,7 @@ describe( 'Inserting blocks', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); // Using the between inserter. - const insertionPoint = await page.$( '[data-type="core/heading"]' ); + const insertionPoint = await canvas().$( '[data-type="core/heading"]' ); const rect = await insertionPoint.boundingBox(); await page.mouse.move( rect.x + rect.width / 2, rect.y - 10, { steps: 10, @@ -247,7 +248,7 @@ describe( 'Inserting blocks', () => { await insertBlock( 'Paragraph' ); await page.keyboard.type( 'First paragraph' ); await insertBlock( 'Image' ); - const paragraphBlock = await page.$( + const paragraphBlock = await canvas().$( 'p[aria-label="Paragraph block"]' ); paragraphBlock.click(); @@ -278,14 +279,16 @@ describe( 'Inserting blocks', () => { it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => { await insertBlock( 'Group' ); // Select the default, selected Group layout from the variation picker. - await page.click( + await canvas().click( 'button[aria-label="Group: Gather blocks in a container."]' ); await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Paragraph after group' ); // Click the Group first to make the appender inside it clickable. - await page.click( '[data-type="core/group"]' ); - await page.click( '[data-type="core/group"] [aria-label="Add block"]' ); + await canvas().click( '[data-type="core/group"]' ); + await canvas().click( + '[data-type="core/group"] [aria-label="Add block"]' + ); const browseAll = await page.waitForXPath( '//button[text()="Browse all"]' ); @@ -300,14 +303,16 @@ describe( 'Inserting blocks', () => { '.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search'; await insertBlock( 'Group' ); // Select the default, selected Group layout from the variation picker. - await page.click( + await canvas().click( 'button[aria-label="Group: Gather blocks in a container."]' ); await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Text' ); // Click the Group first to make the appender inside it clickable. - await page.click( '[data-type="core/group"]' ); - await page.click( '[data-type="core/group"] [aria-label="Add block"]' ); + await canvas().click( '[data-type="core/group"]' ); + await canvas().click( + '[data-type="core/group"] [aria-label="Add block"]' + ); await page.waitForSelector( INSERTER_SEARCH_SELECTOR ); await page.focus( INSERTER_SEARCH_SELECTOR ); await pressKeyWithModifier( 'primary', 'a' ); @@ -337,7 +342,7 @@ describe( 'Inserting blocks', () => { expect( inserterPanels.length ).toBe( 0 ); // The editable 'Read More' text should be focused. - const isFocusInBlock = await page.evaluate( () => + const isFocusInBlock = await canvas().evaluate( () => document .querySelector( '[data-type="core/more"]' ) .contains( document.activeElement ) @@ -366,14 +371,14 @@ describe( 'Inserting blocks', () => { async ( viewport ) => { await setBrowserViewport( viewport ); - await page.type( + await canvas().type( '.block-editor-default-block-appender__content', 'Testing inserted block focus' ); await insertBlock( 'Image' ); - await page.waitForSelector( 'figure[data-type="core/image"]' ); + await canvas().waitForSelector( 'figure[data-type="core/image"]' ); const selectedBlock = await page.evaluate( () => { return wp.data.select( 'core/block-editor' ).getSelectedBlock(); diff --git a/packages/e2e-tests/specs/editor/various/invalid-block.test.js b/packages/e2e-tests/specs/editor/various/invalid-block.test.js index ad08ac2f4c6b4..05279b1ec6a77 100644 --- a/packages/e2e-tests/specs/editor/various/invalid-block.test.js +++ b/packages/e2e-tests/specs/editor/various/invalid-block.test.js @@ -7,6 +7,7 @@ import { clickBlockAppender, clickBlockToolbarButton, setPostContent, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'invalid blocks', () => { @@ -25,7 +26,7 @@ describe( 'invalid blocks', () => { await clickMenuItem( 'Edit as HTML' ); // Focus on the textarea and enter an invalid paragraph - await page.click( + await canvas().click( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea' ); await page.keyboard.type( '

invalid paragraph' ); @@ -34,7 +35,7 @@ describe( 'invalid blocks', () => { await page.click( '.editor-post-save-draft' ); // Click on the 'three-dots' menu toggle. - await page.click( + await canvas().click( '.block-editor-warning__actions button[aria-label="More options"]' ); diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index b19c4cb93f3e7..b3dccdf8bf20a 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -8,13 +8,16 @@ import { clickBlockAppender, getEditedPostContent, showBlockToolbar, + canvas, } from '@wordpress/e2e-test-utils'; async function getActiveLabel() { return await page.evaluate( () => { + const { activeElement } = + document.activeElement.contentDocument ?? document; return ( - document.activeElement.getAttribute( 'aria-label' ) || - document.activeElement.innerHTML + activeElement.getAttribute( 'aria-label' ) || + activeElement.innerHTML ); } ); } @@ -34,7 +37,11 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { await page.keyboard.press( 'Tab' ); await expect( await getActiveLabel() ).toBe( 'Paragraph block' ); await expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await page.evaluate( () => { + const { activeElement } = + document.activeElement.contentDocument ?? document; + return activeElement.innerHTML; + } ) ).toBe( paragraphText ); await page.keyboard.press( 'Tab' ); @@ -113,16 +120,12 @@ describe( 'Order of block keyboard navigation', () => { } // Clear the selected block. - const paragraph = await page.$( '[data-type="core/paragraph"]' ); + const paragraph = await canvas().$( '[data-type="core/paragraph"]' ); const box = await paragraph.boundingBox(); await page.mouse.click( box.x - 1, box.y ); await page.keyboard.press( 'Tab' ); - await expect( - await page.evaluate( () => { - return document.activeElement.getAttribute( 'aria-label' ); - } ) - ).toBe( 'Add title' ); + await expect( await getActiveLabel() ).toBe( 'Add title' ); await page.keyboard.press( 'Tab' ); await expect( await getActiveLabel() ).toBe( @@ -148,7 +151,7 @@ describe( 'Order of block keyboard navigation', () => { } // Clear the selected block. - const paragraph = await page.$( '[data-type="core/paragraph"]' ); + const paragraph = await canvas().$( '[data-type="core/paragraph"]' ); const box = await paragraph.boundingBox(); await page.mouse.click( box.x - 1, box.y ); @@ -176,11 +179,7 @@ describe( 'Order of block keyboard navigation', () => { ); await pressKeyWithModifier( 'shift', 'Tab' ); - await expect( - await page.evaluate( () => { - return document.activeElement.getAttribute( 'aria-label' ); - } ) - ).toBe( 'Add title' ); + await expect( await getActiveLabel() ).toBe( 'Add title' ); } ); it( 'should navigate correctly with multi selection', async () => { @@ -217,7 +216,7 @@ describe( 'Order of block keyboard navigation', () => { await insertBlock( 'Image' ); // Make sure the upload button has focus. - const uploadButton = await page.waitForXPath( + const uploadButton = await canvas().waitForXPath( '//button[contains( text(), "Upload" ) ]' ); await expect( uploadButton ).toHaveFocus(); @@ -231,7 +230,7 @@ describe( 'Order of block keyboard navigation', () => { // Insert a group block. await insertBlock( 'Group' ); // Select the default, selected Group layout from the variation picker. - await page.click( + await canvas().click( 'button[aria-label="Group: Gather blocks in a container."]' ); // If active label matches, that means focus did not change from group block wrapper. diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index fdcb7c5f793ad..33d3a08732ccf 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -9,6 +9,7 @@ import { pressKeyWithModifier, showBlockToolbar, pressKeyTimes, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Links', () => { @@ -57,7 +58,7 @@ describe( 'Links', () => { await page.keyboard.press( 'Enter' ); - const actualText = await page.evaluate( + const actualText = await canvas().evaluate( () => document.querySelector( '.block-editor-rich-text__editable a' ) .textContent @@ -172,7 +173,7 @@ describe( 'Links', () => { await page.keyboard.type( 'https://wordpress.org/gutenberg' ); // Click somewhere else - it doesn't really matter where. - await page.click( '.editor-post-title' ); + await canvas().click( '.editor-post-title' ); } ); const createAndReselectLink = async () => { @@ -311,7 +312,7 @@ describe( 'Links', () => { const createPostWithTitle = async ( titleText ) => { await createNewPost(); - await page.type( '.editor-post-title__input', titleText ); + await canvas().type( '.editor-post-title__input', titleText ); await page.click( '.editor-post-publish-panel__toggle' ); // Disable reason: Wait for the animation to complete, since otherwise the @@ -630,7 +631,7 @@ describe( 'Links', () => { await page.keyboard.press( 'Enter' ); // Check the created link reflects the link text. - const actualLinkText = await page.evaluate( + const actualLinkText = await canvas().evaluate( () => document.querySelector( '.block-editor-rich-text__editable a' @@ -880,7 +881,7 @@ describe( 'Links', () => { await page.keyboard.press( 'Enter' ); - const richTextText = await page.evaluate( + const richTextText = await canvas().evaluate( () => document.querySelector( '.block-editor-rich-text__editable' @@ -889,7 +890,7 @@ describe( 'Links', () => { // Check that the correct (i.e. last) instance of "a" was replaced with "z". expect( richTextText ).toBe( 'a b c z' ); - const richTextLink = await page.evaluate( + const richTextLink = await canvas().evaluate( () => document.querySelector( '.block-editor-rich-text__editable a' diff --git a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js index 8fb2edf4f6768..c2735f8fbf75c 100644 --- a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js +++ b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js @@ -20,9 +20,10 @@ describe( 'Block Toolbar', () => { it( 'should not scroll page', async () => { while ( await page.evaluate( () => { - const scrollable = wp.dom.getScrollContainer( - document.activeElement - ); + const { activeElement } = + document.activeElement?.contentDocument ?? document; + const scrollable = + wp.dom.getScrollContainer( activeElement ); return ! scrollable || scrollable.scrollTop === 0; } ) ) { @@ -31,21 +32,20 @@ describe( 'Block Toolbar', () => { await page.keyboard.type( 'a' ); - const scrollTopBefore = await page.evaluate( - () => - wp.dom.getScrollContainer( document.activeElement ) - .scrollTop - ); + const scrollTopBefore = await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + window.scrollContainer = + wp.dom.getScrollContainer( activeElement ); + return window.scrollContainer.scrollTop; + } ); await pressKeyWithModifier( 'alt', 'F10' ); expect( await isInBlockToolbar() ).toBe( true ); - const scrollTopAfter = await page.evaluate( - () => - wp.dom.getScrollContainer( document.activeElement ) - .scrollTop - ); - + const scrollTopAfter = await page.evaluate( () => { + return window.scrollContainer.scrollTop; + } ); expect( scrollTopBefore ).toBe( scrollTopAfter ); } ); diff --git a/packages/e2e-tests/specs/editor/various/publish-button.test.js b/packages/e2e-tests/specs/editor/various/publish-button.test.js index 2db6608331cb3..b6461ef11bc5b 100644 --- a/packages/e2e-tests/specs/editor/various/publish-button.test.js +++ b/packages/e2e-tests/specs/editor/various/publish-button.test.js @@ -6,6 +6,7 @@ import { disablePrePublishChecks, enablePrePublishChecks, createNewPost, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'PostPublishButton', () => { @@ -32,7 +33,7 @@ describe( 'PostPublishButton', () => { } ); it( 'should be disabled when post is being saved', async () => { - await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable. + await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable. expect( await page.$( '.editor-post-publish-button[aria-disabled="true"]' ) ).toBeNull(); @@ -44,7 +45,7 @@ describe( 'PostPublishButton', () => { } ); it( 'should be disabled when metabox is being saved', async () => { - await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable. + await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable. expect( await page.$( '.editor-post-publish-button[aria-disabled="true"]' ) ).toBeNull(); diff --git a/packages/e2e-tests/specs/editor/various/publish-panel.test.js b/packages/e2e-tests/specs/editor/various/publish-panel.test.js index 3a6aefd8f6687..333f2f1c2a8b3 100644 --- a/packages/e2e-tests/specs/editor/various/publish-panel.test.js +++ b/packages/e2e-tests/specs/editor/various/publish-panel.test.js @@ -9,6 +9,7 @@ import { openPublishPanel, pressKeyWithModifier, publishPost, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'PostPublishPanel', () => { @@ -28,7 +29,7 @@ describe( 'PostPublishPanel', () => { } ); it( 'PrePublish: publish button should have the focus', async () => { - await page.type( '.editor-post-title__input', 'E2E Test Post' ); + await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); await openPublishPanel(); const focusedElementClassList = await page.$eval( @@ -44,7 +45,7 @@ describe( 'PostPublishPanel', () => { it( 'PostPublish: post link should have the focus', async () => { const postTitle = 'E2E Test Post'; - await page.type( '.editor-post-title__input', postTitle ); + await canvas().type( '.editor-post-title__input', postTitle ); await publishPost(); const focusedElementTag = await page.$eval( @@ -64,7 +65,7 @@ describe( 'PostPublishPanel', () => { } ); it( 'should retain focus within the panel', async () => { - await page.type( '.editor-post-title__input', 'E2E Test Post' ); + await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); await openPublishPanel(); await pressKeyWithModifier( 'shift', 'Tab' ); diff --git a/packages/e2e-tests/specs/editor/various/publishing.test.js b/packages/e2e-tests/specs/editor/various/publishing.test.js index 88c0d2b993db3..fbac8cf98638b 100644 --- a/packages/e2e-tests/specs/editor/various/publishing.test.js +++ b/packages/e2e-tests/specs/editor/various/publishing.test.js @@ -11,6 +11,7 @@ import { setBrowserViewport, openPublishPanel, pressKeyWithModifier, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'Publishing', () => { @@ -22,7 +23,7 @@ describe( 'Publishing', () => { } ); it( `disables the publish button when a ${ postType } is locked`, async () => { - await page.type( + await canvas().type( '.editor-post-title__input', 'E2E Test Post lock check publish button' ); @@ -42,7 +43,7 @@ describe( 'Publishing', () => { } ); it( `disables the save shortcut when a ${ postType } is locked`, async () => { - await page.type( + await canvas().type( '.editor-post-title__input', 'E2E Test Post check save shortcut' ); @@ -79,7 +80,7 @@ describe( 'Publishing', () => { } ); it( `should publish the ${ postType } and close the panel once we start editing again.`, async () => { - await page.type( '.editor-post-title__input', 'E2E Test Post' ); + await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); await publishPost(); @@ -89,7 +90,7 @@ describe( 'Publishing', () => { ).not.toBeNull(); // Start editing again. - await page.type( '.editor-post-title__input', ' (Updated)' ); + await canvas().type( '.editor-post-title__input', ' (Updated)' ); // The post-publishing panel is not visible anymore. expect( await page.$( '.editor-post-publish-panel' ) ).toBeNull(); @@ -117,7 +118,10 @@ describe( 'Publishing', () => { } ); it( `should publish the ${ postType } without opening the post-publish sidebar.`, async () => { - await page.type( '.editor-post-title__input', 'E2E Test Post' ); + await canvas().type( + '.editor-post-title__input', + 'E2E Test Post' + ); // The "Publish" button should be shown instead of the "Publish..." toggle. expect( diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index a94cb1f721426..56ceed530bfdd 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -16,6 +16,7 @@ import { saveDraft, createReusableBlock, publishPost, + canvas, } from '@wordpress/e2e-test-utils'; const reusableBlockNameInputSelector = @@ -83,7 +84,7 @@ describe( 'Reusable blocks', () => { await page.keyboard.type( 'Surprised greeting block' ); // Quickly focus the paragraph block. - await page.click( + await canvas().click( '.block-editor-block-list__block[data-type="core/block"] p' ); await page.keyboard.press( 'Escape' ); // Enter navigation mode. @@ -96,7 +97,7 @@ describe( 'Reusable blocks', () => { await saveAllButDontPublish(); // Check that its content is up to date. - const text = await page.$eval( + const text = await canvas().$eval( '.block-editor-block-list__block[data-type="core/block"] p', ( element ) => element.innerText ); @@ -111,13 +112,13 @@ describe( 'Reusable blocks', () => { await clickBlockToolbarButton( 'Convert to regular block' ); // Check that we have a paragraph block on the page. - const paragraphBlock = await page.$( + const paragraphBlock = await canvas().$( '.block-editor-block-list__block[data-type="core/paragraph"]' ); expect( paragraphBlock ).not.toBeNull(); // Check that its content is up to date. - const paragraphContent = await page.$eval( + const paragraphContent = await canvas().$eval( '.block-editor-block-list__block[data-type="core/paragraph"]', ( element ) => element.innerText ); @@ -132,7 +133,7 @@ describe( 'Reusable blocks', () => { ); // Make sure the reusable block has loaded properly before attempting to publish the post. - await page.waitForSelector( 'p[aria-label="Paragraph block"]' ); + await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' ); await publishPost(); @@ -142,8 +143,8 @@ describe( 'Reusable blocks', () => { await page.waitForSelector( closePublishPanelSelector ); await page.click( closePublishPanelSelector ); - await page.waitForSelector( 'p[aria-label="Paragraph block"]' ); - await page.focus( 'p[aria-label="Paragraph block"]' ); + await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' ); + await canvas().focus( 'p[aria-label="Paragraph block"]' ); // Change the block's content. await page.keyboard.type( 'Einen ' ); @@ -152,7 +153,7 @@ describe( 'Reusable blocks', () => { await saveAll(); // Check that its content is up to date. - const paragraphContent = await page.$eval( + const paragraphContent = await canvas().$eval( 'p[aria-label="Paragraph block"]', ( element ) => element.innerText ); @@ -238,8 +239,8 @@ describe( 'Reusable blocks', () => { // Click the block to give it focus. const blockSelector = 'p[data-title="Paragraph"]'; - await page.waitForSelector( blockSelector ); - await page.click( blockSelector ); + await canvas().waitForSelector( blockSelector ); + await canvas().click( blockSelector ); // Delete the block, leaving the reusable block empty. await clickBlockToolbarButton( 'Options' ); @@ -277,7 +278,7 @@ describe( 'Reusable blocks', () => { ] ); } ); - await page.waitForXPath( + await canvas().waitForXPath( '//*[contains(@class, "block-editor-warning")]/*[text()="Block has been deleted or is unavailable."]' ); @@ -297,13 +298,13 @@ describe( 'Reusable blocks', () => { await page.reload(); // Wait for the paragraph to be loaded. - await page.waitForSelector( + await canvas().waitForSelector( '.block-editor-block-list__block[data-type="core/paragraph"]' ); // The first click selects the reusable block wrapper. // The second click selects the actual paragraph block. - await page.click( '.wp-block-block' ); - await page.focus( + await canvas().click( '.wp-block-block' ); + await canvas().focus( '.block-editor-block-list__block[data-type="core/paragraph"]' ); await pressKeyWithModifier( 'primary', 'a' ); @@ -333,8 +334,8 @@ describe( 'Reusable blocks', () => { // Make an edit to the reusable block and assert that there's only a // paragraph in a reusable block. - await page.waitForSelector( 'p[aria-label="Paragraph block"]' ); - await page.click( 'p[aria-label="Paragraph block"]' ); + await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' ); + await canvas().click( 'p[aria-label="Paragraph block"]' ); await page.keyboard.type( '2' ); const selector = '//div[@aria-label="Block: Reusable block"]//p[@aria-label="Paragraph block"][.="12"]'; @@ -360,7 +361,7 @@ describe( 'Reusable blocks', () => { await page.reload(); // The quote block should have a visible preview in the sidebar for this test to be valid. - const quoteBlock = await page.waitForSelector( + const quoteBlock = await canvas().waitForSelector( '.block-editor-block-list__block[aria-label="Block: Quote"]' ); // Select the quote block. @@ -379,7 +380,7 @@ describe( 'Reusable blocks', () => { await nameInput.click(); await page.keyboard.type( 'Block with styles' ); await page.keyboard.press( 'Enter' ); - const reusableBlock = await page.waitForSelector( + const reusableBlock = await canvas().waitForSelector( '.block-editor-block-list__block[aria-label="Block: Reusable block"]' ); expect( reusableBlock ).toBeTruthy(); diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index ca7eac55471b1..c2098098d9cc7 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -9,6 +9,7 @@ import { pressKeyWithModifier, showBlockToolbar, clickBlockToolbarButton, + canvas, } from '@wordpress/e2e-test-utils'; describe( 'RichText', () => { @@ -74,7 +75,7 @@ describe( 'RichText', () => { await pressKeyWithModifier( 'shift', 'ArrowLeft' ); await pressKeyWithModifier( 'primary', 'b' ); - const count = await page.evaluate( + const count = await canvas().evaluate( () => document.querySelectorAll( '*[data-rich-text-format-boundary]' ) .length @@ -173,7 +174,7 @@ describe( 'RichText', () => { await pressKeyWithModifier( 'primary', 'b' ); await page.keyboard.type( '3' ); - await page.evaluate( () => { + await canvas().evaluate( () => { let called; const { body } = document; const config = { @@ -233,7 +234,7 @@ describe( 'RichText', () => { await page.keyboard.type( '4' ); - await page.evaluate( () => { + await canvas().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`. @@ -274,7 +275,7 @@ describe( 'RichText', () => { await page.keyboard.press( 'Enter' ); // Wait for rich text editor to load. - await page.waitForSelector( '.block-editor-rich-text__editable' ); + await canvas().waitForSelector( '.block-editor-rich-text__editable' ); await pressKeyWithModifier( 'primary', 'b' ); await page.keyboard.type( '12' ); @@ -305,7 +306,7 @@ describe( 'RichText', () => { await page.keyboard.type( '1' ); // Simulate moving focus to a different app, then moving focus back, // without selection being changed. - await page.evaluate( () => { + await canvas().evaluate( () => { const activeElement = document.activeElement; activeElement.blur(); activeElement.focus(); @@ -515,7 +516,7 @@ describe( 'RichText', () => { // text in the DOM directly, setting selection in the right place, and // firing `compositionend`. // See https://github.com/puppeteer/puppeteer/issues/4981. - await page.evaluate( async () => { + await canvas().evaluate( async () => { document.activeElement.textContent = '`a`'; const selection = window.getSelection(); // The `selectionchange` and `compositionend` events should run in separate event diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js index a89ac0469f27a..e23bd830cee4f 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js @@ -6,6 +6,7 @@ import { createNewPost, deactivatePlugin, publishPost, + canvas, } from '@wordpress/e2e-test-utils'; const urlButtonSelector = '*[aria-label^="Change URL"]'; @@ -28,7 +29,7 @@ describe( 'Sidebar Permalink', () => { await page.keyboard.type( 'aaaaa' ); await publishPost(); // Start editing again. - await page.type( '.editor-post-title__input', ' (Updated)' ); + await canvas().type( '.editor-post-title__input', ' (Updated)' ); expect( await page.$( urlButtonSelector ) ).toBeNull(); } ); @@ -37,7 +38,7 @@ describe( 'Sidebar Permalink', () => { await page.keyboard.type( 'aaaaa' ); await publishPost(); // Start editing again. - await page.type( '.editor-post-title__input', ' (Updated)' ); + await canvas().type( '.editor-post-title__input', ' (Updated)' ); expect( await page.$( urlButtonSelector ) ).toBeNull(); } ); @@ -46,7 +47,7 @@ describe( 'Sidebar Permalink', () => { await page.keyboard.type( 'aaaaa' ); await publishPost(); // Start editing again. - await page.type( '.editor-post-title__input', ' (Updated)' ); + await canvas( 0 ).type( '.editor-post-title__input', ' (Updated)' ); expect( await page.$( urlButtonSelector ) ).not.toBeNull(); } ); } ); diff --git a/packages/e2e-tests/specs/editor/various/taxonomies.test.js b/packages/e2e-tests/specs/editor/various/taxonomies.test.js index 551187d654dd9..a1804307fe74e 100644 --- a/packages/e2e-tests/specs/editor/various/taxonomies.test.js +++ b/packages/e2e-tests/specs/editor/various/taxonomies.test.js @@ -6,6 +6,7 @@ import { findSidebarPanelWithTitle, openDocumentSettingsSidebar, publishPost, + canvas, } from '@wordpress/e2e-test-utils'; /** @@ -113,7 +114,7 @@ describe( 'Taxonomies', () => { expect( selectedCategories[ 0 ] ).toEqual( 'z rand category 1' ); // Type something in the title so we can publish the post. - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Publish the post. await publishPost(); @@ -171,7 +172,7 @@ describe( 'Taxonomies', () => { expect( tags[ 0 ] ).toEqual( tagName ); // Type something in the title so we can publish the post. - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Publish the post. await publishPost(); @@ -230,7 +231,7 @@ describe( 'Taxonomies', () => { expect( tags[ 0 ] ).toEqual( tagName ); // Type something in the title so we can publish the post. - await page.type( '.editor-post-title__input', 'Hello World' ); + await canvas().type( '.editor-post-title__input', 'Hello World' ); // Publish the post. await publishPost(); diff --git a/packages/e2e-tests/specs/editor/various/typewriter.test.js b/packages/e2e-tests/specs/editor/various/typewriter.test.js index f1eb0c7b68934..d935197b14f87 100644 --- a/packages/e2e-tests/specs/editor/various/typewriter.test.js +++ b/packages/e2e-tests/specs/editor/various/typewriter.test.js @@ -9,7 +9,12 @@ describe( 'TypeWriter', () => { } ); const getCaretPosition = async () => - await page.evaluate( () => wp.dom.computeCaretRect( window ).y ); + await page.evaluate( + () => + wp.dom.computeCaretRect( + document.activeElement?.contentWindow ?? window + ).y + ); // Allow the scroll position to be 1px off. const BUFFER = 1; @@ -33,11 +38,13 @@ describe( 'TypeWriter', () => { // Create blocks until the typewriter effect kicks in. while ( - await page.evaluate( - () => - wp.dom.getScrollContainer( document.activeElement ) - .scrollTop === 0 - ) + await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + return ( + wp.dom.getScrollContainer( activeElement ).scrollTop === 0 + ); + } ) ) { await page.keyboard.press( 'Enter' ); } @@ -51,14 +58,14 @@ describe( 'TypeWriter', () => { // Type until the text wraps. while ( - await page.evaluate( - () => - document.activeElement.clientHeight <= - parseInt( - getComputedStyle( document.activeElement ).lineHeight, - 10 - ) - ) + await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + return ( + activeElement.clientHeight <= + parseInt( getComputedStyle( activeElement ).lineHeight, 10 ) + ); + } ) ) { await page.keyboard.type( 'a' ); } @@ -93,32 +100,35 @@ describe( 'TypeWriter', () => { // Create zero or more blocks until there is a scrollable container. // No blocks should be created if there's already a scrollbar. while ( - await page.evaluate( - () => ! wp.dom.getScrollContainer( document.activeElement ) - ) + await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + const scrollContainer = + wp.dom.getScrollContainer( activeElement ); + return ( + scrollContainer.scrollHeight === + scrollContainer.clientHeight + ); + } ) ) { await page.keyboard.press( 'Enter' ); } - const scrollPosition = await page.evaluate( - () => wp.dom.getScrollContainer( document.activeElement ).scrollTop - ); + const scrollPosition = await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + return wp.dom.getScrollContainer( activeElement ).scrollTop; + } ); // Expect scrollbar to be at the top. expect( scrollPosition ).toBe( 0 ); // Move the mouse to the scroll container, and scroll down // a small amount to trigger the typewriter mode. - const mouseMovePosition = await page.evaluate( () => { - const caretRect = wp.dom.computeCaretRect( window ); - return [ Math.floor( caretRect.x ), Math.floor( caretRect.y ) ]; + await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + wp.dom.getScrollContainer( activeElement ).scrollTop += 2; } ); - await page.mouse.move( ...mouseMovePosition ); - await page.mouse.wheel( { deltaY: 2 } ); - await page.waitForFunction( - () => - wp.dom.getScrollContainer( document.activeElement ) - .scrollTop === 2 - ); // Wait for the caret rectangle to be recalculated. await page.evaluate( () => new Promise( window.requestAnimationFrame ) @@ -128,12 +138,12 @@ describe( 'TypeWriter', () => { // coordinates should be the same. const initialPosition = await getCaretPosition(); await page.keyboard.press( 'Enter' ); - await page.waitForFunction( - () => - // Wait for the Typewriter to scroll down past the initial position. - wp.dom.getScrollContainer( document.activeElement ).scrollTop > - 2 - ); + await page.waitForFunction( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + // Wait for the Typewriter to scroll down past the initial position. + return wp.dom.getScrollContainer( activeElement ).scrollTop > 2; + } ); expect( await getDiff( initialPosition ) ).toBe( 0 ); } ); @@ -164,9 +174,11 @@ describe( 'TypeWriter', () => { // Create blocks until there is a scrollable container. while ( - await page.evaluate( - () => ! wp.dom.getScrollContainer( document.activeElement ) - ) + await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + return ! wp.dom.getScrollContainer( activeElement ); + } ) ) { await page.keyboard.press( 'Enter' ); } @@ -176,11 +188,13 @@ describe( 'TypeWriter', () => { // Create blocks until the typewriter effect kicks in, create at // least 10 blocks to properly test the . while ( - ( await page.evaluate( - () => - wp.dom.getScrollContainer( document.activeElement ) - .scrollTop === 0 - ) ) || + ( await page.evaluate( () => { + const { activeElement } = + document.activeElement?.contentDocument ?? document; + return ( + wp.dom.getScrollContainer( activeElement ).scrollTop === 0 + ); + } ) ) || count < 10 ) { await page.keyboard.press( 'Enter' ); @@ -190,9 +204,11 @@ describe( 'TypeWriter', () => { // Scroll the active element to the very bottom of the scroll container, // then scroll up, so the caret is partially hidden. await page.evaluate( () => { - document.activeElement.scrollIntoView( false ); - wp.dom.getScrollContainer( document.activeElement ).scrollTop -= - document.activeElement.offsetHeight + 10; + const { activeElement } = + document.activeElement?.contentDocument ?? document; + activeElement.scrollIntoView( false ); + wp.dom.getScrollContainer( activeElement ).scrollTop -= + activeElement.offsetHeight + 10; } ); const bottomPostition = await getCaretPosition(); @@ -220,9 +236,11 @@ describe( 'TypeWriter', () => { // Scroll the active element to the very top of the scroll container, // then scroll down, so the caret is partially hidden. await page.evaluate( () => { - document.activeElement.scrollIntoView(); - wp.dom.getScrollContainer( document.activeElement ).scrollTop += - document.activeElement.offsetHeight + 10; + const { activeElement } = + document.activeElement?.contentDocument ?? document; + activeElement.scrollIntoView(); + wp.dom.getScrollContainer( activeElement ).scrollTop += + activeElement.offsetHeight + 10; } ); const topPostition = await getCaretPosition(); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 638a869aa8350..6716305e93a98 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -34,7 +34,7 @@ import { useEffect, useRef, useMemo } from '@wordpress/element'; import { __unstableMotion as motion } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; -import { parse } from '@wordpress/blocks'; +import { parse, store as blocksStore } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -112,6 +112,7 @@ export default function VisualEditor( { styles } ) { wrapperBlockName, wrapperUniqueId, isBlockBasedTheme, + blockTypes, } = useSelect( ( select ) => { const { isFeatureActive, @@ -121,6 +122,7 @@ export default function VisualEditor( { styles } ) { } = select( editPostStore ); const { getCurrentPostId, getCurrentPostType, getEditorSettings } = select( editorStore ); + const { getBlockTypes } = select( blocksStore ); const _isTemplateMode = isEditingTemplate(); let _wrapperBlockName; @@ -151,8 +153,12 @@ export default function VisualEditor( { styles } ) { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, + blockTypes: getBlockTypes(), }; }, [] ); + const hasV3BlocksOnly = blockTypes.every( ( type ) => { + return type.apiVersion >= 3; + } ); const { isCleanNewPost } = useSelect( editorStore ); const hasMetaBoxes = useSelect( ( select ) => select( editPostStore ).hasMetaBoxes(), @@ -352,8 +358,8 @@ export default function VisualEditor( { styles } ) { > 2, + 'api_version' => 3, 'attributes' => array( 'showPostCounts' => array( 'type' => 'boolean', diff --git a/packages/widgets/src/blocks/legacy-widget/block.json b/packages/widgets/src/blocks/legacy-widget/block.json index 30b60c6448835..6b0c1e2a916fd 100644 --- a/packages/widgets/src/blocks/legacy-widget/block.json +++ b/packages/widgets/src/blocks/legacy-widget/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "core/legacy-widget", "title": "Legacy Widget", "category": "widgets", diff --git a/packages/widgets/src/blocks/widget-group/block.json b/packages/widgets/src/blocks/widget-group/block.json index ec48d90eda5ca..c29e811554ac1 100644 --- a/packages/widgets/src/blocks/widget-group/block.json +++ b/packages/widgets/src/blocks/widget-group/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "core/widget-group", "category": "widgets", "attributes": { diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php index 7c8bd9975d35b..858e4e92cc174 100644 --- a/phpunit/block-supports/border-test.php +++ b/phpunit/block-supports/border-test.php @@ -36,7 +36,7 @@ private function register_bordered_block_with_support( $block_name, $supports = register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'borderColor' => array( 'type' => 'string', diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php index f21f6477f4162..310b7e6c525cb 100644 --- a/phpunit/block-supports/colors-test.php +++ b/phpunit/block-supports/colors-test.php @@ -28,7 +28,7 @@ public function test_color_slugs_with_numbers_are_kebab_cased_properly() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'textColor' => array( 'type' => 'string', @@ -69,7 +69,7 @@ public function test_color_with_skipped_serialization_block_supports() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -107,7 +107,7 @@ public function test_gradient_with_individual_skipped_serialization_block_suppor register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', diff --git a/phpunit/block-supports/dimensions-test.php b/phpunit/block-supports/dimensions-test.php index 2ec0859b7cb7f..d428977c2c0a6 100644 --- a/phpunit/block-supports/dimensions-test.php +++ b/phpunit/block-supports/dimensions-test.php @@ -28,7 +28,7 @@ public function test_dimensions_style_is_applied() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -64,7 +64,7 @@ public function test_dimensions_with_skipped_serialization_block_supports() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -99,7 +99,7 @@ public function test_min_height_with_individual_skipped_serialization_block_supp register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', diff --git a/phpunit/block-supports/position-test.php b/phpunit/block-supports/position-test.php index c304ffa68e7de..d9f97060cf647 100644 --- a/phpunit/block-supports/position-test.php +++ b/phpunit/block-supports/position-test.php @@ -78,7 +78,7 @@ public function test_position_block_support( $theme_name, $block_name, $position register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php index 1ac0c86e62042..93df6f55ac109 100644 --- a/phpunit/block-supports/spacing-test.php +++ b/phpunit/block-supports/spacing-test.php @@ -28,7 +28,7 @@ public function test_spacing_style_is_applied() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -73,7 +73,7 @@ public function test_spacing_with_skipped_serialization_block_supports() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -117,7 +117,7 @@ public function test_margin_with_individual_skipped_serialization_block_supports register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index cfb3f19a1a7ae..5a2f52f780f1d 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -78,7 +78,7 @@ public function test_should_kebab_case_font_size_slug_with_numbers() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'fontSize' => array( 'type' => 'string', @@ -112,7 +112,7 @@ public function test_should_generate_font_family_with_legacy_inline_styles_using register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -145,7 +145,7 @@ public function test_should_skip_serialization_for_typography_block_supports() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -191,7 +191,7 @@ public function test_should_skip_serialization_for_letter_spacing_block_supports register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -227,7 +227,7 @@ public function test_should_generate_css_var_for_font_family_with_legacy_inline_ register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -260,7 +260,7 @@ public function test_should_generate_classname_for_font_family() { register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', @@ -625,7 +625,7 @@ public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, register_block_type( $this->test_block_name, array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'style' => array( 'type' => 'object', diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php index e15509e43143e..c11233b1e8952 100644 --- a/phpunit/bootstrap.php +++ b/phpunit/bootstrap.php @@ -105,7 +105,7 @@ function gutenberg_register_test_block_for_feature_selectors() { WP_Block_Type_Registry::get_instance()->register( 'test/test', array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'textColor' => array( 'type' => 'string', diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php index 4cc34bf97b32c..1588aa4d60326 100644 --- a/phpunit/class-wp-theme-json-resolver-test.php +++ b/phpunit/class-wp-theme-json-resolver-test.php @@ -396,7 +396,7 @@ public function test_get_merged_data_returns_origin( $origin, $core_palette, $co register_block_type( 'my/block-with-styles', array( - 'api_version' => 2, + 'api_version' => 3, 'attributes' => array( 'borderColor' => array( 'type' => 'string', diff --git a/phpunit/fixtures/block.json b/phpunit/fixtures/block.json index 41904ae811962..2ab91788dc0d4 100644 --- a/phpunit/fixtures/block.json +++ b/phpunit/fixtures/block.json @@ -1,5 +1,5 @@ { - "apiVersion": 2, + "apiVersion": 3, "name": "my-plugin/notice", "title": "Notice", "category": "common", diff --git a/schemas/json/block.json b/schemas/json/block.json index 5b92a654fbc4a..6ca40ba90f961 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -17,9 +17,9 @@ }, "apiVersion": { "type": "integer", - "description": "The version of the Block API used by the block. The most recent version is 2 and it was introduced in WordPress 5.6.\n\n See the API versions documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/ for more details.", + "description": "The version of the Block API used by the block. The most recent version is 3 and it was introduced in WordPress 6.3.\n\n See the API versions documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/ for more details.", "default": 1, - "enum": [ 1, 2 ] + "enum": [ 1, 2, 3 ] }, "name": { "type": "string", diff --git a/test/e2e/specs/editor/blocks/avatar.spec.js b/test/e2e/specs/editor/blocks/avatar.spec.js index bbce1eede94da..8bf39a7a60dba 100644 --- a/test/e2e/specs/editor/blocks/avatar.spec.js +++ b/test/e2e/specs/editor/blocks/avatar.spec.js @@ -37,7 +37,7 @@ test.describe( 'Avatar', () => { const username = 'Gravatar Gravatar'; - const avatarBlock = page.locator( + const avatarBlock = editor.canvas.locator( 'role=document[name="Block: Avatar"i]' ); diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index 13d5759ee7db9..8eacb7e2bed2e 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -27,7 +27,7 @@ test.describe( 'Buttons', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/buttons' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'Content' ); @@ -56,7 +56,7 @@ test.describe( 'Buttons', () => { ).toBeFocused(); await page.keyboard.press( 'Escape' ); await expect( - page.locator( 'role=textbox[name="Button text"i]' ) + editor.canvas.locator( 'role=textbox[name="Button text"i]' ) ).toBeFocused(); await page.keyboard.type( 'WordPress' ); @@ -91,7 +91,7 @@ test.describe( 'Buttons', () => { // Focus should move from the link control to the button block's text. await expect( - page.locator( 'role=textbox[name="Button text"i]' ) + editor.canvas.locator( 'role=textbox[name="Button text"i]' ) ).toBeFocused(); // The link control should still be visible when a URL is set. diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index cba1472caf916..00a14c191efbb 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/test/e2e/specs/editor/blocks/classic.spec.js @@ -29,10 +29,12 @@ test.describe( 'Classic', () => { test( 'should be inserted', async ( { editor, page, pageUtils } ) => { await editor.insertBlock( { name: 'core/freeform' } ); // Ensure there is focus. - await page.click( '.mce-content-body' ); + await page.waitForSelector( '.mce-tinymce iframe' ); + await page.click( '.mce-tinymce iframe' ); await page.keyboard.type( 'test' ); // Move focus away. await pageUtils.pressKeys( 'shift+Tab' ); + await page.keyboard.press( 'Enter' ); await expect.poll( editor.getEditedPostContent ).toBe( 'test' ); } ); @@ -45,7 +47,8 @@ test.describe( 'Classic', () => { } ) => { await editor.insertBlock( { name: 'core/freeform' } ); // Ensure there is focus. - await page.click( '.mce-content-body' ); + await page.waitForSelector( '.mce-tinymce iframe' ); + await page.click( '.mce-tinymce iframe' ); await page.keyboard.type( 'test' ); await page.getByRole( 'button', { name: /Add Media/i } ).click(); @@ -74,12 +77,13 @@ test.describe( 'Classic', () => { await page.click( 'role=button[name="Insert gallery"i]' ); await pageUtils.pressKeys( 'shift+Tab' ); + await page.keyboard.press( 'Enter' ); await expect .poll( editor.getEditedPostContent ) .toMatch( /\[gallery ids=\"\d+\"\]/ ); await editor.clickBlockToolbarButton( 'Convert to blocks' ); - const galleryBlock = page.locator( + const galleryBlock = editor.canvas.locator( 'role=document[name="Block: Gallery"i]' ); await expect( galleryBlock ).toBeVisible(); @@ -87,7 +91,7 @@ test.describe( 'Classic', () => { // Check that you can undo back to a Classic block gallery in one step. await pageUtils.pressKeys( 'primary+z' ); await expect( - page.locator( 'role=document[name="Block: Classic"i]' ) + editor.canvas.locator( 'role=document[name="Block: Classic"i]' ) ).toBeVisible(); await expect .poll( editor.getEditedPostContent ) @@ -112,10 +116,12 @@ test.describe( 'Classic', () => { await editor.insertBlock( { name: 'core/freeform' } ); // Ensure there is focus. - await page.click( '.mce-content-body' ); + await page.waitForSelector( '.mce-tinymce iframe' ); + await page.click( '.mce-tinymce iframe' ); await page.keyboard.type( 'test' ); // Move focus away. await pageUtils.pressKeys( 'shift+Tab' ); + await page.keyboard.press( 'Enter' ); await page.click( 'role=button[name="Save draft"i]' ); @@ -131,7 +137,7 @@ test.describe( 'Classic', () => { errors.push( exception ); } ); - const classicBlock = page.locator( + const classicBlock = editor.canvas.locator( 'role=document[name="Block: Classic"i]' ); diff --git a/test/e2e/specs/editor/blocks/code.spec.js b/test/e2e/specs/editor/blocks/code.spec.js index 80f41779b9131..c4037d50b7dd5 100644 --- a/test/e2e/specs/editor/blocks/code.spec.js +++ b/test/e2e/specs/editor/blocks/code.spec.js @@ -12,7 +12,7 @@ test.describe( 'Code', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '```' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ' { } ) => { // Open Columns await editor.insertBlock( { name: 'core/columns' } ); - await page.locator( '[aria-label="Two columns; equal split"]' ).click(); + await editor.canvas + .locator( '[aria-label="Two columns; equal split"]' ) + .click(); // Open List view toggle await page.locator( 'role=button[name="Document Overview"i]' ).click(); @@ -51,13 +53,15 @@ test.describe( 'Columns', () => { } ) => { // Open Columns await editor.insertBlock( { name: 'core/columns' } ); - await page + await editor.canvas .locator( '[aria-label="Three columns; equal split"]' ) .click(); // Lock last column block await editor.selectBlocks( - page.locator( 'role=document[name="Block: Column (3 of 3)"i]' ) + editor.canvas.locator( + 'role=document[name="Block: Column (3 of 3)"i]' + ) ); await editor.clickBlockToolbarButton( 'Options' ); await page.click( 'role=menuitem[name="Lock"i]' ); @@ -66,7 +70,7 @@ test.describe( 'Columns', () => { // Select columns block await editor.selectBlocks( - page.locator( 'role=document[name="Block: Columns"i]' ) + editor.canvas.locator( 'role=document[name="Block: Columns"i]' ) ); await editor.openDocumentSettingsSidebar(); diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 55a4cdca8c1c0..4b0dbf66b2a30 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -169,7 +169,7 @@ test.describe( 'Comments', () => { 'role=button[name="Switch to editable mode"i]' ); - const commentTemplate = block.locator( + const commentTemplate = editor.canvas.locator( 'role=document[name="Block: Comment Template"i]' ); await expect( block ).toHaveClass( /has-vivid-purple-color/ ); diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index 0217616781345..90555eca548c2 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -25,12 +25,11 @@ test.describe( 'Cover', () => { } ); test( 'can set overlay color using color picker on block placeholder', async ( { - page, editor, coverBlockUtils, } ) => { await editor.insertBlock( { name: 'core/cover' } ); - const coverBlock = page.getByRole( 'document', { + const coverBlock = editor.canvas.getByRole( 'document', { name: 'Block: Cover', } ); @@ -56,12 +55,11 @@ test.describe( 'Cover', () => { } ); test( 'can set background image using image upload on block placeholder', async ( { - page, editor, coverBlockUtils, } ) => { await editor.insertBlock( { name: 'core/cover' } ); - const coverBlock = page.getByRole( 'document', { + const coverBlock = editor.canvas.getByRole( 'document', { name: 'Block: Cover', } ); @@ -80,12 +78,11 @@ test.describe( 'Cover', () => { } ); test( 'dims background image down by 50% by default', async ( { - page, editor, coverBlockUtils, } ) => { await editor.insertBlock( { name: 'core/cover' } ); - const coverBlock = page.getByRole( 'document', { + const coverBlock = editor.canvas.getByRole( 'document', { name: 'Block: Cover', } ); @@ -104,11 +101,11 @@ test.describe( 'Cover', () => { expect( backgroundDimOpacity ).toBe( '0.5' ); } ); - test( 'can have the title edited', async ( { page, editor } ) => { + test( 'can have the title edited', async ( { editor } ) => { const titleText = 'foo'; await editor.insertBlock( { name: 'core/cover' } ); - const coverBlock = page.getByRole( 'document', { + const coverBlock = editor.canvas.getByRole( 'document', { name: 'Block: Cover', } ); @@ -134,7 +131,7 @@ test.describe( 'Cover', () => { test( 'can be resized using drag & drop', async ( { page, editor } ) => { await editor.insertBlock( { name: 'core/cover' } ); - const coverBlock = page.getByRole( 'document', { + const coverBlock = editor.canvas.getByRole( 'document', { name: 'Block: Cover', } ); await coverBlock @@ -205,13 +202,12 @@ test.describe( 'Cover', () => { } ); test( 'dims the background image down by 50% when transformed from the Image block', async ( { - page, editor, coverBlockUtils, } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.getByRole( 'document', { + const imageBlock = editor.canvas.getByRole( 'document', { name: 'Block: Image', } ); @@ -220,14 +216,14 @@ test.describe( 'Cover', () => { ); await expect( - page + editor.canvas .getByRole( 'document', { name: 'Block: Image' } ) .locator( 'img' ) ).toBeVisible(); await editor.transformBlockTo( 'core/cover' ); - const coverBlock = page.getByRole( 'document', { + const coverBlock = editor.canvas.getByRole( 'document', { name: 'Block: Cover', } ); diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js index 1a71d3e46e6dd..f950036539c11 100644 --- a/test/e2e/specs/editor/blocks/gallery.spec.js +++ b/test/e2e/specs/editor/blocks/gallery.spec.js @@ -51,10 +51,10 @@ test.describe( 'Gallery', () => { plainText: `[gallery ids="${ uploadedMedia.id }"]`, } ); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await pageUtils.pressKeys( 'primary+v' ); - const img = page.locator( + const img = editor.canvas.locator( 'role=document[name="Block: Image"i] >> role=img' ); @@ -87,12 +87,11 @@ test.describe( 'Gallery', () => { test( 'can be created using uploaded images', async ( { admin, editor, - page, galleryBlockUtils, } ) => { await admin.createNewPost(); await editor.insertBlock( { name: 'core/gallery' } ); - const galleryBlock = page.locator( + const galleryBlock = editor.canvas.locator( 'role=document[name="Block: Gallery"i]' ); await expect( galleryBlock ).toBeVisible(); @@ -132,7 +131,9 @@ test.describe( 'Gallery', () => { ], } ); - const gallery = page.locator( 'role=document[name="Block: Gallery"i]' ); + const gallery = editor.canvas.locator( + 'role=document[name="Block: Gallery"i]' + ); await expect( gallery ).toBeVisible(); await editor.selectBlocks( gallery ); @@ -173,7 +174,7 @@ test.describe( 'Gallery', () => { ], } ); - const galleryImage = page.locator( + const galleryImage = editor.canvas.locator( 'role=document[name="Block: Gallery"i] >> role=document[name="Block: Image"i]' ); const imageCaption = galleryImage.locator( @@ -203,7 +204,7 @@ test.describe( 'Gallery', () => { } ) => { await admin.createNewPost(); await editor.insertBlock( { name: 'core/gallery' } ); - await page.click( 'role=button[name="Media Library"i]' ); + await editor.canvas.click( 'role=button[name="Media Library"i]' ); 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 4cf284a0cdf69..2de22245eb5b0 100644 --- a/test/e2e/specs/editor/blocks/group.spec.js +++ b/test/e2e/specs/editor/blocks/group.spec.js @@ -29,7 +29,7 @@ test.describe( 'Group', () => { ); // Select the default, selected Group layout from the variation picker. - await page.click( + await editor.canvas.click( 'role=button[name="Group: Gather blocks in a container."i]' ); @@ -40,7 +40,7 @@ test.describe( 'Group', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/group' ); await expect( page.locator( 'role=option[name="Group"i][selected]' ) @@ -48,7 +48,7 @@ test.describe( 'Group', () => { await page.keyboard.press( 'Enter' ); // Select the default, selected Group layout from the variation picker. - await page.click( + await editor.canvas.click( 'role=button[name="Group: Gather blocks in a container."i]' ); @@ -60,10 +60,10 @@ test.describe( 'Group', () => { page, } ) => { await editor.insertBlock( { name: 'core/group' } ); - await page.click( + await editor.canvas.click( 'button[aria-label="Group: Gather blocks in a container."]' ); - await page.click( 'role=button[name="Add block"i]' ); + await editor.canvas.click( 'role=button[name="Add block"i]' ); 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 e1b97d780f292..1413b4cad9e9d 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -12,7 +12,7 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '### 3' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -27,7 +27,7 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '4' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.type( '#### ' ); @@ -44,7 +44,7 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## 1. H' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -59,7 +59,7 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## `code`' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -115,7 +115,7 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '### Heading' ); await editor.openDocumentSettingsSidebar(); @@ -147,7 +147,7 @@ test.describe( 'Heading', () => { } ); test( 'should correctly apply named colors', async ( { editor, page } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## Heading' ); await editor.openDocumentSettingsSidebar(); @@ -185,7 +185,7 @@ test.describe( 'Heading', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## Heading' ); // Change text alignment @@ -216,7 +216,7 @@ test.describe( 'Heading', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Paragraph' ); // Change text alignment @@ -247,7 +247,7 @@ test.describe( 'Heading', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 77e9d2a9186a7..99a875f081018 100644 --- a/test/e2e/specs/editor/blocks/html.spec.js +++ b/test/e2e/specs/editor/blocks/html.spec.js @@ -10,7 +10,7 @@ test.describe( 'HTML block', () => { test( 'can be created by typing "/html"', async ( { editor, page } ) => { // Create a Custom HTML block with the slash shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/html' ); await expect( page.locator( 'role=option[name="Custom HTML"i][selected]' ) @@ -33,7 +33,7 @@ test.describe( 'HTML block', () => { test( 'should not encode <', async ( { editor, page } ) => { // Create a Custom HTML block with the slash shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/html' ); await expect( page.locator( 'role=option[name="Custom HTML"i][selected]' ) @@ -42,8 +42,9 @@ test.describe( 'HTML block', () => { await page.keyboard.type( '1 < 2' ); await editor.publishPost(); await page.reload(); + await page.waitForSelector( '[name="editor-canvas"]' ); await expect( - page.locator( '[data-type="core/html"] textarea' ) + 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 48ece12d8f347..db2872c185fbb 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -32,10 +32,10 @@ test.describe( 'Image', () => { await requestUtils.deleteAllMedia(); } ); - test( 'can be inserted', async ( { editor, page, imageBlockUtils } ) => { + test( 'can be inserted', async ( { editor, imageBlockUtils } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); await expect( imageBlock ).toBeVisible(); @@ -63,7 +63,7 @@ test.describe( 'Image', () => { } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -134,7 +134,7 @@ test.describe( 'Image', () => { { // Focus outside the block to avoid the image caption being selected // It can happen on CI specially. - await page.click( 'role=textbox[name="Add title"i]' ); + await editor.canvas.click( 'role=textbox[name="Add title"i]' ); await image.click(); await page.keyboard.press( 'Backspace' ); @@ -149,7 +149,7 @@ test.describe( 'Image', () => { } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -165,7 +165,9 @@ test.describe( 'Image', () => { await page.keyboard.type( '2' ); expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await editor.canvas.evaluate( + () => document.activeElement.innerHTML + ) ).toBe( '12' ); } ); @@ -176,7 +178,7 @@ test.describe( 'Image', () => { } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -193,7 +195,9 @@ test.describe( 'Image', () => { await page.keyboard.press( 'Enter' ); expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await editor.canvas.evaluate( + () => document.activeElement.innerHTML + ) ).toBe( '1
2' ); } ); @@ -205,7 +209,7 @@ test.describe( 'Image', () => { } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -245,7 +249,9 @@ test.describe( 'Image', () => { await page.keyboard.press( 'ArrowRight' ); expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await editor.canvas.evaluate( + () => document.activeElement.innerHTML + ) ).toBe( 'a' ); } ); @@ -256,7 +262,7 @@ test.describe( 'Image', () => { } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -300,7 +306,7 @@ test.describe( 'Image', () => { // Insert the block, upload a file and crop. await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -366,7 +372,7 @@ test.describe( 'Image', () => { // Insert the block, upload a file and crop. await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -423,7 +429,7 @@ test.describe( 'Image', () => { // Insert the block, upload a file and crop. await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -459,7 +465,7 @@ test.describe( 'Image', () => { } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -513,13 +519,12 @@ test.describe( 'Image', () => { test( 'should undo without broken temporary state', async ( { editor, - page, pageUtils, imageBlockUtils, } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); const image = imageBlock.locator( 'role=img' ); @@ -529,7 +534,7 @@ test.describe( 'Image', () => { ); await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); - await page.focus( '.wp-block-image' ); + await editor.canvas.focus( '.wp-block-image' ); await pageUtils.pressKeys( 'primary+z' ); // Expect an empty image block (placeholder) rather than one with a @@ -544,7 +549,7 @@ test.describe( 'Image', () => { editor, } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.getByRole( 'document', { + const imageBlock = editor.canvas.getByRole( 'document', { name: 'Block: Image', } ); const blockLibrary = page.getByRole( 'region', { @@ -637,7 +642,7 @@ test.describe( 'Image', () => { editor, } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.getByRole( 'document', { + const imageBlock = editor.canvas.getByRole( 'document', { name: 'Block: Image', } ); @@ -698,7 +703,7 @@ test.describe( 'Image', () => { page, } ) => { await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); await expect( imageBlock ).toBeVisible(); diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js index a4af98f0ba057..a41b1847d5997 100644 --- a/test/e2e/specs/editor/blocks/list.spec.js +++ b/test/e2e/specs/editor/blocks/list.spec.js @@ -13,7 +13,7 @@ test.describe( 'List (@firefox)', () => { page, } ) => { // Create a block with some text that will trigger a list creation. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* A list item' ); // Create a second list item. @@ -38,7 +38,7 @@ test.describe( 'List (@firefox)', () => { pageUtils, } ) => { // Create a list with the slash block shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } ); await page.keyboard.type( '* ' ); @@ -56,7 +56,7 @@ test.describe( 'List (@firefox)', () => { page, } ) => { // Create a block with some text that will trigger a list creation. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1) A list item' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -73,7 +73,7 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1. ' ); await pageUtils.pressKeys( 'primary+z' ); @@ -88,7 +88,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* ' ); await page.keyboard.press( 'Backspace' ); @@ -103,9 +103,11 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* ' ); - await expect( page.locator( '[data-type="core/list"]' ) ).toBeVisible(); + await expect( + editor.canvas.locator( '[data-type="core/list"]' ) + ).toBeVisible(); await page.keyboard.press( 'Backspace' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -119,7 +121,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* ' ); await editor.showBlockToolbar(); await page.keyboard.press( 'Backspace' ); @@ -135,10 +137,12 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.evaluate( () => delete window.requestIdleCallback ); await page.keyboard.type( '* ' ); - await expect( page.locator( '[data-type="core/list"]' ) ).toBeVisible(); + await expect( + editor.canvas.locator( '[data-type="core/list"]' ) + ).toBeVisible(); await page.keyboard.press( 'Backspace' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -152,7 +156,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* ' ); await page.keyboard.press( 'Escape' ); @@ -167,7 +171,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* a' ); await page.keyboard.press( 'Backspace' ); await page.keyboard.press( 'Backspace' ); @@ -179,9 +183,11 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* ' ); - await expect( page.locator( '[data-type="core/list"]' ) ).toBeVisible(); + await expect( + editor.canvas.locator( '[data-type="core/list"]' ) + ).toBeVisible(); // Wait until the automatic change is marked as "final", which is done // with an idle callback, see __unstableMarkAutomaticChange. await page.evaluate( () => new Promise( window.requestIdleCallback ) ); @@ -194,7 +200,7 @@ test.describe( 'List (@firefox)', () => { test( 'can be created by typing "/list"', async ( { editor, page } ) => { // Create a list with the slash block shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/list' ); await expect( page.locator( 'role=option[name="List"i][selected]' ) @@ -215,7 +221,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); await editor.transformBlockTo( 'core/list' ); @@ -232,12 +238,12 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); await page.keyboard.down( 'Shift' ); - await page.click( '[data-type="core/paragraph"] >> nth=0' ); + await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' ); await page.keyboard.up( 'Shift' ); await editor.transformBlockTo( 'core/list' ); @@ -259,7 +265,7 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'one' ); await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( 'two' ); @@ -283,14 +289,14 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 page.click( '[data-type="core/paragraph"] >> nth=0' ); + await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' ); await page.keyboard.up( 'Shift' ); await editor.transformBlockTo( 'core/list' ); @@ -555,7 +561,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1. one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); @@ -897,7 +903,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* 1' ); // Should be at level 0. await page.keyboard.press( 'Enter' ); @@ -1011,7 +1017,7 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ' a' ); @@ -1042,7 +1048,7 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); @@ -1065,7 +1071,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); // Tests the shortcut with a non breaking space. await page.keyboard.type( '*\u00a0' ); @@ -1081,7 +1087,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); // Tests the shortcut with a non breaking space. await page.keyboard.type( '* 1' ); @@ -1145,7 +1151,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -1170,7 +1176,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -1200,7 +1206,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1. a' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'b' ); @@ -1255,7 +1261,7 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* a' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'b' ); @@ -1298,7 +1304,7 @@ test.describe( 'List (@firefox)', () => { } ); test( 'can be exited to selected paragraph', async ( { editor, page } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '* ' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '1' ); @@ -1324,7 +1330,7 @@ test.describe( 'List (@firefox)', () => { } ); await editor.selectBlocks( - page.locator( 'role=document[name="Block: List"i]' ) + editor.canvas.locator( 'role=document[name="Block: List"i]' ) ); await page.getByRole( 'button', { name: 'List', exact: true } ).click(); diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js index ecade19a1aaa4..b8b53725c99b2 100644 --- a/test/e2e/specs/editor/blocks/paragraph.spec.js +++ b/test/e2e/specs/editor/blocks/paragraph.spec.js @@ -28,7 +28,7 @@ test.describe( 'Paragraph', () => { } ); await page.keyboard.type( '1' ); - const firstBlockTagName = await page.evaluate( () => { + const firstBlockTagName = await editor.canvas.evaluate( () => { return document.querySelector( '[data-block]' ).tagName; } ); @@ -59,7 +59,6 @@ test.describe( 'Paragraph', () => { test( 'should allow dropping an image on an empty paragraph block', async ( { editor, - page, pageUtils, draggingUtils, } ) => { @@ -76,14 +75,18 @@ test.describe( 'Paragraph', () => { testImagePath ); - await dragOver( '[data-type="core/paragraph"]' ); + await dragOver( + editor.canvas.locator( '[data-type="core/paragraph"]' ) + ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect( draggingUtils.insertionIndicator ).not.toBeVisible(); - await drop(); + await drop( + editor.canvas.locator( '[data-type="core/paragraph"]' ) + ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); await expect( imageBlock ).toBeVisible(); @@ -103,7 +106,7 @@ test.describe( 'Paragraph', () => { attributes: { content: 'My Heading' }, } ); await editor.insertBlock( { name: 'core/paragraph' } ); - await page.focus( 'text=My Heading' ); + await editor.canvas.focus( 'text=My Heading' ); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -112,7 +115,7 @@ test.describe( 'Paragraph', () => { await dragHandle.hover(); await page.mouse.down(); - const emptyParagraph = page.locator( + const emptyParagraph = editor.canvas.locator( '[data-type="core/paragraph"][data-empty="true"]' ); const boundingBox = await emptyParagraph.boundingBox(); @@ -140,7 +143,7 @@ test.describe( 'Paragraph', () => { '

My Heading

' ); - const emptyParagraph = page.locator( + const emptyParagraph = editor.canvas.locator( '[data-type="core/paragraph"][data-empty="true"]' ); const boundingBox = await emptyParagraph.boundingBox(); @@ -160,7 +163,6 @@ test.describe( 'Paragraph', () => { test.describe( 'Dragging positions', () => { test( 'Only the first block is an empty paragraph block', async ( { editor, - page, draggingUtils, } ) => { await editor.setContent( ` @@ -173,10 +175,10 @@ test.describe( 'Paragraph', () => { ` ); - const emptyParagraph = page.locator( + const emptyParagraph = editor.canvas.locator( '[data-type="core/paragraph"]' ); - const heading = page.locator( 'text=Heading' ); + const heading = editor.canvas.locator( 'text=Heading' ); await draggingUtils.simulateDraggingHTML( '

Draggable

' @@ -271,7 +273,6 @@ test.describe( 'Paragraph', () => { test( 'Only the second block is an empty paragraph block', async ( { editor, - page, draggingUtils, } ) => { await editor.setContent( ` @@ -284,10 +285,10 @@ test.describe( 'Paragraph', () => { ` ); - const emptyParagraph = page.locator( + const emptyParagraph = editor.canvas.locator( '[data-type="core/paragraph"]' ); - const heading = page.locator( 'text=Heading' ); + const heading = editor.canvas.locator( 'text=Heading' ); await draggingUtils.simulateDraggingHTML( '

Draggable

' @@ -382,7 +383,6 @@ test.describe( 'Paragraph', () => { test( 'Both blocks are empty paragraph blocks', async ( { editor, - page, draggingUtils, } ) => { await editor.setContent( ` @@ -395,10 +395,10 @@ test.describe( 'Paragraph', () => { ` ); - const firstEmptyParagraph = page + const firstEmptyParagraph = editor.canvas .locator( '[data-type="core/paragraph"]' ) .first(); - const secondEmptyParagraph = page + const secondEmptyParagraph = editor.canvas .locator( '[data-type="core/paragraph"]' ) .nth( 1 ); diff --git a/test/e2e/specs/editor/blocks/pullquote.spec.js b/test/e2e/specs/editor/blocks/pullquote.spec.js index 9b20204a624ec..f2a6698f5065f 100644 --- a/test/e2e/specs/editor/blocks/pullquote.spec.js +++ b/test/e2e/specs/editor/blocks/pullquote.spec.js @@ -12,7 +12,7 @@ test.describe( 'Quote', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 bff5bb6968535..44645005ff05e 100644 --- a/test/e2e/specs/editor/blocks/quote.spec.js +++ b/test/e2e/specs/editor/blocks/quote.spec.js @@ -33,7 +33,7 @@ test.describe( 'Quote', () => { page, } ) => { // Create a block with some text that will trigger a paragraph creation. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '> A quote' ); // Create a second paragraph. await page.keyboard.press( 'Enter' ); @@ -56,7 +56,7 @@ test.describe( 'Quote', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 'test'.length } ); await page.keyboard.type( '> ' ); @@ -71,7 +71,7 @@ test.describe( 'Quote', () => { test( 'can be created by typing "/quote"', async ( { editor, page } ) => { // Create a list with the slash block shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/quote' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'I’m a quote' ); @@ -88,7 +88,7 @@ test.describe( 'Quote', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); await editor.transformBlockTo( 'core/quote' ); expect( await editor.getEditedPostContent() ).toBe( @@ -104,12 +104,12 @@ test.describe( 'Quote', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); await page.keyboard.down( 'Shift' ); - await page.click( + await editor.canvas.click( 'role=document[name="Paragraph block"i] >> text=one' ); await page.keyboard.up( 'Shift' ); diff --git a/test/e2e/specs/editor/blocks/separator.spec.js b/test/e2e/specs/editor/blocks/separator.spec.js index 8f195392641c8..a2e088e14c398 100644 --- a/test/e2e/specs/editor/blocks/separator.spec.js +++ b/test/e2e/specs/editor/blocks/separator.spec.js @@ -12,7 +12,7 @@ test.describe( 'Separator', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 41e63c2e4e9de..77e978a0df302 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -10,7 +10,7 @@ test.describe( 'Spacer', () => { test( 'can be created by typing "/spacer"', async ( { editor, page } ) => { // Create a spacer with the slash block shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/spacer' ); await page.keyboard.press( 'Enter' ); @@ -22,11 +22,11 @@ test.describe( 'Spacer', () => { editor, } ) => { // Create a spacer with the slash block shortcut. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/spacer' ); await page.keyboard.press( 'Enter' ); - const resizableHandle = page.locator( + const resizableHandle = editor.canvas.locator( // Use class name selector until we have `data-testid` for the resize handles. 'role=document[name="Block: Spacer"i] >> css=.components-resizable-box__handle' ); @@ -39,7 +39,7 @@ test.describe( 'Spacer', () => { expect( await editor.getEditedPostContent() ).toMatchSnapshot(); await expect( - page.locator( 'role=document[name="Block: Spacer"i]' ) + editor.canvas.locator( 'role=document[name="Block: Spacer"i]' ) ).toBeFocused(); } ); } ); diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js index d206089e3f4e3..689989f9022a3 100644 --- a/test/e2e/specs/editor/blocks/table.spec.js +++ b/test/e2e/specs/editor/blocks/table.spec.js @@ -15,7 +15,7 @@ test.describe( 'Table', () => { await editor.insertBlock( { name: 'core/table' } ); // Check for existence of the column count field. - const columnCountInput = page.locator( + const columnCountInput = editor.canvas.locator( 'role=spinbutton[name="Column count"i]' ); await expect( columnCountInput ).toBeVisible(); @@ -27,7 +27,7 @@ test.describe( 'Table', () => { await page.keyboard.type( '5' ); // Check for existence of the row count field. - const rowCountInput = page.locator( + const rowCountInput = editor.canvas.locator( 'role=spinbutton[name="Row count"i]' ); await expect( rowCountInput ).toBeVisible(); @@ -39,7 +39,7 @@ test.describe( 'Table', () => { await page.keyboard.type( '10' ); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Expect the post content to have a correctly sized table. expect( await editor.getEditedPostContent() ).toMatchSnapshot(); @@ -49,10 +49,12 @@ test.describe( 'Table', () => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Click the first cell and add some text. - await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' ); + await editor.canvas.click( + 'role=textbox[name="Body cell text"i] >> nth=0' + ); await page.keyboard.type( 'This' ); // Navigate to the next cell and add some text. @@ -90,7 +92,7 @@ test.describe( 'Table', () => { await expect( footerSwitch ).toBeHidden(); // // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Expect the header and footer switches to be present now that the table has been created. await page.click( @@ -103,17 +105,17 @@ test.describe( 'Table', () => { await headerSwitch.check(); await footerSwitch.check(); - await page.click( + await editor.canvas.click( 'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0' ); await page.keyboard.type( 'header' ); - await page.click( + await editor.canvas.click( 'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0' ); await page.keyboard.type( 'body' ); - await page.click( + await editor.canvas.click( 'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0' ); await page.keyboard.type( 'footer' ); @@ -137,7 +139,7 @@ test.describe( 'Table', () => { await editor.openDocumentSettingsSidebar(); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Toggle on the switches and add some content. await page.click( @@ -145,7 +147,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 page.click( 'role=textbox[name="Body cell text"i] >> nth=0' ); + await editor.canvas.click( + 'role=textbox[name="Body cell text"i] >> nth=0' + ); // Add a column. await editor.clickBlockToolbarButton( 'Edit table' ); @@ -154,7 +158,9 @@ test.describe( 'Table', () => { // Expect the table to have 3 columns across the header, body and footer. expect( await editor.getEditedPostContent() ).toMatchSnapshot(); - await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' ); + await editor.canvas.click( + 'role=textbox[name="Body cell text"i] >> nth=0' + ); // Delete a column. await editor.clickBlockToolbarButton( 'Edit table' ); @@ -167,15 +173,17 @@ test.describe( 'Table', () => { test( 'allows columns to be aligned', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/table' } ); - await page.click( 'role=spinbutton[name="Column count"i]' ); + await editor.canvas.click( 'role=spinbutton[name="Column count"i]' ); await page.keyboard.press( 'Backspace' ); await page.keyboard.type( '4' ); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Click the first cell and add some text. Don't align. - const cells = page.locator( 'role=textbox[name="Body cell text"i]' ); + const cells = editor.canvas.locator( + 'role=textbox[name="Body cell text"i]' + ); await cells.nth( 0 ).click(); await page.keyboard.type( 'None' ); @@ -210,7 +218,7 @@ test.describe( 'Table', () => { await editor.openDocumentSettingsSidebar(); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Enable fixed width as it exacerbates the amount of empty space around the RichText. await page.click( @@ -221,11 +229,13 @@ test.describe( 'Table', () => { .check(); // Add multiple new lines to the first cell to make it taller. - await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' ); + await editor.canvas.click( + 'role=textbox[name="Body cell text"i] >> nth=0' + ); await page.keyboard.type( '\n\n\n\n' ); // Get the bounding client rect for the second cell. - const { x: secondCellX, y: secondCellY } = await page + const { x: secondCellX, y: secondCellY } = await editor.canvas .locator( 'role=textbox[name="Body cell text"] >> nth=1' ) .boundingBox(); @@ -241,10 +251,12 @@ test.describe( 'Table', () => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Click the first cell and add some text. - await page.click( 'role=document[name="Block: Table"i] >> figcaption' ); + await editor.canvas.click( + 'role=document[name="Block: Table"i] >> figcaption' + ); await page.keyboard.type( 'Caption!' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -252,7 +264,7 @@ test.describe( 'Table', () => { test( 'up and down arrow navigation', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); await page.keyboard.type( '1' ); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.type( '2' ); @@ -263,19 +275,18 @@ test.describe( 'Table', () => { expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); - test( 'should not have focus loss after creation', async ( { - editor, - page, - } ) => { + test( 'should not have focus loss after creation', async ( { editor } ) => { // Insert table block. await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await page.click( 'role=button[name="Create Table"i]' ); + await editor.canvas.click( 'role=button[name="Create Table"i]' ); // Focus should be in first td. await expect( - page.locator( 'role=textbox[name="Body cell text"i] >> nth=0' ) + editor.canvas.locator( + 'role=textbox[name="Body cell text"i] >> nth=0' + ) ).toBeFocused(); } ); } ); 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 07d3275563282..55207df05175b 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,7 @@ test.describe( 'Test Custom Post Types', () => { page, } ) => { await admin.createNewPost( { postType: 'hierar-no-title' } ); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Parent Post' ); await editor.publishPost(); @@ -53,7 +53,7 @@ test.describe( 'Test Custom Post Types', () => { await page.getByRole( 'listbox' ).getByRole( 'option' ).first().click(); const parentPage = await parentPageLocator.inputValue(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Child Post' ); await editor.publishPost(); await page.reload(); @@ -68,7 +68,7 @@ test.describe( 'Test Custom Post Types', () => { page, } ) => { await admin.createNewPost( { postType: 'leg_block_in_tpl' } ); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 21e942ddc2199..f98d8292ea8f6 100644 --- a/test/e2e/specs/editor/plugins/format-api.spec.js +++ b/test/e2e/specs/editor/plugins/format-api.spec.js @@ -21,7 +21,7 @@ test.describe( 'Using Format API', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 675b3861ee2a2..7257ccde72964 100644 --- a/test/e2e/specs/editor/plugins/hooks-api.spec.js +++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js @@ -19,8 +19,9 @@ test.describe( 'Using Hooks API', () => { test( 'Should contain a reset block button on the sidebar', async ( { page, + editor, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'First paragraph' ); await page.click( `role=region[name="Editor settings"i] >> role=tab[name="Settings"i]` @@ -34,10 +35,10 @@ test.describe( 'Using Hooks API', () => { editor, page, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'First paragraph' ); - const paragraphBlock = page.locator( + const paragraphBlock = editor.canvas.locator( 'role=document[name="Paragraph block"i]' ); await expect( paragraphBlock ).toHaveText( 'First paragraph' ); diff --git a/test/e2e/specs/editor/plugins/iframed-block.spec.js b/test/e2e/specs/editor/plugins/iframed-block.spec.js index 55b67cb70fe86..c5529d9108e9f 100644 --- a/test/e2e/specs/editor/plugins/iframed-block.spec.js +++ b/test/e2e/specs/editor/plugins/iframed-block.spec.js @@ -18,7 +18,9 @@ test.describe( 'Iframed block', () => { expect( await editor.getEditedPostContent() ).toMatchSnapshot(); await expect( - page.locator( 'role=document[name="Block: Iframed Block"i]' ) + editor.canvas.locator( + 'role=document[name="Block: Iframed Block"i]' + ) ).toContainText( 'Iframed Block (set with jQuery)' ); // open page from sidebar settings diff --git a/test/e2e/specs/editor/plugins/image-size.spec.js b/test/e2e/specs/editor/plugins/image-size.spec.js index a7502c93a2476..f2ba0e91b6733 100644 --- a/test/e2e/specs/editor/plugins/image-size.spec.js +++ b/test/e2e/specs/editor/plugins/image-size.spec.js @@ -52,7 +52,7 @@ test.describe( 'changing image size', () => { // Verify that the custom size was applied to the image. await expect( - page.locator( `role=img[name="${ filename }"]` ) + editor.canvas.locator( `role=img[name="${ filename }"]` ) ).toHaveCSS( 'width', '499px' ); await expect( page.locator( 'role=spinbutton[name="Width"i]' ) 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 2caffdf52abe2..c743d08d8ae68 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,7 @@ 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 page.focus( 'role=textbox[name="Add title"i]' ); + await editor.canvas.focus( 'role=textbox[name="Add title"i]' ); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.press( 'Backspace' ); await page.click( 'role=button[name="Save draft"i]' ); @@ -64,7 +64,7 @@ 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 page.fill( + await editor.canvas.fill( 'role=textbox[name="Add title"i]', 'My Empty Book' ); @@ -125,11 +125,11 @@ 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 page.fill( + await editor.canvas.fill( 'role=textbox[name="Add title"i]', 'My Image Format' ); - await page.focus( 'role=document[name="Block: Image"i]' ); + await editor.canvas.focus( 'role=document[name="Block: Image"i]' ); 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 27cf0b7b160bd..13720de509e3c 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,10 @@ test.describe( 'WP Editor Meta Boxes', () => { await admin.createNewPost(); // Add title to enable valid non-empty post save. - await page.type( 'role=textbox[name="Add title"i]', 'Hello Meta' ); + await editor.canvas.type( + 'role=textbox[name="Add title"i]', + 'Hello Meta' + ); // Type something. await page.click( 'role=button[name="Text"i]' ); diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index 5725f216d1cf2..112be374b8706 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -20,10 +20,12 @@ test.describe( 'a11y (@firefox, @webkit)', () => { test( 'navigating through the Editor regions four times should land on the Editor top bar region', async ( { page, pageUtils, + editor, } ) => { + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); // On a new post, initial focus is set on the Post title. await expect( - page.locator( 'role=textbox[name=/Add title/i]' ) + editor.canvas.locator( 'role=textbox[name=/Add title/i]' ) ).toBeFocused(); // Navigate to the 'Editor settings' region. await pageUtils.pressKeys( 'ctrl+`' ); diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js index d02a9167c0c3a..9fcacae05b63f 100644 --- a/test/e2e/specs/editor/various/block-deletion.spec.js +++ b/test/e2e/specs/editor/various/block-deletion.spec.js @@ -37,7 +37,7 @@ test.describe( 'Block deletion', () => { // Remove the current paragraph via the Block Toolbar options menu. await editor.showBlockToolbar(); - await editor.canvas + await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) .click(); @@ -84,7 +84,7 @@ test.describe( 'Block deletion', () => { // Remove the current paragraph via the Block Toolbar options menu. await editor.showBlockToolbar(); - await editor.canvas + await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) .click(); @@ -313,7 +313,7 @@ test.describe( 'Block deletion', () => { // Remove that paragraph via its options menu. await editor.showBlockToolbar(); - await editor.canvas + await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) .click(); diff --git a/test/e2e/specs/editor/various/block-mover.spec.js b/test/e2e/specs/editor/various/block-mover.spec.js index e90ee5f7f0122..4ed90191f2558 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 page.focus( 'text=First Paragraph' ); + await editor.canvas.focus( 'text=First Paragraph' ); 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 page.focus( 'text=First Paragraph' ); + await editor.canvas.focus( 'text=First Paragraph' ); await editor.showBlockToolbar(); // Ensure no block mover exists when only one block exists on the page. 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 0ea1908cd90ef..a1efbfa579b9a 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 page.focus( 'role=textbox[name="HTML"i]' ); + await editor.canvas.focus( 'role=textbox[name="HTML"i]' ); 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 c215da33f3ec5..d190f0e824c0a 100644 --- a/test/e2e/specs/editor/various/content-only-lock.spec.js +++ b/test/e2e/specs/editor/various/content-only-lock.spec.js @@ -24,7 +24,7 @@ test.describe( 'Content-only lock', () => { ` ); await pageUtils.pressKeys( 'secondary+M' ); - await page.click( 'role=document[name="Paragraph block"i]' ); + await editor.canvas.click( 'role=document[name="Paragraph block"i]' ); await page.keyboard.type( ' World' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); 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 cb040504de4c8..b1c63a4fac71d 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,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Copy - collapsed selection' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -31,7 +31,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Cut - collapsed selection' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -59,7 +59,7 @@ test.describe( 'Copy/cut/paste', () => { await page.evaluate( () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); } ); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -78,7 +78,7 @@ test.describe( 'Copy/cut/paste', () => { await page.evaluate( () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); } ); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -88,7 +88,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'First block' ); await page.keyboard.press( 'Enter' ); @@ -240,7 +240,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'A block' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'B block' ); @@ -252,7 +252,7 @@ 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 page.waitForFunction( + await editor.canvas.waitForFunction( () => window.getSelection().type === 'Caret' ); // Create a new block at the top of the document to paste there. @@ -267,7 +267,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'A block' ); await editor.insertBlock( { name: 'core/spacer' } ); await page.keyboard.press( 'Enter' ); @@ -280,7 +280,7 @@ 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 page.waitForFunction( + await editor.canvas.waitForFunction( () => window.getSelection().type === 'Caret' ); // Create a new block at the top of the document to paste there. @@ -295,7 +295,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'A block' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'B block' ); @@ -307,7 +307,7 @@ 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 page.waitForFunction( + await editor.canvas.waitForFunction( () => window.getSelection().type === 'Caret' ); // Create a new block at the top of the document to paste there. @@ -322,7 +322,7 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'A block' ); await editor.insertBlock( { name: 'core/spacer' } ); await page.keyboard.press( 'Enter' ); @@ -335,7 +335,7 @@ 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 page.waitForFunction( + await editor.canvas.waitForFunction( () => window.getSelection().type === 'Caret' ); // Create a new block at the top of the document to paste there. @@ -362,7 +362,7 @@ 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 page.waitForFunction( + await editor.canvas.waitForFunction( () => window.getSelection().type === 'Caret' ); // Create a new block at the top of the document to paste there. @@ -389,7 +389,7 @@ 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 page.waitForFunction( + await editor.canvas.waitForFunction( () => window.getSelection().type === 'Caret' ); // Create a new code block to paste there. @@ -399,8 +399,8 @@ test.describe( 'Copy/cut/paste', () => { } ); test( 'should paste single line in post title', async ( { - page, pageUtils, + editor, } ) => { // This test checks whether we are correctly handling single line // pasting in the post title. Previously we were accidentally falling @@ -413,13 +413,16 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+v' ); // Expect the span to be filtered out. expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await editor.canvas.evaluate( + () => document.activeElement.innerHTML + ) ).toMatchSnapshot(); } ); test( 'should paste single line in post title with existing content', async ( { page, pageUtils, + editor, } ) => { await page.keyboard.type( 'ab' ); await page.keyboard.press( 'ArrowLeft' ); @@ -430,7 +433,9 @@ test.describe( 'Copy/cut/paste', () => { // Ensure the selection is correct. await page.keyboard.type( 'y' ); expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await editor.canvas.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 d73040bafa48c..05b8f40c1f870 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -42,7 +42,9 @@ test.describe( 'Draggable block', () => {

2

` ); - await page.focus( 'role=document[name="Paragraph block"i] >> text=2' ); + await editor.canvas.focus( + 'role=document[name="Paragraph block"i] >> text=2' + ); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -54,7 +56,7 @@ test.describe( 'Draggable block', () => { await page.mouse.down(); // Move to and hover on the upper half of the paragraph block to trigger the indicator. - const firstParagraph = page.locator( + const firstParagraph = editor.canvas.locator( 'role=document[name="Paragraph block"i] >> text=1' ); const firstParagraphBound = await firstParagraph.boundingBox(); @@ -112,7 +114,9 @@ test.describe( 'Draggable block', () => {

2

` ); - await page.focus( 'role=document[name="Paragraph block"i] >> text=1' ); + await editor.canvas.focus( + 'role=document[name="Paragraph block"i] >> text=1' + ); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -124,7 +128,7 @@ test.describe( 'Draggable block', () => { await page.mouse.down(); // Move to and hover on the bottom half of the paragraph block to trigger the indicator. - const secondParagraph = page.locator( + const secondParagraph = editor.canvas.locator( 'role=document[name="Paragraph block"i] >> text=2' ); const secondParagraphBound = await secondParagraph.boundingBox(); @@ -193,7 +197,9 @@ test.describe( 'Draggable block', () => { ], } ); - await page.focus( 'role=document[name="Paragraph block"i] >> text=2' ); + await editor.canvas.focus( + 'role=document[name="Paragraph block"i] >> text=2' + ); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -205,7 +211,7 @@ test.describe( 'Draggable block', () => { await page.mouse.down(); // Move to and hover on the left half of the paragraph block to trigger the indicator. - const firstParagraph = page.locator( + const firstParagraph = editor.canvas.locator( 'role=document[name="Paragraph block"i] >> text=1' ); const firstParagraphBound = await firstParagraph.boundingBox(); @@ -272,7 +278,9 @@ test.describe( 'Draggable block', () => { ], } ); - await page.focus( 'role=document[name="Paragraph block"i] >> text=1' ); + await editor.canvas.focus( + 'role=document[name="Paragraph block"i] >> text=1' + ); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -284,7 +292,7 @@ test.describe( 'Draggable block', () => { await page.mouse.down(); // Move to and hover on the right half of the paragraph block to trigger the indicator. - const secondParagraph = page.locator( + const secondParagraph = editor.canvas.locator( 'role=document[name="Paragraph block"i] >> text=2' ); const secondParagraphBound = await secondParagraph.boundingBox(); 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 e63a5984443bc..ddc47e3ee6de6 100644 --- a/test/e2e/specs/editor/various/font-size-picker.spec.js +++ b/test/e2e/specs/editor/various/font-size-picker.spec.js @@ -24,7 +24,9 @@ test.describe( 'Font Size Picker', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); 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]' @@ -45,7 +47,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph reset - custom size' ); await page.click( 'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]' @@ -135,7 +139,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph to be made "large"' ); await page.click( 'role=group[name="Font size"i] >> role=button[name="Font size"i]' @@ -155,7 +161,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph with font size reset using tools panel menu' ); @@ -186,7 +194,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph with font size reset using input field' ); @@ -221,7 +231,9 @@ test.describe( 'Font Size Picker', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph to be made "large"' ); await page.click( 'role=radiogroup[name="Font size"i] >> role=radio[name="Large"i]' @@ -238,7 +250,9 @@ test.describe( 'Font Size Picker', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph with font size reset using tools panel menu' ); @@ -267,7 +281,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( + 'role=button[name="Add default block"i]' + ); await page.keyboard.type( 'Paragraph with font size reset using input field' ); 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 87ad260428198..e1588e57beb10 100644 --- a/test/e2e/specs/editor/various/inner-blocks-templates.spec.js +++ b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js @@ -28,7 +28,7 @@ test.describe( 'Inner blocks templates', () => { name: 'test/test-inner-blocks-async-template', } ); - const blockWithTemplateContent = page.locator( + const blockWithTemplateContent = editor.canvas.locator( 'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo' ); diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index 0ddb2b6b59228..ac3aa08ae58e3 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -39,7 +39,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { name: 'core/paragraph', attributes: { content: 'Dummy text' }, } ); - const paragraphBlock = page.locator( + const paragraphBlock = editor.canvas.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -116,7 +116,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { const beforeContent = await editor.getEditedPostContent(); - const paragraphBlock = page.locator( + const paragraphBlock = editor.canvas.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -176,7 +176,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { attributes: { content: 'Dummy text' }, } ); - const paragraphBlock = page.locator( + const paragraphBlock = editor.canvas.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -244,7 +244,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { const beforeContent = await editor.getEditedPostContent(); - const paragraphBlock = page.locator( + const paragraphBlock = editor.canvas.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); 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 e4857f84d46c3..563b1584fa080 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 @@ -12,7 +12,7 @@ test.describe( 'Keep styles on block transforms', () => { page, editor, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## Heading' ); await editor.openDocumentSettingsSidebar(); await page.click( 'role=button[name="Color Text styles"i]' ); @@ -38,7 +38,7 @@ test.describe( 'Keep styles on block transforms', () => { editor, } ) => { // Create a paragraph block with some content. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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' ); @@ -71,7 +71,7 @@ test.describe( 'Keep styles on block transforms', () => { editor, } ) => { // Create a paragraph block with some content. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 2dc138e781918..4d699c8764137 100644 --- a/test/e2e/specs/editor/various/list-view.spec.js +++ b/test/e2e/specs/editor/various/list-view.spec.js @@ -336,7 +336,7 @@ test.describe( 'List View', () => { await pageUtils.pressKeys( 'shift+Tab' ); await pageUtils.pressKeys( 'shift+Tab' ); await expect( - editor.canvas + page .getByRole( 'region', { name: 'Document Overview' } ) .getByRole( 'button', { name: 'Close', @@ -354,7 +354,7 @@ test.describe( 'List View', () => { // tab receives similar focus events based on the shortcut. await pageUtils.pressKeys( 'shift+Tab' ); await page.keyboard.press( 'ArrowRight' ); - const outlineButton = editor.canvas.getByRole( 'tab', { + const outlineButton = page.getByRole( 'tab', { name: 'Outline', } ); await expect( outlineButton ).toBeFocused(); diff --git a/test/e2e/specs/editor/various/mentions.spec.js b/test/e2e/specs/editor/various/mentions.spec.js index b7e75e046c471..061b8d67a0801 100644 --- a/test/e2e/specs/editor/various/mentions.spec.js +++ b/test/e2e/specs/editor/various/mentions.spec.js @@ -23,7 +23,7 @@ test.describe( 'autocomplete mentions', () => { } ); test( 'should insert mention', async ( { page, editor } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'I am @ad' ); await expect( page.locator( 'role=listbox >> role=option[name=/admin/i]' ) @@ -42,7 +42,7 @@ test.describe( 'autocomplete mentions', () => { editor, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Stuck in the middle with you' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 'you'.length } ); await page.keyboard.type( '@j' ); @@ -62,7 +62,7 @@ test.describe( 'autocomplete mentions', () => { page, editor, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 d72ab2c6bf7db..6dc2a8b266e7f 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js @@ -304,6 +304,7 @@ test.describe( 'Multi-block selection', () => { .filter( { hasText: 'Draft saved' } ) ).toBeVisible(); await page.reload(); + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); await editor.canvas .getByRole( 'document', { name: 'Paragraph block' } ) @@ -867,7 +868,6 @@ test.describe( 'Multi-block selection', () => { } ); test( 'should select title if the cursor is on title', async ( { - page, editor, pageUtils, multiBlockSelectionUtils, @@ -890,7 +890,7 @@ test.describe( 'Multi-block selection', () => { .toEqual( [] ); await expect .poll( () => - page.evaluate( () => window.getSelection().toString() ) + editor.canvas.evaluate( () => window.getSelection().toString() ) ) .toBe( 'Post title' ); } ); diff --git a/test/e2e/specs/editor/various/new-post-default-content.spec.js b/test/e2e/specs/editor/various/new-post-default-content.spec.js index 82c8e3a948f31..db9e3c38dc296 100644 --- a/test/e2e/specs/editor/various/new-post-default-content.spec.js +++ b/test/e2e/specs/editor/various/new-post-default-content.spec.js @@ -27,7 +27,7 @@ test.describe( 'new editor filtered state', () => { // Assert they match what the plugin set. await expect( - page.locator( 'role=textbox[name="Add title"i]' ) + editor.canvas.locator( 'role=textbox[name="Add title"i]' ) ).toHaveText( 'My default title' ); await expect .poll( editor.getEditedPostContent ) diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js index e58e8ed94ffc5..4b192693c07b0 100644 --- a/test/e2e/specs/editor/various/new-post.spec.js +++ b/test/e2e/specs/editor/various/new-post.spec.js @@ -26,7 +26,9 @@ test.describe( 'new editor state', () => { await expect( page ).toHaveURL( /post-new.php/ ); // Should display the blank title. - const title = page.locator( 'role=textbox[name="Add title"i]' ); + const title = editor.canvas.locator( + 'role=textbox[name="Add title"i]' + ); await expect( title ).toBeEditable(); await expect( title ).toHaveText( '' ); @@ -55,23 +57,24 @@ test.describe( 'new editor state', () => { test( 'should focus the title if the title is empty', async ( { admin, - page, + editor, } ) => { await admin.createNewPost(); await expect( - page.locator( 'role=textbox[name="Add title"i]' ) + editor.canvas.locator( 'role=textbox[name="Add title"i]' ) ).toBeFocused(); } ); test( 'should not focus the title if the title exists', async ( { admin, page, + editor, } ) => { await admin.createNewPost(); // Enter a title for this post. - await page.type( + await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Here is the title' ); diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js index 611e260e17de5..3f83221c27b81 100644 --- a/test/e2e/specs/editor/various/post-visibility.spec.js +++ b/test/e2e/specs/editor/various/post-visibility.spec.js @@ -78,7 +78,7 @@ test.describe( 'Post visibility', () => { await admin.createNewPost(); // Enter a title for this post. - await page.type( 'role=textbox[name="Add title"i]', 'Title' ); + await editor.canvas.type( 'role=textbox[name="Add title"i]', '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 d71d9ada9b510..3f5e6eef60d3d 100644 --- a/test/e2e/specs/editor/various/preview.spec.js +++ b/test/e2e/specs/editor/various/preview.spec.js @@ -27,7 +27,7 @@ test.describe( 'Preview', () => { editorPage.locator( 'role=button[name="Preview"i]' ) ).toBeDisabled(); - await editorPage.type( + await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Hello World' ); @@ -48,7 +48,7 @@ test.describe( 'Preview', () => { // Return to editor to change title. await editorPage.bringToFront(); - await editorPage.type( 'role=textbox[name="Add title"i]', '!' ); + await editor.canvas.type( 'role=textbox[name="Add title"i]', '!' ); await previewUtils.waitForPreviewNavigation( previewPage ); // Title in preview should match updated input. @@ -70,7 +70,7 @@ test.describe( 'Preview', () => { // Return to editor to change title. await editorPage.bringToFront(); - await editorPage.fill( + await editor.canvas.fill( 'role=textbox[name="Add title"i]', 'Hello World! And more.' ); @@ -107,7 +107,7 @@ test.describe( 'Preview', () => { const editorPage = page; // Type aaaaa in the title field. - await editorPage.type( 'role=textbox[name="Add title"]', 'aaaaa' ); + await editor.canvas.type( 'role=textbox[name="Add title"]', 'aaaaa' ); await editorPage.keyboard.press( 'Tab' ); // Save the post as a draft. @@ -127,7 +127,7 @@ test.describe( 'Preview', () => { await editorPage.bringToFront(); // Append bbbbb to the title, and tab away from the title so blur event is triggered. - await editorPage.fill( + await editor.canvas.fill( 'role=textbox[name="Add title"i]', 'aaaaabbbbb' ); @@ -155,7 +155,7 @@ test.describe( 'Preview', () => { const editorPage = page; // Type Lorem in the title field. - await editorPage.type( 'role=textbox[name="Add title"i]', 'Lorem' ); + await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Lorem' ); // Open the preview page. const previewPage = await editor.openPreviewPage( editorPage ); @@ -172,7 +172,7 @@ test.describe( 'Preview', () => { await page.click( 'role=button[name="Close panel"i]' ); // Change the title and preview again. - await editorPage.type( 'role=textbox[name="Add title"i]', ' Ipsum' ); + await editor.canvas.type( 'role=textbox[name="Add title"i]', ' Ipsum' ); await previewUtils.waitForPreviewNavigation( previewPage ); // Title in preview should match updated input. @@ -191,7 +191,7 @@ test.describe( 'Preview', () => { ).toBeVisible(); // Change the title. - await editorPage.type( 'role=textbox[name="Add title"i]', ' Draft' ); + await editor.canvas.type( 'role=textbox[name="Add title"i]', ' Draft' ); // Open the preview page. await previewUtils.waitForPreviewNavigation( previewPage ); @@ -222,7 +222,10 @@ test.describe( 'Preview with Custom Fields enabled', () => { const editorPage = page; // Add an initial title and content. - await editorPage.type( 'role=textbox[name="Add title"i]', 'title 1' ); + await editor.canvas.type( + 'role=textbox[name="Add title"i]', + 'title 1' + ); await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'content 1' }, @@ -246,8 +249,11 @@ test.describe( 'Preview with Custom Fields enabled', () => { // Return to editor and modify the title and content. await editorPage.bringToFront(); - await editorPage.fill( 'role=textbox[name="Add title"i]', 'title 2' ); - await editorPage.fill( + await editor.canvas.fill( + 'role=textbox[name="Add title"i]', + 'title 2' + ); + await editor.canvas.fill( 'role=document >> text="content 1"', 'content 2' ); diff --git a/test/e2e/specs/editor/various/rtl.spec.js b/test/e2e/specs/editor/various/rtl.spec.js index 899dfd3c87dde..8475605e339fc 100644 --- a/test/e2e/specs/editor/various/rtl.spec.js +++ b/test/e2e/specs/editor/various/rtl.spec.js @@ -150,7 +150,7 @@ test.describe( 'RTL', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 08aa33ec09552..16b5225cfc8d3 100644 --- a/test/e2e/specs/editor/various/splitting-merging.spec.js +++ b/test/e2e/specs/editor/various/splitting-merging.spec.js @@ -306,11 +306,11 @@ test.describe( 'splitting and merging blocks', () => { // There is a default block and post title: await expect( - page.locator( 'role=document[name=/Empty block/i]' ) + editor.canvas.locator( 'role=document[name=/Empty block/i]' ) ).toBeVisible(); await expect( - page.locator( 'role=textbox[name="Add title"i]' ) + editor.canvas.locator( 'role=textbox[name="Add title"i]' ) ).toBeVisible(); // But the effective saved content is still empty: @@ -318,7 +318,7 @@ test.describe( 'splitting and merging blocks', () => { // And focus is retained: await expect( - page.locator( 'role=document[name=/Empty block/i]' ) + editor.canvas.locator( 'role=document[name=/Empty block/i]' ) ).toBeFocused(); } ); 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 ccb5952a57125..834bed77e8742 100644 --- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js +++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js @@ -104,7 +104,7 @@ test.describe( 'Toolbar roving tabindex', () => { // Move focus to the first toolbar item. await page.keyboard.press( 'Home' ); await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' ); - await page.click( `role=button[name="Create Table"i]` ); + await editor.canvas.click( `role=button[name="Create Table"i]` ); await pageUtils.pressKeys( 'Tab' ); await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( 'Body cell text', @@ -188,15 +188,19 @@ class ToolbarRovingTabindexUtils { } async expectLabelToHaveFocus( label ) { - let ariaLabel = await this.page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ); + let ariaLabel = await this.page.evaluate( () => { + const { activeElement } = + document.activeElement.contentDocument ?? document; + return activeElement.getAttribute( 'aria-label' ); + } ); // If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block. if ( ariaLabel !== label ) { await this.page.keyboard.press( 'ArrowUp' ); - ariaLabel = await this.page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ); + ariaLabel = await this.page.evaluate( () => { + const { activeElement } = + document.activeElement.contentDocument ?? document; + return activeElement.getAttribute( 'aria-label' ); + } ); } expect( ariaLabel ).toBe( label ); } diff --git a/test/e2e/specs/editor/various/undo.spec.js b/test/e2e/specs/editor/various/undo.spec.js index a4b68e1036dcf..63e7fcb16c4a5 100644 --- a/test/e2e/specs/editor/various/undo.spec.js +++ b/test/e2e/specs/editor/various/undo.spec.js @@ -20,7 +20,7 @@ test.describe( 'undo', () => { pageUtils, undoUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'before pause' ); await editor.page.waitForTimeout( 1000 ); await page.keyboard.type( ' after pause' ); @@ -88,7 +88,7 @@ test.describe( 'undo', () => { pageUtils, undoUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'before keyboard ' ); await pageUtils.pressKeys( 'primary+b' ); @@ -159,8 +159,8 @@ test.describe( 'undo', () => { } ); } ); - test( 'should undo bold', async ( { page, pageUtils } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + test( 'should undo bold', async ( { page, pageUtils, editor } ) => { + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); await page.click( 'role=button[name="Save draft"i]' ); await expect( @@ -169,7 +169,8 @@ test.describe( 'undo', () => { ) ).toBeVisible(); await page.reload(); - await page.click( '[data-type="core/paragraph"]' ); + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); + await editor.canvas.click( '[data-type="core/paragraph"]' ); await pageUtils.pressKeys( 'primary+a' ); await pageUtils.pressKeys( 'primary+b' ); await pageUtils.pressKeys( 'primary+z' ); @@ -183,7 +184,7 @@ test.describe( 'undo', () => { pageUtils, undoUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); const firstBlock = await editor.getEditedPostContent(); @@ -326,7 +327,7 @@ test.describe( 'undo', () => { // See: https://github.com/WordPress/gutenberg/issues/14950 // Issue is demonstrated from an edited post: create, save, and reload. - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'original' ); await page.click( 'role=button[name="Save draft"i]' ); await expect( @@ -335,10 +336,11 @@ 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 page.click( '[data-type="core/paragraph"] >> nth=0' ); + await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' ); await page.keyboard.type( 'modified' ); // The issue is demonstrated after the one second delay to trigger the @@ -360,7 +362,7 @@ test.describe( 'undo', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1' ); await page.click( 'role=button[name="Save draft"i]' ); await expect( @@ -378,7 +380,7 @@ test.describe( 'undo', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1' ); await editor.publishPost(); await pageUtils.pressKeys( 'primary+z' ); @@ -391,7 +393,7 @@ test.describe( 'undo', () => { page, pageUtils, } ) => { - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1' ); await page.click( 'role=button[name="Save draft"i]' ); @@ -406,7 +408,7 @@ test.describe( 'undo', () => { await expect( page.locator( 'role=button[name="Undo"]' ) ).toBeDisabled(); - await page.click( '[data-type="core/paragraph"]' ); + await editor.canvas.click( '[data-type="core/paragraph"]' ); await page.keyboard.type( '2' ); @@ -436,7 +438,7 @@ test.describe( 'undo', () => { // block attribute as in the previous action and results in transient edits // and skipping `undo` history steps. const text = 'tonis'; - await page.click( 'role=button[name="Add default block"i]' ); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); 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 80e3fb3b12682..99de69819d9f3 100644 --- a/test/e2e/specs/editor/various/writing-flow.spec.js +++ b/test/e2e/specs/editor/various/writing-flow.spec.js @@ -4,8 +4,8 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.use( { - writingFlowUtils: async ( { page }, use ) => { - await use( new WritingFlowUtils( { page } ) ); + writingFlowUtils: async ( { page, editor }, use ) => { + await use( new WritingFlowUtils( { page, editor } ) ); }, } ); @@ -29,7 +29,7 @@ test.describe( 'Writing Flow', () => { // See: https://github.com/WordPress/gutenberg/issues/18928 await writingFlowUtils.addDemoContent(); - const activeElementLocator = page.locator( ':focus' ); + const activeElementLocator = editor.canvas.locator( ':focus' ); // Arrow up into nested context focuses last text input. await page.keyboard.press( 'ArrowUp' ); @@ -46,7 +46,7 @@ test.describe( 'Writing Flow', () => { .poll( writingFlowUtils.getActiveBlockName ) .toBe( 'core/column' ); await page.keyboard.press( 'ArrowUp' ); - const activeElementBlockType = await page.evaluate( () => + const activeElementBlockType = await editor.canvas.evaluate( () => document.activeElement.getAttribute( 'data-type' ) ); expect( activeElementBlockType ).toBe( 'core/columns' ); @@ -317,25 +317,25 @@ test.describe( 'Writing Flow', () => { await editor.insertBlock( { name: 'core/paragraph' } ); await page.keyboard.type( 'abc' ); // Need content to remove placeholder label. await editor.selectBlocks( - page.locator( 'role=document[name="Block: Shortcode"i]' ) + editor.canvas.locator( 'role=document[name="Block: Shortcode"i]' ) ); // Should remain in title upon ArrowRight: await page.keyboard.press( 'ArrowRight' ); await expect( - page.locator( 'role=document[name="Block: Shortcode"i]' ) + editor.canvas.locator( 'role=document[name="Block: Shortcode"i]' ) ).toHaveClass( /is-selected/ ); // Should remain in title upon modifier + ArrowDown: await pageUtils.pressKeys( 'primary+ArrowDown' ); await expect( - page.locator( 'role=document[name="Block: Shortcode"i]' ) + editor.canvas.locator( 'role=document[name="Block: Shortcode"i]' ) ).toHaveClass( /is-selected/ ); // Should navigate to the next block. await page.keyboard.press( 'ArrowDown' ); await expect( - page.locator( 'role=document[name="Paragraph block"i]' ) + editor.canvas.locator( 'role=document[name="Paragraph block"i]' ) ).toHaveClass( /is-selected/ ); } ); @@ -447,12 +447,12 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); - await page.evaluate( () => { + await editor.canvas.evaluate( () => { document.activeElement.style.paddingTop = '100px'; } ); await page.keyboard.press( 'ArrowUp' ); await page.keyboard.type( '1' ); - await page.evaluate( () => { + await editor.canvas.evaluate( () => { document.activeElement.style.paddingBottom = '100px'; } ); await page.keyboard.press( 'ArrowDown' ); @@ -467,7 +467,7 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); - await page.evaluate( () => { + await editor.canvas.evaluate( () => { document.activeElement.style.lineHeight = 'normal'; } ); await page.keyboard.press( 'ArrowUp' ); @@ -650,7 +650,7 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); - await page.evaluate( () => { + await editor.canvas.evaluate( () => { document.activeElement.style.paddingLeft = '100px'; } ); await page.keyboard.press( 'Enter' ); @@ -696,7 +696,7 @@ test.describe( 'Writing Flow', () => { await page.keyboard.type( '2' ); await page.keyboard.press( 'ArrowUp' ); - const paragraphBlock = page + const paragraphBlock = editor.canvas .locator( 'role=document[name="Paragraph block"i]' ) .first(); const paragraphRect = await paragraphBlock.boundingBox(); @@ -761,7 +761,7 @@ test.describe( 'Writing Flow', () => {
` ); - const paragraphBlock = page.locator( + const paragraphBlock = editor.canvas.locator( 'role=document[name="Paragraph block"i]' ); @@ -784,7 +784,7 @@ test.describe( 'Writing Flow', () => { await page.mouse.click( x, lowerInserterY ); await expect( - page.locator( 'role=document[name="Block: Image"i]' ) + editor.canvas.locator( 'role=document[name="Block: Image"i]' ) ).toHaveClass( /is-selected/ ); } ); @@ -802,7 +802,7 @@ test.describe( 'Writing Flow', () => { // Create the table. await page.keyboard.press( 'Space' ); await expect( - page.locator( 'role=document[name="Block: Table"i]' ) + editor.canvas.locator( 'role=document[name="Block: Table"i]' ) ).toBeVisible(); // Navigate to the second cell. await page.keyboard.press( 'ArrowRight' ); @@ -867,7 +867,7 @@ test.describe( 'Writing Flow', () => { await page.mouse.up(); await expect( - page.locator( 'role=document[name="Paragraph block"i]' ) + editor.canvas.locator( 'role=document[name="Paragraph block"i]' ) ).toHaveClass( /is-selected/ ); } ); @@ -901,12 +901,13 @@ test.describe( 'Writing Flow', () => { test( 'should move to the start of the first line on ArrowUp', async ( { page, + editor, } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'a' ); async function getHeight() { - return await page.evaluate( + return await editor.canvas.evaluate( () => document.activeElement.offsetHeight ); } @@ -928,18 +929,19 @@ test.describe( 'Writing Flow', () => { // Expect the "." to be added at the start of the paragraph await expect( - page.locator( 'role=document[name="Paragraph block"i]' ) + editor.canvas.locator( 'role=document[name="Paragraph block"i]' ) ).toHaveText( /^\.a+$/ ); } ); test( 'should vertically move the caret from corner to corner', async ( { page, + editor, } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'a' ); async function getHeight() { - return await page.evaluate( + return await editor.canvas.evaluate( () => document.activeElement.offsetHeight ); } @@ -961,19 +963,20 @@ test.describe( 'Writing Flow', () => { // Expect the "." to be added at the start of the paragraph await expect( - page.locator( 'role=document[name="Paragraph block"i]' ) + editor.canvas.locator( 'role=document[name="Paragraph block"i]' ) ).toHaveText( /^a+\.a$/ ); } ); test( 'should vertically move the caret when pressing Alt', async ( { page, pageUtils, + editor, } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'a' ); async function getHeight() { - return await page.evaluate( + return await editor.canvas.evaluate( () => document.activeElement.offsetHeight ); } @@ -995,14 +998,17 @@ test.describe( 'Writing Flow', () => { // Expect the "." to be added at the start of the paragraph await expect( - page.locator( 'role=document[name="Paragraph block"i] >> nth = 0' ) + editor.canvas.locator( + 'role=document[name="Paragraph block"i] >> nth = 0' + ) ).toHaveText( /^.a+$/ ); } ); } ); class WritingFlowUtils { - constructor( { page } ) { + constructor( { page, editor } ) { this.page = page; + this.editor = editor; this.getActiveBlockName = this.getActiveBlockName.bind( this ); } @@ -1021,19 +1027,19 @@ class WritingFlowUtils { await this.page.keyboard.press( 'Enter' ); await this.page.keyboard.type( '/columns' ); await this.page.keyboard.press( 'Enter' ); - await this.page.click( + await this.editor.canvas.click( 'role=button[name="Two columns; equal split"i]' ); - await this.page.click( 'role=button[name="Add block"i]' ); + await this.editor.canvas.click( 'role=button[name="Add block"i]' ); 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.page.focus( + await this.editor.canvas.focus( 'role=document[name="Block: Column (2 of 2)"i]' ); - await this.page.click( 'role=button[name="Add block"i]' ); + await this.editor.canvas.click( 'role=button[name="Add block"i]' ); await this.page.click( 'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]' ); diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js index 110ce28948f22..8b2a585dc4e66 100644 --- a/test/e2e/specs/widgets/customizing-widgets.spec.js +++ b/test/e2e/specs/widgets/customizing-widgets.spec.js @@ -36,7 +36,11 @@ test.describe( 'Widgets Customizer', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test( 'should add blocks', async ( { page, widgetsCustomizerPage } ) => { + test( 'should add blocks', async ( { + page, + widgetsCustomizerPage, + editor, + } ) => { const previewFrame = widgetsCustomizerPage.previewFrame; await widgetsCustomizerPage.visitCustomizerPage(); @@ -82,7 +86,7 @@ test.describe( 'Widgets Customizer', () => { await page.click( 'role=option[name="Search"i]' ); - await page.focus( + await editor.canvas.focus( 'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]' ); @@ -229,6 +233,7 @@ test.describe( 'Widgets Customizer', () => { page, requestUtils, widgetsCustomizerPage, + editor, } ) => { await requestUtils.addWidgetBlock( `\n

First Paragraph

\n`, @@ -277,7 +282,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 = page.locator( + const headingBlock = editor.canvas.locator( 'role=document[name="Block: Heading"i] >> text="First Heading"' ); await expect( headingBlock ).toBeFocused(); @@ -583,12 +588,13 @@ 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 = page.locator( + const HTMLBlockTextarea = editor.canvas.locator( 'role=document[name="Block: Custom HTML"i] >> role=textbox[name="HTML"i]' ); await HTMLBlockTextarea.type( 'hello' ); From afac048362ea4e02127cf7ce02b849abc502b8f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 1 Jun 2023 17:47:59 +0300 Subject: [PATCH 2/8] Skip inserting tests --- test/e2e/specs/editor/various/inserting-blocks.spec.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index ac3aa08ae58e3..39c159b00b75c 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -15,8 +15,16 @@ test.use( { } ); test.describe( 'Inserting blocks (@firefox, @webkit)', () => { - test.beforeEach( async ( { admin } ) => { + test.beforeEach( async ( { admin, page } ) => { await admin.createNewPost(); + // To do: some drag an drop tests are failing, so run them without + // iframe for now. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); } ); test.afterAll( async ( { requestUtils } ) => { From 8d78d04a095c15240c2c5ecd049c23c38a886291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 2 Jun 2023 11:24:47 +0300 Subject: [PATCH 3/8] more e2e --- packages/block-library/src/details/block.json | 1 - .../specs/editor/plugins/annotations.test.js | 7 +++++ .../editor/various/reusable-blocks.test.js | 3 +++ test/e2e/specs/editor/blocks/classic.spec.js | 27 ++++++++++--------- test/e2e/specs/editor/blocks/image.spec.js | 9 ++++++- test/e2e/specs/editor/blocks/list.spec.js | 7 +++++ .../e2e/specs/editor/blocks/paragraph.spec.js | 7 +++++ test/e2e/specs/editor/various/a11y.spec.js | 8 +++++- .../editor/various/content-only-lock.spec.js | 2 +- .../editor/various/copy-cut-paste.spec.js | 7 +++++ .../editor/various/draggable-blocks.spec.js | 7 +++++ .../keep-styles-on-block-transforms.spec.js | 7 +++++ .../specs/editor/various/list-view.spec.js | 7 +++++ .../various/multi-block-selection.spec.js | 14 ++++++++++ test/e2e/specs/editor/various/undo.spec.js | 19 ++++++++----- 15 files changed, 108 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json index a96707fa63494..f3a0c00defdc3 100644 --- a/packages/block-library/src/details/block.json +++ b/packages/block-library/src/details/block.json @@ -1,7 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, - "__experimental": true, "name": "core/details", "title": "Details", "category": "text", diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js index 214f38a36b0df..f0134812d4a7e 100644 --- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/annotations.test.js @@ -29,6 +29,13 @@ describe( 'Annotations', () => { beforeEach( async () => { await createNewPost(); + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); } ); /** diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 56ceed530bfdd..3215e4185c08f 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -236,6 +236,7 @@ describe( 'Reusable blocks', () => { await editButton.click(); await page.waitForNavigation(); + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); // Click the block to give it focus. const blockSelector = 'p[data-title="Paragraph"]'; @@ -296,6 +297,7 @@ describe( 'Reusable blocks', () => { await insertReusableBlock( 'Duplicated reusable block' ); await saveDraft(); await page.reload(); + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); // Wait for the paragraph to be loaded. await canvas().waitForSelector( @@ -359,6 +361,7 @@ describe( 'Reusable blocks', () => { insertBlock( 'Quote' ); await saveDraft(); await page.reload(); + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); // The quote block should have a visible preview in the sidebar for this test to be valid. const quoteBlock = await canvas().waitForSelector( diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index 00a14c191efbb..d2b5e0362e048 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/test/e2e/specs/editor/blocks/classic.spec.js @@ -18,8 +18,15 @@ test.use( { } ); test.describe( 'Classic', () => { - test.beforeEach( async ( { admin } ) => { + test.beforeEach( async ( { admin, page } ) => { await admin.createNewPost(); + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); } ); test.afterAll( async ( { requestUtils } ) => { @@ -29,12 +36,10 @@ test.describe( 'Classic', () => { test( 'should be inserted', async ( { editor, page, pageUtils } ) => { await editor.insertBlock( { name: 'core/freeform' } ); // Ensure there is focus. - await page.waitForSelector( '.mce-tinymce iframe' ); - await page.click( '.mce-tinymce iframe' ); + await page.click( '.mce-content-body' ); await page.keyboard.type( 'test' ); // Move focus away. await pageUtils.pressKeys( 'shift+Tab' ); - await page.keyboard.press( 'Enter' ); await expect.poll( editor.getEditedPostContent ).toBe( 'test' ); } ); @@ -47,8 +52,7 @@ test.describe( 'Classic', () => { } ) => { await editor.insertBlock( { name: 'core/freeform' } ); // Ensure there is focus. - await page.waitForSelector( '.mce-tinymce iframe' ); - await page.click( '.mce-tinymce iframe' ); + await page.click( '.mce-content-body' ); await page.keyboard.type( 'test' ); await page.getByRole( 'button', { name: /Add Media/i } ).click(); @@ -77,13 +81,12 @@ test.describe( 'Classic', () => { await page.click( 'role=button[name="Insert gallery"i]' ); await pageUtils.pressKeys( 'shift+Tab' ); - await page.keyboard.press( 'Enter' ); await expect .poll( editor.getEditedPostContent ) .toMatch( /\[gallery ids=\"\d+\"\]/ ); await editor.clickBlockToolbarButton( 'Convert to blocks' ); - const galleryBlock = editor.canvas.locator( + const galleryBlock = page.locator( 'role=document[name="Block: Gallery"i]' ); await expect( galleryBlock ).toBeVisible(); @@ -91,7 +94,7 @@ test.describe( 'Classic', () => { // Check that you can undo back to a Classic block gallery in one step. await pageUtils.pressKeys( 'primary+z' ); await expect( - editor.canvas.locator( 'role=document[name="Block: Classic"i]' ) + page.locator( 'role=document[name="Block: Classic"i]' ) ).toBeVisible(); await expect .poll( editor.getEditedPostContent ) @@ -116,12 +119,10 @@ test.describe( 'Classic', () => { await editor.insertBlock( { name: 'core/freeform' } ); // Ensure there is focus. - await page.waitForSelector( '.mce-tinymce iframe' ); - await page.click( '.mce-tinymce iframe' ); + await page.click( '.mce-content-body' ); await page.keyboard.type( 'test' ); // Move focus away. await pageUtils.pressKeys( 'shift+Tab' ); - await page.keyboard.press( 'Enter' ); await page.click( 'role=button[name="Save draft"i]' ); @@ -137,7 +138,7 @@ test.describe( 'Classic', () => { errors.push( exception ); } ); - const classicBlock = editor.canvas.locator( + const classicBlock = page.locator( 'role=document[name="Block: Classic"i]' ); diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index db2872c185fbb..6ad2384e11045 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -548,6 +548,13 @@ 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', @@ -761,7 +768,7 @@ test.describe( 'Image - interactivity', () => { await admin.createNewPost(); await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = page.locator( + const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); await expect( imageBlock ).toBeVisible(); diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js index a41b1847d5997..c8be29ac2a64e 100644 --- a/test/e2e/specs/editor/blocks/list.spec.js +++ b/test/e2e/specs/editor/blocks/list.spec.js @@ -735,6 +735,13 @@ test.describe( 'List (@firefox)', () => { } ); test( 'should indent and outdent level 2', async ( { editor, page } ) => { + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); await editor.insertBlock( { name: 'core/list' } ); await page.keyboard.type( 'a' ); await page.keyboard.press( 'Enter' ); diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js index b8b53725c99b2..1c35f6ddc8958 100644 --- a/test/e2e/specs/editor/blocks/paragraph.spec.js +++ b/test/e2e/specs/editor/blocks/paragraph.spec.js @@ -61,7 +61,14 @@ 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'; diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index 112be374b8706..f53a65043e3ac 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -22,7 +22,13 @@ test.describe( 'a11y (@firefox, @webkit)', () => { pageUtils, editor, } ) => { - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); // On a new post, initial focus is set on the Post title. await expect( editor.canvas.locator( 'role=textbox[name=/Add title/i]' ) 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 d190f0e824c0a..962fe0a627909 100644 --- a/test/e2e/specs/editor/various/content-only-lock.spec.js +++ b/test/e2e/specs/editor/various/content-only-lock.spec.js @@ -23,7 +23,7 @@ test.describe( 'Content-only lock', () => { ` ); await pageUtils.pressKeys( 'secondary+M' ); - + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); await editor.canvas.click( 'role=document[name="Paragraph block"i]' ); await page.keyboard.type( ' World' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); 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 b1c63a4fac71d..823926c1121a0 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -31,6 +31,13 @@ test.describe( 'Copy/cut/paste', () => { page, 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 page.keyboard.type( 'Cut - collapsed selection' ); await page.keyboard.press( 'Enter' ); diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 05b8f40c1f870..a66efe4540f38 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -342,6 +342,13 @@ 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', 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 563b1584fa080..35895f05209be 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 @@ -37,6 +37,13 @@ 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', + } ); + } ); // Create a paragraph block with some content. await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Line 1 to be made large' ); diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js index 4d699c8764137..40f7cce283210 100644 --- a/test/e2e/specs/editor/various/list-view.spec.js +++ b/test/e2e/specs/editor/various/list-view.spec.js @@ -261,6 +261,13 @@ 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/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js index 6dc2a8b266e7f..5b4b341513c7e 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js @@ -247,6 +247,13 @@ test.describe( 'Multi-block selection', () => { editor, 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(); @@ -292,6 +299,13 @@ test.describe( 'Multi-block selection', () => { editor, pageUtils, } ) => { + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'test' }, diff --git a/test/e2e/specs/editor/various/undo.spec.js b/test/e2e/specs/editor/various/undo.spec.js index 63e7fcb16c4a5..5c4355882ee89 100644 --- a/test/e2e/specs/editor/various/undo.spec.js +++ b/test/e2e/specs/editor/various/undo.spec.js @@ -174,7 +174,7 @@ test.describe( 'undo', () => { await pageUtils.pressKeys( 'primary+a' ); await pageUtils.pressKeys( 'primary+b' ); await pageUtils.pressKeys( 'primary+z' ); - const activeElementLocator = page.locator( ':focus' ); + const activeElementLocator = editor.canvas.locator( ':focus' ); await expect( activeElementLocator ).toHaveText( 'test' ); } ); @@ -353,7 +353,7 @@ test.describe( 'undo', () => { // regression present was accurate, it would produce the correct // content. The issue had manifested in the form of what was shown to // the user since the blocks state failed to sync to block editor. - const activeElementLocator = page.locator( ':focus' ); + const activeElementLocator = editor.canvas.locator( ':focus' ); await expect( activeElementLocator ).toHaveText( 'original' ); } ); @@ -462,14 +462,19 @@ test.describe( 'undo', () => { test( 'should be able to undo and redo property cross property changes', async ( { page, pageUtils, + editor, } ) => { - await page.getByRole( 'textbox', { name: 'Add title' } ).type( 'a' ); // First step. + await editor.canvas + .getByRole( 'textbox', { name: 'Add title' } ) + .type( 'a' ); // First step. await page.keyboard.press( 'Backspace' ); // Second step. - await page.getByRole( 'button', { name: 'Add default block' } ).click(); // third step. + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); // third step. // Title should be empty await expect( - page.getByRole( 'textbox', { name: 'Add title' } ) + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) ).toHaveText( '' ); // First undo removes the block. @@ -477,13 +482,13 @@ test.describe( 'undo', () => { await pageUtils.pressKeys( 'primary+z' ); await pageUtils.pressKeys( 'primary+z' ); await expect( - page.getByRole( 'textbox', { name: 'Add title' } ) + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) ).toHaveText( 'a' ); // Redoing the "backspace" should clear the title again. await pageUtils.pressKeys( 'primaryShift+z' ); await expect( - page.getByRole( 'textbox', { name: 'Add title' } ) + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) ).toHaveText( '' ); } ); } ); From 210fafc7b9a5c3ead06f34815d224ed5debe5910 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 2 Jun 2023 12:23:12 +0300 Subject: [PATCH 4/8] e2e fixes --- .../e2e-tests/specs/editor/various/nux.test.js | 8 ++++++-- .../editor/src/components/post-title/index.js | 3 ++- test/e2e/specs/editor/blocks/classic.spec.js | 8 ++++++++ test/e2e/specs/editor/various/a11y.spec.js | 7 +++++++ .../editor/various/multi-block-selection.spec.js | 15 ++++++++++++++- 5 files changed, 37 insertions(+), 4 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/nux.test.js b/packages/e2e-tests/specs/editor/various/nux.test.js index 1edc92e9e8575..8ea151686d2eb 100644 --- a/packages/e2e-tests/specs/editor/various/nux.test.js +++ b/packages/e2e-tests/specs/editor/various/nux.test.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { createNewPost, clickOnMoreMenuItem } from '@wordpress/e2e-test-utils'; +import { + createNewPost, + clickOnMoreMenuItem, + canvas, +} from '@wordpress/e2e-test-utils'; describe( 'New User Experience (NUX)', () => { it( 'should show the guide to first-time users', async () => { @@ -128,7 +132,7 @@ describe( 'New User Experience (NUX)', () => { await page.click( '[role="dialog"] button[aria-label="Close"]' ); // Focus should be in post title field. - const postTitle = await page.waitForSelector( + const postTitle = await canvas().waitForSelector( 'h1[aria-label="Add title"' ); await expect( postTitle ).toHaveFocus(); diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index b9143a29ff3c0..b9cc0adaa275c 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -74,7 +74,8 @@ function PostTitle( _, forwardedRef ) { return; } - const { ownerDocument } = ref.current; + const ownerDocument = + ref.current.ownerDocument.defaultView.top.document; const { activeElement, body } = ownerDocument; // Only autofocus the title when the post is entirely empty. This should diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index d2b5e0362e048..4403706444a7e 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/test/e2e/specs/editor/blocks/classic.spec.js @@ -133,6 +133,14 @@ test.describe( 'Classic', () => { await page.reload(); await page.unroute( '**' ); + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); + const errors = []; page.on( 'pageerror', ( exception ) => { errors.push( exception ); diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index f53a65043e3ac..8b819d3866b6c 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -55,6 +55,13 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page, pageUtils, } ) => { + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); // Open keyboard shortcuts modal. await pageUtils.pressKeys( 'access+h' ); 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 5b4b341513c7e..26dee1291ba2f 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js @@ -318,7 +318,13 @@ test.describe( 'Multi-block selection', () => { .filter( { hasText: 'Draft saved' } ) ).toBeVisible(); await page.reload(); - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); + // To do: run with iframe. + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); await editor.canvas .getByRole( 'document', { name: 'Paragraph block' } ) @@ -1156,6 +1162,13 @@ test.describe( 'Multi-block selection', () => { 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/paragraph', attributes: { content: '1[' }, From 8423f85ab99c83ac43a71b545ac64f68301812cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 2 Jun 2023 13:56:19 +0300 Subject: [PATCH 5/8] move hasV3BlocksOnly inside select call --- packages/edit-post/src/components/visual-editor/index.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 6716305e93a98..0f4363070ac57 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -112,7 +112,7 @@ export default function VisualEditor( { styles } ) { wrapperBlockName, wrapperUniqueId, isBlockBasedTheme, - blockTypes, + hasV3BlocksOnly, } = useSelect( ( select ) => { const { isFeatureActive, @@ -153,12 +153,11 @@ export default function VisualEditor( { styles } ) { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, - blockTypes: getBlockTypes(), + hasV3BlocksOnly: getBlockTypes().every( ( type ) => { + return type.apiVersion >= 3; + } ), }; }, [] ); - const hasV3BlocksOnly = blockTypes.every( ( type ) => { - return type.apiVersion >= 3; - } ); const { isCleanNewPost } = useSelect( editorStore ); const hasMetaBoxes = useSelect( ( select ) => select( editPostStore ).hasMetaBoxes(), From 85329a69cc5ae9fcc54d2cf11e86b5a6d87ef3eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 2 Jun 2023 14:05:40 +0300 Subject: [PATCH 6/8] Make compat layer for work inline styles --- .../iframe/use-compatibility-styles.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js index 92e755b318ec4..355d44b9352a6 100644 --- a/packages/block-editor/src/components/iframe/use-compatibility-styles.js +++ b/packages/block-editor/src/components/iframe/use-compatibility-styles.js @@ -38,12 +38,6 @@ export function useCompatibilityStyles() { return accumulator; } - // Generally, ignore inline styles. We add inline styles belonging to a - // stylesheet later, which may or may not match the selectors. - if ( ownerNode.tagName !== 'LINK' ) { - return accumulator; - } - // Don't try to add the reset styles, which were removed as a dependency // from `edit-blocks` for the iframe since we don't need to reset admin // styles. @@ -80,16 +74,17 @@ export function useCompatibilityStyles() { // See: https://github.com/WordPress/gutenberg/pull/37466. accumulator.push( ownerNode.cloneNode( true ) ); + const isInline = ownerNode.tagName === 'STYLE'; + // Add inline styles belonging to the stylesheet. const inlineCssId = ownerNode.id.replace( - '-css', - '-inline-css' + isInline ? '-inline-css' : '-css', + isInline ? '-css' : '-inline-css' ); - const inlineCssElement = - document.getElementById( inlineCssId ); + const otherElement = document.getElementById( inlineCssId ); - if ( inlineCssElement ) { - accumulator.push( inlineCssElement.cloneNode( true ) ); + if ( otherElement ) { + accumulator.push( otherElement.cloneNode( true ) ); } } From 898f62c28f60e2a5ec78a8eefed4db2432c834a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 2 Jun 2023 14:37:16 +0300 Subject: [PATCH 7/8] Include reset styles for classic themes --- lib/compat/wordpress-6.3/script-loader.php | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.3/script-loader.php b/lib/compat/wordpress-6.3/script-loader.php index 9b7ace36802cc..c515eb10fdc6b 100644 --- a/lib/compat/wordpress-6.3/script-loader.php +++ b/lib/compat/wordpress-6.3/script-loader.php @@ -42,8 +42,12 @@ function _gutenberg_get_iframed_editor_assets() { $wp_styles->registered = $current_wp_styles->registered; $wp_scripts->registered = $current_wp_scripts->registered; - // We do not need reset styles for the iframed editor. - $wp_styles->done = array( 'wp-reset-editor-styles' ); + // We generally do not need reset styles for the iframed editor. + // However, if it's a classic theme, margins will be added to every block, + // which is reset specifically for list items, so classic themes rely on + // these reset styles. + $wp_styles->done = + wp_theme_has_theme_json() ? array( 'wp-reset-editor-styles' ) : array(); wp_enqueue_script( 'wp-polyfill' ); // Enqueue the `editorStyle` handles for all core block, and dependencies. From 5f13723a20e8771aea8bbc234cd6a8136ea7ccb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 2 Jun 2023 14:41:58 +0300 Subject: [PATCH 8/8] Add compat styles in proper order --- .../components/iframe/use-compatibility-styles.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js index 355d44b9352a6..bebdf388bcb25 100644 --- a/packages/block-editor/src/components/iframe/use-compatibility-styles.js +++ b/packages/block-editor/src/components/iframe/use-compatibility-styles.js @@ -70,10 +70,6 @@ export function useCompatibilityStyles() { } if ( matchFromRules( cssRules ) ) { - // Display warning once we have a way to add style dependencies to the editor. - // See: https://github.com/WordPress/gutenberg/pull/37466. - accumulator.push( ownerNode.cloneNode( true ) ); - const isInline = ownerNode.tagName === 'STYLE'; // Add inline styles belonging to the stylesheet. @@ -83,7 +79,15 @@ export function useCompatibilityStyles() { ); const otherElement = document.getElementById( inlineCssId ); - if ( otherElement ) { + // If the matched stylesheet is inline, add the main + // stylesheet before the inline style element. + if ( otherElement && isInline ) { + accumulator.push( otherElement.cloneNode( true ) ); + } + + accumulator.push( ownerNode.cloneNode( true ) ); + + if ( otherElement && ! isInline ) { accumulator.push( otherElement.cloneNode( true ) ); } }