@wordpress/e2e-tests 2.5.14 → 3.0.0

package/specs/editor/plugins/block-variations.test.js

@@ -181,7 +181,7 @@ describe( 'Block variations', () => {
 			).toBeTruthy();
 			const description = await getBlockCardDescription();
 			expect( description ).toEqual(
-				'Start with the building block of all narrative.'
+				'Start with the basic building block of all narrative.'
 			);
 		} );
 	} );

package/specs/editor/plugins/custom-post-types.test.js

@@ -7,6 +7,7 @@ import {
 	deactivatePlugin,
 	publishPost,
 	findSidebarPanelWithTitle,
+	clickBlockAppender,
 } from '@wordpress/e2e-test-utils';
 
 const openPageAttributesPanel = async () => {
@@ -40,7 +41,7 @@ describe( 'Test Custom Post Types', () => {
 
 		// Create a parent post.
 		await createNewPost( { postType: 'hierar-no-title' } );
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Parent Post' );
 		await publishPost();
 		// Create a post that is a child of the previously created post.
@@ -55,7 +56,7 @@ describe( 'Test Custom Post Types', () => {
 			( element ) => element.textContent
 		);
 		await optionToSelect.click();
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Child Post' );
 		await publishPost();
 		// Reload the child post and verify it is still correctly selected as a child post.
@@ -72,7 +73,7 @@ describe( 'Test Custom Post Types', () => {
 	} );
 	it( 'should create a cpt with a legacy block in its template without WSOD', async () => {
 		await createNewPost( { postType: 'leg_block_in_tpl' } );
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Hello there' );
 		await page.waitForSelector( '[data-type="core/embed"]' );
 		await publishPost();

package/specs/editor/plugins/iframed-inline-styles.test.js

@@ -57,11 +57,5 @@ describe( 'iframed inline styles', () => {
 		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
 			'2px'
 		);
-
-		expect( console ).toHaveWarned(
-			`Stylesheet iframed-inline-styles-compat-style-css was not properly added.
-For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
-For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles). <link rel="stylesheet" id="iframed-inline-styles-compat-style-css" href="http://localhost:8889/wp-content/plugins/gutenberg-test-plugins/iframed-inline-styles/compat-style.css?ver=1626189899" media="all">`
-		);
 	} );
 } );

package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js

@@ -63,9 +63,5 @@ describe( 'iframed multiple block stylesheets', () => {
 		expect( await getComputedStyle( canvas(), 'background-color' ) ).toBe(
 			'rgb(0, 0, 0)'
 		);
-
-		// Skip warnings related to block-styles enqueing and the use of add_editor_style.
-		// The issue is tracked on https://github.com/WordPress/gutenberg/issues/33212.
-		expect( console ).toHaveWarned();
 	} );
 } );

package/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap

@@ -2,112 +2,126 @@
 
 exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 1`] = `
 "<!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 2`] = `
 "<!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 1`] = `
 "<!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 2`] = `
 "<!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 1`] = `
 "<!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 2`] = `
 "<!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 1`] = `
 "<!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 2`] = `
 "<!-- wp:paragraph -->
-<p>Third paragraph</p>
+<p>3rd</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>First paragraph</p>
+<p>1st</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph</p>
+<p>2nd</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should prevent deleting multiple selected blocks from inputs 1`] = `
+"<!-- wp:paragraph -->
+<p>1st</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2nd</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>3rd</p>
 <!-- /wp:paragraph -->"
 `;

package/specs/editor/various/adding-patterns.test.js

@@ -7,7 +7,7 @@ import {
 	getEditedPostContent,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
 
 describe( 'adding patterns', () => {
 	beforeEach( async () => {

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -6,15 +6,18 @@ import {
 	clickBlockAppender,
 	getEditedPostContent,
 	pressKeyWithModifier,
+	clickBlockToolbarButton,
+	clickMenuItem,
+	clickOnCloseModalButton,
 } from '@wordpress/e2e-test-utils';
 
 const createTestParagraphBlocks = async () => {
 	await clickBlockAppender();
-	await page.keyboard.type( 'First paragraph' );
+	await page.keyboard.type( '1st' );
 	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( 'Second paragraph' );
+	await page.keyboard.type( '2nd' );
 	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( 'Third paragraph' );
+	await page.keyboard.type( '3rd' );
 };
 
 describe( 'block editor keyboard shortcuts', () => {
@@ -66,4 +69,41 @@ describe( 'block editor keyboard shortcuts', () => {
 			} );
 		} );
 	} );
+	describe( 'test shortcuts handling through portals in the same tree', () => {
+		beforeEach( async () => {
+			await createTestParagraphBlocks();
+			// Multiselect via keyboard.
+			await pressKeyWithModifier( 'primary', 'a' );
+			await pressKeyWithModifier( 'primary', 'a' );
+		} );
+		it( 'should propagate properly and delete selected blocks', async () => {
+			await clickBlockToolbarButton( 'Options' );
+			const label = 'Duplicate';
+			await page.$x(
+				`//div[@role="menu"]//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ label }")]`
+			);
+			await page.keyboard.press( 'Delete' );
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot(
+				`""`
+			);
+		} );
+		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Add to Reusable blocks' );
+			const reusableBlockNameInputSelector =
+				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+			const nameInput = await page.waitForSelector(
+				reusableBlockNameInputSelector
+			);
+			await nameInput.click();
+			await page.keyboard.type( 'hi' );
+			await page.keyboard.press( 'Backspace' );
+			await page.keyboard.press( 'ArrowLeft' );
+			await page.keyboard.press( 'Delete' );
+			await clickOnCloseModalButton(
+				'.reusable-blocks-menu-items__convert-modal'
+			);
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
 } );

package/specs/editor/various/block-grouping.test.js

@@ -13,6 +13,7 @@ import {
 	getAvailableBlockTransforms,
 	activatePlugin,
 	deactivatePlugin,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 async function insertBlocksOfSameType() {
@@ -122,24 +123,7 @@ describe( 'Block Grouping', () => {
 			};
 
 			const paragraphText = 'hi';
-			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( paragraphText );
-
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Add to Reusable blocks' );
-			const nameInput = await page.waitForSelector(
-				reusableBlockNameInputSelector
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'Block' );
-			await page.keyboard.press( 'Enter' );
-
-			// Wait for creation to finish
-			await page.waitForXPath(
-				'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-			);
+			await createReusableBlock( paragraphText, 'Block' );
 			// Group
 			await clickBlockToolbarButton( 'Options' );
 			await clickMenuItem( 'Group' );

package/specs/editor/various/block-hierarchy-navigation.test.js

@@ -51,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
 			)
 		 )[ 0 ];
 		await columnsBlockMenuItem.click();
@@ -75,7 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the last column block.
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
 			)
 		 )[ 3 ];
 		await lastColumnsBlockMenuItem.click();
@@ -188,7 +188,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const groupMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
 			)
 		 )[ 0 ];
 		await groupMenuItem.click();

package/specs/editor/various/change-detection.test.js

