@wordpress/e2e-tests 8.32.1-next.ff1cebbba.0 → 8.33.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.33.0 (2025-10-17)
+
 ## 8.32.0 (2025-10-01)
 
 ## 8.31.0 (2025-09-17)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.32.1-next.ff1cebbba.0",
+	"version": "8.33.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.32.1-next.ff1cebbba.0",
-		"@wordpress/interactivity": "^6.33.1-next.ff1cebbba.0",
-		"@wordpress/interactivity-router": "^2.32.1-next.ff1cebbba.0",
-		"@wordpress/jest-console": "^8.32.1-next.ff1cebbba.0",
-		"@wordpress/jest-puppeteer-axe": "^7.32.1-next.ff1cebbba.0",
-		"@wordpress/scripts": "^30.25.1-next.ff1cebbba.0",
-		"@wordpress/url": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/e2e-test-utils": "^11.33.0",
+		"@wordpress/interactivity": "^6.33.0",
+		"@wordpress/interactivity-router": "^2.33.0",
+		"@wordpress/jest-console": "^8.33.0",
+		"@wordpress/jest-puppeteer-axe": "^7.33.0",
+		"@wordpress/scripts": "^30.26.0",
+		"@wordpress/url": "^4.33.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c5b659710aff01d40d2eb97b211eb2cec9c07d3b"
+	"gitHead": "2bbe0d34ab65458468758c48826296d7a753428b"
 }

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

@@ -13,6 +13,62 @@ wp_interactivity_state(
 	)
 );
 
+wp_interactivity_state(
+	'test/deferred-store/derived-state',
+	array(
+		'value'                   => function () {
+			$context = wp_interactivity_get_context( 'test/deferred-store/derived-state' );
+			return 'bind-' . $context['counter'];
+		},
+		'below10'                 => function () {
+			$context = wp_interactivity_get_context( 'test/deferred-store/derived-state' );
+			return $context['counter'] < 10;
+		},
+		'redOrGreen'              => function () {
+			$context = wp_interactivity_get_context( 'test/deferred-store/derived-state' );
+			return $context['isReady'] ? 'rgb(0, 255, 0)' : 'rgb(255, 0, 0)';
+		},
+		'derivedText'             => function () {
+			$context = wp_interactivity_get_context( 'test/deferred-store/derived-state' );
+			return $context['isReady'] ? 'client-updated text' : 'server-rendered text';
+		},
+		'radiotelephonicAlphabet' => function () {
+			$context = wp_interactivity_get_context( 'test/deferred-store/derived-state' );
+			$dictionary = array(
+				'a' => 'alpha',
+				'b' => 'bravo',
+				'c' => 'charlie',
+				'd' => 'delta',
+			);
+			return array_map(
+				function ( $item ) use ( $dictionary ) {
+					return $dictionary[ $item ];
+				},
+				$context['list']
+			);
+		},
+	)
+);
+
+add_filter(
+	'script_module_data_@wordpress/interactivity',
+	function ( $data ) {
+		if ( ! isset( $data ) ) {
+			$data = array();
+		}
+		$data['derivedStateClosures'] = array(
+			'test/deferred-store/derived-state' => array(
+				'state.value',
+				'state.below10',
+				'state.redOrGreen',
+				'state.derivedText',
+				'state.radiotelephonicAlphabet',
+			),
+		);
+		return $data;
+	}
+);
+
 ?>
 
 <div
@@ -25,3 +81,68 @@ wp_interactivity_state(
 	<span data-wp-text="state.number" data-testid="state-number"></span>
 	<span data-wp-text="state.double" data-testid="state-double"></span>
 </div>
+
+<div data-wp-interactive="test/deferred-store/derived-state">
+	<button data-wp-on--click="actions.load" data-testid="derived-state-load">load</button>
+	<span hidden data-wp-bind--hidden="!state.hydrated" data-testid="derived-state-hydrated">hydrated</span>
+	<span hidden data-wp-bind--hidden="!state.loaded" data-testid="derived-state-loaded">loaded</span>
+</div>
+
+<div data-wp-interactive="test/deferred-store/derived-state" data-wp-context='{"counter": 42}'>
+	<input
+		name="derived-bind"
+		type="text"
+		value="bind-42"
+		readonly
+		data-wp-bind--value="state.value"
+		data-testid="derived-bind-value"
+	>
+	<input
+		name="derived-bind-2"
+		type="text"
+		value="bind-42"
+		readonly
+		data-wp-bind--value="state.existingValue"
+		data-testid="derived-bind-value-2"
+	>
+	<button data-wp-on--click="actions.increment" data-testid="derived-bind-increment">+</button>
+</div>
+
+<div data-wp-interactive="test/deferred-store/derived-state" data-wp-context='{"counter": 9}'>
+	<output
+		class="below-10"
+		data-wp-class--below-10="state.below10"
+		data-wp-text="context.counter"
+		data-testid="derived-class-element"
+	>NaN</output>
+	<button data-wp-on--click="actions.increment" data-testid="derived-class-increment">+</button>
+</div>
+
+<div data-wp-interactive="test/deferred-store/derived-state" data-wp-context='{"isReady": false}'>
+	<output
+		style="color:red;"
+		data-wp-style--color="state.redOrGreen"
+		data-testid="derived-style-element"
+	>Style</output>
+	<button data-wp-on--click="actions.setReady" data-testid="derived-style-ready">Set ready</button>
+</div>
+
+<div data-wp-interactive="test/deferred-store/derived-state" data-wp-context='{"isReady": false}'>
+	<output
+		data-wp-text="state.derivedText"
+		data-testid="derived-text-element"
+	>server-rendered text</output>
+	<button data-wp-on--click="actions.setReady" data-testid="derived-text-update">Update</button>
+</div>
+
+<div data-wp-interactive="test/deferred-store/derived-state" data-wp-context='{"list": ["a", "b", "c"]}'>
+	<ol data-testid="derived-each-list">
+		<template data-wp-each="state.radiotelephonicAlphabet">
+			<li data-wp-text="context.item"></li>
+		</template>
+		<li data-wp-each-child="test/deferred-store/derived-state::state.radiotelephonicAlphabet" data-wp-text="context.item">alpha</li>
+		<li data-wp-each-child="test/deferred-store/derived-state::state.radiotelephonicAlphabet" data-wp-text="context.item">bravo</li>
+		<li data-wp-each-child="test/deferred-store/derived-state::state.radiotelephonicAlphabet" data-wp-text="context.item">charlie</li>
+	</ol>
+	<button data-wp-on--click="actions.addItem" data-testid="derived-each-additem">+</button>
+</div>

package/plugins/interactive-blocks/deferred-store/view.js

@@ -36,3 +36,63 @@ window.addEventListener(
 	},
 	{ once: true }
 );
+
+const { state } = store( 'test/deferred-store/derived-state', {
+	state: {
+		hydrated: true,
+		get existingValue() {
+			return state.value;
+		},
+	},
+	actions: {
+		load() {
+			store( 'test/deferred-store/derived-state', {
+				state: {
+					loaded: true,
+					get value() {
+						const { counter } = getContext();
+						return `bind-${ counter }`;
+					},
+					get below10() {
+						const { counter } = getContext();
+						return counter < 10;
+					},
+					get redOrGreen() {
+						const { isReady } = getContext();
+						return isReady ? 'rgb(0, 255, 0)' : 'rgb(255, 0, 0)';
+					},
+					get derivedText() {
+						const { isReady } = getContext();
+						return isReady
+							? 'client-updated text'
+							: 'server-rendered text';
+					},
+					get radiotelephonicAlphabet() {
+						const { list } = getContext();
+						const dictionary = {
+							a: 'alpha',
+							b: 'bravo',
+							c: 'charlie',
+							d: 'delta',
+						};
+						return list.map( ( item ) => dictionary[ item ] );
+					},
+				},
+				actions: {
+					increment() {
+						getContext().counter += 1;
+					},
+					setReady() {
+						getContext().isReady = true;
+					},
+					addItem() {
+						const { list } = getContext();
+						if ( list.length === 3 ) {
+							list.push( 'd' );
+						}
+					},
+				},
+			} );
+		},
+	},
+} );

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

@@ -213,6 +213,38 @@
 		<p data-testid="item" data-wp-each-child>banana</p>
 		<p data-testid="item" data-wp-each-child>cherimoya</p>
 	</div>
+
+	<div data-testid="item from derived state">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateBooks"
+		>Rotate</button>
+		<button
+			data-testid="add" data-wp-on--click="actions.addBook"
+		>Add</button>
+		<button
+			data-testid="replace" data-wp-on--click="actions.replaceBook"
+		>Replace</button>
+		<button
+			data-testid="modify" data-wp-on--click="actions.modifyBook"
+		>Modify</button>
+		<button
+			data-testid="replace-all" data-wp-on--click="actions.replaceAllBooks"
+		>Replace All</button>
+		<template
+			data-wp-each--book-item="state.books"
+			data-wp-each-key="state.bookItem.isbn"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="state.bookItem.title"
+				data-wp-on--click="actions.removeBookUsingDerivedState"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A Game of Thrones</p>
+		<p data-testid="item" data-wp-each-child>A Clash of Kings</p>
+		<p data-testid="item" data-wp-each-child>A Storm of Swords</p>
+	</div>
 </div>
 
 <hr>

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

@@ -83,12 +83,19 @@ store( 'directive-each', {
 				isbn: '9780553573428',
 			},
 		],
+		get bookItem() {
+			return getContext().bookItem;
+		},
 	},
 	actions: {
 		removeBook() {
 			const { book } = getContext();
 			state.books.splice( state.books.indexOf( book ), 1 );
 		},
+		removeBookUsingDerivedState() {
+			const book = state.bookItem;
+			state.books.splice( state.books.indexOf( book ), 1 );
+		},
 		rotateBooks() {
 			const book = state.books.pop();
 			state.books.splice( 0, 0, book );
@@ -113,6 +120,9 @@ store( 'directive-each', {
 			const [ book ] = state.books;
 			book.title = book.title.toUpperCase();
 		},
+		replaceAllBooks() {
+			state.books = state.books.map( ( book ) => ( { ...book } ) );
+		},
 	},
 } );
 

package/plugins/interactive-blocks/get-server-context/render.php

@@ -9,8 +9,9 @@
 
 $link1      = $attributes['links']['modified'];
 $link2      = $attributes['links']['newProps'];
-$parent_ctx = $attributes['parentContext'];
-$child_ctx  = $attributes['childContext'];
+$link3      = $attributes['links']['noContext'];
+$parent_ctx = $attributes['parentContext'] ?? false;
+$child_ctx  = $attributes['childContext'] ?? false;
 ?>
 
 <nav
@@ -20,17 +21,29 @@ $child_ctx  = $attributes['childContext'];
 >
 	<a data-testid="modified" href="<?php echo esc_url( $link1 ); ?>">modified</a>
 	<a data-testid="newProps" href="<?php echo esc_url( $link2 ); ?>">newProps</a>
+	<a data-testid="noContext" href="<?php echo esc_url( $link3 ); ?>">noContext</a>
 </nav>
 
 <div
 	data-wp-interactive="test/get-server-context"
 	data-wp-router-region="server-context"
 	data-wp-watch="callbacks.updateServerContextParent"
-	<?php echo wp_interactivity_data_wp_context( $parent_ctx ); ?>
+	<?php
+	if ( $parent_ctx ) {
+		echo wp_interactivity_data_wp_context( $parent_ctx );
+	}
+	?>
 >
 	<div
-		data-wp-watch="callbacks.updateServerContextChild"
-		<?php echo wp_interactivity_data_wp_context( $child_ctx ); ?>
+		data-wp-watch---child="callbacks.updateServerContextChild"
+		data-wp-watch---non-changing="callbacks.updateNonChanging"
+		data-wp-watch---only-in-main="callbacks.updateOnlyInMain"
+		data-wp-watch---only-in-modified="callbacks.updateOnlyInModified"
+		<?php
+		if ( $child_ctx ) {
+			echo wp_interactivity_data_wp_context( $child_ctx );
+		}
+		?>
 	>
 		<div data-testid="prop" data-wp-text="context.prop"></div>
 		<div data-testid="nested.prop" data-wp-text="context.nested.prop"></div>
@@ -38,6 +51,9 @@ $child_ctx  = $attributes['childContext'];
 		<div data-testid="nested.newProp" data-wp-text="context.nested.newProp"></div>
 		<div data-testid="inherited.prop" data-wp-text="context.inherited.prop"></div>
 		<div data-testid="inherited.newProp" data-wp-text="context.inherited.newProp"></div>
+		<div data-testid="nonChanging" data-wp-text="context.nonChanging"></div>
+		<div data-testid="onlyInMain" data-wp-text="context.onlyInMain"></div>
+		<div data-testid="onlyInModified" data-wp-text="context.onlyInModified"></div>
 
 		<button
 			data-testid="tryToModifyServerContext"
@@ -47,5 +63,12 @@ $child_ctx  = $attributes['childContext'];
 		>
 			modify
 		</button>
+
+		<button
+			data-testid="updateNonChanging"
+			data-wp-on--click="actions.updateNonChanging"
+		>
+			update non-changing prop
+		</button>
 	</div>
 </div>

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

@@ -25,27 +25,64 @@ store( 'test/get-server-context', {
 				getContext().result = 'not modified ✅';
 			}
 		},
+		updateNonChanging() {
+			getContext().nonChanging = 'modified from client';
+		},
 	},
 	callbacks: {
 		updateServerContextParent() {
 			const ctx = getContext();
 			const { prop, newProp, nested, inherited } = getServerContext();
 			ctx.prop = prop;
-			ctx.newProp = newProp;
+			if ( newProp ) {
+				ctx.newProp = newProp;
+			}
 			ctx.nested.prop = nested.prop;
-			ctx.nested.newProp = nested.newProp;
+			if ( nested?.newProp ) {
+				ctx.nested.newProp = nested.newProp;
+			}
 			ctx.inherited.prop = inherited.prop;
-			ctx.inherited.newProp = inherited.newProp;
+			if ( inherited?.newProp ) {
+				ctx.inherited.newProp = inherited.newProp;
+			}
 		},
 		updateServerContextChild() {
 			const ctx = getContext();
 			const { prop, newProp, nested, inherited } = getServerContext();
 			ctx.prop = prop;
-			ctx.newProp = newProp;
+			if ( newProp ) {
+				ctx.newProp = newProp;
+			}
 			ctx.nested.prop = nested.prop;
-			ctx.nested.newProp = nested.newProp;
+			if ( nested?.newProp ) {
+				ctx.nested.newProp = nested.newProp;
+			}
 			ctx.inherited.prop = inherited.prop;
-			ctx.inherited.newProp = inherited.newProp;
+			if ( inherited?.newProp ) {
+				ctx.inherited.newProp = inherited.newProp;
+			}
+		},
+		updateNonChanging() {
+			// This property never changes in the server, but it changes in the
+			// client so every time there's a navigation, we need to overwrite
+			// it.
+			const ctx = getContext();
+			const { nonChanging } = getServerContext();
+			ctx.nonChanging = nonChanging;
+		},
+		updateOnlyInMain() {
+			// This property only exists in the main page, so we need to clear
+			// it when navigating to a page that doesn't have it.
+			const ctx = getContext();
+			const { onlyInMain } = getServerContext();
+			ctx.onlyInMain = onlyInMain;
+		},
+		updateOnlyInModified() {
+			// This property only exists in the modified page, so we need to clear
+			// it when navigating to a page that doesn't have it.
+			const ctx = getContext();
+			const { onlyInModified } = getServerContext();
+			ctx.onlyInModified = onlyInModified;
 		},
 	},
 } );

package/plugins/interactive-blocks/get-server-state/render.php

@@ -14,12 +14,18 @@ if ( isset( $attributes['state'] ) ) {
 
 <div
 	data-wp-interactive="test/get-server-state"
-	data-wp-watch="callbacks.updateState"
+	data-wp-watch---update-state="callbacks.updateState"
+	data-wp-watch---non-changing="callbacks.updateNonChanging"
+	data-wp-watch---only-in-main="callbacks.updateOnlyInMain"
+	data-wp-watch---only-in-link-1="callbacks.updateOnlyInLink1"
 >
 	<div data-testid="prop" data-wp-text="state.prop"></div>
 	<div data-testid="nested.prop" data-wp-text="state.nested.prop"></div>
 	<div data-testid="newProp" data-wp-text="state.newProp"></div>
 	<div data-testid="nested.newProp" data-wp-text="state.nested.newProp"></div>
+	<div data-testid="nonChanging" data-wp-text="state.nonChanging"></div>
+	<div data-testid="onlyInMain" data-wp-text="state.onlyInMain"></div>
+	<div data-testid="onlyInLink1" data-wp-text="state.onlyInLink1"></div>
 
 	<button
 		data-testid="tryToModifyServerState"
@@ -30,6 +36,12 @@ if ( isset( $attributes['state'] ) ) {
 		modify
 	</button>
 
+	<button
+		data-testid="updateNonChanging"
+		data-wp-on--click="actions.updateNonChanging"
+	>
+		update non-changing prop
+	</button>
 
 	<nav>
 		<?php

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

@@ -25,14 +25,40 @@ const { state } = store( 'test/get-server-state', {
 				getContext().result = 'not modified ✅';
 			}
 		},
+		updateNonChanging() {
+			state.nonChanging = 'modified from client';
+		},
 	},
 	callbacks: {
 		updateState() {
 			const { prop, newProp, nested } = getServerState();
 			state.prop = prop;
-			state.newProp = newProp;
-			state.nested.prop = nested.prop;
-			state.nested.newProp = nested.newProp;
+			state.nested.prop = nested?.prop;
+			if ( newProp ) {
+				state.newProp = newProp;
+			}
+			if ( nested.newProp ) {
+				state.nested.newProp = nested?.newProp;
+			}
+		},
+		updateNonChanging() {
+			// This property never changes in the server, but it changes in the
+			// client so every time there's a navigation, we need to overwrite
+			// it.
+			const { nonChanging } = getServerState();
+			state.nonChanging = nonChanging;
+		},
+		updateOnlyInMain() {
+			// This property only exists in the main link, so we need to clear
+			// it when navigating to a page that doesn't have it.
+			const { onlyInMain } = getServerState();
+			state.onlyInMain = onlyInMain;
+		},
+		updateOnlyInLink1() {
+			// This property only exists in link 1, so we need to clear it when
+			// navigating to a page that doesn't have it.
+			const { onlyInLink1 } = getServerState();
+			state.onlyInLink1 = onlyInLink1;
 		},
 	},
 } );

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

@@ -84,6 +84,16 @@ $wrapper_attributes = get_block_wrapper_attributes();
 		<?php echo $content; ?>
 	</div>
 
+	<!-- Flag to check whether hydration has occurred. -->
+	<div
+		data-testid="hydrated"
+		data-wp-interactive="test/router-styles"
+		data-wp-bind--hidden="state.undefined"
+		hidden
+	>
+		Hydrated
+	</div>
+
 	<!-- Text to check whether a navigation was client-side. -->
 	<div
 		data-testid="client-side navigation"

package/plugins/interactive-blocks.php

@@ -18,6 +18,18 @@ add_action(
 			foreach ( $block_json_files as $block_json_file ) {
 				register_block_type( $block_json_file );
 			}
+
+			// Manually register script modules for navigation tests.
+			$test_router_script_modules = array(
+				'test-router-script-modules-alpha-view-script-module',
+				'test-router-script-modules-bravo-view-script-module',
+				'test-router-script-modules-charlie-view-script-module',
+				'test-router-script-modules-wrapper-view-script-module',
+			);
+
+			foreach ( $test_router_script_modules as $module_id ) {
+				gutenberg_register_interactive_script_module_id( $module_id );
+			}
 		}
 
 		/*