@wordpress/e2e-tests 8.24.0 → 8.26.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 8.26.0 (2025-06-25)
+
+## 8.25.0 (2025-06-04)
+
 ## 8.24.0 (2025-05-22)
 
 ## 8.23.0 (2025-05-07)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.24.0",
+	"version": "8.26.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.24.0",
-		"@wordpress/interactivity": "^6.24.0",
-		"@wordpress/interactivity-router": "^2.24.0",
-		"@wordpress/jest-console": "^8.24.0",
-		"@wordpress/jest-puppeteer-axe": "^7.24.0",
-		"@wordpress/scripts": "^30.17.0",
-		"@wordpress/url": "^4.24.0",
+		"@wordpress/e2e-test-utils": "^11.26.0",
+		"@wordpress/interactivity": "^6.26.0",
+		"@wordpress/interactivity-router": "^2.26.0",
+		"@wordpress/jest-console": "^8.26.0",
+		"@wordpress/jest-puppeteer-axe": "^7.26.0",
+		"@wordpress/scripts": "^30.19.0",
+		"@wordpress/url": "^4.26.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
+	"gitHead": "35e26942820d8237771af0c58e45b4303f0497f1"
 }

package/plugins/interactive-blocks/generator-scope/render.php

@@ -13,4 +13,7 @@
 	<input readonly data-wp-bind--value="context.result" data-testid="result" />
 	<button type="button" data-wp-on--click="callbacks.resolve" data-testid="resolve">Async resolve</button>
 	<button type="button" data-wp-on--click="callbacks.reject" data-testid="reject">Async reject</button>
+	<button type="button" data-wp-on--click="callbacks.capture" data-testid="capture">Async capture</button>
+	<button type="button" data-wp-on--click="callbacks.captureThrow" data-testid="captureThrow">Async captureThrow</button>
+	<button type="button" data-wp-on--click="callbacks.captureReturnReject" data-testid="captureReturnReject">Async captureReturnReject</button>
 </div>

package/plugins/interactive-blocks/generator-scope/view.js

@@ -3,7 +3,7 @@
  */
 import { store, getContext } from '@wordpress/interactivity';
 
-store( 'test/generator-scope', {
+const { callbacks } = store( 'test/generator-scope', {
 	callbacks: {
 		*resolve() {
 			try {
@@ -19,5 +19,35 @@ store( 'test/generator-scope', {
 				getContext().result = err.toString();
 			}
 		},
+		*capture() {
+			let value = yield Promise.resolve( 1 );
+			try {
+				value = yield Promise.reject( 2 );
+			} catch ( e ) {
+				value = yield Promise.resolve( 3 );
+			}
+			getContext().result = value;
+		},
+		*throw() {
+			const value = yield Promise.resolve( '🤯' );
+			throw new Error( value );
+		},
+		*captureThrow() {
+			try {
+				yield callbacks.throw();
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
+		*returnReject() {
+			return Promise.reject( new Error( '🔚' ) );
+		},
+		*captureReturnReject() {
+			try {
+				yield callbacks.returnReject();
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
 	},
 } );

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

@@ -11,7 +11,7 @@
 <section>
 	<h2>Region 1</h2>
 	<div
-		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-interactive="router-regions"
 		data-wp-router-region="region-1"
 	>
 		<p
@@ -51,11 +51,10 @@
 	>not hydrated</p>
 </div>
 
-
 <section>
 	<h2>Region 2</h2>
 	<div
-		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-interactive="router-regions"
 		data-wp-router-region="region-2"
 	>
 		<p
@@ -74,7 +73,7 @@
 			data-wp-on--click="actions.counter.increment"
 		>NaN</button>
 
-		<div data-wp-ignore>
+		<div>
 			<div>
 				<p
 					data-testid="no-region-text-2"
@@ -85,14 +84,122 @@
 			<section>
 				<h2>Nested region</h2>
 				<div
-					data-wp-interactive='{"namespace": "router-regions"}'
+					data-wp-interactive="router-regions"
 					data-wp-router-region="nested-region"
 				>
-					<p
-						data-testid="nested-region-ssr"
-					>content from page <?php echo $attributes['page']; ?></p>
+					<p data-testid="nested-region-ssr">
+						content from page <?php echo $attributes['page']; ?>
+					</p>
+
+					<button data-testid="add-item" data-wp-on--click="actions.addItem">
+						Add item
+					</button>
+
+					<ul>
+						<template data-wp-each="state.items">
+							<li data-testid="nested-item" data-wp-key="context.item" data-wp-text="context.item"></li>	
+						</template>
+						<li data-testid="nested-item" data-wp-each-child>item 1</li>
+						<li data-testid="nested-item" data-wp-each-child>item 2</li>
+						<li data-testid="nested-item" data-wp-each-child>item 3</li>
+					</ul>
 				</div>
 			</section>
 		</div>
 	</div>
 </section>
+
+<div data-wp-interactive="router-regions">
+	<div data-wp-router-region="invalid-region-1">
+		<p data-testid="invalid-region-text-1">
+			content from page <?php echo $attributes['page']; ?>
+		</p>
+	</div>
+	<div data-wp-interactive="router-regions" data-wp-router-region="invalid-region-2">
+		<p data-testid="invalid-region-text-2">
+			content from page <?php echo $attributes['page']; ?>
+		</p>
+	</div>
+</div>
+
+<div id="regions-with-attach-to" data-testid="regions-with-attach-to">
+	<?php
+	/*
+	 * Set of router regions with the `attachTo` property specified,
+	 * as defined in the `regionsWithAttachTo` attribute.
+	 *
+	 * Each object inside such an attribute have the following properties:
+	 * - `type`: the type of the HTML element where the `data-wp-router-region` directive is defined, e.g. 'div'.
+	 * - `data`: the data passed to the `data-wp-router-region` directive, i.e., `id` and `attachTo`.
+	 * - `hasDirectives`: a boolean indicating that the top element of the router region have actual directives that
+	 *     make the element to be wrapped in a `Directives` component.
+	 */
+	foreach ( $attributes['regionsWithAttachTo'] ?? array() as $region ) {
+		$region_type    = esc_attr( $region['type'] );
+		$region_id      = esc_attr( $region['data']['id'] );
+		$region_data    = wp_json_encode( $region['data'] );
+		$has_directives = isset( $region['hasDirectives'] )
+			? ' data-wp-init="callbacks.init"'
+			: '';
+		$context_data   = wp_interactivity_data_wp_context(
+			array(
+				'text'    => $region['data']['id'],
+				'counter' => array(
+					'value'       => $attributes['counter'] ?? 0,
+					'serverValue' => $attributes['counter'] ?? 0,
+				),
+			)
+		);
+
+		$html = <<<HTML
+		<$region_type
+			data-wp-interactive="router-regions"
+			data-wp-router-region='$region_data'
+			data-testid="$region_id"
+			$has_directives
+		>
+			<div $context_data>
+				<h2>Region with <code>attachTo</code></h2>
+				<p
+					data-testid="text"
+					data-wp-text="context.text"
+				>not hydrated</p>
+
+				<p> Client value:
+					<button
+						data-testid="client-counter"
+						data-wp-text="context.counter.value"
+						data-wp-on--click="actions.counter.increment"
+					>
+						NaN
+					</button>
+				</p>
+				<p> Server value:
+					<output
+						data-testid="server-counter"
+						data-wp-text="context.counter.serverValue"
+						data-wp-watch="actions.counter.updateCounterFromServer"
+					>
+						NaN
+					</output>
+				</p>
+			</div>
+		</$region_type>
+HTML;
+
+		echo $html;
+	}
+	?>
+</div>
+
+<!--
+	Count of times the `actions.init` function has been executed.
+	Used to verify that `data-wp-init` works on regions with `attachTo`.
+-->
+<div
+	data-wp-interactive="router-regions"
+	data-testid="init-count"
+	data-wp-text="state.initCount"
+>
+	NaN
+</div>

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

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getServerContext,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const { state } = store( 'router-regions', {
 	state: {
@@ -14,6 +19,8 @@ const { state } = store( 'router-regions', {
 		counter: {
 			value: 0,
 		},
+		items: [ 'item 1', 'item 2', 'item 3' ],
+		initCount: 0,
 	},
 	actions: {
 		router: {
@@ -43,6 +50,19 @@ const { state } = store( 'router-regions', {
 					context.counter.value = context.counter.initialValue;
 				}
 			},
+			updateCounterFromServer() {
+				const context = getContext();
+				const serverContext = getServerContext();
+				context.counter.serverValue = serverContext.counter.serverValue;
+			},
+		},
+		addItem() {
+			state.items.push( `item ${ state.items.length + 1 }` );
+		},
+	},
+	callbacks: {
+		init() {
+			state.initCount += 1;
 		},
 	},
 } );

package/plugins/interactive-blocks/router-script-modules-alpha/block.json

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

package/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-1.js

@@ -0,0 +1 @@
+export default 'alpha-1';

package/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-2.js

@@ -0,0 +1 @@
+export default 'alpha-2';

package/plugins/interactive-blocks/router-script-modules-alpha/render.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$modules = array( 'alpha-1', 'alpha-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-testid'         => 'alpha-block',
+		'data-wp-interactive' => 'test/router-script-modules-alpha',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<span data-testid="text" data-wp-text="state.name"></span>
+	<button data-testid="static" data-wp-on--click="actions.updateFromStatic">Static</button>
+	<button data-testid="dynamic" data-wp-on--click="actions.updateFromDynamic">Dynamic</button>
+	<button data-testid="initial-static" data-wp-on--click="actions.updateFromInitialStatic">Static (initial)</button>
+	<button data-testid="initial-dynamic" data-wp-on--click="actions.updateFromInitialDynamic">Dynamic (initial)</button>
+</div>

package/plugins/interactive-blocks/router-script-modules-alpha/view.asset.php

@@ -0,0 +1,15 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		'test/router-script-modules-alpha-1',
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-alpha-2',
+			'import' => 'dynamic',
+		),
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/router-script-modules-alpha/view.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-unresolved
+import nameStatic from 'test/router-script-modules-alpha-1';
+// eslint-disable-next-line import/no-unresolved
+import nameInitialStatic from 'test/router-script-modules-initial-1';
+
+const { state } = store( 'test/router-script-modules-alpha', {
+	state: {
+		name: 'alpha',
+	},
+	actions: {
+		updateFromStatic() {
+			state.name = nameStatic;
+		},
+		updateFromInitialStatic() {
+			state.name = nameInitialStatic;
+		},
+		*updateFromDynamic() {
+			const { default: nameDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-alpha-2'
+			);
+			state.name = nameDynamic;
+		},
+		*updateFromInitialDynamic() {
+			const { default: nameInitialDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-initial-2'
+			);
+			state.name = nameInitialDynamic;
+		},
+	},
+} );
+
+const { actions } = store( 'test/router-script-modules' );
+actions.pushName?.( state.name );

package/plugins/interactive-blocks/router-script-modules-bravo/block.json

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

package/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-1.js

@@ -0,0 +1 @@
+export default 'bravo-1';

package/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-2.js

@@ -0,0 +1 @@
+export default 'bravo-2';

package/plugins/interactive-blocks/router-script-modules-bravo/render.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$modules = array( 'bravo-1', 'bravo-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-testid'         => 'bravo-block',
+		'data-wp-interactive' => 'test/router-script-modules-bravo',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<span data-testid="text" data-wp-text="state.name"></span>
+	<button data-testid="static" data-wp-on--click="actions.updateFromStatic">Static</button>
+	<button data-testid="dynamic" data-wp-on--click="actions.updateFromDynamic">Dynamic</button>
+	<button data-testid="initial-static" data-wp-on--click="actions.updateFromInitialStatic">Static (initial)</button>
+	<button data-testid="initial-dynamic" data-wp-on--click="actions.updateFromInitialDynamic">Dynamic (initial)</button>
+</div>

package/plugins/interactive-blocks/router-script-modules-bravo/view.asset.php

@@ -0,0 +1,15 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		'test/router-script-modules-bravo-1',
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-bravo-2',
+			'import' => 'dynamic',
+		),
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/router-script-modules-bravo/view.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-unresolved
+import nameStatic from 'test/router-script-modules-bravo-1';
+// eslint-disable-next-line import/no-unresolved
+import nameInitialStatic from 'test/router-script-modules-initial-1';
+
+const { state } = store( 'test/router-script-modules-bravo', {
+	state: {
+		name: 'bravo',
+	},
+	actions: {
+		updateFromStatic() {
+			state.name = nameStatic;
+		},
+		updateFromInitialStatic() {
+			state.name = nameInitialStatic;
+		},
+		*updateFromDynamic() {
+			const { default: nameDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-bravo-2'
+			);
+			state.name = nameDynamic;
+		},
+		*updateFromInitialDynamic() {
+			const { default: nameInitialDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-initial-2'
+			);
+			state.name = nameInitialDynamic;
+		},
+	},
+} );
+
+const { actions } = store( 'test/router-script-modules' );
+actions.pushName?.( state.name );

package/plugins/interactive-blocks/router-script-modules-charlie/block.json

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

package/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-1.js

@@ -0,0 +1 @@
+export default 'charlie-1';

package/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-2.js

@@ -0,0 +1 @@
+export default 'charlie-2';

package/plugins/interactive-blocks/router-script-modules-charlie/render.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$modules = array( 'charlie-1', 'charlie-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-testid'         => 'charlie-block',
+		'data-wp-interactive' => 'test/router-script-modules-charlie',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<span data-testid="text" data-wp-text="state.name"></span>
+	<button data-testid="static" data-wp-on--click="actions.updateFromStatic">Static</button>
+	<button data-testid="dynamic" data-wp-on--click="actions.updateFromDynamic">Dynamic</button>
+	<button data-testid="initial-static" data-wp-on--click="actions.updateFromInitialStatic">Static (initial)</button>
+	<button data-testid="initial-dynamic" data-wp-on--click="actions.updateFromInitialDynamic">Dynamic (initial)</button>
+</div>

package/plugins/interactive-blocks/router-script-modules-charlie/view.asset.php

@@ -0,0 +1,15 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		'test/router-script-modules-charlie-1',
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-charlie-2',
+			'import' => 'dynamic',
+		),
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/router-script-modules-charlie/view.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-unresolved
+import nameStatic from 'test/router-script-modules-charlie-1';
+// eslint-disable-next-line import/no-unresolved
+import nameInitialStatic from 'test/router-script-modules-initial-1';
+
+const { state } = store( 'test/router-script-modules-charlie', {
+	state: {
+		name: 'charlie',
+	},
+	actions: {
+		updateFromStatic() {
+			state.name = nameStatic;
+		},
+		updateFromInitialStatic() {
+			state.name = nameInitialStatic;
+		},
+		*updateFromDynamic() {
+			const { default: nameDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-charlie-2'
+			);
+			state.name = nameDynamic;
+		},
+		*updateFromInitialDynamic() {
+			const { default: nameInitialDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-initial-2'
+			);
+			state.name = nameInitialDynamic;
+		},
+	},
+} );
+
+const { actions } = store( 'test/router-script-modules' );
+actions.pushName?.( state.name );

package/plugins/interactive-blocks/router-script-modules-wrapper/block.json

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

package/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-1.js

@@ -0,0 +1 @@
+export default 'initial-1';

package/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-2.js

@@ -0,0 +1 @@
+export default 'initial-2';

package/plugins/interactive-blocks/router-script-modules-wrapper/render.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+$modules = array( 'initial-1', 'initial-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<!-- A name is appended here every time a module is executed. -->
+	<p data-testid="names" data-wp-text="state.names"></p>
+
+	<!-- Links to pages with different blocks combination. -->
+	<nav data-wp-interactive="test/router-script-modules">
+		<?php if ( isset( $attributes['links'] ) ) : ?>
+			<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+				<a
+					data-testid="link <?php echo $label; ?>"
+					data-wp-on--click="actions.navigate"
+					data-wp-on-async--mouseenter="actions.prefetch"
+					href="<?php echo $link; ?>"
+				>
+					<?php echo $label; ?>
+				</a>
+			<?php endforeach; ?>
+		<?php endif; ?>
+	</nav>
+
+	<!-- HTML updated on navigation. -->
+	<div
+		data-wp-interactive="test/router-script-modules"
+		data-wp-router-region="router-script-modules"
+	>
+		<?php echo $content; ?>
+	</div>
+
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-script-modules"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+		hidden
+	>
+		Client-side navigation
+	</div>
+</div>

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

@@ -0,0 +1,14 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/router-script-modules-wrapper/view.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-script-modules', {
+	state: {
+		clientSideNavigation: false,
+		names: [],
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			state.clientSideNavigation = false;
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.clientSideNavigation = true;
+		},
+		*prefetch() {
+			const { ref } = getElement();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.prefetch( ref.href );
+		},
+		pushName( name ) {
+			state.names.push( name );
+		},
+	},
+} );

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

@@ -0,0 +1,15 @@
+{
+	"$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

@@ -0,0 +1,35 @@
+<?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

@@ -0,0 +1,7 @@
+.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

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

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

@@ -0,0 +1,15 @@
+{
+	"$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

@@ -0,0 +1,35 @@
+<?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

@@ -0,0 +1,7 @@
+.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

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

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

@@ -0,0 +1,15 @@
+{
+	"$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

@@ -0,0 +1,35 @@
+<?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

@@ -0,0 +1,7 @@
+.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

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

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

@@ -0,0 +1,16 @@
+{
+	"$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

@@ -0,0 +1,94 @@
+<?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(
+			'wrapper-styles-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+	}
+);
+
+$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>
+
+	<!-- This one should remain green after navigation. -->
+	<fieldset>
+		<legend>Rule order checker</legend>
+		<p data-testid="order-checker" class="order-checker">I should remain green</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"
+				data-wp-on-async--mouseenter="actions.prefetch"
+				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"
+		hidden
+	>
+		Client-side navigation
+	</div>
+
+	<!-- Text to check whether a page is being prefetched. -->
+	<div data-wp-interactive="test/router-styles" >
+		Prefetching: <span data-testid="prefetching" data-wp-text="state.prefetching"></span>
+	</div>
+</div>

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

@@ -0,0 +1,7 @@
+.wp-block-test-router-styles-wrapper .order-checker {
+    color: rgb(255, 0, 0);
+}
+
+.wp-block-test-router-styles-wrapper .order-checker {
+    color: rgb(0, 255, 0);
+}

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

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

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

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

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

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

package/plugins/interactive-blocks/store-tag/render.php

@@ -59,7 +59,7 @@ if ( 'missing' !== $attributes['condition'] ) {
 	}
 
 	echo <<<HTML
-	<script type="application/json" id="wp-interactivity-data">
+	<script type="application/json" id="wp-script-module-data-@wordpress/interactivity">
 		$test_store_tag_json
 	</script>
 HTML;

package/plugins/interactive-blocks/tovdom/processing-instructions.js

@@ -1,5 +1,6 @@
 const processingInstructions = `
 	<div>
+		<div>Processing instruction is <?xpacket ##last-child## ?></div>
 		<?xpacket ##1## ?>
 		<div data-testid="it should keep this node between processing instructions">
 			Processing instructions inner node

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

@@ -12,6 +12,7 @@ $src_cdata    = $plugin_url . 'tovdom/cdata.js';
 
 <div data-wp-interactive="tovdom">
 	<div data-testid="it should delete comments">
+		<div>Comment is <!-- ##last-child## --></div>
 		<!-- ##1## -->
 		<div data-testid="it should keep this node between comments">
 			Comments inner node

package/plugins/interactive-blocks.php

@@ -25,7 +25,10 @@ add_action(
 		 * required to ensure that client hydration works even when the rendered
 		 * HTML contains unbalanced tags and it couldn't be processed in the server.
 		 */
-		if ( 'true' === $_GET['disable_server_directive_processing'] ) {
+		if (
+			isset( $_GET['disable_server_directive_processing'] ) &&
+			'true' === $_GET['disable_server_directive_processing']
+		) {
 			// Ensure the interactivity API is loaded.
 			wp_interactivity();
 			// But remove the server directive processing.