@wordpress/e2e-tests 9.3.0 → 9.4.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.4.0 (2026-01-29)
+
 ## 9.3.0 (2026-01-16)
 
 ## 9.1.0 (2025-11-26)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "9.3.0",
+	"version": "9.4.0",
 	"description": "Test plugins and mu-plugins for E2E tests in WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,8 +24,8 @@
 		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/interactivity": "^6.38.0",
-		"@wordpress/interactivity-router": "^2.38.0"
+		"@wordpress/interactivity": "^6.39.0",
+		"@wordpress/interactivity-router": "^2.39.0"
 	},
 	"peerDependencies": {
 		"jest": ">=29",
@@ -36,5 +36,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
+	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
 }

package/plugins/align-hook/index.js

@@ -1,23 +1,22 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
 	const el = wp.element.createElement;
+	const { useBlockProps } = wp.blockEditor;
 
 	const baseBlock = {
 		icon: 'cart',
 		category: 'text',
-		edit() {
-			return el(
-				'div',
-				{ style: { outline: '1px solid gray', padding: 5 } },
-				'Test Align Hook'
-			);
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			return el( 'div', blockProps, 'Test Align Hook' );
 		},
 		save() {
-			return el(
-				'div',
-				{ style: { outline: '1px solid gray', padding: 5 } },
-				'Test Align Hook'
-			);
+			const blockProps = useBlockProps.save( {
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			return el( 'div', blockProps, 'Test Align Hook' );
 		},
 	};
 
@@ -25,6 +24,7 @@
 		'test/test-no-alignment-set',
 		Object.assign(
 			{
+				apiVersion: 3,
 				title: 'Test No Alignment Set',
 			},
 			baseBlock
@@ -35,6 +35,7 @@
 		'test/test-align-true',
 		Object.assign(
 			{
+				apiVersion: 3,
 				title: 'Test Align True',
 				supports: {
 					align: true,
@@ -48,6 +49,7 @@
 		'test/test-align-array',
 		Object.assign(
 			{
+				apiVersion: 3,
 				title: 'Test Align Array',
 				supports: {
 					align: [ 'left', 'center' ],
@@ -61,6 +63,7 @@
 		'test/test-default-align',
 		Object.assign(
 			{
+				apiVersion: 3,
 				title: 'Test Default Align',
 				attributes: {
 					align: {

package/plugins/block-context/index.js

@@ -1,9 +1,10 @@
 ( function () {
-	const { createElement: el, Fragment } = wp.element;
+	const { createElement: el } = wp.element;
 	const { registerBlockType } = wp.blocks;
-	const { InnerBlocks } = wp.blockEditor;
+	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
 
 	registerBlockType( 'gutenberg/test-context-provider', {
+		apiVersion: 3,
 		title: 'Test Context Provider',
 
 		icon: 'list-view',
@@ -17,10 +18,16 @@
 
 		category: 'text',
 
-		edit( { attributes, setAttributes } ) {
+		edit: function Edit( { attributes, setAttributes } ) {
+			const blockProps = useBlockProps();
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				template: [ [ 'gutenberg/test-context-consumer', {} ] ],
+				templateLock: 'all',
+				templateInsertUpdatesSelection: true,
+			} );
 			return el(
-				Fragment,
-				null,
+				'div',
+				innerBlocksProps,
 				el( 'input', {
 					value: attributes.recordId,
 					onChange( event ) {
@@ -29,11 +36,7 @@
 						} );
 					},
 				} ),
-				el( InnerBlocks, {
-					template: [ [ 'gutenberg/test-context-consumer', {} ] ],
-					templateLock: 'all',
-					templateInsertUpdatesSelection: true,
-				} )
+				innerBlocksProps.children
 			);
 		},
 
@@ -43,6 +46,7 @@
 	} );
 
 	registerBlockType( 'gutenberg/test-context-consumer', {
+		apiVersion: 3,
 		title: 'Test Context Consumer',
 
 		icon: 'list-view',
@@ -54,8 +58,13 @@
 
 		category: 'text',
 
-		edit( { context } ) {
-			return 'The record ID is: ' + context[ 'gutenberg/recordId' ];
+		edit: function Edit( { context } ) {
+			const blockProps = useBlockProps();
+			return el(
+				'div',
+				blockProps,
+				'The record ID is: ' + context[ 'gutenberg/recordId' ]
+			);
 		},
 
 		save() {

package/plugins/block-icons/index.js

@@ -1,7 +1,7 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
 	const el = wp.element.createElement;
-	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
 	const circle = el( 'circle', {
 		cx: 10,
 		cy: 10,
@@ -17,29 +17,28 @@
 	);
 
 	registerBlockType( 'test/test-single-svg-icon', {
+		apiVersion: 3,
 		title: 'TestSimpleSvgIcon',
 		icon: svg,
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{
-					className: 'test-single-svg-icon',
-					style: { outline: '1px solid gray', padding: 5 },
-				},
-				el( InnerBlocks, {
-					allowedBlocks: [ 'core/paragraph', 'core/image' ],
-					template: [
-						[
-							'core/paragraph',
-							{
-								content: 'TestSimpleSvgIcon',
-							},
-						],
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				className: 'test-single-svg-icon',
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks: [ 'core/paragraph', 'core/image' ],
+				template: [
+					[
+						'core/paragraph',
+						{
+							content: 'TestSimpleSvgIcon',
+						},
 					],
-				} )
-			);
+				],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -55,29 +54,28 @@
 	} );
 
 	registerBlockType( 'test/test-dash-icon', {
+		apiVersion: 3,
 		title: 'TestSimpleDashIcon',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{
-					className: 'test-dash-icon',
-					style: { outline: '1px solid gray', padding: 5 },
-				},
-				el( InnerBlocks, {
-					allowedBlocks: [ 'core/paragraph', 'core/image' ],
-					template: [
-						[
-							'core/paragraph',
-							{
-								content: 'TestDashIcon',
-							},
-						],
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				className: 'test-dash-icon',
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks: [ 'core/paragraph', 'core/image' ],
+				template: [
+					[
+						'core/paragraph',
+						{
+							content: 'TestDashIcon',
+						},
 					],
-				} )
-			);
+				],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -93,31 +91,30 @@
 	} );
 
 	registerBlockType( 'test/test-function-icon', {
+		apiVersion: 3,
 		title: 'TestFunctionIcon',
 		icon() {
 			return svg;
 		},
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{
-					className: 'test-function-icon',
-					style: { outline: '1px solid gray', padding: 5 },
-				},
-				el( InnerBlocks, {
-					allowedBlocks: [ 'core/paragraph', 'core/image' ],
-					template: [
-						[
-							'core/paragraph',
-							{
-								content: 'TestFunctionIcon',
-							},
-						],
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				className: 'test-function-icon',
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks: [ 'core/paragraph', 'core/image' ],
+				template: [
+					[
+						'core/paragraph',
+						{
+							content: 'TestFunctionIcon',
+						},
 					],
-				} )
-			);
+				],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -133,6 +130,7 @@
 	} );
 
 	registerBlockType( 'test/test-dash-icon-colors', {
+		apiVersion: 3,
 		title: 'TestDashIconColors',
 		icon: {
 			background: '#010000',
@@ -141,25 +139,23 @@
 		},
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{
-					className: 'test-dash-icon-colors',
-					style: { outline: '1px solid gray', padding: 5 },
-				},
-				el( InnerBlocks, {
-					allowedBlocks: [ 'core/paragraph', 'core/image' ],
-					template: [
-						[
-							'core/paragraph',
-							{
-								content: 'TestIconColors',
-							},
-						],
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				className: 'test-dash-icon-colors',
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks: [ 'core/paragraph', 'core/image' ],
+				template: [
+					[
+						'core/paragraph',
+						{
+							content: 'TestIconColors',
+						},
 					],
-				} )
-			);
+				],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -175,6 +171,7 @@
 	} );
 
 	registerBlockType( 'test/test-svg-icon-background', {
+		apiVersion: 3,
 		title: 'TestSvgIconBackground',
 		icon: {
 			background: '#010000',
@@ -182,25 +179,23 @@
 		},
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{
-					className: 'test-svg-icon-background',
-					style: { outline: '1px solid gray', padding: 5 },
-				},
-				el( InnerBlocks, {
-					allowedBlocks: [ 'core/paragraph', 'core/image' ],
-					template: [
-						[
-							'core/paragraph',
-							{
-								content: 'TestIconColors',
-							},
-						],
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				className: 'test-svg-icon-background',
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks: [ 'core/paragraph', 'core/image' ],
+				template: [
+					[
+						'core/paragraph',
+						{
+							content: 'TestIconColors',
+						},
 					],
-				} )
-			);
+				],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {

package/plugins/child-blocks/index.js

@@ -1,15 +1,18 @@
 ( function () {
-	const { InnerBlocks } = wp.blockEditor;
+	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
 	const { createElement: el } = wp.element;
 	const { registerBlockType } = wp.blocks;
 
 	registerBlockType( 'test/child-blocks-unrestricted-parent', {
+		apiVersion: 3,
 		title: 'Child Blocks Unrestricted Parent',
 		icon: 'carrot',
 		category: 'text',
 
-		edit() {
-			return el( 'div', {}, el( InnerBlocks ) );
+		edit: function Edit() {
+			const blockProps = useBlockProps();
+			const innerBlocksProps = useInnerBlocksProps( blockProps );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -18,18 +21,17 @@
 	} );
 
 	registerBlockType( 'test/child-blocks-restricted-parent', {
+		apiVersion: 3,
 		title: 'Child Blocks Restricted Parent',
 		icon: 'carrot',
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{},
-				el( InnerBlocks, {
-					allowedBlocks: [ 'core/paragraph', 'core/image' ],
-				} )
-			);
+		edit: function Edit() {
+			const blockProps = useBlockProps();
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks: [ 'core/paragraph', 'core/image' ],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -38,6 +40,7 @@
 	} );
 
 	registerBlockType( 'test/child-blocks-child', {
+		apiVersion: 3,
 		title: 'Child Blocks Child',
 		icon: 'carrot',
 		category: 'text',
@@ -47,8 +50,9 @@
 			'test/child-blocks-restricted-parent',
 		],
 
-		edit() {
-			return el( 'div', {}, 'Child' );
+		edit: function Edit() {
+			const blockProps = useBlockProps();
+			return el( 'div', blockProps, 'Child' );
 		},
 
 		save() {

package/plugins/container-without-paragraph/index.js

@@ -1,13 +1,19 @@
 ( function () {
+	const { useBlockProps, useInnerBlocksProps } = wp.blockEditor;
+	const { createElement: el } = wp.element;
+
 	wp.blocks.registerBlockType( 'test/container-without-paragraph', {
+		apiVersion: 3,
 		title: 'Container without paragraph',
 		category: 'text',
 		icon: 'yes',
 
-		edit() {
-			return wp.element.createElement( wp.blockEditor.InnerBlocks, {
+		edit: function Edit() {
+			const blockProps = useBlockProps();
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
 				allowedBlocks: [ 'core/image', 'core/gallery' ],
 			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {

package/plugins/iframed-block/editor.js

@@ -5,6 +5,7 @@
 	const { useRefEffect } = compose;
 
 	registerBlockType( 'test/iframed-block', {
+		apiVersion: 3,
 		edit: function Edit() {
 			const ref = useRefEffect( ( node ) => {
 				$( node ).test();

package/plugins/inner-blocks-locking-all-embed/index.js

@@ -1,7 +1,7 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
 	const el = wp.element.createElement;
-	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
 	const __ = wp.i18n.__;
 	const TEMPLATE = [
 		[
@@ -19,15 +19,18 @@
 	};
 
 	registerBlockType( 'test/test-inner-blocks-locking-all-embed', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks Locking All Embed',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function Edit() {
+			const blockProps = useBlockProps();
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
 				template: TEMPLATE,
 				templateLock: 'all',
 			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save,

package/plugins/inner-blocks-prioritized-inserter-blocks/index.js

@@ -1,7 +1,7 @@
 ( function () {
 	const { registerBlockType } = wp.blocks;
 	const { createElement: el } = wp.element;
-	const { InnerBlocks } = wp.blockEditor;
+	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
 
 	const divProps = {
 		className: 'product',
@@ -16,34 +16,38 @@
 		return el( 'div', divProps, el( InnerBlocks.Content ) );
 	};
 	registerBlockType( 'test/prioritized-inserter-blocks-unset', {
+		apiVersion: 3,
 		title: 'Prioritized Inserter Blocks Unset',
 		icon: 'carrot',
 		category: 'text',
 
-		edit() {
-			return el( 'div', divProps, el( InnerBlocks, { template } ) );
+		edit: function Edit() {
+			const blockProps = useBlockProps( divProps );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				template,
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/prioritized-inserter-blocks-set', {
+		apiVersion: 3,
 		title: 'Prioritized Inserter Blocks Set',
 		icon: 'carrot',
 		category: 'text',
-		edit() {
-			return el(
-				'div',
-				divProps,
-				el( InnerBlocks, {
-					template,
-					prioritizedInserterBlocks: [
-						'core/audio',
-						'core/spacer',
-						'core/code',
-					],
-				} )
-			);
+		edit: function Edit() {
+			const blockProps = useBlockProps( divProps );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				template,
+				prioritizedInserterBlocks: [
+					'core/audio',
+					'core/spacer',
+					'core/code',
+				],
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save,
@@ -52,28 +56,27 @@
 	registerBlockType(
 		'test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks',
 		{
+			apiVersion: 3,
 			title: 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks',
 			icon: 'carrot',
 			category: 'text',
-			edit() {
-				return el(
-					'div',
-					divProps,
-					el( InnerBlocks, {
-						template,
-						allowedBlocks: [
-							'core/spacer',
-							'core/code',
-							'core/paragraph',
-							'core/heading',
-						],
-						prioritizedInserterBlocks: [
-							'core/audio', // this is **not** in the allowedBlocks list
-							'core/spacer',
-							'core/code',
-						],
-					} )
-				);
+			edit: function Edit() {
+				const blockProps = useBlockProps( divProps );
+				const innerBlocksProps = useInnerBlocksProps( blockProps, {
+					template,
+					allowedBlocks: [
+						'core/spacer',
+						'core/code',
+						'core/paragraph',
+						'core/heading',
+					],
+					prioritizedInserterBlocks: [
+						'core/audio', // this is **not** in the allowedBlocks list
+						'core/spacer',
+						'core/code',
+					],
+				} );
+				return el( 'div', innerBlocksProps );
 			},
 
 			save,

package/plugins/inner-blocks-render-appender/index.js

@@ -2,7 +2,7 @@
 	const { wp } = window;
 	const { registerBlockType } = wp.blocks;
 	const { createElement: el } = wp.element;
-	const { InnerBlocks } = wp.blockEditor;
+	const { InnerBlocks, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
 	const { useSelect } = wp.data;
 
 	const allowedBlocks = [ 'core/quote', 'core/video' ];
@@ -55,19 +55,20 @@
 	}
 
 	registerBlockType( 'test/inner-blocks-render-appender', {
+		apiVersion: 3,
 		title: 'InnerBlocks renderAppender',
 		icon: 'carrot',
 		category: 'text',
 
-		edit() {
-			return el(
-				'div',
-				{ style: { outline: '1px solid gray', padding: 5 } },
-				el( InnerBlocks, {
-					allowedBlocks,
-					renderAppender: myCustomAppender,
-				} )
-			);
+		edit: function Edit() {
+			const blockProps = useBlockProps( {
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks,
+				renderAppender: myCustomAppender,
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {
@@ -80,14 +81,15 @@
 	} );
 
 	registerBlockType( 'test/inner-blocks-render-appender-dynamic', {
+		apiVersion: 3,
 		title: 'InnerBlocks renderAppender dynamic',
 		icon: 'carrot',
 		category: 'text',
 
-		edit( props ) {
-			// Disable reason: this is a react component, but the rule of hook
-			// fails because the block's edit function has a lowercase 'e'.
-			// eslint-disable-next-line react-hooks/rules-of-hooks
+		edit: function Edit( props ) {
+			const blockProps = useBlockProps( {
+				style: { outline: '1px solid gray', padding: 5 },
+			} );
 			const numberOfChildren = useSelect(
 				( select ) => {
 					const { getBlockOrder } = select( 'core/block-editor' );
@@ -107,14 +109,11 @@
 					renderAppender = multipleBlockAppender;
 					break;
 			}
-			return el(
-				'div',
-				{ style: { outline: '1px solid gray', padding: 5 } },
-				el( InnerBlocks, {
-					allowedBlocks,
-					renderAppender,
-				} )
-			);
+			const innerBlocksProps = useInnerBlocksProps( blockProps, {
+				allowedBlocks,
+				renderAppender,
+			} );
+			return el( 'div', innerBlocksProps );
 		},
 
 		save() {

package/plugins/interactive-blocks/hydration-timing/block.json

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

package/plugins/interactive-blocks/hydration-timing/render.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * HTML for testing hydration timing with delayed module loading.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<div
+	data-wp-interactive="test/hydration-timing"
+	<?php echo wp_interactivity_data_wp_context( array( 'initialized' => false ) ); ?>
+>
+	<p
+		data-wp-text="state.moduleLoaded"
+		data-testid="module-loaded"
+	>no</p>
+
+	<p
+		data-wp-text="context.initialized"
+		data-testid="context-initialized"
+	>no</p>
+
+	<div
+		data-wp-init="callbacks.init"
+		data-testid="hydration-status"
+	>
+		Hydration test block
+	</div>
+</div>

package/plugins/interactive-blocks/hydration-timing/view.asset.php

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

package/plugins/interactive-blocks/hydration-timing/view.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+// This is the "fast" module that loads immediately. It imports
+// @wordpress/interactivity, which initializes the runtime.
+//
+// The test pairs this with a "slow" module (hydration-timing-slow) that is
+// artificially delayed. The race condition occurs when this fast module
+// triggers hydration before the slow module has finished loading.
+
+store( 'test/hydration-timing', {
+	state: {
+		moduleLoaded: 'yes',
+	},
+	callbacks: {
+		init() {
+			const context = getContext();
+			context.initialized = true;
+		},
+	},
+} );

package/plugins/interactive-blocks/hydration-timing-async/block.json

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

package/plugins/interactive-blocks/hydration-timing-async/render.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * HTML for testing hydration timing - async import block.
+ *
+ * This block's view module dynamically imports @wordpress/interactivity
+ * on DOMContentLoaded, simulating a lazy-loading scenario. The test verifies
+ * that hydration still occurs even when the library is loaded after
+ * DOMContentLoaded has fired.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<div
+	data-wp-interactive="test/hydration-timing-async"
+	<?php echo wp_interactivity_data_wp_context( array( 'hydrated' => false ) ); ?>
+>
+	<p
+		data-wp-text="state.asyncModuleLoaded"
+		data-testid="async-module-loaded"
+	>no</p>
+
+	<p
+		data-wp-text="context.hydrated"
+		data-testid="async-hydrated"
+	>no</p>
+
+	<div
+		data-wp-init="callbacks.init"
+		data-testid="async-hydration-status"
+	>
+		Async import hydration test block
+	</div>
+</div>

package/plugins/interactive-blocks/hydration-timing-async/view.asset.php

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

package/plugins/interactive-blocks/hydration-timing-async/view.js

@@ -0,0 +1,29 @@
+/**
+ * This module dynamically imports @wordpress/interactivity on DOMContentLoaded.
+ *
+ * This simulates a lazy-loading scenario where the Interactivity API is not
+ * statically imported. The test verifies that hydration still occurs even
+ * when the library is loaded after DOMContentLoaded has already fired.
+ */
+
+const initStore = async () => {
+	const { store, getContext } = await import( '@wordpress/interactivity' );
+
+	store( 'test/hydration-timing-async', {
+		state: {
+			asyncModuleLoaded: 'yes',
+		},
+		callbacks: {
+			// TODO: this could be unavailable during hydration. Fix
+			// `data-wp-init` to support that case.
+			init() {
+				const context = getContext();
+				context.hydrated = true;
+			},
+		},
+	} );
+};
+
+document.addEventListener( 'DOMContentLoaded', () =>
+	setTimeout( initStore, 1 )
+);

package/plugins/interactive-blocks/hydration-timing-slow/block.json

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

package/plugins/interactive-blocks/hydration-timing-slow/render.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * HTML for testing hydration timing - slow module block.
+ *
+ * This block's view module will be artificially delayed in the test
+ * to simulate a slow network connection. The test verifies that
+ * hydration waits for this module to load even when other modules
+ * that import @wordpress/interactivity have already been evaluated.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<div
+	data-wp-interactive="test/hydration-timing"
+	<?php echo wp_interactivity_data_wp_context( array( 'slowInitialized' => false ) ); ?>
+>
+	<p
+		data-wp-text="state.slowModuleLoaded"
+		data-testid="slow-module-loaded"
+	>no</p>
+
+	<p
+		data-wp-text="context.slowInitialized"
+		data-testid="slow-context-initialized"
+	>no</p>
+
+	<div
+		data-wp-init="callbacks.slowInit"
+		data-testid="slow-hydration-status"
+	>
+		Slow module hydration test block
+	</div>
+</div>

package/plugins/interactive-blocks/hydration-timing-slow/view.asset.php

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

package/plugins/interactive-blocks/hydration-timing-slow/view.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+// This module will be artificially delayed in the test.
+// It also imports @wordpress/interactivity, so when it's evaluated,
+// the interactivity runtime will have already been initialized by
+// the fast module. The test verifies that hydration waits for this
+// module to finish loading before running.
+
+store( 'test/hydration-timing', {
+	state: {
+		slowModuleLoaded: 'yes',
+	},
+	callbacks: {
+		slowInit() {
+			const context = getContext();
+			context.slowInitialized = true;
+		},
+	},
+} );

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

@@ -11,6 +11,7 @@
 <section>
 	<h2>Region 1</h2>
 	<div
+		data-testid="region-1"
 		data-wp-interactive="router-regions"
 		data-wp-router-region="region-1"
 	>
@@ -54,8 +55,11 @@
 <section>
 	<h2>Region 2</h2>
 	<div
+		data-testid="region-2"
+		data-wp-key="region-2"
 		data-wp-interactive="router-regions"
 		data-wp-router-region="region-2"
+		data-wp-run="callbacks.nope"
 	>
 		<p
 			data-testid="region-2-text"
@@ -113,6 +117,7 @@
 	<!-- Router region inside data-wp-interactive -->
 	<div
 		data-testid="valid-inside-interactive"
+		data-wp-key="valid-inside-interactive"
 		data-wp-interactive="router-regions"
 		data-wp-router-region="valid-inside-interactive"
 		data-wp-context='{ "counter": { "value": 0 } }'
@@ -131,6 +136,7 @@
 		<!-- Router region inside data-wp-router-region -->
 		<div
 			data-testid="valid-inside-router-region"
+			data-wp-key="valid-inside-router-region"
 			data-wp-interactive="router-regions"
 			data-wp-router-region="valid-inside-router-region"
 			data-wp-context='{ "counter": { "value": 0 } }'
@@ -192,6 +198,7 @@
 			data-wp-interactive="router-regions"
 			data-wp-router-region='$region_data'
 			data-testid="$region_id"
+			data-wp-key="$region_id"
 			$has_directives
 		>
 			<div $context_data>

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

@@ -64,5 +64,8 @@ const { state } = store( 'router-regions', {
 		init() {
 			state.initCount += 1;
 		},
+		nope() {
+			// This function does nothing.
+		},
 	},
 } );

package/plugins/meta-attribute-block/early.js

@@ -1,8 +1,10 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
 	const el = wp.element.createElement;
+	const { useBlockProps } = wp.blockEditor;
 
 	registerBlockType( 'test/test-meta-attribute-block-early', {
+		apiVersion: 3,
 		title: 'Test Meta Attribute Block (Early Registration)',
 		icon: 'star',
 		category: 'text',
@@ -15,14 +17,15 @@
 			},
 		},
 
-		edit( props ) {
-			return el( 'input', {
+		edit: function Edit( props ) {
+			const blockProps = useBlockProps( {
 				className: 'my-meta-input',
 				value: props.attributes.content,
 				onChange( event ) {
 					props.setAttributes( { content: event.target.value } );
 				},
 			} );
+			return el( 'input', blockProps );
 		},
 
 		save() {

package/plugins/meta-attribute-block/late.js

@@ -1,8 +1,10 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
 	const el = wp.element.createElement;
+	const { useBlockProps } = wp.blockEditor;
 
 	registerBlockType( 'test/test-meta-attribute-block-late', {
+		apiVersion: 3,
 		title: 'Test Meta Attribute Block (Late Registration)',
 		icon: 'star',
 		category: 'text',
@@ -15,14 +17,15 @@
 			},
 		},
 
-		edit( props ) {
-			return el( 'input', {
+		edit: function Edit( props ) {
+			const blockProps = useBlockProps( {
 				className: 'my-meta-input',
 				value: props.attributes.content,
 				onChange( event ) {
 					props.setAttributes( { content: event.target.value } );
 				},
 			} );
+			return el( 'input', blockProps );
 		},
 
 		save() {

package/plugins/meta-attribute-block.php

@@ -33,6 +33,7 @@ function enqueue_test_meta_attribute_block() {
 		plugins_url( 'meta-attribute-block/early.js', __FILE__ ),
 		array(
 			'wp-blocks',
+			'wp-block-editor',
 			'wp-element',
 		),
 		filemtime( plugin_dir_path( __FILE__ ) . 'meta-attribute-block/early.js' )
@@ -43,6 +44,7 @@ function enqueue_test_meta_attribute_block() {
 		plugins_url( 'meta-attribute-block/late.js', __FILE__ ),
 		array(
 			'wp-blocks',
+			'wp-block-editor',
 			'wp-element',
 		),
 		filemtime( plugin_dir_path( __FILE__ ) . 'meta-attribute-block/late.js' ),