@wordpress/e2e-tests 2.2.15 → 2.2.18

package/fixtures/blocks/core__post-excerpt.json

@@ -4,7 +4,6 @@
 		"name": "core/post-excerpt",
 		"isValid": true,
 		"attributes": {
-			"wordCount": 55,
 			"showMoreOnNewLine": true
 		},
 		"innerBlocks": [],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.2.15",
+	"version": "2.2.18",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^5.3.0",
+		"@wordpress/e2e-test-utils": "^5.3.2",
 		"@wordpress/jest-console": "^4.0.5",
 		"@wordpress/jest-puppeteer-axe": "^3.0.5",
-		"@wordpress/scripts": "^16.1.4",
-		"@wordpress/url": "^3.1.1",
+		"@wordpress/scripts": "^16.1.5",
+		"@wordpress/url": "^3.1.3",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"lodash": "^4.17.21",
@@ -41,5 +41,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42a6dbdbf9c981e71ea4752c94e5642d6f6cac1d"
+	"gitHead": "6464883c6c546233543a1ee01428059dee3560fc"
 }

package/plugins/iframed-inline-styles/block.json

@@ -0,0 +1,15 @@
+{
+	"apiVersion": 2,
+	"name": "test/iframed-inline-styles",
+	"title": "Iframed Inline Styles",
+	"category": "text",
+	"icon": "smiley",
+	"description": "",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "iframed-inline-styles",
+	"editorScript": "iframed-inline-styles-editor-script",
+	"editorStyle": "file:./editor.css",
+	"style": "iframed-inline-styles-style"
+}

package/plugins/iframed-inline-styles/compat-style.css

@@ -0,0 +1,4 @@
+/* Random rule with `wp-block` in the selector. */
+.wp-block-test-iframed-inline-styles {
+	display: block;
+}

package/plugins/iframed-inline-styles/editor.css

@@ -0,0 +1,6 @@
+/**
+ * The following styles get applied inside the editor only.
+ */
+.wp-block-test-iframed-inline-styles {
+	border: 1px dotted #f00;
+}

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

@@ -0,0 +1,15 @@
+( ( { wp: { element, blocks, blockEditor } } ) => {
+	const { createElement: el } = element;
+	const { registerBlockType } = blocks;
+	const { useBlockProps } = blockEditor;
+
+	registerBlockType( 'test/iframed-inline-styles', {
+		apiVersion: 2,
+		edit: function Edit() {
+			return el( 'div', useBlockProps(), 'Edit' );
+		},
+		save: function Save() {
+			return el( 'div', useBlockProps.save(), 'Save' );
+		},
+	} );
+} )( window );

package/plugins/iframed-inline-styles/style.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+.wp-block-test-iframed-inline-styles {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}

package/plugins/iframed-inline-styles.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Inline Styles
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-inline-styles
+ */
+
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_action(
+	'init',
+	function() {
+		wp_register_script(
+			'iframed-inline-styles-editor-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/editor.js',
+			array(
+				'wp-blocks',
+				'wp-block-editor',
+				'wp-element',
+			),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/editor.js' )
+		);
+		wp_register_style(
+			'iframed-inline-styles-style',
+			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/style.css' )
+		);
+		wp_add_inline_style( 'iframed-inline-styles-style', '.wp-block-test-iframed-inline-styles{padding:20px}' );
+		register_block_type_from_metadata( __DIR__ . '/iframed-inline-styles' );
+	}
+);
+
+add_action(
+	'enqueue_block_editor_assets',
+	function() {
+		wp_enqueue_style(
+			'iframed-inline-styles-compat-style',
+			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/compat-style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/compat-style.css' )
+		);
+		wp_add_inline_style( 'iframed-inline-styles-compat-style', '.wp-block-test-iframed-inline-styles{border-width:2px}' );
+	}
+);

package/plugins/iframed-masonry-block/editor.js

