@wordpress/e2e-tests 7.21.0 → 7.22.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.22.0 (2024-02-09)
+
 ## 7.21.0 (2024-01-24)
 
 ## 7.20.0 (2024-01-10)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.21.0",
+	"version": "7.22.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,13 +23,13 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.21.0",
-		"@wordpress/interactivity": "^4.0.0",
-		"@wordpress/interactivity-router": "^1.0.0",
-		"@wordpress/jest-console": "^7.21.0",
-		"@wordpress/jest-puppeteer-axe": "^6.21.0",
-		"@wordpress/scripts": "^27.1.0",
-		"@wordpress/url": "^3.51.0",
+		"@wordpress/e2e-test-utils": "^10.22.0",
+		"@wordpress/interactivity": "^5.0.0",
+		"@wordpress/interactivity-router": "^1.1.0",
+		"@wordpress/jest-console": "^7.22.0",
+		"@wordpress/jest-puppeteer-axe": "^6.22.0",
+		"@wordpress/scripts": "^27.2.0",
+		"@wordpress/url": "^3.52.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

package/plugins/block-bindings.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Bindings
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-bindings
+ */
+
+/**
+* Register custom fields.
+*/
+function gutenberg_test_block_bindings_register_custom_fields() {
+	register_meta(
+		'post',
+		'text_custom_field',
+		array(
+			'show_in_rest' => true,
+			'type'         => 'string',
+			'single'       => true,
+			'default'      => 'Value of the text_custom_field',
+		)
+	);
+	// TODO: Change url.
+	register_meta(
+		'post',
+		'url_custom_field',
+		array(
+			'show_in_rest' => true,
+			'type'         => 'string',
+			'single'       => true,
+			'default'      => '#url-custom-field',
+		)
+	);
+}
+add_action( 'init', 'gutenberg_test_block_bindings_register_custom_fields' );

package/plugins/interactive-blocks/directive-context/render.php

@@ -134,3 +134,12 @@ wp_enqueue_script_module( 'directive-context-view' );
 	<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
 	<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 </div>
+
+<div
+	data-wp-interactive='{"namespace": "directive-context-non-default"}'
+	data-wp-context--non-default='{ "text": "non default" }'
+	data-wp-context='{ "defaultText": "default" }'
+>
+	<span data-testid="non-default suffix context" data-wp-text="context.text"></span>
+	<span data-testid="default suffix context" data-wp-text="context.defaultText"></span>
+</div>

package/plugins/interactive-blocks/directive-each/render.php

@@ -21,6 +21,18 @@ wp_enqueue_script_module( 'directive-each-view' );
 
 	<hr>
 
+	<div data-testid="letters-kebab-case">
+		<template data-wp-each--my-item="state.letters">
+			<p data-wp-text="context.myItem" data-testid="item"></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A</p>
+		<p data-testid="item" data-wp-each-child>B</p>
+		<p data-testid="item" data-wp-each-child>C</p>
+	</div>
+
+	<hr>
+
 	<div data-testid="fruits">
 		<button
 			data-testid="rotate" data-wp-on--click="actions.rotateFruits"

package/plugins/interactive-blocks/directive-init/view.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { store, directive, getContext } from '@wordpress/interactivity';
+import { store, getContext, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
 
 // Mock `data-wp-show` directive to test when things are removed from the
 // DOM.  Replace with `data-wp-show` when it's ready.

package/plugins/interactive-blocks/directive-on-document/view.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { store, directive } from '@wordpress/interactivity';
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
 
 // Mock `data-wp-show` directive to test when things are removed from the
 // DOM.  Replace with `data-wp-show` when it's ready.

package/plugins/interactive-blocks/directive-on-window/view.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { store, directive } from '@wordpress/interactivity';
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
 
 // Mock `data-wp-show` directive to test when things are removed from the
 // DOM.  Replace with `data-wp-show` when it's ready.

package/plugins/interactive-blocks/directive-priorities/view.js

@@ -4,12 +4,14 @@
 import {
 	store,
 	getContext,
-	directive,
-	deepSignal,
 	useEffect,
-	createElement as h,
+	privateApis
 } from '@wordpress/interactivity';
 
+const { directive, deepSignal, h } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
 /**
  * Namespace used in custom directives and store.
  */

package/plugins/interactive-blocks/directive-run/view.js

@@ -3,13 +3,16 @@
  */
 import {
 	store,
-	directive,
 	useInit,
 	useWatch,
-	cloneElement,
 	getElement,
+	privateApis
 } from '@wordpress/interactivity';
 
+const { directive, cloneElement } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
 // Custom directive to show hide the content elements in which it is placed.
 directive(
 	'show-children',

package/plugins/interactive-blocks/directive-text/view.js

@@ -1,12 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, createElement } from '@wordpress/interactivity';
+import { store, getContext, privateApis } from '@wordpress/interactivity';
+
+const { h } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
 
 const { state } = store( 'directive-context', {
 	state: {
 		text: 'Text 1',
-		component: () => (createElement( 'div', {}, state.text )),
+		component: () => ( h( 'div', {}, state.text ) ),
 		number: 1,
 		boolean: true
 	},

package/plugins/interactive-blocks/directive-watch/view.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { store, directive } from '@wordpress/interactivity';
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
 
 // Fake `data-wp-show-mock` directive to test when things are removed from the
 // DOM.  Replace with `data-wp-show` when it's ready.

package/plugins/interactive-blocks/router-navigate/render.php

@@ -8,6 +8,13 @@
  */
 
 wp_enqueue_script_module( 'router-navigate-view' );
+
+if ( $attributes['disableNavigation'] ) {
+	wp_interactivity_config(
+		'core/router',
+		array( 'clientNavigationDisabled' => true )
+	);
+}
 ?>
 
 <div

package/plugins/interactive-blocks/tovdom-islands/render.php

@@ -17,7 +17,15 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 
 	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div data-wp-show-mock="state.falseValue">
-			<span data-testid="inside an island">
+			<span data-testid="inside an island with json object">
+				This should not be shown because it is inside an island.
+			</span>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-show-mock="state.falseValue">
+			<span data-testid="inside an island with string">
 				This should not be shown because it is inside an island.
 			</span>
 		</div>
@@ -69,8 +77,6 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 		</div>
 	</div>
 
-
-
 	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div data-wp-interactive='{ "namespace": "something-new" }'></div>
 		<div data-wp-show-mock="state.falseValue">

package/plugins/interactive-blocks/tovdom-islands/view.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { store, directive, createElement as h } from '@wordpress/interactivity';
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive, h } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
 
 // Fake `data-wp-show-mock` directive to test when things are removed from the
 // DOM.  Replace with `data-wp-show` when it's ready.

package/plugins/interactive-blocks/directive-body/block.json

@@ -1,15 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "test/directive-body",
-	"title": "E2E Interactivity tests - directive body",
-	"category": "text",
-	"icon": "heart",
-	"description": "",
-	"supports": {
-		"interactivity": true
-	},
-	"textdomain": "e2e-interactivity",
-	"viewScript": "directive-body-view",
-	"render": "file:./render.php"
-}

package/plugins/interactive-blocks/directive-body/render.php

@@ -1,24 +0,0 @@
-<?php
-/**
- * HTML for testing the directive `data-wp-body`.
- *
- * @package gutenberg-test-interactive-blocks
- */
-
-wp_enqueue_script_module( 'directive-body-view' );
-?>
-
-<div
-	data-wp-interactive='{ "namespace":"directive-body" }'
-	data-wp-context='{"text":"text-1"}'
->
-	<div data-testid="container">
-		<aside data-wp-body data-testid="element with data-wp-body">
-			<p data-wp-text="context.text" data-testid="text">initial</p>
-		</aside>
-	</div>
-	<button
-		data-wp-on--click="actions.toggleText"
-		data-testid="toggle text"
-	>toggle text</button>
-</div>

package/plugins/interactive-blocks/directive-body/view.js

@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store, getContext } from '@wordpress/interactivity';
-
-store( 'directive-body', {
-	actions: {
-		toggleText: () => {
-			const context = getContext();
-			context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
-		},
-	},
-} );

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

