diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json
new file mode 100644
index 00000000000000..0d35e461056683
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-each",
+	"title": "E2E Interactivity tests - directive each",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-each-view",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
new file mode 100644
index 00000000000000..b9deee18abe57d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -0,0 +1,226 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-each`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+gutenberg_enqueue_module( 'directive-each-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "directive-each" }'>
+	<div data-testid="letters">
+		<template data-wp-each="state.letters">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A</p>
+		<p data-testid="item" data-wp-each-child>B</p>
+		<p data-testid="item" data-wp-each-child>C</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="fruits">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<button
+			data-testid="add" data-wp-on--click="actions.addFruit"
+		>Add</button>
+		<button
+			data-testid="replace" data-wp-on--click="actions.replaceFruit"
+		>Replace</button>
+		<template data-wp-each--fruit="state.fruits">
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-on--click="actions.removeFruit"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="books">
+		<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>
+		<template
+			data-wp-each--book="state.books"
+			data-wp-each-key="context.book.isbn"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.book.title"
+				data-wp-on--click="actions.removeBook"
+			></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>
+
+	<hr>
+
+	<div data-testid="numbers">
+		<button
+			data-testid="shift" data-wp-on--click="actions.shiftNumber"
+		>Shift</button>
+		<button
+			data-testid="unshift" data-wp-on--click="actions.unshiftNumber"
+		>Unshift</button>
+		<template data-wp-each="state.numbers">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<p data-testid="item" data-wp-each-child>1</p>
+		<p data-testid="item" data-wp-each-child>2</p>
+		<p data-testid="item" data-wp-each-child>3</p>
+		<p data-testid="item">4</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="empty">
+		<button
+			data-testid="add" data-wp-on--click="actions.addItem"
+		>Add</button>
+		<template data-wp-each="state.emptyList">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<p data-testid="item">item X</p>
+	</div>
+
+	<div data-testid="siblings">
+		<button
+			data-testid="unshift"
+			data-wp-on--click="actions.unshiftNumberAndName"
+		>Unshift</button>
+		<template
+			data-wp-each="state.numbersAndNames"
+			data-wp-each-key="context.item.value"
+		>
+			<p data-wp-text="context.item.name" data-testid="item"></p>
+			<p data-wp-text="context.item.value" data-testid="item"></p>
+		</template>
+		<p data-testid="item" data-wp-each-child>two</p>
+		<p data-testid="item" data-wp-each-child>2</p>
+		<p data-testid="item" data-wp-each-child>three</p>
+		<p data-testid="item" data-wp-each-child>3</p>
+		<p data-testid="item">four</p>
+		<p data-testid="item">4</p>
+	</div>
+
+	<div data-testid="nested">
+		<button
+			data-testid="add animal"
+			data-wp-on--click="actions.addAnimal"
+		>Add animal</button>
+		<button
+			data-testid="add breeds"
+			data-wp-on--click="actions.addBreeds"
+		>Add breeds</button>
+
+		<ul>
+			<template
+				data-wp-each--animal="state.animalBreeds"
+				data-wp-each-key="context.animal.name"
+			>
+				<li data-testid="animal">
+					<span
+						data-testid="name"
+						data-wp-text="context.animal.name"
+					></span>
+					<ul>
+						<template data-wp-each--breed="context.animal.breeds">
+							<li data-wp-text="context.breed"></li>
+						</template>
+					</ul>
+				</li>
+			</template>
+			<!-- SSRed elements; they should be removed on hydration -->
+			<li data-testid="animal" data-wp-each-child>
+				<span data-testid="name">Dog</span>
+				<ul>
+					<template data-wp-each--breed="context.animal.breeds">
+						<li data-wp-text="context.breed"></li>
+					</template>
+					<li data-wp-each-child>Chihuahua</li>
+					<li data-wp-each-child>Rottweiler</li>
+				</ul>
+			</li>
+			<li data-testid="animal" data-wp-each-child>
+				<span data-testid="name">Cat</span>
+				<ul>
+					<template data-wp-each--breed="context.animal.breeds">
+						<li data-wp-text="context.breed"></li>
+					</template>
+					<li data-wp-each-child>Sphynx</li>
+					<li data-wp-each-child>Siamese</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+
+	<div data-testid="invalid tag">
+		<div data-wp-each="state.letters">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</div>
+	</div>
+
+
+	<div data-testid="derived state">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<template
+			data-wp-context='{ "idPrefix": "fruit-" }'
+			data-wp-each--fruit="state.fruits"
+			data-wp-each-key="state.fruitId"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-bind--data-fruit-id="state.fruitId"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
+</div>
+
+<hr>
+
+<div
+	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-navigation-id="navigation-updated list"
+	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
+	data-testid="navigation-updated list"
+>
+	<button
+		data-testid="navigate"
+		data-wp-on--click="actions.navigate"
+	>Navigate</button>
+	<template data-wp-each="context.list">
+		<p data-wp-text="context.item" data-testid="item"></p>
+	</template>
+	<p data-testid="item" data-wp-each-child>beta</p>
+	<p data-testid="item" data-wp-each-child>gamma</p>
+	<p data-testid="item" data-wp-each-child>delta</p>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
new file mode 100644
index 00000000000000..55677c9629ad39
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -0,0 +1,189 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, navigate } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-each' );
+
+store( 'directive-each', {
+	state: {
+		letters: [ 'A', 'B', 'C' ],
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		fruits: [ 'avocado', 'banana', 'cherimoya' ],
+		get fruitId() {
+			const { idPrefix, fruit } = getContext();
+			return `${idPrefix}${fruit}`;
+		}
+	},
+	actions: {
+		removeFruit() {
+			const { fruit } = getContext();
+			state.fruits.splice( state.fruits.indexOf( fruit ), 1 );
+		},
+		rotateFruits() {
+			const fruit = state.fruits.pop();
+			state.fruits.splice( 0, 0, fruit );
+		},
+		addFruit() {
+			state.fruits.splice( 0, 0, 'ananas' );
+		},
+		replaceFruit() {
+			state.fruits.splice( 0, 1, 'ananas' );
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		books: [
+			{
+				title: 'A Game of Thrones',
+				author: 'George R.R. Martin',
+				isbn: "9780553588484",
+			},
+			{
+				title: 'A Clash of Kings',
+				author: 'George R.R. Martin',
+				isbn: "9780553381696",
+			},
+			{
+				title: 'A Storm of Swords',
+				author: 'George R.R. Martin',
+				isbn: "9780553573428",
+			},
+		],
+	},
+	actions: {
+		removeBook() {
+			const { book } = getContext();
+			state.books.splice( state.books.indexOf( book ), 1 );
+		},
+		rotateBooks() {
+			const book = state.books.pop();
+			state.books.splice( 0, 0, book );
+		},
+		addBook() {
+			const book = {
+				title: 'A Feast for Crows',
+				author: 'George R.R. Martin',
+				isbn: "9780553582024",
+			};
+			state.books.splice( 0, 0, book );
+		},
+		replaceBook() {
+			const book = {
+				title: 'A Feast for Crows',
+				author: 'George R.R. Martin',
+				isbn: "9780553582024",
+			};
+			state.books.splice( 0, 1, book );
+		},
+		modifyBook() {
+			const [ book ] = state.books;
+			book.title = book.title.toUpperCase();
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		numbers: [ 1, 2, 3 ],
+	},
+	actions: {
+		shiftNumber() {
+			state.numbers.shift();
+		},
+		unshiftNumber() {
+			if ( state.numbers.length > 0 ) {
+				state.numbers.unshift( state.numbers[ 0 ] - 1 );
+			}
+		}
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		emptyList: []
+	},
+	actions: {
+		addItem() {
+			state.emptyList.push( `item ${ state.emptyList.length }` );
+		}
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		numbersAndNames: [
+			{ name: "two", value: 2 },
+			{ name: "three", value: 3 },
+		],
+	},
+	actions: {
+		unshiftNumberAndName() {
+			state.numbersAndNames.unshift( { name: "one", value: 1 } );
+		}
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		animalBreeds: [
+			{ name: "Dog", breeds: [ 'chihuahua', 'rottweiler' ] },
+			{ name: "Cat", breeds: [ 'sphynx', 'siamese' ] },
+		],
+	},
+	actions: {
+		addAnimal() {
+			state.animalBreeds.unshift( {
+				name: "Rat", breeds: [ 'dumbo', 'rex' ]
+			} );
+		},
+		addBreeds() {
+			state
+				.animalBreeds
+				.forEach( ( { name, breeds } ) => {
+					if ( name === 'Dog') breeds.unshift( 'german shepherd' );
+					if ( name === 'Cat') breeds.unshift( 'maine coon' );
+					if ( name === 'Rat') breeds.unshift( 'satin' );
+				} );
+		}
+	}
+} );
+
+const html = `
+<div
+	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-navigation-id="navigation-updated list"
+	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
+	data-testid="navigation-updated list"
+>
+	<button
+		data-testid="navigate"
+		data-wp-on--click="actions.navigate"
+	>Navigate</button>
+	<template data-wp-each="context.list">
+		<p data-wp-text="context.item" data-testid="item"></p>
+	</template>
+	<p data-testid="item" data-wp-each-child>alpha</p>
+	<p data-testid="item" data-wp-each-child>beta</p>
+	<p data-testid="item" data-wp-each-child>gamma</p>
+	<p data-testid="item" data-wp-each-child>delta</p>
+</div>
+`;
+
+store( 'directive-each', {
+	actions: {
+		navigate() {
+			return navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+	}
+} );
+
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index b37fff1bbb5c4c..252b200f9d4d01 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 -   Add the `data-wp-run` directive along with the `useInit` and `useWatch` hooks. ([#57805](https://github.com/WordPress/gutenberg/pull/57805))
 -   Add `wp-data-on-window` and `wp-data-on-document` directives. ([#57931](https://github.com/WordPress/gutenberg/pull/57931))
+-   Add the `data-wp-each` directive to render lists of items using a template. ([57859](https://github.com/WordPress/gutenberg/pull/57859))
 
 ### Breaking Changes
 
diff --git a/packages/interactivity/docs/2-api-reference.md b/packages/interactivity/docs/2-api-reference.md
index 922662c10a8e2b..bae15e9a7fcf2f 100644
--- a/packages/interactivity/docs/2-api-reference.md
+++ b/packages/interactivity/docs/2-api-reference.md
@@ -26,6 +26,7 @@ DOM elements are connected to data stored in the state and context through direc
     - [`wp-init`](#wp-init) ![](https://img.shields.io/badge/SIDE_EFFECTS-afd2e3.svg)
     - [`wp-run`](#wp-run) ![](https://img.shields.io/badge/SIDE_EFFECTS-afd2e3.svg)
     - [`wp-key`](#wp-key) ![](https://img.shields.io/badge/TEMPLATING-afd2e3.svg)
+    - [`wp-each`](#wp-each) ![](https://img.shields.io/badge/TEMPLATING-afd2e3.svg)
   - [Values of directives are references to store properties](#values-of-directives-are-references-to-store-properties)
 - [The store](#the-store)
   - [Elements of the store](#elements-of-the-store)
@@ -620,6 +621,78 @@ But it can also be used on other elements:
 
 When the list is re-rendered, the Interactivity API will match elements by their keys to determine if an item was added/removed/reordered. Elements without keys might be recreated unnecessarily.
 
+
+#### `wp-each`
+
+The `wp-each` directive is intended to render a list of elements. The directive can be used in `<template>` tags, being the value a path to an array stored in the global state or the context. The content inside the `<template>` tag is the template used to render each of the items.
+
+Each item is included in the context under the `item` name by default, so directives inside the template can access the current item.
+
+For example, let's consider the following HTML.
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+  <template data-wp-each="context.list" >
+    <li data-wp-text="context.item"></li>
+  </template>
+</ul>
+```
+
+It would generate the following output:
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+  <li data-wp-text="context.item">hello</li>
+  <li data-wp-text="context.item">hola</li>
+  <li data-wp-text="context.item">olá</li>
+</ul>
+```
+
+The prop that holds the item in the context can be changed by passing a suffix to the directive name. In the following example, we change the default prop `item` to `greeting`.
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+  <template data-wp-each--greeting="context.list" >
+    <li data-wp-text="context.greeting"></li>
+  </template>
+</ul>
+```
+
+By default, it uses each element as the key for the rendered nodes, but you can also specify a path to retrieve the key if necessary, e.g., when the list contains objects.
+
+For that, you must use `data-wp-each-key` in the `<template>` tag and not `data-wp-key` inside the template content. This is because `data-wp-each` creates
+a context provider wrapper around each rendered item, and those wrappers are the ones that need the `key` property.
+
+```html
+<ul data-wp-context='{
+  "list": [
+    { "id": "en", "value": "hello" },
+    { "id": "es", "value": "hola" },
+    { "id": "pt", "value": "olá" }
+  ]
+}'>
+  <template
+    data-wp-each--greeting="context.list"
+    data-wp-each-key="context.greeting.id"
+  >
+    <li data-wp-text="context.greeting.value"></li>
+  </template>
+</ul>
+```
+
+For server-side rendered lists, another directive called `data-wp-each-child` ensures hydration works as expected. This directive is added automatically when the directive is processed on the server.
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+  <template data-wp-each--greeting="context.list" >
+    <li data-wp-text="context.greeting"></li>
+  </template>
+  <li data-wp-each-child>hello</li>
+  <li data-wp-each-child>hola</li>
+  <li data-wp-each-child>olá</li>
+</ul>
+```
+
 ### Values of directives are references to store properties
 
 The value assigned to a directive is a string pointing to a specific state, action, or side effect.
diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js
index 21ab2da29cf275..c1879af1fe19a6 100644
--- a/packages/interactivity/src/directives.js
+++ b/packages/interactivity/src/directives.js
@@ -9,7 +9,7 @@ import { deepSignal, peek } from 'deepsignal';
  */
 import { createPortal } from './portals';
 import { useWatch, useInit } from './utils';
-import { directive } from './hooks';
+import { directive, getScope, getEvaluate } from './hooks';
 
 const isObject = ( item ) =>
 	item && typeof item === 'object' && ! Array.isArray( item );
@@ -313,4 +313,49 @@ export default () => {
 	directive( 'run', ( { directives: { run }, evaluate } ) => {
 		run.forEach( ( entry ) => evaluate( entry ) );
 	} );
+
+	// data-wp-each--[item]
+	directive(
+		'each',
+		( {
+			directives: { each, 'each-key': eachKey },
+			context: inheritedContext,
+			element,
+			evaluate,
+		} ) => {
+			if ( element.type !== 'template' ) return;
+
+			const { Provider } = inheritedContext;
+			const inheritedValue = useContext( inheritedContext );
+
+			const [ entry ] = each;
+			const { namespace, suffix } = entry;
+
+			const list = evaluate( entry );
+			return list.map( ( item ) => {
+				const mergedContext = deepSignal( {} );
+
+				const itemProp = suffix === 'default' ? 'item' : suffix;
+				const newValue = deepSignal( {
+					[ namespace ]: { [ itemProp ]: item },
+				} );
+				mergeDeepSignals( newValue, inheritedValue );
+				mergeDeepSignals( mergedContext, newValue, true );
+
+				const scope = { ...getScope(), context: mergedContext };
+				const key = eachKey
+					? getEvaluate( { scope } )( eachKey[ 0 ] )
+					: item;
+
+				return (
+					<Provider value={ mergedContext } key={ key }>
+						{ element.props.content }
+					</Provider>
+				);
+			} );
+		},
+		{ priority: 20 }
+	);
+
+	directive( 'each-child', () => null );
 };
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 4309f3f0bea7a7..c133eb9981880b 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -261,7 +261,7 @@ const resolve = ( path, namespace ) => {
 };
 
 // Generate the evaluate function.
-const getEvaluate: GetEvaluate =
+export const getEvaluate: GetEvaluate =
 	( { scope } ) =>
 	( entry, ...args ) => {
 		let { value: path, namespace } = entry;
diff --git a/packages/interactivity/src/vdom.js b/packages/interactivity/src/vdom.js
index 860a3149e6ffd6..4a7cfff9f9d0df 100644
--- a/packages/interactivity/src/vdom.js
+++ b/packages/interactivity/src/vdom.js
@@ -43,7 +43,7 @@ export function toVdom( root ) {
 	);
 
 	function walk( node ) {
-		const { attributes, nodeType } = node;
+		const { attributes, nodeType, localName } = node;
 
 		if ( nodeType === 3 ) return [ node.data ];
 		if ( nodeType === 4 ) {
@@ -93,7 +93,7 @@ export function toVdom( root ) {
 
 		if ( ignore && ! island )
 			return [
-				h( node.localName, {
+				h( localName, {
 					...props,
 					innerHTML: node.innerHTML,
 					__directives: { ignore: true },
@@ -118,20 +118,26 @@ export function toVdom( root ) {
 			);
 		}
 
-		let child = treeWalker.firstChild();
-		if ( child ) {
-			while ( child ) {
-				const [ vnode, nextChild ] = walk( child );
-				if ( vnode ) children.push( vnode );
-				child = nextChild || treeWalker.nextSibling();
+		if ( localName === 'template' ) {
+			props.content = [ ...node.content.childNodes ].map( ( childNode ) =>
+				toVdom( childNode )
+			);
+		} else {
+			let child = treeWalker.firstChild();
+			if ( child ) {
+				while ( child ) {
+					const [ vnode, nextChild ] = walk( child );
+					if ( vnode ) children.push( vnode );
+					child = nextChild || treeWalker.nextSibling();
+				}
+				treeWalker.parentNode();
 			}
-			treeWalker.parentNode();
 		}
 
 		// Restore previous namespace.
 		if ( island ) namespaces.pop();
 
-		return [ h( node.localName, props, children ) ];
+		return [ h( localName, props, children ) ];
 	}
 
 	return walk( treeWalker.currentNode );
diff --git a/test/e2e/specs/interactivity/directive-each.spec.ts b/test/e2e/specs/interactivity/directive-each.spec.ts
new file mode 100644
index 00000000000000..4f024b1f828a95
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-each.spec.ts
@@ -0,0 +1,486 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-each', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-each' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-each' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should use `item` as the defaul item name in the context', async ( {
+		page,
+	} ) => {
+		const elements = page.getByTestId( 'letters' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ 'A', 'B', 'C' ] );
+	} );
+
+	test( 'should use the specified item name in the context', async ( {
+		page,
+	} ) => {
+		const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [
+			'avocado',
+			'banana',
+			'cherimoya',
+		] );
+	} );
+
+	test.describe( 'without `wp-each-key`', () => {
+		test.beforeEach( async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			// These tags are included to check that the elements are not unmounted
+			// and mounted again. If an element remounts, its tag should be missing.
+			await elements.evaluateAll( ( refs ) =>
+				refs.forEach( ( ref, index ) => {
+					if ( ref instanceof HTMLElement ) {
+						ref.dataset.tag = `${ index }`;
+					}
+				} )
+			);
+		} );
+
+		test( 'should preserve elements on deletion', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			// An item is removed when clicked.
+			await elements.first().click();
+
+			await expect( elements ).toHaveText( [ 'banana', 'cherimoya' ] );
+			await expect( elements.getByText( 'avocado' ) ).toBeHidden();
+
+			// Get the tags. They should not have disappeared.
+			const [ banana, cherimoya ] = await elements.all();
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on reordering', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'fruits' ).getByTestId( 'rotate' ).click();
+
+			await expect( elements ).toHaveText( [
+				'cherimoya',
+				'avocado',
+				'banana',
+			] );
+
+			// Get the tags. They should not have disappeared or changed.
+			const [ cherimoya, avocado, banana ] = await elements.all();
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+			await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+		} );
+
+		test( 'should preserve elements on addition', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'fruits' ).getByTestId( 'add' ).click();
+
+			await expect( elements ).toHaveText( [
+				'ananas',
+				'avocado',
+				'banana',
+				'cherimoya',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ ananas, avocado, banana, cherimoya ] = await elements.all();
+			await expect( ananas ).not.toHaveAttribute( 'data-tag' );
+			await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on replacement', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'fruits' ).getByTestId( 'replace' ).click();
+
+			await expect( elements ).toHaveText( [
+				'ananas',
+				'banana',
+				'cherimoya',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ ananas, banana, cherimoya ] = await elements.all();
+			await expect( ananas ).not.toHaveAttribute( 'data-tag' );
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		} );
+	} );
+
+	test.describe( 'with `wp-each-key`', () => {
+		test.beforeEach( async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			// These tags are included to check that the elements are not unmounted
+			// and mounted again. If an element remounts, its tag should be missing.
+			await elements.evaluateAll( ( refs ) =>
+				refs.forEach( ( ref, index ) => {
+					if ( ref instanceof HTMLElement ) {
+						ref.dataset.tag = `${ index }`;
+					}
+				} )
+			);
+		} );
+
+		test( 'should preserve elements on deletion', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await expect( elements ).toHaveText( [
+				'A Game of Thrones',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// An item is removed when clicked.
+			await elements.first().click();
+
+			await expect( elements ).toHaveText( [
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared.
+			const [ acok, asos ] = await elements.all();
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on reordering', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'rotate' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A Storm of Swords',
+				'A Game of Thrones',
+				'A Clash of Kings',
+			] );
+
+			// Get the tags. They should not have disappeared or changed.
+			const [ asos, agot, acok ] = await elements.all();
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+			await expect( agot ).toHaveAttribute( 'data-tag', '0' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+		} );
+
+		test( 'should preserve elements on addition', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'add' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A Feast for Crows',
+				'A Game of Thrones',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ affc, agot, acok, asos ] = await elements.all();
+			await expect( affc ).not.toHaveAttribute( 'data-tag' );
+			await expect( agot ).toHaveAttribute( 'data-tag', '0' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on replacement', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'replace' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A Feast for Crows',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ affc, acok, asos ] = await elements.all();
+			await expect( affc ).not.toHaveAttribute( 'data-tag' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on modification', async ( {
+			page,
+		} ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'modify' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A GAME OF THRONES',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared or changed.
+			const [ agot, acok, asos ] = await elements.all();
+			await expect( agot ).toHaveAttribute( 'data-tag', '0' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+	} );
+
+	test( 'should respect elements after', async ( { page } ) => {
+		const elements = page.getByTestId( 'numbers' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ '1', '2', '3', '4' ] );
+		await page.getByTestId( 'numbers' ).getByTestId( 'shift' ).click();
+		await expect( elements ).toHaveText( [ '2', '3', '4' ] );
+		await page
+			.getByTestId( 'numbers' )
+			.getByTestId( 'unshift' )
+			.click( { clickCount: 2 } );
+		await expect( elements ).toHaveText( [ '0', '1', '2', '3', '4' ] );
+	} );
+
+	test( 'should support initial empty lists', async ( { page } ) => {
+		const elements = page.getByTestId( 'empty' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ 'item X' ] );
+		await page
+			.getByTestId( 'empty' )
+			.getByTestId( 'add' )
+			.click( { clickCount: 2 } );
+
+		await expect( elements ).toHaveText( [ 'item 0', 'item 1', 'item X' ] );
+	} );
+
+	test( 'should support multiple siblings inside the template', async ( {
+		page,
+	} ) => {
+		const elements = page.getByTestId( 'siblings' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [
+			'two',
+			'2',
+			'three',
+			'3',
+			'four',
+			'4',
+		] );
+		await page.getByTestId( 'siblings' ).getByTestId( 'unshift' ).click();
+		await expect( elements ).toHaveText( [
+			'one',
+			'1',
+			'two',
+			'2',
+			'three',
+			'3',
+			'four',
+			'4',
+		] );
+	} );
+
+	test( 'should work on navigation', async ( { page } ) => {
+		const elements = page
+			.getByTestId( 'navigation-updated list' )
+			.getByTestId( 'item' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		await elements.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await expect( elements ).toHaveText( [ 'beta', 'gamma', 'delta' ] );
+
+		await page
+			.getByTestId( 'navigation-updated list' )
+			.getByTestId( 'navigate' )
+			.click();
+
+		await expect( elements ).toHaveText( [
+			'alpha',
+			'beta',
+			'gamma',
+			'delta',
+		] );
+
+		// Get the tags. They should not have disappeared or changed,
+		// except for the newly created element.
+		const [ alpha, beta, gamma, delta ] = await elements.all();
+		await expect( alpha ).not.toHaveAttribute( 'data-tag' );
+		await expect( beta ).toHaveAttribute( 'data-tag', '0' );
+		await expect( gamma ).toHaveAttribute( 'data-tag', '1' );
+		await expect( delta ).toHaveAttribute( 'data-tag', '2' );
+	} );
+
+	test( 'should work with nested lists', async ( { page } ) => {
+		const mainElement = page.getByTestId( 'nested' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		const listItems = mainElement.getByRole( 'listitem' );
+		await listItems.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		const animals = mainElement.getByTestId( 'animal' );
+
+		{
+			// Ensure it hydrates correctly.
+			const [ dog, cat ] = await animals.all();
+			await expect( dog.getByTestId( 'name' ) ).toHaveText( 'Dog' );
+			await expect( dog.getByRole( 'listitem' ) ).toHaveText( [
+				'chihuahua',
+				'rottweiler',
+			] );
+			await expect( cat.getByTestId( 'name' ) ).toHaveText( 'Cat' );
+			await expect( cat.getByRole( 'listitem' ) ).toHaveText( [
+				'sphynx',
+				'siamese',
+			] );
+		}
+
+		await mainElement.getByTestId( 'add animal' ).click();
+
+		{
+			// Ensure it works when the top list is modified.
+			const [ rat, dog, cat ] = await animals.all();
+			await expect( rat.getByTestId( 'name' ) ).toHaveText( 'Rat' );
+			await expect( rat.getByRole( 'listitem' ) ).toHaveText( [
+				'dumbo',
+				'rex',
+			] );
+			await expect( dog.getByTestId( 'name' ) ).toHaveText( 'Dog' );
+			await expect( dog.getByRole( 'listitem' ) ).toHaveText( [
+				'chihuahua',
+				'rottweiler',
+			] );
+			await expect( cat.getByTestId( 'name' ) ).toHaveText( 'Cat' );
+			await expect( cat.getByRole( 'listitem' ) ).toHaveText( [
+				'sphynx',
+				'siamese',
+			] );
+			await expect( rat ).not.toHaveAttribute( 'data-tag' );
+			const [ d1, d2 ] = await dog.getByRole( 'listitem' ).all();
+			await expect( dog ).toHaveAttribute( 'data-tag', '0' );
+			await expect( d1 ).toHaveAttribute( 'data-tag', '1' );
+			await expect( d2 ).toHaveAttribute( 'data-tag', '2' );
+			const [ c1, c2 ] = await cat.getByRole( 'listitem' ).all();
+			await expect( cat ).toHaveAttribute( 'data-tag', '3' );
+			await expect( c1 ).toHaveAttribute( 'data-tag', '4' );
+			await expect( c2 ).toHaveAttribute( 'data-tag', '5' );
+		}
+
+		// Reset tags so the added elements have one.
+		await listItems.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await mainElement.getByTestId( 'add breeds' ).click();
+
+		{
+			// Ensure it works when the top list is modified.
+			const [ rat, dog, cat ] = await animals.all();
+			await expect( rat.getByTestId( 'name' ) ).toHaveText( 'Rat' );
+			await expect( rat.getByRole( 'listitem' ) ).toHaveText( [
+				'satin',
+				'dumbo',
+				'rex',
+			] );
+			await expect( dog.getByTestId( 'name' ) ).toHaveText( 'Dog' );
+			await expect( dog.getByRole( 'listitem' ) ).toHaveText( [
+				'german shepherd',
+				'chihuahua',
+				'rottweiler',
+			] );
+			await expect( cat.getByTestId( 'name' ) ).toHaveText( 'Cat' );
+			await expect( cat.getByRole( 'listitem' ) ).toHaveText( [
+				'maine coon',
+				'sphynx',
+				'siamese',
+			] );
+			const [ r1, r2, r3 ] = await rat.getByRole( 'listitem' ).all();
+			await expect( rat ).toHaveAttribute( 'data-tag', '0' );
+			await expect( r1 ).not.toHaveAttribute( 'data-tag' );
+			await expect( r2 ).toHaveAttribute( 'data-tag', '1' );
+			await expect( r3 ).toHaveAttribute( 'data-tag', '2' );
+			const [ d1, d2, d3 ] = await dog.getByRole( 'listitem' ).all();
+			await expect( dog ).toHaveAttribute( 'data-tag', '3' );
+			await expect( d1 ).not.toHaveAttribute( 'data-tag' );
+			await expect( d2 ).toHaveAttribute( 'data-tag', '4' );
+			await expect( d3 ).toHaveAttribute( 'data-tag', '5' );
+			const [ c1, c2, c3 ] = await cat.getByRole( 'listitem' ).all();
+			await expect( cat ).toHaveAttribute( 'data-tag', '6' );
+			await expect( c1 ).not.toHaveAttribute( 'data-tag' );
+			await expect( c2 ).toHaveAttribute( 'data-tag', '7' );
+			await expect( c3 ).toHaveAttribute( 'data-tag', '8' );
+		}
+	} );
+
+	test( 'should do nothing when used on non-template elements', async ( {
+		page,
+	} ) => {
+		const elements = page
+			.getByTestId( 'invalid tag' )
+			.getByTestId( 'item' );
+
+		await expect( elements ).toHaveCount( 1 );
+		await expect( elements ).toBeEmpty();
+	} );
+
+	test( 'should work with derived state as keys', async ( { page } ) => {
+		const elements = page
+			.getByTestId( 'derived state' )
+			.getByTestId( 'item' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		await elements.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await page
+			.getByTestId( 'derived state' )
+			.getByTestId( 'rotate' )
+			.click();
+
+		await expect( elements ).toHaveText( [
+			'cherimoya',
+			'avocado',
+			'banana',
+		] );
+
+		// Get the tags. They should not have disappeared or changed.
+		const [ cherimoya, avocado, banana ] = await elements.all();
+		await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+		await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+	} );
+} );