@@ -10,6 +10,7 @@ import {
 	saveDraft,
 	openDocumentSettingsSidebar,
 	isCurrentURL,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Change detection', () => {
@@ -381,6 +382,10 @@ describe( 'Change detection', () => {
 
 		// Change the paragraph's `drop cap`.
 		await page.click( '[data-type="core/paragraph"]' );
+
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

package/specs/editor/various/editor-modes.test.js

@@ -10,6 +10,7 @@ import {
 	switchEditorModeTo,
 	pressKeyTimes,
 	pressKeyWithModifier,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
@@ -54,6 +55,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// The `drop cap` toggle for the paragraph block should appear, even in
 		// HTML editing mode.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const dropCapToggle = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);
@@ -74,6 +78,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
 
 		// Change the `drop cap` using the sidebar.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

package/specs/editor/various/font-size-picker.test.js

@@ -7,7 +7,7 @@ import {
 	createNewPost,
 	pressKeyWithModifier,
 	pressKeyTimes,
-	activateTheme,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 const openFontSizeSelectControl = async () => {
@@ -17,13 +17,6 @@ const openFontSizeSelectControl = async () => {
 	return selectControl.click();
 };
 
-const openTypographyToolsPanelMenu = async () => {
-	const toggleSelector =
-		"//div[contains(@class, 'typography-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]";
-	const toggle = await page.waitForXPath( toggleSelector );
-	return toggle.click();
-};
-
 const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
 	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
 
@@ -106,21 +99,68 @@ describe( 'Font Size Picker', () => {
 		` );
 		} );
 	} );
+
 	// A different control is rendered based on the available font sizes number.
 	describe( 'More font sizes', () => {
-		beforeAll( async () => {
-			await activateTheme( 'tt1-blocks' );
-		} );
-		afterAll( async () => {
-			await activateTheme( 'twentytwentyone' );
+		beforeEach( async () => {
+			await page.evaluate( () => {
+				wp.data.dispatch( 'core/block-editor' ).updateSettings(
+					// eslint-disable-next-line no-undef
+					lodash.merge(
+						wp.data.select( 'core/block-editor' ).getSettings(),
+						{
+							__experimentalFeatures: {
+								typography: {
+									fontSizes: {
+										default: [
+											{
+												name: 'Tiny',
+												slug: 'tiny',
+												size: '11px',
+											},
+											,
+											{
+												name: 'Small',
+												slug: 'small',
+												size: '13px',
+											},
+											{
+												name: 'Medium',
+												slug: 'medium',
+												size: '20px',
+											},
+											{
+												name: 'Large',
+												slug: 'large',
+												size: '36px',
+											},
+											{
+												name: 'Extra Large',
+												slug: 'x-large',
+												size: '42px',
+											},
+											{
+												name: 'Huge',
+												slug: 'huge',
+												size: '48px',
+											},
+										],
+									},
+								},
+							},
+						}
+					)
+				);
+			} );
 		} );
+
 		it( 'should apply a named font size using the font size buttons', async () => {
 			// Create a paragraph block with some content.
 			await clickBlockAppender();
 			await page.keyboard.type( 'Paragraph to be made "large"' );
 
 			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 4 );
+			await pressKeyTimes( 'ArrowDown', 5 );
 			await page.keyboard.press( 'Enter' );
 
 			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
@@ -137,11 +177,11 @@ describe( 'Font Size Picker', () => {
 			);
 
 			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 3 );
+			await pressKeyTimes( 'ArrowDown', 4 );
 			await page.keyboard.press( 'Enter' );
 			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"normal\\"} -->
-			<p class=\\"has-normal-font-size\\">Paragraph with font size reset using tools panel menu</p>
+			"<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
+			<p class=\\"has-medium-font-size\\">Paragraph with font size reset using tools panel menu</p>
 			<!-- /wp:paragraph -->"
 		` );
 
@@ -164,7 +204,7 @@ describe( 'Font Size Picker', () => {
 			);
 
 			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 2 );
+			await pressKeyTimes( 'ArrowDown', 3 );
 			await page.keyboard.press( 'Enter' );
 			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->

package/specs/editor/various/inserting-blocks.test.js

@@ -14,7 +14,7 @@ import {
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
 
 /**
  * Waits for all patterns in the inserter to have a height, which should
@@ -173,7 +173,7 @@ describe( 'Inserting blocks', () => {
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/9583
 	it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => {
 		// Enter the default block and click the inserter toggle button to the left of it.
-		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
 		await showBlockToolbar();
 		await page.click(
 			'.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle'
@@ -243,6 +243,10 @@ describe( 'Inserting blocks', () => {
 		);
 		expect( selectedButtonBlocks.length ).toBe( 1 );
 
+		// The block appender is only visible when there's no selection.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+		);
 		// Specifically click the root container appender.
 		await page.click(
 			'.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -155,6 +155,12 @@ describe( 'Order of block keyboard navigation', () => {
 				.focus();
 		} );
 
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveLabel() ).toBe( 'Add block' );
+
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveLabel() ).toBe( 'Add default block' );
+
 		await pressKeyWithModifier( 'shift', 'Tab' );
 		await expect( await getActiveLabel() ).toBe(
 			'Paragraph Block. Row 2. 1'

package/specs/editor/various/list-view.test.js

@@ -42,12 +42,12 @@ describe( 'List view', () => {
 		await pressKeyWithModifier( 'access', 'o' );
 
 		const paragraphBlock = await page.waitForXPath(
-			'//button[contains(., "Paragraph")][@draggable="true"]'
+			'//a[contains(., "Paragraph")][@draggable="true"]'
 		);
 
 		// Drag above the heading block
 		const headingBlock = await page.waitForXPath(
-			'//button[contains(., "Heading")][@draggable="true"]'
+			'//a[contains(., "Heading")][@draggable="true"]'
 		);
 
 		await dragAndDrop( paragraphBlock, headingBlock, -5 );

package/specs/editor/various/navigable-toolbar.test.js

@@ -31,8 +31,8 @@ describe.each( [
 
 	it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => {
 		// Assumes new post focus starts in title. Create first new
-		// block by ArrowDown.
-		await page.keyboard.press( 'ArrowDown' );
+		// block by Enter.
+		await page.keyboard.press( 'Enter' );
 
 		// [TEMPORARY]: A new paragraph is not technically a block yet
 		// until starting to type within it.

package/specs/editor/various/post-editor-template-mode.test.js

@@ -102,7 +102,7 @@ describe( 'Post Editor Template mode', () => {
 	} );
 
 	it( 'Allow to switch to template mode, edit the template and check the result', async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await createNewPost();
 		// Create a random post.
 		await page.type( '.editor-post-title__input', 'Just an FSE Post' );