@@ -1,118 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Inserting blocks Should insert content using the placeholder and the regular inserter 1`] = `
-"<!-- wp:paragraph -->
-<p>Paragraph block</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>Quote block</p></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks Should insert content using the placeholder and the regular inserter 2`] = `
-"<!-- wp:paragraph -->
-<p>Paragraph block</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>Quote block</p></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Inserting blocks Should insert content using the placeholder and the regular inserter 3`] = `
-"<!-- wp:paragraph -->
-<p>Paragraph block</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>Quote block</p></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">Pre text
-
-Foo</pre>
-<!-- /wp:preformatted -->
-
-<!-- wp:shortcode -->
-[myshortcode]With multiple
-lines preserved[/myshortcode]
-<!-- /wp:shortcode -->"
-`;
-
-exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from block appender 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:paragraph -->
-<p>Paragraph inside group</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
-
-<!-- wp:paragraph -->
-<p>Paragraph after group</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from inline inserter 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading">Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from inline inserter 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:cover {"layout":{"type":"constrained"}} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
-<!-- /wp:cover -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading">Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks inserts blocks at root level when using the root appender while selection is in an inner block 1`] = `
-"<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button -->
-<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">1.1</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;

package/specs/editor/various/__snapshots__/pattern-blocks.test.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pattern blocks can be created from multiselection and converted back to regular blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>Hello there!</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->"
-`;

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

@@ -1,388 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	closeGlobalBlockInserter,
-	createNewPost,
-	getEditedPostContent,
-	insertBlock,
-	openGlobalBlockInserter,
-	pressKeyTimes,
-	searchForBlock,
-	setBrowserViewport,
-	pressKeyWithModifier,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
-
-/**
- * Waits for all patterns in the inserter to have a height, which should
- * indicate they've been parsed and are visible.
- *
- * This allows a test to wait for the layout in the inserter menu to stabilize
- * before attempting to interact with the menu contents.
- */
-async function waitForInserterPatternLoad() {
-	await page.waitForFunction( () => {
-		const previewElements = document.querySelectorAll(
-			'.block-editor-block-preview__container'
-		);
-
-		if ( ! previewElements.length ) {
-			return true;
-		}
-
-		return Array.from( previewElements ).every(
-			( previewElement ) => previewElement.offsetHeight > 0
-		);
-	} );
-}
-
-describe( 'Inserting blocks', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Given a Puppeteer ElementHandle, clicks below its bounding box.
-	 *
-	 * @param {ElementHandle} elementHandle Element handle.
-	 *
-	 * @return {Promise} Promise resolving when click occurs.
-	 */
-	async function clickAtBottom( elementHandle ) {
-		const box = await elementHandle.boundingBox();
-		const x = box.x + box.width / 2;
-		const y = box.y + box.height - 50;
-		return page.mouse.click( x, y );
-	}
-
-	it.skip( 'Should insert content using the placeholder and the regular inserter', async () => {
-		// This ensures the editor is loaded in navigation mode.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Set a tall viewport. The typewriter's intrinsic height can be enough
-		// to scroll the page on a shorter viewport, thus obscuring the presence
-		// of any potential buggy behavior with the "stretched" click redirect.
-		await setBrowserViewport( { width: 960, height: 1400 } );
-
-		// Click below editor to focus last field (block appender)
-		await clickAtBottom(
-			await page.$( '.interface-interface-skeleton__content' )
-		);
-		expect(
-			await page.waitForSelector( '[data-type="core/paragraph"]' )
-		).not.toBeNull();
-		await page.keyboard.type( 'Paragraph block' );
-
-		// Using the slash command.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '/quote' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Quote')]`
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Quote block' );
-
-		// Arrow down into default appender.
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'ArrowDown' );
-
-		// Focus should be moved to block focus boundary on a block which does
-		// not have its own inputs (e.g. image). Proceeding to press enter will
-		// append the default block. Pressing backspace on the focused block
-		// will remove it.
-		await page.keyboard.type( '/image' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Image')]`
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.press( 'Backspace' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Using the regular inserter.
-		await insertBlock( 'Preformatted' );
-		await page.keyboard.type( 'Pre block' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-
-		// Verify vertical traversal at offset. This has been buggy in the past
-		// where verticality on a blank newline would skip into previous block.
-		await page.keyboard.type( 'Foo' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyTimes( 'Delete', 6 );
-		await page.keyboard.type( ' text' );
-
-		// Ensure newline preservation in shortcode block.
-		// See: https://github.com/WordPress/gutenberg/issues/4456
-		await insertBlock( 'Shortcode' );
-		await page.keyboard.type( '[myshortcode]With multiple' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'lines preserved[/myshortcode]' );
-
-		// Unselect blocks to avoid conflicts with the inbetween inserter
-		await page.click( '.editor-post-title__input' );
-		await closeGlobalBlockInserter();
-
-		// Using the between inserter.
-		const insertionPoint = await page.$( '[data-type="core/quote"]' );
-		const rect = await insertionPoint.boundingBox();
-		await page.mouse.move( rect.x + rect.width / 2, rect.y - 10, {
-			steps: 10,
-		} );
-		const lineInserter = await page.waitForSelector(
-			'.block-editor-block-list__insertion-point .block-editor-inserter__toggle'
-		);
-		await lineInserter.click();
-		// [TODO]: Search input should be focused immediately. It shouldn't be
-		// necessary to have `waitForFunction`.
-		await page.waitForFunction(
-			() =>
-				document.activeElement &&
-				document.activeElement.classList.contains(
-					'components-search-control__input'
-				)
-		);
-		await page.keyboard.type( 'para' );
-		await pressKeyTimes( 'Tab', 2 );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should insert block with the slash inserter when using multiple words', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '/tag cloud' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Tag Cloud')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect(
-			await canvas().waitForSelector( '[data-type="core/tag-cloud"]' )
-		).not.toBeNull();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/23263
-	it( 'inserts blocks at root level when using the root appender while selection is in an inner block', async () => {
-		await insertBlock( 'Buttons' );
-		await page.keyboard.type( '1.1' );
-
-		// After inserting the Buttons block the inner button block should be selected.
-		const selectedButtonBlocks = await canvas().$$(
-			'.wp-block-button.is-selected'
-		);
-		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 canvas().click(
-			'.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'
-		);
-
-		// Insert a paragraph block.
-		await page.waitForSelector( '.block-editor-inserter__search input' );
-
-		// Search for the paragraph block if it's not in the list of blocks shown.
-		if ( ! page.$( '.editor-block-list-item-paragraph' ) ) {
-			await page.keyboard.type( 'Paragraph' );
-			await page.waitForSelector( '.editor-block-list-item-paragraph' );
-			await waitForInserterPatternLoad();
-		}
-
-		// Add the block.
-		await page.click( '.editor-block-list-item-paragraph' );
-		await page.keyboard.type( '2' );
-
-		// The snapshot should show a buttons block followed by a paragraph.
-		// The buttons block should contain a single button.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/24262
-	it( 'inserts a block in proper place after having clicked `Browse All` from inline inserter', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First paragraph' );
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'Heading' );
-		await page.keyboard.press( 'Enter' );
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Second paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Third paragraph' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Using the between inserter.
-		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,
-		} );
-		const insertionLine = await page.waitForSelector(
-			'.block-editor-block-list__insertion-point .block-editor-inserter__toggle'
-		);
-		await insertionLine.click();
-		const browseAll = await page.waitForSelector(
-			'button.block-editor-inserter__quick-inserter-expand'
-		);
-		await browseAll.click();
-		// `insertBlock` uses the currently open panel.
-		await insertBlock( 'Cover' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/25785
-	it( 'inserts a block should show a blue line indicator', async () => {
-		// First insert a random Paragraph.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First paragraph' );
-		await insertBlock( 'Image' );
-		const paragraphBlock = await canvas().$(
-			'p[aria-label="Block: Paragraph"]'
-		);
-		paragraphBlock.click();
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		// Open the global inserter and search for the Heading block.
-		await searchForBlock( 'Heading' );
-
-		const headingButton = (
-			await page.$x( `//button//span[contains(text(), 'Heading')]` )
-		)[ 0 ];
-		// Hover over the block should show the blue line indicator.
-		await headingButton.hover();
-
-		// Should show the blue line indicator somewhere.
-		const indicator = await page.waitForSelector(
-			'.block-editor-block-list__insertion-point-indicator'
-		);
-		const indicatorRect = await indicator.boundingBox();
-		const paragraphRect = await paragraphBlock.boundingBox();
-
-		// The blue line indicator should be below the last block.
-		expect( indicatorRect.x ).toBe( paragraphRect.x );
-		expect( indicatorRect.y > paragraphRect.y ).toBe( true );
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/24403
-	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 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 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"]'
-		);
-		await browseAll.click();
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph inside group' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'passes the search value in the main inserter when clicking `Browse all`', async () => {
-		const INSERTER_SEARCH_SELECTOR =
-			'.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 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 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' );
-		const searchTerm = 'Verse';
-		await page.keyboard.type( searchTerm );
-		const browseAll = await page.waitForXPath(
-			'//button[text()="Browse all"]'
-		);
-		await browseAll.click();
-		const availableBlocks = await page.$$(
-			'.editor-inserter-sidebar .block-editor-block-types-list__list-item'
-		);
-		expect( availableBlocks ).toHaveLength( 1 );
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/27586
-	it( 'closes the main inserter after inserting a single-use block, like the More block', async () => {
-		await insertBlock( 'More' );
-		await page.waitForSelector(
-			'.editor-document-tools__inserter-toggle:not(.is-pressed)'
-		);
-
-		// The inserter panel should've closed.
-		const inserterPanels = await page.$$( '.editor-inserter-sidebar' );
-		expect( inserterPanels.length ).toBe( 0 );
-
-		// The editable 'Read More' text should be focused.
-		const isFocusInBlock = await canvas().evaluate( () =>
-			document
-				.querySelector( '[data-type="core/more"]' )
-				.contains( document.activeElement )
-		);
-		expect( isFocusInBlock ).toBe( true );
-	} );
-
-	it( 'shows block preview when hovering over block in inserter', async () => {
-		await openGlobalBlockInserter();
-		const paragraphButton = (
-			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
-		)[ 0 ];
-		await paragraphButton.hover();
-		const preview = await page.waitForSelector(
-			'.block-editor-inserter__preview',
-			{
-				visible: true,
-			}
-		);
-		const isPreviewVisible = await preview.isIntersectingViewport();
-		expect( isPreviewVisible ).toBe( true );
-	} );
-
-	it.each( [ 'large', 'small' ] )(
-		'last-inserted block should be given and keep the focus (%s viewport)',
-		async ( viewport ) => {
-			await setBrowserViewport( viewport );
-
-			await canvas().type(
-				'.block-editor-default-block-appender__content',
-				'Testing inserted block focus'
-			);
-
-			await insertBlock( 'Image' );
-
-			await canvas().waitForSelector( 'figure[data-type="core/image"]' );
-
-			const selectedBlock = await page.evaluate( () => {
-				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-			} );
-
-			expect( selectedBlock.name ).toBe( 'core/image' );
-		}
-	);
-} );

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

@@ -1,289 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickMenuItem,
-	insertBlock,
-	insertPattern,
-	createNewPost,
-	clickBlockToolbarButton,
-	pressKeyWithModifier,
-	getEditedPostContent,
-	trashAllPosts,
-	visitAdminPage,
-	toggleGlobalBlockInserter,
-	openDocumentSettingsSidebar,
-	saveDraft,
-	createReusableBlock,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-const patternBlockNameInputSelector =
-	'.patterns-menu-items__convert-modal .components-text-control__input';
-const patternBlockInspectorNameSelector =
-	'.block-editor-block-inspector h2.block-editor-block-card__title';
-const syncToggleSelectorChecked =
-	'.patterns-menu-items__convert-modal .components-form-toggle.is-checked';
-
-const clearAllBlocks = async () => {
-	// Remove all blocks from the post so that we're working with a clean slate.
-	await page.evaluate( () => {
-		const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
-		const clientIds = blocks.map( ( block ) => block.clientId );
-		wp.data.dispatch( 'core/block-editor' ).removeBlocks( clientIds );
-	} );
-};
-
-describe( 'Pattern blocks', () => {
-	afterAll( async () => {
-		await trashAllPosts( 'wp_block' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created, inserted, and converted to a regular block.', async () => {
-		await createReusableBlock( 'Hello there!', 'Greeting block' );
-		await clearAllBlocks();
-
-		// Insert the reusable block we created above.
-		await insertPattern( 'Greeting block' );
-
-		// Check that its content is up to date.
-		const text = await canvas().$eval(
-			'.block-editor-block-list__block[data-type="core/block"] p',
-			( element ) => element.innerText
-		);
-		expect( text ).toMatch( 'Hello there!' );
-
-		await clearAllBlocks();
-
-		// Insert the reusable block we edited above.
-		await insertPattern( 'Greeting block' );
-
-		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Detach' );
-
-		// Check that we have a paragraph block on the 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 canvas().$eval(
-			'.block-editor-block-list__block[data-type="core/paragraph"]',
-			( element ) => element.innerText
-		);
-		expect( paragraphContent ).toMatch( 'Hello there!' );
-	} );
-
-	it( 'can be inserted after refresh', async () => {
-		await createReusableBlock( 'Awesome Paragraph', 'Awesome block' );
-
-		// Step 2. Create new post.
-		await createNewPost();
-
-		// Step 3. Insert the block created in Step 1.
-		await insertPattern( 'Awesome block' );
-
-		// Check the title.
-		await openDocumentSettingsSidebar();
-		const title = await page.$eval(
-			patternBlockInspectorNameSelector,
-			( element ) => element.textContent
-		);
-		expect( title ).toBe( 'Awesome block' );
-	} );
-
-	it( 'can be created from multiselection and converted back to regular blocks', async () => {
-		await createNewPost();
-
-		// Insert a Two paragraphs block.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Hello there!' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second paragraph' );
-
-		// Select all the blocks.
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		// Convert block to a reusable block.
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern' );
-
-		// Set title.
-		const nameInput = await page.waitForSelector(
-			patternBlockNameInputSelector
-		);
-		await nameInput.click();
-		await page.keyboard.type( 'Multi-selection reusable block' );
-		await page.waitForSelector( syncToggleSelectorChecked );
-		await page.keyboard.press( 'Enter' );
-
-		// Wait for creation to finish.
-		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[contains(text(),"pattern created:")]'
-		);
-
-		await clearAllBlocks();
-
-		// Insert the reusable block we edited above.
-		await insertPattern( 'Multi-selection reusable block' );
-
-		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Detach' );
-
-		// Check that we have two paragraph blocks on the page.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'will not break the editor if empty', async () => {
-		await createReusableBlock(
-			'Awesome Paragraph',
-			'Random reusable block'
-		);
-		await clearAllBlocks();
-		await insertPattern( 'Random reusable block' );
-
-		await visitAdminPage( 'edit.php', [ 'post_type=wp_block' ] );
-
-		const [ editButton ] = await page.$x(
-			`//a[contains(@aria-label, 'Random reusable block')]`
-		);
-		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 canvas().waitForSelector( blockSelector );
-		await canvas().click( blockSelector );
-
-		// Delete the block, leaving the reusable block empty.
-		await clickBlockToolbarButton( 'Options' );
-		const deleteButton = await page.waitForXPath(
-			'//button/span[text()="Delete"]'
-		);
-		deleteButton.click();
-
-		// Wait for the Update button to become enabled.
-		const publishButtonSelector = '.editor-post-publish-button__button';
-		await page.waitForSelector(
-			publishButtonSelector + '[aria-disabled="false"]'
-		);
-
-		// Save the reusable block.
-		await page.click( publishButtonSelector );
-		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Pattern updated."]'
-		);
-
-		await createNewPost();
-
-		await toggleGlobalBlockInserter();
-
-		expect( console ).not.toHaveErrored();
-	} );
-
-	it( 'Should show a proper message when the reusable block is missing', async () => {
-		// Insert a non-existant reusable block.
-		await page.evaluate( () => {
-			const { createBlock } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			dispatch( 'core/block-editor' ).resetBlocks( [
-				createBlock( 'core/block', { ref: 123456 } ),
-			] );
-		} );
-
-		await canvas().waitForXPath(
-			'//*[contains(@class, "block-editor-warning")]/*[text()="Block has been deleted or is unavailable."]'
-		);
-
-		// This happens when the 404 is returned.
-		expect( console ).toHaveErrored();
-	} );
-
-	it( 'should be able to insert a reusable block twice', async () => {
-		await createReusableBlock(
-			'Awesome Paragraph',
-			'Duplicated reusable block'
-		);
-		await clearAllBlocks();
-		await insertPattern( 'Duplicated reusable block' );
-		await insertPattern( 'Duplicated reusable block' );
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-
-		// Wait for the paragraph to be loaded.
-		await canvas().waitForSelector(
-			'.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 canvas().click( '.wp-block-block' );
-		await canvas().focus(
-			'.block-editor-block-list__block[data-type="core/paragraph"]'
-		);
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.press( 'End' );
-		await page.keyboard.type( ' modified' );
-
-		// Wait for async mode to dispatch the update.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 1000 );
-
-		// Check that the content of the second reusable block has been updated.
-		const reusableBlocks = await page.$$( '.wp-block-block' );
-		await Promise.all(
-			reusableBlocks.map( async ( paragraph ) => {
-				const content = await paragraph.$eval(
-					'p',
-					( element ) => element.textContent
-				);
-				expect( content ).toEqual( 'Awesome Paragraph modified' );
-			} )
-		);
-	} );
-
-	// Test for regressions of https://github.com/WordPress/gutenberg/issues/27243.
-	it( 'should allow a block with styles to be converted to a reusable block', async () => {
-		// Insert a quote and reload the page.
-		insertBlock( 'Quote' );
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-
-		// The quote block should have a visible preview in the sidebar for this test to be valid.
-		const quoteBlock = await canvas().waitForSelector(
-			'.block-editor-block-list__block[aria-label="Block: Quote"]'
-		);
-		// Select the quote block.
-		await quoteBlock.focus();
-		await openDocumentSettingsSidebar();
-		await page.waitForXPath(
-			'//*[@role="region"][@aria-label="Editor settings"]//button[.="Styles"]'
-		);
-
-		// Convert to reusable.
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern' );
-		const nameInput = await page.waitForSelector(
-			patternBlockNameInputSelector
-		);
-		await nameInput.click();
-		await page.keyboard.type( 'Block with styles' );
-		await page.waitForSelector( syncToggleSelectorChecked );
-		await page.keyboard.press( 'Enter' );
-		const reusableBlock = await canvas().waitForSelector(
-			'.block-editor-block-list__block[aria-label="Block: Pattern"]'
-		);
-		expect( reusableBlock ).toBeTruthy();
-	} );
-} );