@wordpress/e2e-tests 8.17.0 → 8.19.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 8.19.0 (2025-02-28)
+
+## 8.18.0 (2025-02-12)
+
 ## 8.17.0 (2025-01-29)
 
 ## 8.16.0 (2025-01-15)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.17.0",
+	"version": "8.19.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,13 +24,13 @@
 		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^11.17.0",
-		"@wordpress/interactivity": "^6.17.0",
-		"@wordpress/interactivity-router": "^2.17.0",
-		"@wordpress/jest-console": "^8.17.0",
-		"@wordpress/jest-puppeteer-axe": "^7.17.0",
-		"@wordpress/scripts": "^30.10.0",
-		"@wordpress/url": "^4.17.0",
+		"@wordpress/e2e-test-utils": "^11.19.0",
+		"@wordpress/interactivity": "^6.19.0",
+		"@wordpress/interactivity-router": "^2.19.0",
+		"@wordpress/jest-console": "^8.19.0",
+		"@wordpress/jest-puppeteer-axe": "^7.19.0",
+		"@wordpress/scripts": "^30.12.0",
+		"@wordpress/url": "^4.19.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "68a831c3178197fe87db284d4b94e5743bfb6b6c"
+	"gitHead": "d6b0b20fa927b110140dc7fdd906a7e0bf662004"
 }

package/plugins/block-hooks.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Hooks
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-hooks
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+function gutenberg_test_insert_hooked_blocks( $hooked_blocks, $position, $anchor_block, $context ) {
+	if ( ! $context instanceof WP_Post ) {
+		return $hooked_blocks;
+	}
+
+	if (
+		( 'core/heading' === $anchor_block && 'after' === $position ) ||
+		( 'core/post-content' === $anchor_block && 'last_child' === $position ) ||
+		( 'core/block' === $anchor_block && 'last_child' === $position )
+	) {
+		$hooked_blocks[] = 'core/paragraph';
+	}
+
+	if ( 'core/navigation' === $anchor_block && 'first_child' === $position ) {
+		$hooked_blocks[] = 'core/home-link';
+	}
+
+	if ( 'core/navigation-link' === $anchor_block && 'after' === $position ) {
+		$hooked_blocks[] = 'core/page-list';
+	}
+
+	return $hooked_blocks;
+}
+add_filter( 'hooked_block_types', 'gutenberg_test_insert_hooked_blocks', 10, 4 );
+
+function gutenberg_test_set_hooked_block_inner_html( $hooked_block, $hooked_block_type, $relative_position, $anchor_block ) {
+	if (
+		( 'core/heading' === $anchor_block['blockName'] && 'after' === $relative_position ) ||
+		( 'core/post-content' === $anchor_block['blockName'] && 'last_child' === $relative_position ) ||
+		( 'core/block' === $anchor_block['blockName'] && 'last_child' === $relative_position )
+	) {
+		$hooked_block['attrs']        = array(
+			'className' => "hooked-block-{$relative_position}-" . str_replace( 'core/', '', $anchor_block['blockName'] ),
+		);
+		$hooked_block['innerContent'] = array(
+			sprintf(
+				'<p class="%1$s">This block was inserted by the Block Hooks API in the <code>%2$s</code> position next to the <code>%3$s</code> anchor block.</p>',
+				$hooked_block['attrs']['className'],
+				$relative_position,
+				$anchor_block['blockName']
+			),
+		);
+	}
+
+	return $hooked_block;
+}
+add_filter( 'hooked_block_core/paragraph', 'gutenberg_test_set_hooked_block_inner_html', 10, 4 );
+
+function gutenberg_register_wp_ignored_hooked_blocks_meta() {
+	register_post_meta(
+		'post',
+		'_wp_ignored_hooked_blocks',
+		array(
+			'show_in_rest'  => true,
+			'single'        => true,
+			'type'          => 'string',
+			'auth_callback' => function () {
+				return current_user_can( 'edit_posts' );
+			},
+		)
+	);
+}
+add_action( 'rest_api_init', 'gutenberg_register_wp_ignored_hooked_blocks_meta' );

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

@@ -240,7 +240,12 @@ directive(
 	'priority-2-init',
 	( { directives: { 'priority-2-init': init }, evaluate } ) => {
 		init.forEach( ( entry ) => {
-			useInit( () => evaluate( entry ) );
+			useInit( () => {
+				const result = evaluate( entry );
+				if ( typeof result === 'function' ) {
+					result();
+				}
+			} );
 		} );
 	},
 	{ priority: 2 }

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

@@ -13,7 +13,11 @@ directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
 		const entry = showMock.find( ( { suffix } ) => suffix === null );
-		if ( ! evaluate( entry ) ) {
+		const result = evaluate( entry );
+		if ( ! result ) {
+			return null;
+		}
+		if ( typeof result === 'function' && ! result() ) {
 			return null;
 		}
 		return element;

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

@@ -13,7 +13,11 @@ directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
 		const entry = showMock.find( ( { suffix } ) => suffix === null );
-		if ( ! evaluate( entry ) ) {
+		const result = evaluate( entry );
+		if ( ! result ) {
+			return null;
+		}
+		if ( typeof result === 'function' && ! result() ) {
 			return null;
 		}
 		return element;

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

@@ -13,7 +13,11 @@ directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
 		const entry = showMock.find( ( { suffix } ) => suffix === null );
-		if ( ! evaluate( entry ) ) {
+		const result = evaluate( entry );
+		if ( ! result ) {
+			return null;
+		}
+		if ( typeof result === 'function' && ! result() ) {
 			return null;
 		}
 		return element;

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

@@ -58,10 +58,13 @@ directive(
  */
 directive( 'test-attribute', ( { evaluate, element } ) => {
 	executionProof( 'attribute' );
-	const attributeValue = evaluate( {
+	let attributeValue = evaluate( {
 		namespace,
 		value: 'context.attribute',
 	} );
+	if ( typeof attributeValue === 'function' ) {
+		attributeValue = attributeValue();
+	}
 	useEffect( () => {
 		element.ref.current.setAttribute( 'data-attribute', attributeValue );
 	}, [] );
@@ -76,7 +79,10 @@ directive(
 	'test-text',
 	( { evaluate, element } ) => {
 		executionProof( 'text' );
-		const textValue = evaluate( { namespace, value: 'context.text' } );
+		let textValue = evaluate( { namespace, value: 'context.text' } );
+		if ( typeof textValue === 'function' ) {
+			textValue = textValue();
+		}
 		element.props.children = h( 'p', { 'data-testid': 'text' }, textValue );
 	},
 	{ priority: 12 }
@@ -92,10 +98,22 @@ directive(
 	( { evaluate, element } ) => {
 		executionProof( 'children' );
 		const updateAttribute = () => {
-			evaluate( { namespace, value: 'actions.updateAttribute' } );
+			const result = evaluate( {
+				namespace,
+				value: 'actions.updateAttribute',
+			} );
+			if ( typeof result === 'function' ) {
+				result();
+			}
 		};
 		const updateText = () => {
-			evaluate( { namespace, value: 'actions.updateText' } );
+			const result = evaluate( {
+				namespace,
+				value: 'actions.updateText',
+			} );
+			if ( typeof result === 'function' ) {
+				result();
+			}
 		};
 		element.props.children = h(
 			'div',

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

@@ -22,9 +22,11 @@ directive(
 		evaluate,
 	} ) => {
 		const entry = showChildren.find( ( { suffix } ) => suffix === null );
-		return evaluate( entry )
-			? element
-			: cloneElement( element, { children: null } );
+		let result = evaluate( entry );
+		if ( typeof result === 'function' ) {
+			result = result();
+		}
+		return result ? element : cloneElement( element, { children: null } );
 	},
 	{ priority: 9 }
 );

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

@@ -13,7 +13,11 @@ directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
 		const entry = showMock.find( ( { suffix } ) => suffix === null );
-		if ( ! evaluate( entry ) ) {
+		const result = evaluate( entry );
+		if ( ! result ) {
+			return null;
+		}
+		if ( typeof result === 'function' && ! result() ) {
 			return null;
 		}
 		return element;

package/plugins/interactive-blocks/get-server-context/view.js

@@ -1,17 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getServerContext } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getServerContext,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 store( 'test/get-server-context', {
 	actions: {
-		*navigate( e ) {
+		navigate: withSyncEvent( function* ( e ) {
 			e.preventDefault();
 			const { actions } = yield import(
 				'@wordpress/interactivity-router'
 			);
 			yield actions.navigate( e.target.href );
-		},
+		} ),
 		attemptModification() {
 			try {
 				getServerContext().prop = 'updated from client';

package/plugins/interactive-blocks/get-server-state/view.js

@@ -1,17 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { store, getServerState, getContext } from '@wordpress/interactivity';
+import {
+	store,
+	getServerState,
+	getContext,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const { state } = store( 'test/get-server-state', {
 	actions: {
-		*navigate( e ) {
+		navigate: withSyncEvent( function* ( e ) {
 			e.preventDefault();
 			const { actions } = yield import(
 				'@wordpress/interactivity-router'
 			);
 			yield actions.navigate( e.target.href );
-		},
+		} ),
 		attemptModification() {
 			try {
 				getServerState().prop = 'updated from client';

package/plugins/interactive-blocks/router-navigate/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store } from '@wordpress/interactivity';
+import { store, withSyncEvent } from '@wordpress/interactivity';
 
 const { state } = store( 'router', {
 	state: {
@@ -18,7 +18,7 @@ const { state } = store( 'router', {
 		},
 	},
 	actions: {
-		*navigate( e ) {
+		navigate: withSyncEvent( function* ( e ) {
 			e.preventDefault();
 
 			state.navigations.count += 1;
@@ -38,7 +38,7 @@ const { state } = store( 'router', {
 			if ( state.navigations.pending === 0 ) {
 				state.status = 'idle';
 			}
-		},
+		} ),
 		toggleTimeout() {
 			state.timeout = state.timeout === 10000 ? 0 : 10000;
 		},

package/plugins/interactive-blocks/router-regions/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 
 const { state } = store( 'router-regions', {
 	state: {
@@ -17,13 +17,13 @@ const { state } = store( 'router-regions', {
 	},
 	actions: {
 		router: {
-			*navigate( e ) {
+			navigate: withSyncEvent( function* ( e ) {
 				e.preventDefault();
 				const { actions } = yield import(
 					'@wordpress/interactivity-router'
 				);
 				yield actions.navigate( e.target.href );
-			},
+			} ),
 			back() {
 				history.back();
 			},

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

@@ -14,7 +14,11 @@ directive(
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
 		const entry = showMock.find( ( { suffix } ) => suffix === null );
 
-		if ( ! evaluate( entry ) ) {
+		let result = evaluate( entry );
+		if ( typeof result === 'function' ) {
+			result = result();
+		}
+		if ( ! result ) {
 			element.props.children = h(
 				'template',
 				null,

package/plugins/interactive-blocks/router-styles-blue/block.json

@@ -1,15 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "test/router-styles-blue",
-	"title": "E2E Interactivity tests - router styles - Blue",
-	"category": "text",
-	"icon": "heart",
-	"description": "",
-	"supports": {
-		"interactivity": true
-	},
-	"textdomain": "e2e-interactivity",
-	"viewStyle": "file:./style.css",
-	"render": "file:./render.php"
-}

package/plugins/interactive-blocks/router-styles-blue/render.php

@@ -1,35 +0,0 @@
-<?php
-/**
- * HTML for testing the iAPI's style assets management.
- *
- * @package gutenberg-test-interactive-blocks
- *
- * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
- */
-
-add_action(
-	'wp_enqueue_scripts',
-	function () {
-		wp_enqueue_style(
-			'blue-from-link',
-			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
-			array()
-		);
-
-		$custom_css = '
-			.blue-from-inline {
-				color: rgb(0, 0, 255);
-			}
-		';
-
-		wp_register_style( 'test-router-styles', false );
-		wp_enqueue_style( 'test-router-styles' );
-		wp_add_inline_style( 'test-router-styles', $custom_css );
-	}
-);
-
-$wrapper_attributes = get_block_wrapper_attributes(
-	array( 'data-testid' => 'blue-block' )
-);
-?>
-<p <?php echo $wrapper_attributes; ?>>Blue</p>

package/plugins/interactive-blocks/router-styles-blue/style-from-link.css

@@ -1,7 +0,0 @@
-.blue-from-link {
-    color: rgb(0, 0, 255);
-}
-
-.background-from-link {
-    background-image: url('./assets/10x10_e2e_test_image_blue.png');
-}

package/plugins/interactive-blocks/router-styles-blue/style.css

@@ -1,4 +0,0 @@
-.wp-block-test-router-styles-blue,
-.blue  {
-    color: rgb(0, 0, 255);
-}

package/plugins/interactive-blocks/router-styles-green/block.json

@@ -1,15 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "test/router-styles-green",
-	"title": "E2E Interactivity tests - router styles - Green",
-	"category": "text",
-	"icon": "heart",
-	"description": "",
-	"supports": {
-		"interactivity": true
-	},
-	"textdomain": "e2e-interactivity",
-	"viewStyle": "file:./style.css",
-	"render": "file:./render.php"
-}

package/plugins/interactive-blocks/router-styles-green/render.php

@@ -1,35 +0,0 @@
-<?php
-/**
- * HTML for testing the iAPI's style assets management.
- *
- * @package gutenberg-test-interactive-blocks
- *
- * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
- */
-
-add_action(
-	'wp_enqueue_scripts',
-	function () {
-		wp_enqueue_style(
-			'green-from-link',
-			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
-			array()
-		);
-
-		$custom_css = '
-			.green-from-inline {
-				color: rgb(0, 255, 0);
-			}
-		';
-
-		wp_register_style( 'test-router-styles', false );
-		wp_enqueue_style( 'test-router-styles' );
-		wp_add_inline_style( 'test-router-styles', $custom_css );
-	}
-);
-
-$wrapper_attributes = get_block_wrapper_attributes(
-	array( 'data-testid' => 'green-block' )
-);
-?>
-<p <?php echo $wrapper_attributes; ?>>Green</p>

package/plugins/interactive-blocks/router-styles-green/style-from-link.css

@@ -1,7 +0,0 @@
-.green-from-link {
-    color: rgb(0, 255, 0);
-}
-
-.background-from-link {
-    background-image: url('./assets/10x10_e2e_test_image_green.png');
-}

package/plugins/interactive-blocks/router-styles-green/style.css

@@ -1,4 +0,0 @@
-.wp-block-test-router-styles-green,
-.green {
-    color: rgb(0, 255, 0);
-}

package/plugins/interactive-blocks/router-styles-red/block.json

@@ -1,15 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "test/router-styles-red",
-	"title": "E2E Interactivity tests - router styles - Red",
-	"category": "text",
-	"icon": "heart",
-	"description": "",
-	"supports": {
-		"interactivity": true
-	},
-	"textdomain": "e2e-interactivity",
-	"viewStyle": "file:./style.css",
-	"render": "file:./render.php"
-}

package/plugins/interactive-blocks/router-styles-red/render.php

@@ -1,35 +0,0 @@
-<?php
-/**
- * HTML for testing the iAPI's style assets management.
- *
- * @package gutenberg-test-interactive-blocks
- *
- * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
- */
-
-add_action(
-	'wp_enqueue_scripts',
-	function () {
-		wp_enqueue_style(
-			'red-from-link',
-			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
-			array()
-		);
-
-		$custom_css = '
-			.red-from-inline {
-				color: rgb(255, 0, 0);
-			}
-		';
-
-		wp_register_style( 'test-router-styles', false );
-		wp_enqueue_style( 'test-router-styles' );
-		wp_add_inline_style( 'test-router-styles', $custom_css );
-	}
-);
-
-$wrapper_attributes = get_block_wrapper_attributes(
-	array( 'data-testid' => 'red-block' )
-);
-?>
-<p <?php echo $wrapper_attributes; ?>>Red</p>

package/plugins/interactive-blocks/router-styles-red/style-from-link.css

@@ -1,7 +0,0 @@
-.red-from-link {
-    color: rgb(255, 0, 0);
-}
-
-.background-from-link {
-    background-image: url('./assets/10x10_e2e_test_image_red.png');
-}

package/plugins/interactive-blocks/router-styles-red/style.css

@@ -1,4 +0,0 @@
-.wp-block-test-router-styles-red,
-.red {
-    color: rgb(255, 0, 0);
-}

package/plugins/interactive-blocks/router-styles-wrapper/block.json

@@ -1,16 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "test/router-styles-wrapper",
-	"title": "E2E Interactivity tests - router styles - Wrapper",
-	"category": "text",
-	"icon": "heart",
-	"description": "",
-	"supports": {
-		"interactivity": true
-	},
-	"textdomain": "e2e-interactivity",
-	"viewScriptModule": "file:./view.js",
-	"viewStyle": "file:./style.css",
-	"render": "file:./render.php"
-}

package/plugins/interactive-blocks/router-styles-wrapper/render.php

@@ -1,70 +0,0 @@
-<?php
-/**
- * HTML for testing the iAPI's style assets management.
- *
- * @package gutenberg-test-interactive-blocks
- *
- * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
- */
-
-$wrapper_attributes = get_block_wrapper_attributes();
-?>
-<div <?php echo $wrapper_attributes; ?>>
-	<!-- These get colored when the corresponding block is present. -->
-	<fieldset>
-		<legend>Styles from block styles</legend>
-		<p data-testid="red" class="red">Red</p>
-		<p data-testid="green" class="green">Green</p>
-		<p data-testid="blue" class="blue">Blue</p>
-		<p data-testid="all" class="red green blue">All</p>
-	</fieldset>
-
-	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
-	<fieldset>
-		<legend>Styles from referenced style sheets</legend>
-		<p data-testid="red-from-link" class="red-from-link">Red from link</p>
-		<p data-testid="green-from-link" class="green-from-link">Green from link</p>
-		<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
-		<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
-		<div data-testid="background-from-link"class="background-from-link" style="width: 10px; height: 10px"></div>
-	</fieldset>
-
-	<!-- These get colored when the corresponding block adds inline style. -->
-	<fieldset>
-		<legend>Styles from inline styles</legend>
-		<p data-testid="red-from-inline" class="red-from-inline">Red</p>
-		<p data-testid="green-from-inline" class="green-from-inline">Green</p>
-		<p data-testid="blue-from-inline" class="blue-from-inline">Blue</p>
-		<p data-testid="all-from-inline" class="red-from-inline green-from-inline blue-from-inline">All</p>
-	</fieldset>
-
-	<!-- Links to pages with different blocks combination. -->
-	<nav data-wp-interactive="test/router-styles">
-		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
-			<a
-				data-testid="link <?php echo $label; ?>"
-				data-wp-on--click="actions.navigate"
-				href="<?php echo $link; ?>"
-			>
-				<?php echo $label; ?>
-			</a>
-		<?php endforeach; ?>
-	</nav>
-
-	<!-- HTML updated on navigation. -->
-	<div
-		data-wp-interactive="test/router-styles"
-		data-wp-router-region="router-styles"
-	>
-		<?php echo $content; ?>
-	</div>
-
-	<!-- Text to check whether a navigation was client-side. -->
-	<div
-		data-testid="client-side navigation"
-		data-wp-interactive="test/router-styles"
-		data-wp-bind--hidden="!state.clientSideNavigation"
-	>
-		Client-side navigation
-	</div>
-</div>

package/plugins/interactive-blocks/router-styles-wrapper/style.css

@@ -1,3 +0,0 @@
-.wp-block-test-router-styles-wrapper {
-    color: rgb(160, 12, 60);
-}

package/plugins/interactive-blocks/router-styles-wrapper/view.asset.php

@@ -1,9 +0,0 @@
-<?php return array(
-	'dependencies' => array(
-		'@wordpress/interactivity',
-		array(
-			'id'     => '@wordpress/interactivity-router',
-			'import' => 'dynamic',
-		),
-	),
-);

package/plugins/interactive-blocks/router-styles-wrapper/view.js

@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store } from '@wordpress/interactivity';
-
-const { state } = store( 'test/router-styles', {
-	state: {
-		clientSideNavigation: false,
-	},
-	actions: {
-		*navigate( e ) {
-			e.preventDefault();
-			const { actions } = yield import(
-				'@wordpress/interactivity-router'
-			);
-			yield actions.navigate( e.target.href );
-			state.clientSideNavigation = true;
-		},
-	},
-} );