} 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 +110,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 +123,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 +144,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 2f24db5e067b7..354c370434be9 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/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/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..3215e4185c08f 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
);
@@ -235,11 +236,12 @@ 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"]';
- 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 +279,7 @@ describe( 'Reusable blocks', () => {
] );
} );
- await page.waitForXPath(
+ await canvas().waitForXPath(
'//*[contains(@class, "block-editor-warning")]/*[text()="Block has been deleted or is unavailable."]'
);
@@ -295,15 +297,16 @@ 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 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 +336,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"]';
@@ -358,9 +361,10 @@ 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 page.waitForSelector(
+ const quoteBlock = await canvas().waitForSelector(
'.block-editor-block-list__block[aria-label="Block: Quote"]'
);
// Select the quote block.
@@ -379,7 +383,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/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
index 22c1af35ff716..e8f705c6dc0d7 100644
--- a/packages/e2e-tests/specs/performance/site-editor.test.js
+++ b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -151,7 +151,8 @@ describe( 'Site Editor Performance', () => {
await enterEditMode();
// Insert a new paragraph right under the first one.
- await firstParagraph.focus();
+ await firstParagraph.click(); // Once to select the block overlay.
+ await firstParagraph.click(); // Once again to select the paragraph.
await insertBlock( 'Paragraph' );
// Start tracing.
diff --git a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js b/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
index 88bf954e86ce2..ae28019cf0d99 100644
--- a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
+++ b/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
@@ -27,11 +27,11 @@ async function getActiveTabLabel() {
async function getTemplateCard() {
return {
title: await page.$eval(
- '.edit-site-template-card__title',
+ '.edit-site-sidebar-card__title',
( element ) => element.innerText
),
description: await page.$eval(
- '.edit-site-template-card__description',
+ '.edit-site-sidebar-card__description',
( element ) => element.innerText
),
};
diff --git a/packages/edit-post/src/components/header/document-title/index.js b/packages/edit-post/src/components/header/document-title/index.js
index 1b27a0bacf014..619fa4ef29014 100644
--- a/packages/edit-post/src/components/header/document-title/index.js
+++ b/packages/edit-post/src/components/header/document-title/index.js
@@ -11,17 +11,14 @@ import {
__experimentalText as Text,
} from '@wordpress/components';
import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as commandsStore } from '@wordpress/commands';
import { displayShortcut } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
-import { unlock } from '../../../private-apis';
import { store as editPostStore } from '../../../store';
-const { store: commandsStore } = unlock( commandsPrivateApis );
-
function DocumentTitle() {
const { template, isEditing } = useSelect( ( select ) => {
const { isEditingTemplate, getEditedPostTemplate } =
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 638a869aa8350..0f4363070ac57 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,
+ hasV3BlocksOnly,
} = 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,6 +153,9 @@ export default function VisualEditor( { styles } ) {
wrapperBlockName: _wrapperBlockName,
wrapperUniqueId: getCurrentPostId(),
isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+ hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+ return type.apiVersion >= 3;
+ } ),
};
}, [] );
const { isCleanNewPost } = useSelect( editorStore );
@@ -352,8 +357,8 @@ export default function VisualEditor( { styles } ) {
>
{
- const { getSettings, getEditedPostType, getCanvasMode } = unlock(
- select( editSiteStore )
- );
-
- return {
- storedSettings: getSettings( setIsInserterOpened ),
- templateType: getEditedPostType(),
- canvasMode: getCanvasMode(),
- };
- },
- [ setIsInserterOpened ]
- );
+ const { storedSettings, templateType, canvasMode, hasPageContentLock } =
+ useSelect(
+ ( select ) => {
+ const {
+ getSettings,
+ getEditedPostType,
+ getCanvasMode,
+ hasPageContentLock: _hasPageContentLock,
+ } = unlock( select( editSiteStore ) );
+
+ return {
+ storedSettings: getSettings( setIsInserterOpened ),
+ templateType: getEditedPostType(),
+ canvasMode: getCanvasMode(),
+ hasPageContentLock: _hasPageContentLock(),
+ };
+ },
+ [ setIsInserterOpened ]
+ );
const settingsBlockPatterns =
storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -137,6 +146,7 @@ export default function BlockEditor() {
contentRef,
useClipboardHandler(),
useTypingObserver(),
+ usePageContentLockNotifications(),
] );
const isMobileViewport = useViewportMatch( 'small', '<' );
const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -162,6 +172,7 @@ export default function BlockEditor() {
onChange={ onChange }
useSubRegistry={ false }
>
+ { hasPageContentLock && }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 72a8d41fb22f0..f70c6abd787d4 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -37,7 +37,6 @@ import WelcomeGuide from '../welcome-guide';
import StartTemplateOptions from '../start-template-options';
import { store as editSiteStore } from '../../store';
import { GlobalStylesRenderer } from '../global-styles-renderer';
-
import useTitle from '../routes/use-title';
import CanvasSpinner from '../canvas-spinner';
import { unlock } from '../../private-apis';
@@ -74,6 +73,7 @@ export default function Editor( { isLoading } ) {
isListViewOpen,
showIconLabels,
showBlockBreadcrumbs,
+ hasPageContentLock,
} = useSelect( ( select ) => {
const {
getEditedPostContext,
@@ -81,6 +81,7 @@ export default function Editor( { isLoading } ) {
getCanvasMode,
isInserterOpened,
isListViewOpened,
+ hasPageContentLock: _hasPageContentLock,
} = unlock( select( editSiteStore ) );
const { __unstableGetEditorMode } = select( blockEditorStore );
const { getActiveComplementaryArea } = select( interfaceStore );
@@ -105,6 +106,7 @@ export default function Editor( { isLoading } ) {
'core/edit-site',
'showBlockBreadcrumbs'
),
+ hasPageContentLock: _hasPageContentLock(),
};
}, [] );
const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -122,9 +124,10 @@ export default function Editor( { isLoading } ) {
const secondarySidebarLabel = isListViewOpen
? __( 'List View' )
: __( 'Block Library' );
- const blockContext = useMemo(
- () => ( {
- ...context,
+ const blockContext = useMemo( () => {
+ const { postType, postId, ...nonPostFields } = context ?? {};
+ return {
+ ...( hasPageContentLock ? context : nonPostFields ),
queryContext: [
context?.queryContext || { page: 1 },
( newQueryContext ) =>
@@ -136,9 +139,8 @@ export default function Editor( { isLoading } ) {
},
} ),
],
- } ),
- [ context, setEditedPostContext ]
- );
+ };
+ }, [ hasPageContentLock, context, setEditedPostContext ] );
let title;
if ( hasLoadedPost ) {
@@ -227,7 +229,11 @@ export default function Editor( { isLoading } ) {
footer={
shouldShowBlockBreakcrumbs && (
)
}
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 94f8358fda993..5f14445ccefcd 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
import { sprintf, __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
import {
Button,
VisuallyHidden,
@@ -10,27 +15,72 @@ import {
__experimentalHStack as HStack,
} from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as commandsStore } from '@wordpress/commands';
+import {
+ chevronLeftSmall as chevronLeftSmallIcon,
+ page as pageIcon,
+} from '@wordpress/icons';
+import { useEntityRecord } from '@wordpress/core-data';
import { displayShortcut } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
import useEditedEntityRecord from '../../use-edited-entity-record';
-import { unlock } from '../../../private-apis';
-
-const { store: commandsStore } = unlock( commandsPrivateApis );
+import { store as editSiteStore } from '../../../store';
export default function DocumentActions() {
- const { open: openCommandCenter } = useDispatch( commandsStore );
+ const isPage = useSelect( ( select ) => select( editSiteStore ).isPage() );
+ return isPage ? : ;
+}
+
+function PageDocumentActions() {
+ const { hasPageContentLock, context } = useSelect(
+ ( select ) => ( {
+ hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
+ context: select( editSiteStore ).getEditedPostContext(),
+ } ),
+ []
+ );
+
+ const { hasResolved, editedRecord } = useEntityRecord(
+ 'postType',
+ context.postType,
+ context.postId
+ );
+
+ const { setHasPageContentLock } = useDispatch( editSiteStore );
+
+ if ( ! hasResolved ) {
+ return null;
+ }
+
+ if ( ! editedRecord ) {
+ return (
+
+ { __( 'Document not found' ) }
+
+ );
+ }
+
+ return hasPageContentLock ? (
+
+ { editedRecord.title }
+
+ ) : (
+ setHasPageContentLock( true ) }
+ />
+ );
+}
+
+function TemplateDocumentActions( { onBack } ) {
const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
- // Return a simple loading indicator until we have information to show.
if ( ! isLoaded ) {
return null;
}
- // Return feedback that the template does not seem to exist.
if ( ! record ) {
return (
@@ -45,31 +95,58 @@ export default function DocumentActions() {
: __( 'template' );
return (
-
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();
@@ -334,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/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..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 } ) => {
@@ -39,7 +47,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 +124,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 +184,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 +252,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..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
@@ -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]' );
@@ -37,8 +37,15 @@ 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 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 +78,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..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',
@@ -336,7 +343,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 +361,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..26dee1291ba2f 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' },
@@ -304,6 +318,13 @@ test.describe( 'Multi-block selection', () => {
.filter( { hasText: 'Draft saved' } )
).toBeVisible();
await page.reload();
+ // To do: run with iframe.
+ await page.evaluate( () => {
+ window.wp.blocks.registerBlockType( 'test/v2', {
+ apiVersion: '2',
+ title: 'test',
+ } );
+ } );
await editor.canvas
.getByRole( 'document', { name: 'Paragraph block' } )
@@ -867,7 +888,6 @@ test.describe( 'Multi-block selection', () => {
} );
test( 'should select title if the cursor is on title', async ( {
- page,
editor,
pageUtils,
multiBlockSelectionUtils,
@@ -890,7 +910,7 @@ test.describe( 'Multi-block selection', () => {
.toEqual( [] );
await expect
.poll( () =>
- page.evaluate( () => window.getSelection().toString() )
+ editor.canvas.evaluate( () => window.getSelection().toString() )
)
.toBe( 'Post title' );
} );
@@ -1142,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[' },
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..5c4355882ee89 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,11 +169,12 @@ 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' );
- const activeElementLocator = page.locator( ':focus' );
+ const activeElementLocator = editor.canvas.locator( ':focus' );
await expect( activeElementLocator ).toHaveText( 'test' );
} );
@@ -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
@@ -351,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' );
} );
@@ -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' );
@@ -460,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.
@@ -475,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( '' );
} );
} );
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(
`\nFirst 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' );
diff --git a/test/integration/fixtures/blocks/core__query.json b/test/integration/fixtures/blocks/core__query.json
index 4c7ce920a0450..fb545c16ea695 100644
--- a/test/integration/fixtures/blocks/core__query.json
+++ b/test/integration/fixtures/blocks/core__query.json
@@ -18,10 +18,7 @@
"taxQuery": null,
"parents": []
},
- "tagName": "div",
- "displayLayout": {
- "type": "list"
- }
+ "tagName": "div"
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__query.serialized.html b/test/integration/fixtures/blocks/core__query.serialized.html
index 049ea7dd2bb73..3bc4085f4f090 100644
--- a/test/integration/fixtures/blocks/core__query.serialized.html
+++ b/test/integration/fixtures/blocks/core__query.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html
index 39f889cfae97e..915726d992a8f 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
index 82bc41a40fb1b..8a048667f55af 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
@@ -21,10 +21,7 @@
"post_tag": [ 6 ]
}
},
- "tagName": "div",
- "displayLayout": {
- "type": "list"
- }
+ "tagName": "div"
},
"innerBlocks": [
{
@@ -50,7 +47,11 @@
{
"name": "core/post-template",
"isValid": true,
- "attributes": {},
+ "attributes": {
+ "layout": {
+ "type": "default"
+ }
+ },
"innerBlocks": [
{
"name": "core/post-title",
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
index f86b4f26ecc1d..b9e6b50deb067 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
@@ -1,6 +1,6 @@
-
+
-
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.json b/test/integration/fixtures/blocks/core__query__deprecated-2.json
index a63ad1c007b6b..b0a1aea41ea50 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2.json
@@ -21,16 +21,17 @@
"post_tag": [ 6 ]
}
},
- "tagName": "div",
- "displayLayout": {
- "type": "list"
- }
+ "tagName": "div"
},
"innerBlocks": [
{
"name": "core/post-template",
"isValid": true,
- "attributes": {},
+ "attributes": {
+ "layout": {
+ "type": "default"
+ }
+ },
"innerBlocks": [
{
"name": "core/post-title",
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html
index 5804c54e577f1..2016bea963592 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
-
-
+
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json
index 6b3327eacdc3f..bb9a9de34a4b7 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-3.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json
@@ -18,10 +18,6 @@
"inherit": false
},
"tagName": "div",
- "displayLayout": {
- "type": "flex",
- "columns": 3
- },
"align": "wide"
},
"innerBlocks": [
@@ -49,7 +45,11 @@
"name": "core/post-template",
"isValid": true,
"attributes": {
- "fontSize": "large"
+ "fontSize": "large",
+ "layout": {
+ "type": "grid",
+ "columnCount": 3
+ }
},
"innerBlocks": [
{
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
index edbf5b1a0557b..86c87dde71c3b 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
@@ -1,6 +1,6 @@
-
+
-
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.html b/test/integration/fixtures/blocks/core__query__deprecated-4.html
index 20aec9638688e..9a2b39db018f5 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-4.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.html
@@ -1,4 +1,4 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json
index 2870009875a01..620e1ecefef13 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-4.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json
@@ -1,7 +1,7 @@
[
{
"name": "core/query",
- "isValid": false,
+ "isValid": true,
"attributes": {
"queryId": 0,
"query": {
@@ -17,19 +17,21 @@
"sticky": "",
"inherit": true
},
- "tagName": "main",
- "displayLayout": {
- "type": "list"
- },
+ "tagName": "div",
"layout": {
- "inherit": true
+ "contentSize": null,
+ "type": "constrained"
}
},
"innerBlocks": [
{
"name": "core/post-template",
"isValid": true,
- "attributes": {},
+ "attributes": {
+ "layout": {
+ "type": "default"
+ }
+ },
"innerBlocks": [
{
"name": "core/post-title",
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json
index 529a440b12eeb..1ce908fa81ac7 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json
@@ -16,7 +16,6 @@
"sticky": "",
"inherit": true
},
- "tagName": "main",
"displayLayout": {
"type": "list"
},
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html
index f86c70b104550..1ab2470d36159 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html
@@ -1,7 +1,5 @@
-
-
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.html b/test/integration/fixtures/blocks/core__query__deprecated-5.html
new file mode 100644
index 0000000000000..d040961172cb9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.json b/test/integration/fixtures/blocks/core__query__deprecated-5.json
new file mode 100644
index 0000000000000..f74e9496b2390
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.json
@@ -0,0 +1,50 @@
+[
+ {
+ "name": "core/query",
+ "isValid": true,
+ "attributes": {
+ "queryId": 0,
+ "query": {
+ "perPage": 10,
+ "pages": 0,
+ "offset": 0,
+ "postType": "post",
+ "order": "desc",
+ "orderBy": "date",
+ "author": "",
+ "search": "",
+ "exclude": [],
+ "sticky": "",
+ "inherit": true
+ },
+ "tagName": "div",
+ "layout": {
+ "type": "constrained"
+ }
+ },
+ "innerBlocks": [
+ {
+ "name": "core/post-template",
+ "isValid": true,
+ "attributes": {
+ "layout": {
+ "type": "default"
+ }
+ },
+ "innerBlocks": [
+ {
+ "name": "core/post-title",
+ "isValid": true,
+ "attributes": {
+ "level": 2,
+ "isLink": false,
+ "rel": "",
+ "linkTarget": "_self"
+ },
+ "innerBlocks": []
+ }
+ ]
+ }
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json
new file mode 100644
index 0000000000000..54a9d08581cb9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json
@@ -0,0 +1,50 @@
+[
+ {
+ "blockName": "core/query",
+ "attrs": {
+ "queryId": 0,
+ "query": {
+ "perPage": 10,
+ "pages": 0,
+ "offset": 0,
+ "postType": "post",
+ "order": "desc",
+ "orderBy": "date",
+ "author": "",
+ "search": "",
+ "exclude": [],
+ "sticky": "",
+ "inherit": true
+ },
+ "displayLayout": {
+ "type": "list"
+ },
+ "layout": {
+ "type": "constrained"
+ }
+ },
+ "innerBlocks": [
+ {
+ "blockName": "core/post-template",
+ "attrs": {},
+ "innerBlocks": [
+ {
+ "blockName": "core/post-title",
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "",
+ "innerContent": []
+ }
+ ],
+ "innerHTML": "\n \n ",
+ "innerContent": [ "\n ", null, "\n " ]
+ }
+ ],
+ "innerHTML": "\n
\n
\n",
+ "innerContent": [
+ "\n
",
+ null,
+ "\n
\n"
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html
new file mode 100644
index 0000000000000..a185cf3285299
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html
@@ -0,0 +1,5 @@
+
+
+
+
+