@@ -28,7 +28,7 @@
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item grid-item--height2' } ),
-	]
+	];
 
 	registerBlockType( 'test/iframed-masonry-block', {
 		edit: function Edit() {

package/specs/editor/blocks/buttons.test.js

@@ -38,6 +38,36 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'moves focus from the link editor back to the button when escape is pressed after the URL has been submitted', async () => {
+		// Regression: https://github.com/WordPress/gutenberg/issues/34307
+		await insertBlock( 'Buttons' );
+		await pressKeyWithModifier( 'primary', 'k' );
+		await page.waitForFunction(
+			() => !! document.activeElement.closest( '.block-editor-url-input' )
+		);
+		await page.keyboard.type( 'https://example.com' );
+		await page.keyboard.press( 'Enter' );
+		await page.waitForFunction(
+			() =>
+				document.activeElement ===
+				document.querySelector(
+					'.block-editor-link-control a[href="https://example.com"]'
+				)
+		);
+		await page.keyboard.press( 'Escape' );
+
+		// Focus should move from the link control to the button block's text.
+		await page.waitForFunction(
+			() =>
+				document.activeElement ===
+				document.querySelector( '[aria-label="Button text"]' )
+		);
+
+		// The link control should still be visible when a URL is set.
+		const linkControl = await page.$( '.block-editor-link-control' );
+		expect( linkControl ).toBeTruthy();
+	} );
+
 	it( 'can jump to the link editor using the keyboard shortcut', async () => {
 		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`iframed inline styles should load inline styles in iframe 1`] = `
+"<!-- wp:test/iframed-inline-styles -->
+<div class=\\"wp-block-test-iframed-inline-styles\\">Save</div>
+<!-- /wp:test/iframed-inline-styles -->"
+`;

package/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`changing image size should load script and dependencies in iframe 1`] = `
+exports[`iframed masonry block should load script and dependencies in iframe 1`] = `
 "<!-- wp:test/iframed-masonry-block -->
 <div class=\\"wp-block-test-iframed-masonry-block\\"><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div></div>
 <!-- /wp:test/iframed-masonry-block -->"

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

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	getEditedPostContent,
+	openDocumentSettingsSidebar,
+	clickButton,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context, property ) {
+	await context.waitForSelector( '.wp-block-test-iframed-inline-styles' );
+	return await context.evaluate( ( prop ) => {
+		const container = document.querySelector(
+			'.wp-block-test-iframed-inline-styles'
+		);
+		return window.getComputedStyle( container )[ prop ];
+	}, property );
+}
+
+describe( 'iframed inline styles', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-inline-styles' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
+	} );
+
+	it( 'should load inline styles in iframe', async () => {
+		await insertBlock( 'Iframed Inline Styles' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+		expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' );
+		expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' );
+
+		await openDocumentSettingsSidebar();
+		await clickButton( 'Page' );
+		await clickButton( 'Template' );
+		await clickButton( 'New' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'Iframed Test' );
+		await clickButton( 'Create' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+
+		// Inline styles of properly enqueued stylesheet should load.
+		expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
+
+		// Inline styles of stylesheet loaded with the compatibility layer
+		// should load.
+		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
+			'2px'
+		);
+
+		expect( console ).toHaveErrored(
+			`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-masonry-block.test.js

@@ -26,7 +26,7 @@ async function didMasonryLoadCorrectly( context ) {
 	} );
 }
 
-describe( 'changing image size', () => {
+describe( 'iframed masonry block', () => {
 	beforeEach( async () => {
 		await activatePlugin( 'gutenberg-test-iframed-masonry-block' );
 		await createNewPost( { postType: 'page' } );

package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap

@@ -162,6 +162,18 @@ exports[`Multi-block selection should return original focus after failed multi s
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Multi-block selection should select all from empty selection 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should select all from empty selection 2`] = `""`;
+
 exports[`Multi-block selection should set attributes for multiple paragraphs 1`] = `
 "<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
 <p class=\\"has-text-align-center\\">1</p>

package/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -110,6 +110,12 @@ exports[`RichText should return focus when pressing formatting button 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should run input rules after composition end 1`] = `
+"<!-- wp:paragraph -->
+<p><code>a</code></p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should split rich text on paste 1`] = `
 "<!-- wp:paragraph -->
 <p>a</p>

package/specs/editor/various/multi-block-selection.test.js

@@ -636,4 +636,43 @@ describe( 'Multi-block selection', () => {
 			'[data-type="core/paragraph"].is-multi-selected'
 		);
 	} );
+
+	it( 'should select all from empty selection', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		// Confirm setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Clear the selected block.
+		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const box = await paragraph.boundingBox();
+		await page.mouse.click( box.x - 1, box.y );
+
+		await pressKeyWithModifier( 'primary', 'a' );
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect both paragraphs to be deleted.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should select title if the cursor is on title', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		await page.type( '.editor-post-title__input', 'Post title' );
+
+		await pressKeyWithModifier( 'primary', 'a' );
+		const selectedText = await page.evaluate( () => {
+			return window.getSelection().toString();
+		} );
+		expect( selectedText ).toEqual( 'Post title' );
+	} );
 } );

package/specs/editor/various/rich-text.test.js

@@ -451,4 +451,23 @@ describe( 'RichText', () => {
 		await page.keyboard.press( 'ArrowLeft' );
 		expect( await page.$( blockToolbarSelector ) ).toBe( null );
 	} );
+
+	it( 'should run input rules after composition end', async () => {
+		await clickBlockAppender();
+		// Puppeteer doesn't support composition, so emulate it by inserting
+		// text in the DOM directly, setting selection in the right place, and
+		// firing `compositionend`.
+		// See https://github.com/puppeteer/puppeteer/issues/4981.
+		await page.evaluate( () => {
+			document.activeElement.textContent = '`a`';
+			const selection = window.getSelection();
+			selection.selectAllChildren( document.activeElement );
+			selection.collapseToEnd();
+			document.activeElement.dispatchEvent(
+				new CompositionEvent( 'compositionend' )
+			);
+		} );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );