diff --git a/lib/compat/wordpress-6.5/compat.php b/lib/compat/wordpress-6.5/compat.php
new file mode 100644
index 0000000000000..7844792712589
--- /dev/null
+++ b/lib/compat/wordpress-6.5/compat.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * WordPress 6.5 compatibility functions.
+ *
+ * @package WordPress
+ */
+
+if ( ! function_exists( 'array_is_list' ) ) {
+	/**
+	 * Polyfill for `array_is_list()` function added in PHP 8.1.
+	 *
+	 * Determines if the given array is a list.
+	 *
+	 * An array is considered a list if its keys consist of consecutive numbers from 0 to count($array)-1.
+	 *
+	 * @see https://github.com/symfony/polyfill-php81/tree/main
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array<mixed> $arr The array being evaluated.
+	 * @return bool True if array is a list, false otherwise.
+	 */
+	function array_is_list( $arr ) {
+		if ( ( array() === $arr ) || ( array_values( $arr ) === $arr ) ) {
+			return true;
+		}
+
+		$next_key = -1;
+
+		foreach ( $arr as $k => $v ) {
+			if ( ++$next_key !== $k ) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+}
diff --git a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php
index b437bcefa6756..b4cfa5a499872 100644
--- a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php
+++ b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php
@@ -15,14 +15,24 @@
 	 */
 	class WP_Interactivity_API_Directives_Processor extends Gutenberg_HTML_Tag_Processor_6_5 {
 		/**
-		 * Returns the content between two balanced tags.
+		 * Returns the content between two balanced template tags.
+		 *
+		 * It positions the cursor in the closer tag of the balanced template tag,
+		 * if it exists.
 		 *
 		 * @access private
 		 *
-		 * @return string|null The content between the current opening and its matching closing tag or null if it doesn't
-		 *                     find the matching closing tag.
+		 * @return string|null The content between the current opener template tag and its matching closer tag or null if it
+		 *                     doesn't find the matching closing tag.
 		 */
-		public function get_content_between_balanced_tags() {
+		public function get_content_between_balanced_template_tags() {
+			if ( 'TEMPLATE' !== $this->get_tag() || $this->is_tag_closer() ) {
+				return null;
+			}
+
+			// Flushes any changes.
+			$this->get_updated_html();
+
 			$bookmarks = $this->get_balanced_tag_bookmarks();
 			if ( ! $bookmarks ) {
 				return null;
@@ -32,7 +42,6 @@ public function get_content_between_balanced_tags() {
 			$start = $this->bookmarks[ $start_name ]->start + $this->bookmarks[ $start_name ]->length + 1;
 			$end   = $this->bookmarks[ $end_name ]->start;
 
-			$this->seek( $start_name );
 			$this->release_bookmark( $start_name );
 			$this->release_bookmark( $end_name );
 
@@ -48,6 +57,7 @@ public function get_content_between_balanced_tags() {
 		 * @return bool Whether the content was successfully replaced.
 		 */
 		public function set_content_between_balanced_tags( string $new_content ): bool {
+			// Flushes any changes.
 			$this->get_updated_html();
 
 			$bookmarks = $this->get_balanced_tag_bookmarks();
@@ -67,6 +77,37 @@ public function set_content_between_balanced_tags( string $new_content ): bool {
 			return true;
 		}
 
+		/**
+		 * Appends content after the closing tag of a template tag.
+		 *
+		 * This method positions the processor in the last tag of the appended
+		 * content, if it exists.
+		 *
+		 * @access private
+		 *
+		 * @param string $new_content The string to append after the closing template tag.
+		 * @return bool Whether the content was successfully appended.
+		 */
+		public function append_content_after_template_tag_closer( string $new_content ): bool {
+			// Refuses to process if the content is empty or this is not a closer template tag.
+			if ( empty( $new_content ) || 'TEMPLATE' !== $this->get_tag() || ! $this->is_tag_closer() ) {
+				return false;
+			}
+
+			// Flushes any changes.
+			$this->get_updated_html();
+
+			$bookmark = 'append_content_after_template_tag_closer';
+			$this->set_bookmark( $bookmark );
+			$end = $this->bookmarks[ $bookmark ]->start + $this->bookmarks[ $bookmark ]->length + 1;
+			$this->release_bookmark( $bookmark );
+
+			// Appends the new content.
+			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5( $end, 0, $new_content );
+
+			return true;
+		}
+
 		/**
 		 * Returns a pair of bookmarks for the current opening tag and the matching
 		 * closing tag.
@@ -78,7 +119,7 @@ private function get_balanced_tag_bookmarks() {
 			$start_name = 'start_of_balanced_tag_' . ++$i;
 
 			$this->set_bookmark( $start_name );
-			if ( ! $this->next_balanced_closer() ) {
+			if ( ! $this->next_balanced_tag_closer_tag() ) {
 				$this->release_bookmark( $start_name );
 				return null;
 			}
@@ -93,13 +134,15 @@ private function get_balanced_tag_bookmarks() {
 		 * Finds the matching closing tag for an opening tag.
 		 *
 		 * When called while the processor is on an open tag, it traverses the HTML
-		 * until it finds the matching closing tag, respecting any in-between content,
-		 * including nested tags of the same name. Returns false when called on a
-		 * closing or void tag, or if no matching closing tag was found.
+		 * until it finds the matching closing tag, respecting any in-between
+		 * content, including nested tags of the same name. Returns false when
+		 * called on a closing or void tag, or if no matching closing tag was found.
+		 *
+		 * @access private
 		 *
 		 * @return bool Whether a matching closing tag was found.
 		 */
-		private function next_balanced_closer(): bool {
+		public function next_balanced_tag_closer_tag(): bool {
 			$depth    = 0;
 			$tag_name = $this->get_tag();
 
diff --git a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
index 9cbbfb1d6b654..be9203198d3f2 100644
--- a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
+++ b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
@@ -25,6 +25,12 @@ class WP_Interactivity_API {
 			'data-wp-class'         => 'data_wp_class_processor',
 			'data-wp-style'         => 'data_wp_style_processor',
 			'data-wp-text'          => 'data_wp_text_processor',
+			/*
+			 * `data-wp-each` needs to be processed in the last place because it moves
+			 * the cursor to the end of the processed items to prevent them to be
+			 * processed twice.
+			 */
+			'data-wp-each'          => 'data_wp_each_processor',
 		);
 
 		/**
@@ -194,11 +200,30 @@ public function add_hooks() {
 		 * @return string The processed HTML content. It returns the original content when the HTML contains unbalanced tags.
 		 */
 		public function process_directives( string $html ): string {
-			$p               = new WP_Interactivity_API_Directives_Processor( $html );
-			$tag_stack       = array();
-			$namespace_stack = array();
 			$context_stack   = array();
-			$unbalanced      = false;
+			$namespace_stack = array();
+			$result          = $this->process_directives_args( $html, $context_stack, $namespace_stack );
+			return null === $result ? $html : $result;
+		}
+
+		/**
+		 * Processes the interactivity directives contained within the HTML content
+		 * and updates the markup accordingly.
+		 *
+		 * It needs the context and namespace stacks to be passed by reference and
+		 * it returns null if the HTML contains unbalanced tags.
+		 *
+		 * @since 6.5.0
+		 *
+		 * @param string $html            The HTML content to process.
+		 * @param array  $context_stack   The reference to the array used to keep track of contexts during processing.
+		 * @param array  $namespace_stack The reference to the array used to manage namespaces during processing.
+		 * @return string|null The processed HTML content. It returns null when the HTML contains unbalanced tags.
+		 */
+		private function process_directives_args( string $html, array &$context_stack, array &$namespace_stack ) {
+			$p          = new WP_Interactivity_API_Directives_Processor( $html );
+			$tag_stack  = array();
+			$unbalanced = false;
 
 			$directive_processor_prefixes          = array_keys( self::$directive_processors );
 			$directive_processor_prefixes_reversed = array_reverse( $directive_processor_prefixes );
@@ -234,26 +259,28 @@ public function process_directives( string $html ): string {
 						}
 					}
 				} else {
-					$directives_prefixes = array();
-
-					foreach ( $p->get_attribute_names_with_prefix( 'data-wp-' ) as $attribute_name ) {
+					if ( 0 === count( $p->get_attribute_names_with_prefix( 'data-wp-each-child' ) ) ) {
+						$directives_prefixes = array();
+
+						// Checks if there is is a server directive processor registered for each directive.
+						foreach ( $p->get_attribute_names_with_prefix( 'data-wp-' ) as $attribute_name ) {
+							list( $directive_prefix ) = $this->extract_prefix_and_suffix( $attribute_name );
+							if ( array_key_exists( $directive_prefix, self::$directive_processors ) ) {
+								$directives_prefixes[] = $directive_prefix;
+							}
+						}
 
 						/*
-						 * Extracts the directive prefix to see if there is a server directive
-						 * processor registered for that directive.
-						 */
-						list( $directive_prefix ) = $this->extract_prefix_and_suffix( $attribute_name );
-						if ( array_key_exists( $directive_prefix, self::$directive_processors ) ) {
-							$directives_prefixes[] = $directive_prefix;
+						* If this is not a void element, it adds it to the tag stack so it can
+						* process its closing tag and check for unbalanced tags.
+						*/
+						if ( ! $p->is_void() ) {
+							$tag_stack[] = array( $tag_name, $directives_prefixes );
 						}
-					}
-
-					/*
-					 * If this is not a void element, it adds it to the tag stack so it can
-					 * process its closing tag and check for unbalanced tags.
-					 */
-					if ( ! $p->is_void() ) {
-						$tag_stack[] = array( $tag_name, $directives_prefixes );
+					} else {
+						// Jumps to the tag closer if the tag has a `data-wp-each-child` directive.
+						$p->next_balanced_tag_closer_tag();
+						continue;
 					}
 				}
 
@@ -276,17 +303,17 @@ public function process_directives( string $html ): string {
 						: array( $this, self::$directive_processors[ $directive_prefix ] );
 					call_user_func_array(
 						$func,
-						array( $p, &$context_stack, &$namespace_stack )
+						array( $p, &$context_stack, &$namespace_stack, &$tag_stack )
 					);
 				}
 			}
 
 			/*
-			 * It returns the original content if the HTML is unbalanced because
-			 * unbalanced HTML is not safe to process. In that case, the Interactivity
-			 * API runtime will update the HTML on the client side during the hydration.
+			 * It returns null if the HTML is unbalanced because unbalanced HTML is
+			 * not safe to process. In that case, the Interactivity API runtime will
+			 * update the HTML on the client side during the hydration.
 			 */
-			return $unbalanced || 0 < count( $tag_stack ) ? $html : $p->get_updated_html();
+			return $unbalanced || 0 < count( $tag_stack ) ? null : $p->get_updated_html();
 		}
 
 		/**
@@ -403,6 +430,23 @@ private function extract_directive_value( $directive_value, $default_namespace =
 			return array( $default_namespace, $directive_value );
 		}
 
+		/**
+		 * Transforms a kebab-case string to camelCase.
+		 *
+		 * @param string $str The kebab-case string to transform to camelCase.
+		 * @return string The transformed camelCase string.
+		 */
+		private function kebab_to_camel_case( string $str ): string {
+			return lcfirst(
+				preg_replace_callback(
+					'/(-)([a-z])/',
+					function ( $matches ) {
+						return strtoupper( $matches[2] );
+					},
+					strtolower( preg_replace( '/-+$/', '', $str ) )
+				)
+			);
+		}
 
 		/**
 		 * Processes the `data-wp-interactive` directive.
@@ -768,9 +812,109 @@ class="screen-reader-text"
 ></div>
 HTML;
 				};
+
 				add_action( 'wp_footer', $callback );
 			}
 		}
-	}
 
+		/**
+		 * Processes the `data-wp-each` directive.
+		 *
+		 * This directive gets an array passed as reference and iterates over it
+		 * generating new content for each item based on the inner markup of the
+		 * `template` tag.
+		 *
+		 * @since 6.5.0
+		 *
+		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
+		 * @param array                                     $context_stack   The reference to the context stack.
+		 * @param array                                     $namespace_stack The reference to the store namespace stack.
+		 * @param array                                     $tag_stack       The reference to the tag stack.
+		 */
+		private function data_wp_each_processor( WP_Interactivity_API_Directives_Processor $p, array &$context_stack, array &$namespace_stack, array &$tag_stack ) {
+			if ( ! $p->is_tag_closer() && 'TEMPLATE' === $p->get_tag() ) {
+				$attribute_name   = $p->get_attribute_names_with_prefix( 'data-wp-each' )[0];
+				$extracted_suffix = $this->extract_prefix_and_suffix( $attribute_name );
+				$item_name        = isset( $extracted_suffix[1] ) ? $this->kebab_to_camel_case( $extracted_suffix[1] ) : 'item';
+				$attribute_value  = $p->get_attribute( $attribute_name );
+				$result           = $this->evaluate( $attribute_value, end( $namespace_stack ), end( $context_stack ) );
+
+				// Gets the content between the template tags and leaves the cursor in the closer tag.
+				$inner_content = $p->get_content_between_balanced_template_tags();
+
+				// Checks if there is a manual server-side directive processing.
+				$template_end = 'data-wp-each: template end';
+				$p->set_bookmark( $template_end );
+				$p->next_tag();
+				$manual_sdp = $p->get_attribute( 'data-wp-each-child' );
+				$p->seek( $template_end ); // Rewinds to the template closer tag.
+				$p->release_bookmark( $template_end );
+
+				/*
+				 * It doesn't process in these situations:
+				 * - Manual server-side directive processing.
+				 * - Empty or non-array values.
+				 * - Associative arrays because those are deserialized as objects in JS.
+				 * - Templates that contain top-level texts because those texts can't be
+				 *   identified and removed in the client.
+				 */
+				if (
+					$manual_sdp ||
+					empty( $result ) ||
+					! is_array( $result ) ||
+					! array_is_list( $result ) ||
+					! str_starts_with( trim( $inner_content ), '<' ) ||
+					! str_ends_with( trim( $inner_content ), '>' )
+					) {
+					array_pop( $tag_stack );
+					return;
+				}
+
+				// Extracts the namespace from the directive attribute value.
+				$namespace_value         = end( $namespace_stack );
+				list( $namespace_value ) = is_string( $attribute_value ) && ! empty( $attribute_value )
+				? $this->extract_directive_value( $attribute_value, $namespace_value )
+				: array( $namespace_value, null );
+
+				// Processes the inner content for each item of the array.
+				$processed_content = '';
+				foreach ( $result as $item ) {
+					// Creates a new context that includes the current item of the array.
+					array_push(
+						$context_stack,
+						array_replace_recursive(
+							end( $context_stack ) !== false ? end( $context_stack ) : array(),
+							array( $namespace_value => array( $item_name => $item ) )
+						)
+					);
+
+					// Processes the inner content with the new context.
+					$processed_item = $this->process_directives_args( $inner_content, $context_stack, $namespace_stack );
+
+					if ( null === $processed_item ) {
+						// If the HTML is unbalanced, stop processing it.
+						array_pop( $context_stack );
+						return;
+					}
+
+					// Adds the `data-wp-each-child` to each top-level tag.
+					$i = new WP_Interactivity_API_Directives_Processor( $processed_item );
+					while ( $i->next_tag() ) {
+						$i->set_attribute( 'data-wp-each-child', true );
+						$i->next_balanced_tag_closer_tag();
+					}
+					$processed_content .= $i->get_updated_html();
+
+					// Removes the current context from the stack.
+					array_pop( $context_stack );
+				}
+
+				// Appends the processed content after the tag closer of the template.
+				$p->append_content_after_template_tag_closer( $processed_content );
+
+				// Pops the last tag because it skipped the closing tag of the template tag.
+				array_pop( $tag_stack );
+			}
+		}
+	}
 }
diff --git a/lib/experimental/interactivity-api.php b/lib/experimental/interactivity-api.php
new file mode 100644
index 0000000000000..aff57bf0bce80
--- /dev/null
+++ b/lib/experimental/interactivity-api.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Overrides URLs to load the Gutenberg interactivity script modules instead of
+ * the WordPress Core ones.
+ *
+ * This function checks the URL for specific script modules and overrides the
+ * default URL to point to the Gutenberg plugin. It supports both the
+ * interactivity and interactivity-router scripts, with or without the `.min`
+ * suffix.
+ *
+ * @param string $url The URL of the enqueued script.
+ * @return string The new Gutenberg URL if it's a match, or the WordPress Core URL otherwise.
+ */
+function gutenberg_interactivity_override_script_module_urls( $url ) {
+	$pattern = '/wp-includes\/js\/dist\/interactivity(-router)?(\.min)?\.js/';
+	if ( preg_match( $pattern, $url, $matches ) ) {
+		return gutenberg_url( '/build/interactivity/' . ( $matches[1] ? 'router' : 'index' ) . wp_scripts_get_suffix() . '.js' );
+	}
+	return $url;
+}
+
+add_filter( 'includes_url', 'gutenberg_interactivity_override_script_module_urls', 10, 3 );
diff --git a/lib/load.php b/lib/load.php
index 4fc9b300606d8..5fd9df15d987e 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -104,6 +104,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.4/kses.php';
 
 // WordPress 6.5 compat.
+require __DIR__ . '/compat/wordpress-6.5/compat.php';
 require __DIR__ . '/compat/wordpress-6.5/blocks.php';
 require __DIR__ . '/compat/wordpress-6.5/block-patterns.php';
 require __DIR__ . '/compat/wordpress-6.5/kses.php';
@@ -128,6 +129,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/l10n.php';
 require __DIR__ . '/experimental/synchronization.php';
 require __DIR__ . '/experimental/script-modules.php';
+require __DIR__ . '/experimental/interactivity-api.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 	require __DIR__ . '/experimental/disable-tinymce.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
index 3d018bca46d06..03a2b89cc1233 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -21,6 +21,18 @@
 
 	<hr>
 
+	<div data-testid="letters-kebab-case">
+		<template data-wp-each--my-item="state.letters">
+			<p data-wp-text="context.myItem" 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"
diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js
index 38849f53d7f95..f0df1dae4b3c9 100644
--- a/packages/interactivity/src/directives.js
+++ b/packages/interactivity/src/directives.js
@@ -13,6 +13,7 @@ import { deepSignal, peek } from 'deepsignal';
 import { createPortal } from './portals';
 import { useWatch, useInit } from './utils';
 import { directive, getScope, getEvaluate } from './hooks';
+import { kebabToCamelCase } from './utils/kebab-to-camelcase';
 
 const isObject = ( item ) =>
 	item && typeof item === 'object' && ! Array.isArray( item );
@@ -356,7 +357,8 @@ export default () => {
 			return list.map( ( item ) => {
 				const mergedContext = deepSignal( {} );
 
-				const itemProp = suffix === 'default' ? 'item' : suffix;
+				const itemProp =
+					suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
 				const newValue = deepSignal( {
 					[ namespace ]: { [ itemProp ]: item },
 				} );
diff --git a/packages/interactivity/src/index.js b/packages/interactivity/src/index.ts
similarity index 100%
rename from packages/interactivity/src/index.js
rename to packages/interactivity/src/index.ts
diff --git a/packages/interactivity/src/utils/kebab-to-camelcase.js b/packages/interactivity/src/utils/kebab-to-camelcase.js
new file mode 100644
index 0000000000000..a2c0d3403db3c
--- /dev/null
+++ b/packages/interactivity/src/utils/kebab-to-camelcase.js
@@ -0,0 +1,14 @@
+/**
+ * Transforms a kebab-case string to camelCase.
+ *
+ * @param {string} str The kebab-case string to transform to camelCase.
+ * @return {string} The transformed camelCase string.
+ */
+export function kebabToCamelCase( str ) {
+	return str
+		.replace( /^-+|-+$/g, '' )
+		.toLowerCase()
+		.replace( /-([a-z])/g, function ( match, group1 ) {
+			return group1.toUpperCase();
+		} );
+}
diff --git a/packages/interactivity/src/utils/test/utils.js b/packages/interactivity/src/utils/test/utils.js
new file mode 100644
index 0000000000000..2416b03e342ee
--- /dev/null
+++ b/packages/interactivity/src/utils/test/utils.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { kebabToCamelCase } from '../kebab-to-camelcase';
+
+describe( 'kebabToCamelCase', () => {
+	it( 'should work exactly as the PHP version', async () => {
+		expect( kebabToCamelCase( '' ) ).toBe( '' );
+		expect( kebabToCamelCase( 'item' ) ).toBe( 'item' );
+		expect( kebabToCamelCase( 'my-item' ) ).toBe( 'myItem' );
+		expect( kebabToCamelCase( 'my_item' ) ).toBe( 'my_item' );
+		expect( kebabToCamelCase( 'My-iTem' ) ).toBe( 'myItem' );
+		expect( kebabToCamelCase( 'my-item-with-multiple-hyphens' ) ).toBe(
+			'myItemWithMultipleHyphens'
+		);
+		expect( kebabToCamelCase( 'my-item-with--double-hyphens' ) ).toBe(
+			'myItemWith-DoubleHyphens'
+		);
+		expect( kebabToCamelCase( 'my-item-with_under-score' ) ).toBe(
+			'myItemWith_underScore'
+		);
+		expect( kebabToCamelCase( '-my-item' ) ).toBe( 'myItem' );
+		expect( kebabToCamelCase( 'my-item-' ) ).toBe( 'myItem' );
+		expect( kebabToCamelCase( '-my-item-' ) ).toBe( 'myItem' );
+	} );
+} );
diff --git a/packages/interactivity/src/vdom.js b/packages/interactivity/src/vdom.ts
similarity index 98%
rename from packages/interactivity/src/vdom.js
rename to packages/interactivity/src/vdom.ts
index 01cf58ba00479..9928012ada3f4 100644
--- a/packages/interactivity/src/vdom.js
+++ b/packages/interactivity/src/vdom.ts
@@ -62,7 +62,7 @@ export function toVdom( root ) {
 			return [ null, next ];
 		}
 
-		const props = {};
+		const props: Record< string, any > = {};
 		const children = [];
 		const directives = [];
 		let ignore = false;
diff --git a/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php
index aa1ee999fd58f..6536fb6cb4b36 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php
@@ -11,119 +11,144 @@
  */
 class Tests_WP_Interactivity_API_Directives_Processor extends WP_UnitTestCase {
 	/**
-	 * Tests the `get_content_between_balanced_tags` method on standard tags.
+	 * Tests the `get_content_between_balanced_template_tags` method on template
+	 * tags.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_standard_tags() {
-		$content = '<div>Text</div>';
+	public function test_get_content_between_balanced_template_tags_standard_tags() {
+		$content = '<template>Text</template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertEquals( 'Text', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( 'Text', $p->get_content_between_balanced_template_tags() );
 
-		$content = '<div>Text</div><div>More text</div>';
+		$content = '<template>Text</template><template>More text</template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertEquals( 'Text', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( 'Text', $p->get_content_between_balanced_template_tags() );
 		$p->next_tag();
-		$this->assertEquals( 'More text', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( 'More text', $p->get_content_between_balanced_template_tags() );
 	}
 
 	/**
-	 * Tests the `get_content_between_balanced_tags` method on an empty tag.
+	 * Tests the `get_content_between_balanced_template_tags` method on an empty
+	 * tag.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_empty_tag() {
-		$content = '<div></div>';
+	public function test_get_content_between_balanced_template_tags_empty_tag() {
+		$content = '<template></template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertEquals( '', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( '', $p->get_content_between_balanced_template_tags() );
 	}
 
 	/**
-	 * Tests the `get_content_between_balanced_tags` method with a self-closing
-	 * tag.
+	 * Tests the `get_content_between_balanced_template_tags` method with
+	 * non-template tags.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_self_closing_tag() {
+	public function test_get_content_between_balanced_template_tags_self_closing_tag() {
 		$content = '<img src="example.jpg">';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertNull( $p->get_content_between_balanced_tags() );
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
+
+		$content = '<div>Text</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
 	}
 
 	/**
-	 * Tests the `get_content_between_balanced_tags` method with nested tags.
+	 * Tests the `get_content_between_balanced_template_tags` method with nested
+	 * template tags.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_nested_tags() {
-		$content = '<div><span>Content</span><strong>More Content</strong></div>';
+	public function test_get_content_between_balanced_template_tags_nested_tags() {
+		$content = '<template><span>Content</span><strong>More Content</strong></template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertEquals( '<span>Content</span><strong>More Content</strong>', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( '<span>Content</span><strong>More Content</strong>', $p->get_content_between_balanced_template_tags() );
 
-		$content = '<div><div>Content</div><img src="example.jpg"></div>';
+		$content = '<template><template>Content</template><img src="example.jpg"></template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertEquals( '<div>Content</div><img src="example.jpg">', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( '<template>Content</template><img src="example.jpg">', $p->get_content_between_balanced_template_tags() );
 	}
 
 	/**
-	 * Tests the `get_content_between_balanced_tags` method when no tags are
-	 * present.
+	 * Tests the `get_content_between_balanced_template_tags` method when no tags
+	 * are present.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_no_tags() {
+	public function test_get_content_between_balanced_template_tags_no_tags() {
 		$content = 'Just a string with no tags.';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertNull( $p->get_content_between_balanced_tags() );
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
 	}
 
 	/**
-	 * Tests the `get_content_between_balanced_tags` method with unbalanced tags.
+	 * Tests the `get_content_between_balanced_template_tags` method with unbalanced tags.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_with_unbalanced_tags() {
-		$content = '<div>Missing closing div';
+	public function test_get_content_between_balanced_template_tags_with_unbalanced_tags() {
+		$content = '<template>Missing closing template';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertNull( $p->get_content_between_balanced_tags() );
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
 
-		$content = '<div><div>Missing closing div</div>';
+		$content = '<template><template>Missing closing template</template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertNull( $p->get_content_between_balanced_tags() );
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
 
-		$content = '<div>Missing closing div</span>';
+		$content = '<template>Missing closing template</span>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertNull( $p->get_content_between_balanced_tags() );
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
 
 		// It supports unbalanced tags inside the content.
-		$content = '<div>Missing opening span</span></div>';
+		$content = '<template>Missing opening span</span></template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$this->assertEquals( 'Missing opening span</span>', $p->get_content_between_balanced_tags() );
+		$this->assertEquals( 'Missing opening span</span>', $p->get_content_between_balanced_template_tags() );
 	}
 
 	/**
-	 * Tests the `get_content_between_balanced_tags` method when called on a
-	 * closing tag.
+	 * Tests the `get_content_between_balanced_template_tags` method when called
+	 * on a closer tag.
 	 *
-	 * @covers ::get_content_between_balanced_tags
+	 * @covers ::get_content_between_balanced_template_tags
 	 */
-	public function test_get_content_between_balanced_tags_on_closing_tag() {
-		$content = '<div>Text</div>';
+	public function test_get_content_between_balanced_template_tags_on_closing_tag() {
+		$content = '<template>Text</template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag( array( 'tag_closers' => 'visit' ) );
 		$p->next_tag( array( 'tag_closers' => 'visit' ) );
-		$this->assertNull( $p->get_content_between_balanced_tags() );
+		$this->assertNull( $p->get_content_between_balanced_template_tags() );
+	}
+
+	/**
+	 * Tests the `get_content_between_balanced_template_tags` method positions the
+	 * cursor on the closer tag.
+	 *
+	 * @covers ::get_content_between_balanced_template_tags
+	 */
+	public function test_get_content_between_balanced_template_tags_positions_cursor_on_closer_tag() {
+		$content = '<template>Text</template><div>More text</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$p->get_content_between_balanced_template_tags();
+		$this->assertEquals( 'TEMPLATE', $p->get_tag() );
+		$this->assertTrue( $p->is_tag_closer() );
+		$p->next_tag();
+		$this->assertEquals( 'DIV', $p->get_tag() );
 	}
 
 	/**
@@ -301,21 +326,21 @@ public function test_set_content_between_balanced_tags_with_unbalanced_tags() {
 		$p->next_tag();
 		$result = $p->set_content_between_balanced_tags( $new_content );
 		$this->assertFalse( $result );
-		$this->assertEquals( '<div>Missing closing div', $p );
+		$this->assertEquals( $content, $p );
 
 		$content = '<div><div>Missing closing div</div>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
 		$result = $p->set_content_between_balanced_tags( $new_content );
 		$this->assertFalse( $result );
-		$this->assertEquals( '<div><div>Missing closing div</div>', $p );
+		$this->assertEquals( $content, $p );
 
 		$content = '<div>Missing closing div</span>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
 		$result = $p->set_content_between_balanced_tags( $new_content );
 		$this->assertFalse( $result );
-		$this->assertEquals( '<div>Missing closing div</span>', $p );
+		$this->assertEquals( $content, $p );
 
 		// It supports unbalanced tags inside the content.
 		$content = '<div>Missing opening span</span></div>';
@@ -366,4 +391,313 @@ public function test_is_void_element() {
 		$p->next_tag();
 		$this->assertFalse( $p->is_void() );
 	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method with a simple
+	 * text.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_simple_text() {
+		$content_1 = '<template>Text</template>';
+		$content_2 = 'New text';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$this->assertFalse( $p->next_tag() ); // There are no more tags.
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method with simple
+	 * tags.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_simple_tags() {
+		$content_1 = '<template>Text</template>';
+		$content_2 = '<template class="content-2">New text</template>';
+		$content_3 = '<template class="content-3">More new text</template>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_3 );
+		$this->assertTrue( $result );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertEquals( $content_1 . $content_2 . $content_3, $p );
+		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method in the middle
+	 * of two tags.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_in_the_middle_of_tags() {
+		$content_1 = '<template>Text</template>';
+		$content_2 = 'New text';
+		$content_3 = '<template class="content-3">More new text</template>';
+		$content_4 = '<template class="content-4">Even more new text</template>';
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 . $content_3 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2 . $content_3, $p );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 . $content_3 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_4 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_4 . $content_3, $p );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertEquals( 'content-4', $p->get_attribute( 'class' ) );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method doesn't modify
+	 * the content when called on an opener tag.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_on_opener_tag() {
+		$content = '<template>Text</template>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( 'New text' );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method on multiple
+	 * calls to the same tag.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_multiple_calls_in_same_tag() {
+		$content_1 = '<template class="content-1">Text</template>';
+		$content_2 = '<template class="content-2">New text</template>';
+		$content_3 = '<template class="content-3">More new text</template>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->set_bookmark( 'first template' );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
+		// Rewinds to the first template.
+		$p->seek( 'first template' );
+		$p->release_bookmark( 'first template' );
+		$this->assertEquals( 'content-1', $p->get_attribute( 'class' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_3 );
+		$this->assertEquals( $content_1 . $content_3 . $content_2, $p );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method on
+	 * set_attribute calls.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_with_set_attribute() {
+		$content_1 = '<template>Text</template>';
+		$content_2 = '<template>New text</template>';
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->set_attribute( 'class', 'test' );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( '<template class="test">Text</template>' . $content_2, $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method where the
+	 * existing content includes tags.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_with_existing_tags() {
+		$content_1 = '<template><span>Text</span></template>';
+		$content_2 = '<template class="content-2-template-1"><template class="content-2-template-2">New text</template></template>';
+		$content_3 = '<template><span>More new text</span></template>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$p->next_tag(
+			array(
+				'tag_name'    => 'template',
+				'tag_closers' => 'visit',
+			)
+		);
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$p->next_tag();
+		$this->assertEquals( 'content-2-template-1', $p->get_attribute( 'class' ) );
+		$p->next_tag();
+		$this->assertEquals( 'content-2-template-2', $p->get_attribute( 'class' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_3 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . '<template class="content-2-template-1"><template class="content-2-template-2">New text</template>' . $content_3 . '</template>', $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method fails with an
+	 * empty string.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_empty() {
+		$content = '<template class="content">Text</template>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( '' );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+		$this->assertEquals( 'TEMPLATE', $p->get_tag() ); // It didn't move.
+		$this->assertTrue( $p->is_tag_closer() ); // It didn't move.
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method on a
+	 * non-existent tag.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_non_existent_tag() {
+		$content_1 = 'Just a string with no tags.';
+		$content_2 = '<div>New text</div>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content_1, $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_template_tag_closer` method on non-template
+	 * tags.
+	 *
+	 * @covers ::append_content_after_template_tag_closer
+	 */
+	public function test_append_content_after_template_tag_closer_non_template_tags() {
+		$content_1 = '<div>Text</div>';
+		$content_2 = '<div>New text</div>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content_1, $p );
+	}
+
+	/**
+	 * Tests that the `next_balanced_tag_closer_tag` method finds a closing tag
+	 * for a standard tag.
+	 *
+	 * @covers ::next_balanced_tag_closer_tag
+	 */
+	public function test_next_balanced_tag_closer_tag_standard_tags() {
+		$content = '<div>Text</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertTrue( $p->next_balanced_tag_closer_tag() );
+		$this->assertEquals( 'DIV', $p->get_tag() );
+		$this->assertTrue( $p->is_tag_closer() );
+	}
+
+	/**
+	 * Tests that the `next_balanced_tag_closer_tag` method returns false for a
+	 * self-closing tag.
+	 *
+	 * @covers ::next_balanced_tag_closer_tag
+	 */
+	public function test_next_balanced_tag_closer_tag_void_tag() {
+		$content = '<img src="image.jpg" />';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
+
+		$content = '<img src="image.jpg" /><div>Text</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
+	}
+
+	/**
+	 * Tests that the `next_balanced_tag_closer_tag` method correctly handles
+	 * nested tags.
+	 *
+	 * @covers ::next_balanced_tag_closer_tag
+	 */
+	public function test_next_balanced_tag_closer_tag_nested_tags() {
+		$content = '<div><span>Nested content</span></div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertTrue( $p->next_balanced_tag_closer_tag() );
+		$this->assertEquals( 'DIV', $p->get_tag() );
+		$this->assertTrue( $p->is_tag_closer() );
+
+		$content = '<div><div>Nested content</div></div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertTrue( $p->next_balanced_tag_closer_tag() );
+		$this->assertEquals( 'DIV', $p->get_tag() );
+		$this->assertTrue( $p->is_tag_closer() );
+		$this->assertFalse( $p->next_tag() ); // No more content.
+	}
+
+	/**
+	 * Tests that the `next_balanced_tag_closer_tag` method returns false when no
+	 * matching closing tag is found.
+	 *
+	 * @covers ::next_balanced_tag_closer_tag
+	 */
+	public function test_next_balanced_tag_closer_tag_no_matching_closing_tag() {
+		$content = '<div>No closing tag here';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+
+		$content = '<div><div>No closing tag here</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
+	}
+
+	/**
+	 * Test that the `next_balanced_tag_closer_tag` method returns false when
+	 * returned on a closing tag.
+	 *
+	 * @covers ::next_balanced_tag_closer_tag
+	 */
+	public function test_next_balanced_tag_closer_tag_on_closing_tag() {
+		$content = '<div>Closing tag after this</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		// Visit opening tag first and then closing tag.
+		$p->next_tag();
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
+	}
 }
diff --git a/phpunit/interactivity-api/class-wp-interactivity-api-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-test.php
index 719f9592563c3..ae7a50f7ce149 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-test.php
@@ -567,4 +567,26 @@ public function test_evaluate_nested_value() {
 		$result = $this->evaluate( 'otherPlugin::context.nested.key' );
 		$this->assertEquals( 'otherPlugin-context-nested', $result );
 	}
+
+	/**
+	 * Tests the `kebab_to_camel_case` method.
+	 *
+	 * @covers ::kebab_to_camel_case
+	 */
+	public function test_kebab_to_camel_case() {
+		$method = new ReflectionMethod( $this->interactivity, 'kebab_to_camel_case' );
+		$method->setAccessible( true );
+
+		$this->assertSame( '', $method->invoke( $this->interactivity, '' ) );
+		$this->assertSame( 'item', $method->invoke( $this->interactivity, 'item' ) );
+		$this->assertSame( 'myItem', $method->invoke( $this->interactivity, 'my-item' ) );
+		$this->assertSame( 'my_item', $method->invoke( $this->interactivity, 'my_item' ) );
+		$this->assertSame( 'myItem', $method->invoke( $this->interactivity, 'My-iTem' ) );
+		$this->assertSame( 'myItemWithMultipleHyphens', $method->invoke( $this->interactivity, 'my-item-with-multiple-hyphens' ) );
+		$this->assertSame( 'myItemWith-DoubleHyphens', $method->invoke( $this->interactivity, 'my-item-with--double-hyphens' ) );
+		$this->assertSame( 'myItemWith_underScore', $method->invoke( $this->interactivity, 'my-item-with_under-score' ) );
+		$this->assertSame( 'myItem', $method->invoke( $this->interactivity, '-my-item' ) );
+		$this->assertSame( 'myItem', $method->invoke( $this->interactivity, 'my-item-' ) );
+		$this->assertSame( 'myItem', $method->invoke( $this->interactivity, '-my-item-' ) );
+	}
 }
diff --git a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
new file mode 100644
index 0000000000000..86cb78aa6c2d0
--- /dev/null
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -0,0 +1,636 @@
+<?php
+/**
+ * Unit tests covering the data_wp_each_processor functionality of the
+ * WP_Interactivity_API class.
+ *
+ * @package WordPress
+ * @subpackage Interactivity API
+ *
+ * @group interactivity-api
+ */
+class Tests_WP_Interactivity_API_WP_Each extends WP_UnitTestCase {
+	/**
+	 * Instance of WP_Interactivity_API.
+	 *
+	 * @var WP_Interactivity_API
+	 */
+	protected $interactivity;
+
+	/**
+	 * Set up.
+	 */
+	public function set_up() {
+		parent::set_up();
+		$this->interactivity = new WP_Interactivity_API();
+		$this->interactivity->state( 'myPlugin', array( 'list' => array( 1, 2 ) ) );
+		$this->interactivity->state( 'myPlugin', array( 'after' => 'after-wp-each' ) );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't do anything if it's not on
+	 * a template tag.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_doesnt_do_anything_on_non_template_tags() {
+		$original = '
+			<div data-wp-each="myPlugin::state.list">
+				<span data-wp-text="myPlugin::context.item"></span>
+			</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $original, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't do anything if the array
+	 * is associative instead of indexed.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_doesnt_do_anything_on_associative_arrays() {
+		$this->interactivity->state(
+			'myPlugin',
+			array(
+				'assoc' => array(
+					'one' => 1,
+					'two' => 2,
+				),
+			)
+		);
+		$original = '
+			<template data-wp-each="myPlugin::state.assoc">
+				<span data-wp-text="myPlugin::context.item"></span>
+			</template>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $original, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with simple tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_simple_tags() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't do anything if the array is
+	 * empty.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_empty_array() {
+		$this->interactivity->state( 'myPlugin', array( 'empty' => array() ) );
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.empty">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.empty">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive merges the item with the previous
+	 * context correctly.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_merges_context_correctly() {
+		$original = '' .
+			'<div data-wp-context=\'myPlugin::{ "item": "New text", "id": "some-id", "after": "after-wp-each" }\'>' .
+				'<template data-wp-each="myPlugin::state.list">' .
+					'<span data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<div data-wp-bind--id="myPlugin::context.after" data-wp-text="myPlugin::context.item">Text</div>' .
+			'</div>';
+		$expected = '' .
+			'<div data-wp-context=\'myPlugin::{ "item": "New text", "id": "some-id", "after": "after-wp-each" }\'>' .
+				'<template data-wp-each="myPlugin::state.list">' .
+					'<span data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<span data-wp-each-child id="some-id" data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item">1</span>' .
+				'<span data-wp-each-child id="some-id" data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item">2</span>' .
+				'<div id="after-wp-each" data-wp-bind--id="myPlugin::context.after" data-wp-text="myPlugin::context.item">New text</div>' .
+			'</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with arrays from the context.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_gets_arrays_from_context() {
+		$original = '' .
+			'<div data-wp-context=\'myPlugin::{ "list": [ 1, 2 ] }\'>' .
+				'<template data-wp-each="myPlugin::context.list">' .
+					'<span data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<div data-wp-bind--id="myPlugin::state.after">Text</div>' .
+			'</div>';
+		$expected = '' .
+			'<div data-wp-context=\'myPlugin::{ "list": [ 1, 2 ] }\'>' .
+				'<template data-wp-each="myPlugin::context.list">' .
+					'<span data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+				'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+				'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>' .
+			'</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with the default namespace.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_default_namespace() {
+		$original = '' .
+			'<div data-wp-interactive=\'{ "namespace": "myPlugin" }\'>' .
+				'<template data-wp-each="state.list">' .
+					'<span data-wp-text="context.item"></span>' .
+				'</template>' .
+				'<div data-wp-bind--id="state.after">Text</div>' .
+			'</div>';
+		$expected = '' .
+			'<div data-wp-interactive=\'{ "namespace": "myPlugin" }\'>' .
+				'<template data-wp-each="state.list">' .
+					'<span data-wp-text="context.item"></span>' .
+				'</template>' .
+				'<span data-wp-each-child data-wp-text="context.item">1</span>' .
+				'<span data-wp-each-child data-wp-text="context.item">2</span>' .
+				'<div id="after-wp-each" data-wp-bind--id="state.after">Text</div>' .
+			'</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with multiple tags per item.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_multiple_tags_per_item() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with void tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_void_tags() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<img data-wp-bind--id="myPlugin::context.item">' .
+				'<img data-wp-bind--id="myPlugin::context.item">' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<img data-wp-bind--id="myPlugin::context.item">' .
+				'<img data-wp-bind--id="myPlugin::context.item">' .
+			'</template>' .
+			'<img data-wp-each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<img data-wp-each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<img data-wp-each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+			'<img data-wp-each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with combinations of void and
+	 * non-void tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_void_and_non_void_tags() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<img data-wp-bind--id="myPlugin::context.item">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<img data-wp-bind--id="myPlugin::context.item">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<img data-wp-each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<img data-wp-each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with nested tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_nested_tags() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<div data-wp-bind--id="myPlugin::context.item">' .
+					'id: <span data-wp-text="myPlugin::context.item"></span>' .
+				'</div>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<div data-wp-bind--id="myPlugin::context.item">' .
+					'id: <span data-wp-text="myPlugin::context.item"></span>' .
+				'</div>' .
+			'</template>' .
+			'<div data-wp-each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+				'id: <span data-wp-text="myPlugin::context.item">1</span>' .
+			'</div>' .
+			'<div data-wp-each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+				'id: <span data-wp-text="myPlugin::context.item">2</span>' .
+			'</div>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with nested item properties.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_nested_item_properties() {
+		$this->interactivity->state(
+			'myPlugin',
+			array(
+				'list' => array(
+					array(
+						'id'   => 1,
+						'name' => 'one',
+					),
+					array(
+						'id'   => 2,
+						'name' => 'two',
+					),
+				),
+			)
+		);
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item.id"></span>' .
+				'<span data-wp-text="myPlugin::context.item.name"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item.id"></span>' .
+				'<span data-wp-text="myPlugin::context.item.name"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item.id">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item.name">one</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item.id">2</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item.name">two</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with different item names.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_different_item_names() {
+		$original = '' .
+			'<template data-wp-each--myitem="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.myitem"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each--myitem="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.myitem"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.myitem">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.myitem">2</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive transforms kebab-case into
+	 * camelCase.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_different_item_names_transforms_camelcase() {
+		$original = '' .
+			'<template data-wp-each--my-item="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.myItem"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each--my-item="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.myItem"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.myItem">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.myItem">2</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't work with top-level texts.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_doesnt_work_with_top_level_text() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'id: <span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $original, $new );
+
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>!' .
+			'</template>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $original, $new );
+
+		// But it should work fine with spaces and linebreaks.
+		$original = '
+			<template data-wp-each="myPlugin::state.list">
+				<span class="test" data-wp-bind--id="myPlugin::context.item"></span>
+			</template>';
+		$new      = $this->interactivity->process_directives( $original );
+		$p        = new WP_HTML_Tag_Processor( $new );
+		$p->next_tag( array( 'class_name' => 'test' ) );
+		$p->next_tag( array( 'class_name' => 'test' ) );
+		$this->assertEquals( '1', $p->get_attribute( 'id' ) );
+		$p->next_tag( array( 'class_name' => 'test' ) );
+		$this->assertEquals( '2', $p->get_attribute( 'id' ) );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with nested template tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_nested_template_tags() {
+		$this->interactivity->state( 'myPlugin', array( 'list2' => array( 3, 4 ) ) );
+		$original = '' .
+			'<template data-wp-each--item1="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item1"></span>' .
+				'<template data-wp-each--item2="myPlugin::state.list2">' .
+					'<span data-wp-text="myPlugin::context.item2"></span>' .
+				'</template>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each--item1="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item1"></span>' .
+				'<template data-wp-each--item2="myPlugin::state.list2">' .
+					'<span data-wp-text="myPlugin::context.item2"></span>' .
+				'</template>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item1">1</span>' .
+			'<template data-wp-each-child data-wp-each--item2="myPlugin::state.list2">' .
+				'<span data-wp-text="myPlugin::context.item2"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item1">2</span>' .
+			'<template data-wp-each-child data-wp-each--item2="myPlugin::state.list2">' .
+				'<span data-wp-text="myPlugin::context.item2"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with nested template tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_nested_template_tags_XXXX() {
+		$this->interactivity->state( 'myPlugin', array( 'list2' => array( 3, 4 ) ) );
+		$original = '' .
+			'<template data-wp-each--item1="myPlugin::state.list">' .
+				'<template data-wp-each--item2="myPlugin::state.list2">' .
+					'<span data-wp-text="myPlugin::context.item1"></span>' .
+					'<span data-wp-text="myPlugin::context.item2"></span>' .
+				'</template>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each--item1="myPlugin::state.list">' .
+				'<template data-wp-each--item2="myPlugin::state.list2">' .
+					'<span data-wp-text="myPlugin::context.item1"></span>' .
+					'<span data-wp-text="myPlugin::context.item2"></span>' .
+				'</template>' .
+			'</template>' .
+			'<template data-wp-each-child data-wp-each--item2="myPlugin::state.list2">' .
+				'<span data-wp-text="myPlugin::context.item1"></span>' .
+				'<span data-wp-text="myPlugin::context.item2"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item1">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item1">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<template data-wp-each-child data-wp-each--item2="myPlugin::state.list2">' .
+				'<span data-wp-text="myPlugin::context.item1"></span>' .
+				'<span data-wp-text="myPlugin::context.item2"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item1">2</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item1">2</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with nestded template tags
+	 * that use a previous item as a list.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_nested_template_tags_using_previous_item_as_list() {
+		$this->interactivity->state( 'myPlugin', array( 'list2' => array( array( 1, 2 ), array( 3, 4 ) ) ) );
+		$original = '' .
+			'<template data-wp-each--list="myPlugin::state.list2">' .
+				'<template data-wp-each--number="myPlugin::context.list">' .
+					'<span data-wp-text="myPlugin::context.number"></span>' .
+				'</template>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each--list="myPlugin::state.list2">' .
+				'<template data-wp-each--number="myPlugin::context.list">' .
+					'<span data-wp-text="myPlugin::context.number"></span>' .
+				'</template>' .
+			'</template>' .
+			'<template data-wp-each-child data-wp-each--number="myPlugin::context.list">' .
+				'<span data-wp-text="myPlugin::context.number"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.number">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.number">2</span>' .
+			'<template data-wp-each-child data-wp-each--number="myPlugin::context.list">' .
+				'<span data-wp-text="myPlugin::context.number"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.number">3</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.number">4</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't process unbalanced tags.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_unbalanced_tags() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item">' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $original, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't process unbalanced tags in
+	 * nested templates.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_unbalanced_tags_in_nested_template_tags() {
+		$this->interactivity->state( 'myPlugin', array( 'list2' => array( 3, 4 ) ) );
+		$original = '' .
+			'<template data-wp-each--item1="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item1"></span>' .
+				'<template data-wp-each--item2="myPlugin::state.list2">' .
+					'<span data-wp-text="myPlugin::context.item2">' .
+				'</template>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $original, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't process if it doesn't get
+	 * an array.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_doesnt_process_if_not_array() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+
+		$this->interactivity->state( 'myPlugin', array( 'list' => null ) );
+		$new = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+
+		$this->interactivity->state( 'myPlugin', array( 'list' => 'Text' ) );
+		$new = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+
+		$this->interactivity->state( 'myPlugin', array( 'list' => 100 ) );
+		$new = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+
+		$this->interactivity->state( 'myPlugin', array( 'list' => false ) );
+		$new = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+
+		$this->interactivity->state( 'myPlugin', array( 'list' => true ) );
+		$new = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive doesn't process anything if it
+	 * detects manual server-side processing.
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_doesnt_process_with_manual_server_directive_processing() {
+		$original = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<div data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$expected = '' .
+			'<template data-wp-each="myPlugin::state.list">' .
+				'<span data-wp-text="myPlugin::context.item"></span>' .
+			'</template>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertEquals( $expected, $new );
+	}
+}
diff --git a/phpunit/interactivity-api/class-wp-interactivity-api-wp-text-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-wp-text-test.php
index f5b570a197a29..17e71e7869dad 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-text-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-text-test.php
@@ -27,6 +27,8 @@ public function set_up() {
 
 	/**
 	 * Tests that the `data-wp-text` directive sets inner text content.
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_sets_inner_content() {
 		$html     = '<div data-wp-text="myPlugin::state.text">Text</div>';
@@ -36,6 +38,8 @@ public function test_wp_text_sets_inner_content() {
 
 	/**
 	 * Tests that the `data-wp-text` directive works with numerical values.
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_sets_inner_content_numbers() {
 		$this->interactivity->state( 'myPlugin', array( 'number' => 100 ) );
@@ -47,6 +51,8 @@ public function test_wp_text_sets_inner_content_numbers() {
 	/**
 	 * Tests that the `data-wp-text` directive removes inner text content when the
 	 * state is not a string or number.
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_removes_inner_content_on_types_that_are_not_strings_or_numbers() {
 		$this->interactivity->state(
@@ -83,6 +89,8 @@ public function test_wp_text_removes_inner_content_on_types_that_are_not_strings
 	/**
 	 * Tests that the `data-wp-text` directive overwrites entire inner content,
 	 * including nested tags.
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_sets_inner_content_with_nested_tags() {
 		$html     = '<div data-wp-text="myPlugin::state.text"><div><div>Text</div><div>Another text</div></div></div>';
@@ -93,6 +101,8 @@ public function test_wp_text_sets_inner_content_with_nested_tags() {
 	/**
 	 * Tests that the `data-wp-text` directive works even with unbalanced tags
 	 * when they are different tags (div -> unbalanced span).
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_sets_inner_content_even_with_unbalanced_but_different_tags_inside_content() {
 		$html     = '<div data-wp-text="myPlugin::state.text"><span>Text</div>';
@@ -103,6 +113,8 @@ public function test_wp_text_sets_inner_content_even_with_unbalanced_but_differe
 	/**
 	 * Tests that the `data-wp-text` fails to overwrite inner content if there are
 	 * unbalanced when they are the same tags (div -> unbalanced div).
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_fails_with_unbalanced_and_same_tags_inside_content() {
 		$html     = '<div data-wp-text="myPlugin::state.text">Text<div></div>';
@@ -113,6 +125,8 @@ public function test_wp_text_fails_with_unbalanced_and_same_tags_inside_content(
 	/**
 	 * Tests that the `data-wp-text` directive cannot set inner HTML content and
 	 * it will be encoded as text.
+	 *
+	 * @covers ::process_directives
 	 */
 	public function test_wp_text_cant_set_inner_html_in_the_content() {
 		$this->interactivity->state( 'myPlugin', array( 'text' => '<span>Updated</span>' ) );
diff --git a/test/e2e/specs/interactivity/directive-each.spec.ts b/test/e2e/specs/interactivity/directive-each.spec.ts
index 4f024b1f828a9..a9f09191685a3 100644
--- a/test/e2e/specs/interactivity/directive-each.spec.ts
+++ b/test/e2e/specs/interactivity/directive-each.spec.ts
@@ -36,6 +36,15 @@ test.describe( 'data-wp-each', () => {
 		] );
 	} );
 
+	test( 'should convert from kebab-case to camelCase the specified item name in the context', async ( {
+		page,
+	} ) => {
+		const elements = page
+			.getByTestId( 'letters-kebab-case' )
+			.getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ 'A', 'B', 'C' ] );
+	} );
+
 	test.describe( 'without `wp-each-key`', () => {
 		test.beforeEach( async ( { page } ) => {
 			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );