From 0f8008e22111fc78f22b7e38464bb5e05ffa18b6 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 29 Jan 2024 14:05:20 +0100
Subject: [PATCH 01/23] Add
 append_content_after_closing_tag_on_balanced_or_void_tags method

---
 ...interactivity-api-directives-processor.php |  46 +++
 ...activity-api-directives-processor-test.php | 267 +++++++++++++++++-
 2 files changed, 310 insertions(+), 3 deletions(-)

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 b437bcefa67568..f687c02f1c1362 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
@@ -67,6 +67,52 @@ public function set_content_between_balanced_tags( string $new_content ): bool {
 			return true;
 		}
 
+		/**
+		 * Appends content after the closing tag of a balanced tag or after a void
+		 * tag.
+		 *
+		 * This method positions the processor in the opening tag of the appended
+		 * content, if it exists.
+		 *
+		 * @access private
+		 *
+		 * @param string $new_content The string to append after the closing tag.
+		 * @return bool Whether the content was successfully appended.
+		 */
+		public function append_content_after_closing_tag_on_balanced_or_void_tags( string $new_content ): bool {
+			if ( empty( $new_content ) ) {
+				return false;
+			}
+
+			$this->get_updated_html();
+
+			if ( $this->is_void() ) {
+				$bookmark = 'start_of_void_tag';
+				$this->set_bookmark( $bookmark );
+				$end = $this->bookmarks[ $bookmark ]->start + $this->bookmarks[ $bookmark ]->length + 1;
+				$this->release_bookmark( $bookmark );
+			} else {
+				$bookmarks = $this->get_balanced_tag_bookmarks();
+				if ( ! $bookmarks ) {
+					return false;
+				}
+				list( $start_name, $end_name ) = $bookmarks;
+
+				$end = $this->bookmarks[ $end_name ]->start + $this->bookmarks[ $end_name ]->length + 1;
+
+				$this->seek( $end_name );
+				$this->release_bookmark( $start_name );
+				$this->release_bookmark( $end_name );
+			}
+
+			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5( $end, 0, $new_content );
+
+			// Move the processor to the opening tag of the appended content.
+			$this->next_tag();
+
+			return true;
+		}
+
 		/**
 		 * Returns a pair of bookmarks for the current opening tag and the matching
 		 * closing tag.
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 aa1ee999fd58f1..f1df14b94276af 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
@@ -301,21 +301,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 +366,265 @@ public function test_is_void_element() {
 		$p->next_tag();
 		$this->assertFalse( $p->is_void() );
 	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method with a simple text.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_simple_text() {
+		$content_1 = '<div>Text</div>';
+		$content_2 = 'New text';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$this->assertNull( $p->get_tag() ); // There are no more tags.
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method with simple tags.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_simple_tags() {
+		$content_1 = '<div>Text</div>';
+		$content_2 = '<div class="content-2">New text</div>';
+		$content_3 = '<div class="content-3">More new text</div>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		// The processor in now positioned in the opening tag of the appended tag.
+		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_3 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2 . $content_3, $p );
+		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method in the middle of two tags.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_in_the_middle_of_tags() {
+		$content_1 = '<div>Text</div>';
+		$content_2 = 'New text';
+		$content_3 = '<div class="content-3">More new text</div>';
+		$content_4 = '<div class="content-4">Even more new text</div>';
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 . $content_3 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2 . $content_3, $p );
+		// When appending text without tags, it jumps to the next tag in the content.
+		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 . $content_3 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_4 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_4 . $content_3, $p );
+		$this->assertEquals( 'content-4', $p->get_attribute( 'class' ) );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method doesn't modify the content when called on a closing tag.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_on_closing_tag() {
+		$content = '<div>Text</div>';
+		$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_closing_tag_on_balanced_or_void_tags( 'New text' );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method on multiple calls to the same tag.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_multiple_calls_in_same_tag() {
+		$content_1 = '<div class="content-1">Text</div>';
+		$content_2 = '<div class="content-2">New text</div>';
+		$content_3 = '<div class="content-3">More new text</div>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$p->set_bookmark( 'first div' );
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
+		$p->seek( 'first div' ); // Rewind to the first div.
+		$this->assertEquals( 'content-1', $p->get_attribute( 'class' ) );
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_3 );
+		$this->assertEquals( $content_1 . $content_3 . $content_2, $p );
+		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method on combinations with set_attribute calls.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_with_set_attribute() {
+		$content_1 = '<div>Text</div>';
+		$content_2 = '<div>New text</div>';
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$p->set_attribute( 'class', 'test' );
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( '<div class="test">Text</div>' . $content_2, $p );
+
+		$p = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$p->set_attribute( 'class', 'test' );
+		$this->assertEquals( $content_1 . '<div class="test">New text</div>', $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method where the existing content includes tags.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_with_existing_tags() {
+		$content_1 = '<div><span>Text</span></div>';
+		$content_2 = '<div class="content-2-div"><span class="content-2-span">New text</span></div>';
+		$content_3 = '<div><span>More new text</span></div>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$this->assertEquals( 'content-2-div', $p->get_attribute( 'class' ) );
+		$p->next_tag();
+		$this->assertEquals( 'content-2-span', $p->get_attribute( 'class' ) );
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_3 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . '<div class="content-2-div"><span class="content-2-span">New text</span>' . $content_3 . '</div>', $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method fails with an empty string.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_empty() {
+		$content = '<div class="content">Text</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( '' );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+		$this->assertEquals( 'content', $p->get_attribute( 'class' ) ); // It didn't move.
+
+		$content = '<div class="content"><div>Text</div></div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( '' );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+		$this->assertEquals( 'content', $p->get_attribute( 'class' ) ); // It didn't move.
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method on self-closing tags.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_self_closing_tag() {
+		$content_1 = '<img src="example.jpg">';
+		$content_2 = '<div class="content-2">Text</div>';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) ); // It didn't move.
+
+		$content_1 = '<img src="example.jpg" />';
+		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content_1 . $content_2, $p );
+		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) ); // It didn't move.
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method on a non-existent tag.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_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_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content_1, $p );
+	}
+
+	/**
+	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * method with unbalanced tags.
+	 *
+	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 */
+	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_with_unbalanced_tags() {
+		$new_content = 'New text';
+
+		$content = '<div>Missing closing div';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+
+		$content = '<div><div>Missing closing div</div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+
+		$content = '<div>Missing closing div</span>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content, $p );
+
+		// It supports unbalanced tags inside the content, as long as it finds a
+		// balanced closing tag.
+		$content = '<div>Missing opening span</span></div>';
+		$p       = new WP_Interactivity_API_Directives_Processor( $content );
+		$p->next_tag();
+		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$this->assertTrue( $result );
+		$this->assertEquals( $content . $new_content, $p );
+	}
 }

From 2c70fb87a8b4e6e02e82860369751ca19f70009a Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 Jan 2024 12:57:32 +0100
Subject: [PATCH 02/23] Make next_balanced_tag_closer_tag public and add tests

---
 ...interactivity-api-directives-processor.php | 10 +--
 ...activity-api-directives-processor-test.php | 89 +++++++++++++++++++
 2 files changed, 94 insertions(+), 5 deletions(-)

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 f687c02f1c1362..b8937f83738a0f 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
@@ -124,7 +124,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;
 			}
@@ -139,13 +139,13 @@ 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.
 		 *
 		 * @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/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php
index f1df14b94276af..8e237b9724ec25 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
@@ -627,4 +627,93 @@ public function test_append_content_after_closing_tag_on_balanced_or_void_tags_w
 		$this->assertTrue( $result );
 		$this->assertEquals( $content . $new_content, $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() );
+		$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() );
+	}
 }

From 093bb36c3f4ae63b81af5f266d77b831d3431c0d Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 Jan 2024 16:14:09 +0100
Subject: [PATCH 03/23] Add compat for array_is_list added in WP 6.5

---
 lib/compat/wordpress-6.5/compat.php | 38 +++++++++++++++++++++++++++++
 lib/load.php                        |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 lib/compat/wordpress-6.5/compat.php

diff --git a/lib/compat/wordpress-6.5/compat.php b/lib/compat/wordpress-6.5/compat.php
new file mode 100644
index 00000000000000..78447927125894
--- /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/load.php b/lib/load.php
index 4b2b4d5d8b0db8..ab12b5b91c3e9a 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';

From e378aad9fe9571acf666740261dd0ee8b7c59650 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 Jan 2024 19:09:36 +0100
Subject: [PATCH 04/23] Add missing covers in wp-text tests

---
 .../class-wp-interactivity-api-wp-text-test.php    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

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 f5b570a197a298..17e71e7869dadf 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>' ) );

From 767b9aab602850dd41f778c3248be7f6b688ab4b Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 Jan 2024 19:10:06 +0100
Subject: [PATCH 05/23] Minor fixes to the Interactivity API directive
 processor

---
 .../class-wp-interactivity-api-directives-processor.php      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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 b8937f83738a0f..5b6a86dfec70f4 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
@@ -71,7 +71,7 @@ public function set_content_between_balanced_tags( string $new_content ): bool {
 		 * Appends content after the closing tag of a balanced tag or after a void
 		 * tag.
 		 *
-		 * This method positions the processor in the opening tag of the appended
+		 * This method positions the processor in the last tag of the appended
 		 * content, if it exists.
 		 *
 		 * @access private
@@ -100,7 +100,6 @@ public function append_content_after_closing_tag_on_balanced_or_void_tags( strin
 
 				$end = $this->bookmarks[ $end_name ]->start + $this->bookmarks[ $end_name ]->length + 1;
 
-				$this->seek( $end_name );
 				$this->release_bookmark( $start_name );
 				$this->release_bookmark( $end_name );
 			}
@@ -143,6 +142,8 @@ private function get_balanced_tag_bookmarks() {
 		 * 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.
 		 */
 		public function next_balanced_tag_closer_tag(): bool {

From 106eee6e134f91f4b8d7b18a3c766e2f722e4205 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 Jan 2024 19:14:24 +0100
Subject: [PATCH 06/23] Create internal method process_directives_args to call
 it from wp-each

---
 .../class-wp-interactivity-api.php            | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

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 ad9e5d7c439533..60ad0d7e1731a8 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
@@ -178,11 +178,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 );
@@ -266,11 +285,11 @@ public function process_directives( string $html ): string {
 			}
 
 			/*
-			 * 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();
 		}
 
 		/**

From 58abeb0561bb15d631e6072eb678081606395bf0 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 Jan 2024 20:07:48 +0100
Subject: [PATCH 07/23] Add kebab-case to camelCase method

---
 .../class-wp-interactivity-api.php            | 17 ++++++++++++++
 .../class-wp-interactivity-api-test.php       | 22 +++++++++++++++++++
 2 files changed, 39 insertions(+)

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 60ad0d7e1731a8..bbf9f689aef763 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
@@ -406,6 +406,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.
diff --git a/phpunit/interactivity-api/class-wp-interactivity-api-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-test.php
index 719f9592563c3b..86462cddca4cad 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 kebab_to_camel_case method with typical cases.
+	 *
+	 * @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-' ) );
+	}
 }

From 4a62bb680fc1e241e4657a7e4ccaa2ca99c450a2 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 31 Jan 2024 13:12:18 +0100
Subject: [PATCH 08/23] Add wp-each processor

---
 .../class-wp-interactivity-api.php            | 108 +++-
 ...lass-wp-interactivity-api-wp-each-test.php | 516 ++++++++++++++++++
 2 files changed, 622 insertions(+), 2 deletions(-)
 create mode 100644 phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php

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 bbf9f689aef763..20dfb39f14e361 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
@@ -24,6 +24,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',
 		);
 
 		/**
@@ -279,7 +285,7 @@ private function process_directives_args( string $html, array &$context_stack, a
 						: 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 )
 					);
 				}
 			}
@@ -709,6 +715,104 @@ private function data_wp_text_processor( WP_Interactivity_API_Directives_Process
 				}
 			}
 		}
-	}
 
+		/**
+		 * 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 ) );
+				$inner_content    = $p->get_content_between_balanced_tags();
+
+				/*
+				 * It doesn't process associative arrays because those will be deserialized
+				 * as objects in JS.
+				 *
+				 * It doesn't process templates that contain top-level texts because
+				 * those texts can't be identified to be removed in the client.
+				 * Note: there might be top-level texts in between balanced tags, but
+				 * those cannot be identified at this moment.
+				 */
+				if ( ! array_is_list( $result ) || ! str_starts_with( $inner_content, '<' ) || ! str_ends_with( $inner_content, '>' ) ) {
+					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 );
+
+				$processed_content        = '';
+				$number_of_top_level_tags = 0;
+				// Processes the inner content for each item of the array.
+				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.
+						return array_pop( $context_stack );
+					}
+
+					// Adds the `data-wp-each-child` to each top-level tag.
+					$i = new WP_Interactivity_API_Directives_Processor( $processed_item );
+					while ( $i->next_tag() ) {
+						$number_of_top_level_tags += 1;
+						$i->set_attribute( 'data-wp-each-child', true );
+						/*
+						 * Moves to the tag closer of the current top-level tag so the next
+						 * call to `next_tag()` moves to the opener tag of the next
+						 * top-level tag.
+						 */
+						$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_closing_tag_on_balanced_or_void_tags( $processed_content );
+
+				// Moves the cursor to the end of the processed items.
+				do {
+					$p->next_balanced_tag_closer_tag();
+					if ( $number_of_top_level_tags > 1 ) {
+						$number_of_top_level_tags -= 1;
+					} else {
+						break;
+					}
+				} while ( $p->next_tag() );
+
+				// Pops the last tag because it skipped the closing tag of the template tag.
+				array_pop( $tag_stack );
+			}
+		}
+	}
 }
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 00000000000000..7dd623eba5c93e
--- /dev/null
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -0,0 +1,516 @@
+<?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 );
+	}
+
+	/**
+	 * Tests that the `data-wp-each` directive works with nestded 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 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 );
+	}
+}

From 29f10fa39ae67d3f2c3307dfc56198c141f400e9 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 31 Jan 2024 15:42:52 +0100
Subject: [PATCH 09/23] Make sure it doesn't process non-array values

---
 .../class-wp-interactivity-api.php            | 20 +++++++---
 ...lass-wp-interactivity-api-wp-each-test.php | 39 +++++++++++++++++++
 2 files changed, 53 insertions(+), 6 deletions(-)

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 20dfb39f14e361..1687614ed663bc 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
@@ -740,15 +740,23 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 				$inner_content    = $p->get_content_between_balanced_tags();
 
 				/*
-				 * It doesn't process associative arrays because those will be deserialized
-				 * as objects in JS.
+				 * It doesn't process associative arrays because those will be
+				 * deserialized as objects in JS.
+				 *
+				 * It doesn't process empty or non-array values.
 				 *
 				 * It doesn't process templates that contain top-level texts because
-				 * those texts can't be identified to be removed in the client.
-				 * Note: there might be top-level texts in between balanced tags, but
-				 * those cannot be identified at this moment.
+				 * those texts can't be identified to be removed in the client.  Note:
+				 * there might be top-level texts in between balanced tags, but those
+				 * cannot be identified at this moment.
 				 */
-				if ( ! array_is_list( $result ) || ! str_starts_with( $inner_content, '<' ) || ! str_ends_with( $inner_content, '>' ) ) {
+				if (
+					empty( $result ) ||
+					! is_array( $result ) ||
+					! array_is_list( $result ) ||
+					! str_starts_with( $inner_content, '<' ) ||
+					! str_ends_with( $inner_content, '>' )
+				) {
 					return;
 				}
 
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
index 7dd623eba5c93e..5e6546eaae4506 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -513,4 +513,43 @@ public function test_wp_each_unbalanced_tags_in_nested_template_tags() {
 		$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 );
+	}
 }

From 3b67d479b5e85dc493f6b8d25335ad89f2b54205 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 31 Jan 2024 16:37:00 +0100
Subject: [PATCH 10/23] Trim before checking that starts and ends with tags

---
 .../class-wp-interactivity-api.php                  |  4 ++--
 .../class-wp-interactivity-api-wp-each-test.php     | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

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 1687614ed663bc..c9b9455e453143 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
@@ -754,8 +754,8 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 					empty( $result ) ||
 					! is_array( $result ) ||
 					! array_is_list( $result ) ||
-					! str_starts_with( $inner_content, '<' ) ||
-					! str_ends_with( $inner_content, '>' )
+					! str_starts_with( trim( $inner_content ), '<' ) ||
+					! str_ends_with( trim( $inner_content ), '>' )
 				) {
 					return;
 				}
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
index 5e6546eaae4506..82334262a52228 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -402,6 +402,19 @@ public function test_wp_each_doesnt_work_with_top_level_text() {
 			'</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') );
 	}
 
 	/**

From 72a2f19de85622bfa4274aa5074776855c3b38c7 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 31 Jan 2024 16:40:07 +0100
Subject: [PATCH 11/23] Fix typo and some extra tabs

---
 ...activity-api-directives-processor-test.php | 80 +++++++++----------
 ...lass-wp-interactivity-api-wp-each-test.php |  2 +-
 2 files changed, 41 insertions(+), 41 deletions(-)

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 8e237b9724ec25..ad6fb06741c4ba 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
@@ -635,12 +635,12 @@ public function test_append_content_after_closing_tag_on_balanced_or_void_tags_w
 	 * @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() );
+		$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() );
 	}
 
 	/**
@@ -650,15 +650,15 @@ public function test_next_balanced_tag_closer_tag_standard_tags() {
 	 * @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" />';
+		$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() );
+		$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() );
 	}
 
 	/**
@@ -668,20 +668,20 @@ public function test_next_balanced_tag_closer_tag_void_tag() {
 	 * @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><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.
+		$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.
 	}
 
 	/**
@@ -691,14 +691,14 @@ public function test_next_balanced_tag_closer_tag_nested_tags() {
 	 * @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>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() );
+		$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() );
 		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
 	}
 
@@ -709,11 +709,11 @@ public function test_next_balanced_tag_closer_tag_no_matching_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() );
+		$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-wp-each-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
index 82334262a52228..c36e42a325853e 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -418,7 +418,7 @@ public function test_wp_each_doesnt_work_with_top_level_text() {
 	}
 
 	/**
-	 * Tests that the `data-wp-each` directive works with nestded template tags.
+	 * Tests that the `data-wp-each` directive works with nested template tags.
 	 *
 	 * @covers ::process_directives
 	 */

From 5f3082c382fd90a4862dd932396c220e2aa292ac Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 31 Jan 2024 16:45:47 +0100
Subject: [PATCH 12/23] Fix PHPCS

---
 ...class-wp-interactivity-api-directives-processor-test.php | 1 -
 .../class-wp-interactivity-api-wp-each-test.php             | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

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 ad6fb06741c4ba..c83eeb6c9bdaaf 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
@@ -699,7 +699,6 @@ public function test_next_balanced_tag_closer_tag_no_matching_closing_tag() {
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
 		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
-		$this->assertFalse( $p->next_balanced_tag_closer_tag() );
 	}
 
 	/**
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
index c36e42a325853e..9eac945a962e1c 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -409,12 +409,12 @@ public function test_wp_each_doesnt_work_with_top_level_text() {
 				<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        = 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') );
+		$this->assertEquals( '1', $p->get_attribute( 'id' ) );
 		$p->next_tag( array( 'class_name' => 'test' ) );
-		$this->assertEquals( '2', $p->get_attribute( 'id') );
+		$this->assertEquals( '2', $p->get_attribute( 'id' ) );
 	}
 
 	/**

From a20240daba4c8c84fe2d984d1c148f1d821db13a Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 31 Jan 2024 19:20:28 +0100
Subject: [PATCH 13/23] Add kebal to camel case conversion in the JS runtime

---
 .../directive-each/render.php                 | 12 +++++++++
 packages/interactivity/src/directives.js      |  4 ++-
 .../src/utils/kebab-to-camelcase.js           | 14 ++++++++++
 .../interactivity/src/utils/test/utils.js     | 26 +++++++++++++++++++
 .../class-wp-interactivity-api-test.php       |  2 +-
 .../interactivity/directive-each.spec.ts      |  9 +++++++
 6 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 packages/interactivity/src/utils/kebab-to-camelcase.js
 create mode 100644 packages/interactivity/src/utils/test/utils.js

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 3d018bca46d060..03a2b89cc1233d 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 38849f53d7f953..f0df1dae4b3c93 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/utils/kebab-to-camelcase.js b/packages/interactivity/src/utils/kebab-to-camelcase.js
new file mode 100644
index 00000000000000..a2c0d3403db3c0
--- /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 00000000000000..2416b03e342ee9
--- /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/phpunit/interactivity-api/class-wp-interactivity-api-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-test.php
index 86462cddca4cad..ae7a50f7ce149b 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-test.php
@@ -569,7 +569,7 @@ public function test_evaluate_nested_value() {
 	}
 
 	/**
-	 * Tests kebab_to_camel_case method with typical cases.
+	 * Tests the `kebab_to_camel_case` method.
 	 *
 	 * @covers ::kebab_to_camel_case
 	 */
diff --git a/test/e2e/specs/interactivity/directive-each.spec.ts b/test/e2e/specs/interactivity/directive-each.spec.ts
index 4f024b1f828a95..a9f09191685a3b 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' );

From fa33e6ee71f1393c56a1d61a38b5e16b064aa4eb Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 2 Feb 2024 17:14:02 +0100
Subject: [PATCH 14/23] Add extra nested test

---
 ...lass-wp-interactivity-api-wp-each-test.php | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

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
index 9eac945a962e1c..13ff4af1890747 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -456,6 +456,49 @@ public function test_wp_each_nested_template_tags() {
 		$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.

From ed4319e55c05617100f51ea0c2018c2d5c62fc24 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sat, 3 Feb 2024 08:54:19 +0100
Subject: [PATCH 15/23] Restrict appending to template tags

---
 ...interactivity-api-directives-processor.php |  33 ++-
 .../class-wp-interactivity-api.php            |   2 +-
 ...activity-api-directives-processor-test.php | 189 +++++++++---------
 3 files changed, 104 insertions(+), 120 deletions(-)

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 5b6a86dfec70f4..eb42f365acce9f 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
@@ -68,41 +68,34 @@ public function set_content_between_balanced_tags( string $new_content ): bool {
 		}
 
 		/**
-		 * Appends content after the closing tag of a balanced tag or after a void
-		 * tag.
+		 * Appends content after the closing tag of a balanced 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 tag.
+		 * @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_closing_tag_on_balanced_or_void_tags( string $new_content ): bool {
-			if ( empty( $new_content ) ) {
+		public function append_content_after_closing_tag_on_balanced_template_tags( string $new_content ): bool {
+			// Refuse to process if the content is empty or this is not an opener template tag.
+			if ( empty( $new_content ) || 'TEMPLATE' !== $this->get_tag() || $this->is_tag_closer() ) {
 				return false;
 			}
 
 			$this->get_updated_html();
 
-			if ( $this->is_void() ) {
-				$bookmark = 'start_of_void_tag';
-				$this->set_bookmark( $bookmark );
-				$end = $this->bookmarks[ $bookmark ]->start + $this->bookmarks[ $bookmark ]->length + 1;
-				$this->release_bookmark( $bookmark );
-			} else {
-				$bookmarks = $this->get_balanced_tag_bookmarks();
-				if ( ! $bookmarks ) {
-					return false;
-				}
-				list( $start_name, $end_name ) = $bookmarks;
+			$bookmarks = $this->get_balanced_tag_bookmarks();
+			if ( ! $bookmarks ) {
+				return false;
+			}
+			list( $start_name, $end_name ) = $bookmarks;
 
-				$end = $this->bookmarks[ $end_name ]->start + $this->bookmarks[ $end_name ]->length + 1;
+			$end = $this->bookmarks[ $end_name ]->start + $this->bookmarks[ $end_name ]->length + 1;
 
-				$this->release_bookmark( $start_name );
-				$this->release_bookmark( $end_name );
-			}
+			$this->release_bookmark( $start_name );
+			$this->release_bookmark( $end_name );
 
 			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5( $end, 0, $new_content );
 
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 c9b9455e453143..4be73303c47471 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
@@ -806,7 +806,7 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 				}
 
 				// Appends the processed content after the tag closer of the template.
-				$p->append_content_after_closing_tag_on_balanced_or_void_tags( $processed_content );
+				$p->append_content_after_closing_tag_on_balanced_template_tags( $processed_content );
 
 				// Moves the cursor to the end of the processed items.
 				do {
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 c83eeb6c9bdaaf..d6ca39e40d9554 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
@@ -368,60 +368,60 @@ public function test_is_void_element() {
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method with a simple text.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_simple_text() {
-		$content_1 = '<div>Text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_simple_text() {
+		$content_1 = '<template>Text</template>';
 		$content_2 = 'New text';
 		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_2, $p );
 		$this->assertNull( $p->get_tag() ); // There are no more tags.
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method with simple tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_simple_tags() {
-		$content_1 = '<div>Text</div>';
-		$content_2 = '<div class="content-2">New text</div>';
-		$content_3 = '<div class="content-3">More new text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_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();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_2, $p );
 		// The processor in now positioned in the opening tag of the appended tag.
 		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_3 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_3 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_2 . $content_3, $p );
 		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method in the middle of two tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_in_the_middle_of_tags() {
-		$content_1 = '<div>Text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_in_the_middle_of_tags() {
+		$content_1 = '<template>Text</template>';
 		$content_2 = 'New text';
-		$content_3 = '<div class="content-3">More new text</div>';
-		$content_4 = '<div class="content-4">Even more new text</div>';
+		$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();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_2 . $content_3, $p );
 		// When appending text without tags, it jumps to the next tag in the content.
@@ -429,201 +429,192 @@ public function test_append_content_after_closing_tag_on_balanced_or_void_tags_i
 
 		$p = new WP_Interactivity_API_Directives_Processor( $content_1 . $content_3 );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_4 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_4 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_4 . $content_3, $p );
 		$this->assertEquals( 'content-4', $p->get_attribute( 'class' ) );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method doesn't modify the content when called on a closing tag.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_on_closing_tag() {
-		$content = '<div>Text</div>';
+	public function test_append_content_after_closing_tag_on_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' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( 'New text' );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( 'New text' );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method on multiple calls to the same tag.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_multiple_calls_in_same_tag() {
-		$content_1 = '<div class="content-1">Text</div>';
-		$content_2 = '<div class="content-2">New text</div>';
-		$content_3 = '<div class="content-3">More new text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_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();
-		$p->set_bookmark( 'first div' );
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$p->set_bookmark( 'first template' );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_2, $p );
 		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
-		$p->seek( 'first div' ); // Rewind to the first div.
+		$p->seek( 'first template' ); // Rewind to the first template.
 		$this->assertEquals( 'content-1', $p->get_attribute( 'class' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_3 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_3 );
 		$this->assertEquals( $content_1 . $content_3 . $content_2, $p );
 		$this->assertEquals( 'content-3', $p->get_attribute( 'class' ) );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method on combinations with set_attribute calls.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_with_set_attribute() {
-		$content_1 = '<div>Text</div>';
-		$content_2 = '<div>New text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_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();
 		$p->set_attribute( 'class', 'test' );
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
-		$this->assertEquals( '<div class="test">Text</div>' . $content_2, $p );
+		$this->assertEquals( '<template class="test">Text</template>' . $content_2, $p );
 
 		$p = new WP_Interactivity_API_Directives_Processor( $content_1 );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
 		$p->set_attribute( 'class', 'test' );
-		$this->assertEquals( $content_1 . '<div class="test">New text</div>', $p );
+		$this->assertEquals( $content_1 . '<template class="test">New text</template>', $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method where the existing content includes tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_with_existing_tags() {
-		$content_1 = '<div><span>Text</span></div>';
-		$content_2 = '<div class="content-2-div"><span class="content-2-span">New text</span></div>';
-		$content_3 = '<div><span>More new text</span></div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_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();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content_1 . $content_2, $p );
-		$this->assertEquals( 'content-2-div', $p->get_attribute( 'class' ) );
+		$this->assertEquals( 'content-2-template-1', $p->get_attribute( 'class' ) );
 		$p->next_tag();
-		$this->assertEquals( 'content-2-span', $p->get_attribute( 'class' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_3 );
+		$this->assertEquals( 'content-2-template-2', $p->get_attribute( 'class' ) );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_3 );
 		$this->assertTrue( $result );
-		$this->assertEquals( $content_1 . '<div class="content-2-div"><span class="content-2-span">New text</span>' . $content_3 . '</div>', $p );
+		$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_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method fails with an empty string.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_empty() {
-		$content = '<div class="content">Text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_empty() {
+		$content = '<template class="content">Text</template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( '' );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( '' );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 		$this->assertEquals( 'content', $p->get_attribute( 'class' ) ); // It didn't move.
 
-		$content = '<div class="content"><div>Text</div></div>';
+		$content = '<template class="content"><template>Text</template></template>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( '' );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( '' );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 		$this->assertEquals( 'content', $p->get_attribute( 'class' ) ); // It didn't move.
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
-	 * method on self-closing tags.
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
+	 * method on a non-existent tag.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_self_closing_tag() {
-		$content_1 = '<img src="example.jpg">';
-		$content_2 = '<div class="content-2">Text</div>';
-		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
-		$this->assertTrue( $result );
-		$this->assertEquals( $content_1 . $content_2, $p );
-		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) ); // It didn't move.
-
-		$content_1 = '<img src="example.jpg" />';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_non_existent_tag() {
+		$content_1 = 'Just a string with no tags.';
+		$content_2 = '<template>New text</template>';
 		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
-		$this->assertTrue( $result );
-		$this->assertEquals( $content_1 . $content_2, $p );
-		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) ); // It didn't move.
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$this->assertFalse( $result );
+		$this->assertEquals( $content_1, $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
-	 * method on a non-existent tag.
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
+	 * method on a non-template tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_non_existent_tag() {
-		$content_1 = 'Just a string with no tags.';
-		$content_2 = '<div>New text</div>';
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_non_template_tags() {
+		$content_1 = '<div>Text</div>';
+		$content_2 = '<template>New text</template>';
 		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $content_2 );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content_1, $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_or_void_tags`
+	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
 	 * method with unbalanced tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_or_void_tags
+	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_or_void_tags_with_unbalanced_tags() {
+	public function test_append_content_after_closing_tag_on_balanced_template_tags_with_unbalanced_tags() {
 		$new_content = 'New text';
 
-		$content = '<div>Missing closing div';
+		$content = '<template>Missing closing template';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 
-		$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();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 
-		$content = '<div>Missing closing div</span>';
+		$content = '<template>Missing closing template</span>';
 		$p       = new WP_Interactivity_API_Directives_Processor( $content );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 
 		// It supports unbalanced tags inside the content, as long as it finds a
 		// balanced closing tag.
-		$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();
-		$result = $p->append_content_after_closing_tag_on_balanced_or_void_tags( $new_content );
+		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
 		$this->assertTrue( $result );
 		$this->assertEquals( $content . $new_content, $p );
 	}

From f34705747143ac895f76c85f175621a4923ce666 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sat, 3 Feb 2024 10:57:44 +0100
Subject: [PATCH 16/23] Override WP Core script modules

---
 lib/experimental/interactivity-api.php | 22 ++++++++++++++++++++++
 lib/load.php                           |  1 +
 2 files changed, 23 insertions(+)
 create mode 100644 lib/experimental/interactivity-api.php

diff --git a/lib/experimental/interactivity-api.php b/lib/experimental/interactivity-api.php
new file mode 100644
index 00000000000000..15c47498367b45
--- /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/' . ( isset( $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 0eaf546a4b12c5..5fd9df15d987eb 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -129,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';

From f434acc51b37bf48f49fd52454b14d82321cb7c1 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sat, 3 Feb 2024 18:10:15 +0100
Subject: [PATCH 17/23] Switch to `data-wp-remove` directive

---
 ...interactivity-api-directives-processor.php |  47 +--
 .../class-wp-interactivity-api.php            | 106 +++---
 ...activity-api-directives-processor-test.php | 338 +++++++++---------
 ...lass-wp-interactivity-api-wp-each-test.php | 133 ++++---
 4 files changed, 320 insertions(+), 304 deletions(-)

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 eb42f365acce9f..b4cfa5a499872c 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();
@@ -68,7 +78,7 @@ public function set_content_between_balanced_tags( string $new_content ): bool {
 		}
 
 		/**
-		 * Appends content after the closing tag of a balanced template tag.
+		 * 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.
@@ -78,30 +88,23 @@ public function set_content_between_balanced_tags( string $new_content ): bool {
 		 * @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_closing_tag_on_balanced_template_tags( string $new_content ): bool {
-			// Refuse to process if the content is empty or this is not an opener template tag.
-			if ( empty( $new_content ) || 'TEMPLATE' !== $this->get_tag() || $this->is_tag_closer() ) {
+		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();
 
-			$bookmarks = $this->get_balanced_tag_bookmarks();
-			if ( ! $bookmarks ) {
-				return false;
-			}
-			list( $start_name, $end_name ) = $bookmarks;
-
-			$end = $this->bookmarks[ $end_name ]->start + $this->bookmarks[ $end_name ]->length + 1;
-
-			$this->release_bookmark( $start_name );
-			$this->release_bookmark( $end_name );
+			$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 );
 
-			// Move the processor to the opening tag of the appended content.
-			$this->next_tag();
-
 			return true;
 		}
 
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 41fddcd944bcaf..92f30e73fdef69 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
@@ -259,26 +259,27 @@ private function process_directives_args( string $html, array &$context_stack, a
 						}
 					}
 				} 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-remove' ) ) ) {
+						$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-remove` directive.
+						$p->next_balanced_tag_closer_tag();
 					}
 				}
 
@@ -836,38 +837,47 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 				$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 ) );
-				$inner_content    = $p->get_content_between_balanced_tags();
+
+				// 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-remove--each-child' );
+				$p->seek( $template_end ); // Rewinds to the template closer tag.
+				$p->release_bookmark( $template_end );
 
 				/*
-				 * It doesn't process associative arrays because those will be
-				 * deserialized as objects in JS.
-				 *
-				 * It doesn't process empty or non-array values.
-				 *
-				 * It doesn't process templates that contain top-level texts because
-				 * those texts can't be identified to be removed in the client.  Note:
-				 * there might be top-level texts in between balanced tags, but those
-				 * cannot be identified at this moment.
+				 * 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 (
-				empty( $result ) ||
-				! is_array( $result ) ||
-				! array_is_list( $result ) ||
-				! str_starts_with( trim( $inner_content ), '<' ) ||
-				! str_ends_with( trim( $inner_content ), '>' )
-				) {
+					$manual_sdp ||
+					empty( $result ) ||
+					! is_array( $result ) ||
+					! array_is_list( $result ) ||
+					! str_starts_with( trim( $inner_content ), '<' ) ||
+					! str_ends_with( trim( $inner_content ), '>' )
+					) {
+					// Pops the last tag because it skipped the closing tag of the template tag.
+					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 );
+				? $this->extract_directive_value( $attribute_value, $namespace_value )
+				: array( $namespace_value, null );
 
-				$processed_content        = '';
-				$number_of_top_level_tags = 0;
 				// 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(
@@ -886,16 +896,10 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 						return array_pop( $context_stack );
 					}
 
-					// Adds the `data-wp-each-child` to each top-level tag.
+					// Adds the `data-wp-remove--each-child` to each top-level tag.
 					$i = new WP_Interactivity_API_Directives_Processor( $processed_item );
 					while ( $i->next_tag() ) {
-						$number_of_top_level_tags += 1;
-						$i->set_attribute( 'data-wp-each-child', true );
-						/*
-						 * Moves to the tag closer of the current top-level tag so the next
-						 * call to `next_tag()` moves to the opener tag of the next
-						 * top-level tag.
-						 */
+						$i->set_attribute( 'data-wp-remove--each-child', true );
 						$i->next_balanced_tag_closer_tag();
 					}
 					$processed_content .= $i->get_updated_html();
@@ -905,17 +909,7 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 				}
 
 				// Appends the processed content after the tag closer of the template.
-				$p->append_content_after_closing_tag_on_balanced_template_tags( $processed_content );
-
-				// Moves the cursor to the end of the processed items.
-				do {
-					$p->next_balanced_tag_closer_tag();
-					if ( $number_of_top_level_tags > 1 ) {
-						$number_of_top_level_tags -= 1;
-					} else {
-						break;
-					}
-				} while ( $p->next_tag() );
+				$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/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php b/phpunit/interactivity-api/class-wp-interactivity-api-directives-processor-test.php
index d6ca39e40d9554..6536fb6cb4b365 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() );
 	}
 
 	/**
@@ -368,257 +393,226 @@ public function test_is_void_element() {
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
-	 * method with a simple text.
+	 * Tests the `append_content_after_template_tag_closer` method with a simple
+	 * text.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_simple_text() {
+	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();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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->assertNull( $p->get_tag() ); // There are no more tags.
+		$this->assertFalse( $p->next_tag() ); // There are no more tags.
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
-	 * method with simple tags.
+	 * Tests the `append_content_after_template_tag_closer` method with simple
+	 * tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_simple_tags() {
+	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();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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 );
-		// The processor in now positioned in the opening tag of the appended tag.
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
 		$this->assertEquals( 'content-2', $p->get_attribute( 'class' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_3 );
+		$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_closing_tag_on_balanced_template_tags`
-	 * method in the middle of two tags.
+	 * Tests the `append_content_after_template_tag_closer` method in the middle
+	 * of two tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_in_the_middle_of_tags() {
+	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();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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 );
-		// When appending text without tags, it jumps to the next tag in the content.
+		$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();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_4 );
+		$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_closing_tag_on_balanced_template_tags`
-	 * method doesn't modify the content when called on a closing tag.
+	 * Tests the `append_content_after_template_tag_closer` method doesn't modify
+	 * the content when called on an opener tag.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_on_closing_tag() {
+	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' ) );
-		$p->next_tag( array( 'tag_closers' => 'visit' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( 'New text' );
+		$result = $p->append_content_after_template_tag_closer( 'New text' );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content, $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
-	 * method on multiple calls to the same tag.
+	 * Tests the `append_content_after_template_tag_closer` method on multiple
+	 * calls to the same tag.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_multiple_calls_in_same_tag() {
+	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();
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
 		$p->set_bookmark( 'first template' );
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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->seek( 'first template' ); // Rewind to the first template.
+		// Rewinds to the first template.
+		$p->seek( 'first template' );
+		$p->release_bookmark( 'first template' );
 		$this->assertEquals( 'content-1', $p->get_attribute( 'class' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_3 );
+		$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_closing_tag_on_balanced_template_tags`
-	 * method on combinations with set_attribute calls.
+	 * Tests the `append_content_after_template_tag_closer` method on
+	 * set_attribute calls.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_with_set_attribute() {
+	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();
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
 		$p->set_attribute( 'class', 'test' );
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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 );
-
-		$p = new WP_Interactivity_API_Directives_Processor( $content_1 );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
-		$this->assertTrue( $result );
-		$p->set_attribute( 'class', 'test' );
-		$this->assertEquals( $content_1 . '<template class="test">New text</template>', $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
-	 * method where the existing content includes tags.
+	 * Tests the `append_content_after_template_tag_closer` method where the
+	 * existing content includes tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_with_existing_tags() {
+	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();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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' ) );
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_3 );
+		$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_closing_tag_on_balanced_template_tags`
-	 * method fails with an empty string.
+	 * Tests the `append_content_after_template_tag_closer` method fails with an
+	 * empty string.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_empty() {
+	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();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( '' );
-		$this->assertFalse( $result );
-		$this->assertEquals( $content, $p );
-		$this->assertEquals( 'content', $p->get_attribute( 'class' ) ); // It didn't move.
-
-		$content = '<template class="content"><template>Text</template></template>';
-		$p       = new WP_Interactivity_API_Directives_Processor( $content );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( '' );
+		$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( 'content', $p->get_attribute( 'class' ) ); // It didn't move.
+		$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_closing_tag_on_balanced_template_tags`
-	 * method on a non-existent tag.
+	 * Tests the `append_content_after_template_tag_closer` method on a
+	 * non-existent tag.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_non_existent_tag() {
+	public function test_append_content_after_template_tag_closer_non_existent_tag() {
 		$content_1 = 'Just a string with no tags.';
-		$content_2 = '<template>New text</template>';
+		$content_2 = '<div>New text</div>';
 		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
 		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$result = $p->append_content_after_template_tag_closer( $content_2 );
 		$this->assertFalse( $result );
 		$this->assertEquals( $content_1, $p );
 	}
 
 	/**
-	 * Tests the `append_content_after_closing_tag_on_balanced_template_tags`
-	 * method on a non-template tags.
+	 * Tests the `append_content_after_template_tag_closer` method on non-template
+	 * tags.
 	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
+	 * @covers ::append_content_after_template_tag_closer
 	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_non_template_tags() {
+	public function test_append_content_after_template_tag_closer_non_template_tags() {
 		$content_1 = '<div>Text</div>';
-		$content_2 = '<template>New text</template>';
+		$content_2 = '<div>New text</div>';
 		$p         = new WP_Interactivity_API_Directives_Processor( $content_1 );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $content_2 );
+		$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 the `append_content_after_closing_tag_on_balanced_template_tags`
-	 * method with unbalanced tags.
-	 *
-	 * @covers ::append_content_after_closing_tag_on_balanced_template_tags
-	 */
-	public function test_append_content_after_closing_tag_on_balanced_template_tags_with_unbalanced_tags() {
-		$new_content = 'New text';
-
-		$content = '<template>Missing closing template';
-		$p       = new WP_Interactivity_API_Directives_Processor( $content );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
-		$this->assertFalse( $result );
-		$this->assertEquals( $content, $p );
-
-		$content = '<template><template>Missing closing template</template>';
-		$p       = new WP_Interactivity_API_Directives_Processor( $content );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
-		$this->assertFalse( $result );
-		$this->assertEquals( $content, $p );
-
-		$content = '<template>Missing closing template</span>';
-		$p       = new WP_Interactivity_API_Directives_Processor( $content );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
-		$this->assertFalse( $result );
-		$this->assertEquals( $content, $p );
-
-		// It supports unbalanced tags inside the content, as long as it finds a
-		// balanced closing tag.
-		$content = '<template>Missing opening span</span></template>';
-		$p       = new WP_Interactivity_API_Directives_Processor( $content );
-		$p->next_tag();
-		$result = $p->append_content_after_closing_tag_on_balanced_template_tags( $new_content );
-		$this->assertTrue( $result );
-		$this->assertEquals( $content . $new_content, $p );
-	}
-
 	/**
 	 * Tests that the `next_balanced_tag_closer_tag` method finds a closing tag
 	 * for a standard tag.
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
index 13ff4af1890747..3dd9eb0f742e07 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -80,8 +80,8 @@ public function test_wp_each_simple_tags() {
 			'<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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-remove--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 );
@@ -128,8 +128,8 @@ public function test_wp_each_merges_context_correctly() {
 				'<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>' .
+				'<span data-wp-remove--each-child id="some-id" data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item">1</span>' .
+				'<span data-wp-remove--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 );
@@ -154,8 +154,8 @@ public function test_wp_each_gets_arrays_from_context() {
 				'<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>' .
+				'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+				'<span data-wp-remove--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 );
@@ -180,8 +180,8 @@ public function test_wp_each_default_namespace() {
 				'<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>' .
+				'<span data-wp-remove--each-child data-wp-text="context.item">1</span>' .
+				'<span data-wp-remove--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 );
@@ -205,10 +205,10 @@ public function test_wp_each_multiple_tags_per_item() {
 				'<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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<span data-wp-remove--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 );
@@ -231,10 +231,10 @@ public function test_wp_each_void_tags() {
 				'<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">' .
+			'<img data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<img data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<img data-wp-remove--each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+			'<img data-wp-remove--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 );
@@ -258,10 +258,10 @@ public function test_wp_each_void_and_non_void_tags() {
 				'<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>' .
+			'<img data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<img data-wp-remove--each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+			'<span data-wp-remove--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 );
@@ -286,10 +286,10 @@ public function test_wp_each_nested_tags() {
 					'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">' .
+			'<div data-wp-remove--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">' .
+			'<div data-wp-remove--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>';
@@ -329,10 +329,10 @@ public function test_wp_each_nested_item_properties() {
 				'<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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.id">1</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.name">one</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.id">2</span>' .
+			'<span data-wp-remove--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 );
@@ -353,8 +353,8 @@ public function test_wp_each_different_item_names() {
 			'<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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.myitem">1</span>' .
+			'<span data-wp-remove--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 );
@@ -376,8 +376,8 @@ public function test_wp_each_different_item_names_transforms_camelcase() {
 			'<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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.myItem">1</span>' .
+			'<span data-wp-remove--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 );
@@ -439,18 +439,18 @@ public function test_wp_each_nested_template_tags() {
 					'<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-remove--each-child data-wp-text="myPlugin::context.item1">1</span>' .
+			'<template data-wp-remove--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-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">2</span>' .
+			'<template data-wp-remove--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-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-remove--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 );
@@ -478,22 +478,22 @@ public function test_wp_each_nested_template_tags_XXXX() {
 					'<span data-wp-text="myPlugin::context.item2"></span>' .
 				'</template>' .
 			'</template>' .
-			'<template data-wp-each-child data-wp-each--item2="myPlugin::state.list2">' .
+			'<template data-wp-remove--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-remove--each-child data-wp-text="myPlugin::context.item1">1</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">1</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<template data-wp-remove--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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">2</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">2</span>' .
+			'<span data-wp-remove--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 );
@@ -520,16 +520,16 @@ public function test_wp_each_nested_template_tags_using_previous_item_as_list()
 					'<span data-wp-text="myPlugin::context.number"></span>' .
 				'</template>' .
 			'</template>' .
-			'<template data-wp-each-child data-wp-each--number="myPlugin::context.list">' .
+			'<template data-wp-remove--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-remove--each-child data-wp-text="myPlugin::context.number">1</span>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.number">2</span>' .
+			'<template data-wp-remove--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>' .
+			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.number">3</span>' .
+			'<span data-wp-remove--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 );
@@ -608,4 +608,29 @@ public function test_wp_each_doesnt_process_if_not_array() {
 		$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-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-remove--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-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
+			'<span data-wp-remove--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 );
+	}
 }

From 42d640498ee964312561f0cde99996f54d399e4a Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sun, 4 Feb 2024 15:30:04 +0100
Subject: [PATCH 18/23] Rename back to data-wp-each-child

---
 .../class-wp-interactivity-api.php            |  12 +-
 ...lass-wp-interactivity-api-wp-each-test.php | 116 +++++++++---------
 2 files changed, 64 insertions(+), 64 deletions(-)

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 92f30e73fdef69..df81b1b5b493a9 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
@@ -259,7 +259,7 @@ private function process_directives_args( string $html, array &$context_stack, a
 						}
 					}
 				} else {
-					if ( 0 === count( $p->get_attribute_names_with_prefix( 'data-wp-remove' ) ) ) {
+					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.
@@ -278,7 +278,7 @@ private function process_directives_args( string $html, array &$context_stack, a
 							$tag_stack[] = array( $tag_name, $directives_prefixes );
 						}
 					} else {
-						// Jumps to the tag closer if the tag has a `data-wp-remove` directive.
+						// Jumps to the tag closer if the tag has a `data-wp-each-child` directive.
 						$p->next_balanced_tag_closer_tag();
 					}
 				}
@@ -842,10 +842,10 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 				$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';
+				$template_end = 'data-wp-each: template end';
 				$p->set_bookmark( $template_end );
 				$p->next_tag();
-				$manual_sdp = $p->get_attribute( 'data-wp-remove--each-child' );
+				$manual_sdp = $p->get_attribute( 'data-wp-each-child' );
 				$p->seek( $template_end ); // Rewinds to the template closer tag.
 				$p->release_bookmark( $template_end );
 
@@ -896,10 +896,10 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 						return array_pop( $context_stack );
 					}
 
-					// Adds the `data-wp-remove--each-child` to each top-level tag.
+					// 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-remove--each-child', true );
+						$i->set_attribute( 'data-wp-each-child', true );
 						$i->next_balanced_tag_closer_tag();
 					}
 					$processed_content .= $i->get_updated_html();
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
index 3dd9eb0f742e07..86cb78aa6c2d0f 100644
--- a/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
+++ b/phpunit/interactivity-api/class-wp-interactivity-api-wp-each-test.php
@@ -80,8 +80,8 @@ public function test_wp_each_simple_tags() {
 			'<template data-wp-each="myPlugin::state.list">' .
 				'<span data-wp-text="myPlugin::context.item"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</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>' .
 			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
 		$new      = $this->interactivity->process_directives( $original );
 		$this->assertEquals( $expected, $new );
@@ -128,8 +128,8 @@ public function test_wp_each_merges_context_correctly() {
 				'<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-remove--each-child id="some-id" data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item">1</span>' .
-				'<span data-wp-remove--each-child id="some-id" data-wp-bind--id="myPlugin::context.id" data-wp-text="myPlugin::context.item">2</span>' .
+				'<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 );
@@ -154,8 +154,8 @@ public function test_wp_each_gets_arrays_from_context() {
 				'<template data-wp-each="myPlugin::context.list">' .
 					'<span data-wp-text="myPlugin::context.item"></span>' .
 				'</template>' .
-				'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-				'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</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>' .
 				'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>' .
 			'</div>';
 		$new      = $this->interactivity->process_directives( $original );
@@ -180,8 +180,8 @@ public function test_wp_each_default_namespace() {
 				'<template data-wp-each="state.list">' .
 					'<span data-wp-text="context.item"></span>' .
 				'</template>' .
-				'<span data-wp-remove--each-child data-wp-text="context.item">1</span>' .
-				'<span data-wp-remove--each-child data-wp-text="context.item">2</span>' .
+				'<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 );
@@ -205,10 +205,10 @@ public function test_wp_each_multiple_tags_per_item() {
 				'<span data-wp-text="myPlugin::context.item"></span>' .
 				'<span data-wp-text="myPlugin::context.item"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</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">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 );
@@ -231,10 +231,10 @@ public function test_wp_each_void_tags() {
 				'<img data-wp-bind--id="myPlugin::context.item">' .
 				'<img data-wp-bind--id="myPlugin::context.item">' .
 			'</template>' .
-			'<img data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
-			'<img data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
-			'<img data-wp-remove--each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
-			'<img data-wp-remove--each-child id="2" 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="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 );
@@ -258,10 +258,10 @@ public function test_wp_each_void_and_non_void_tags() {
 				'<img data-wp-bind--id="myPlugin::context.item">' .
 				'<span data-wp-text="myPlugin::context.item"></span>' .
 			'</template>' .
-			'<img data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-			'<img data-wp-remove--each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</span>' .
+			'<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 );
@@ -286,10 +286,10 @@ public function test_wp_each_nested_tags() {
 					'id: <span data-wp-text="myPlugin::context.item"></span>' .
 				'</div>' .
 			'</template>' .
-			'<div data-wp-remove--each-child id="1" data-wp-bind--id="myPlugin::context.item">' .
+			'<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-remove--each-child id="2" data-wp-bind--id="myPlugin::context.item">' .
+			'<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>';
@@ -329,10 +329,10 @@ public function test_wp_each_nested_item_properties() {
 				'<span data-wp-text="myPlugin::context.item.id"></span>' .
 				'<span data-wp-text="myPlugin::context.item.name"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.id">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.name">one</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.id">2</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item.name">two</span>' .
+			'<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 );
@@ -353,8 +353,8 @@ public function test_wp_each_different_item_names() {
 			'<template data-wp-each--myitem="myPlugin::state.list">' .
 				'<span data-wp-text="myPlugin::context.myitem"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.myitem">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.myitem">2</span>' .
+			'<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 );
@@ -376,8 +376,8 @@ public function test_wp_each_different_item_names_transforms_camelcase() {
 			'<template data-wp-each--my-item="myPlugin::state.list">' .
 				'<span data-wp-text="myPlugin::context.myItem"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.myItem">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.myItem">2</span>' .
+			'<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 );
@@ -439,18 +439,18 @@ public function test_wp_each_nested_template_tags() {
 					'<span data-wp-text="myPlugin::context.item2"></span>' .
 				'</template>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">1</span>' .
-			'<template data-wp-remove--each-child data-wp-each--item2="myPlugin::state.list2">' .
+			'<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-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">4</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">2</span>' .
-			'<template data-wp-remove--each-child data-wp-each--item2="myPlugin::state.list2">' .
+			'<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-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">4</span>' .
+			'<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 );
@@ -478,22 +478,22 @@ public function test_wp_each_nested_template_tags_XXXX() {
 					'<span data-wp-text="myPlugin::context.item2"></span>' .
 				'</template>' .
 			'</template>' .
-			'<template data-wp-remove--each-child data-wp-each--item2="myPlugin::state.list2">' .
+			'<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-remove--each-child data-wp-text="myPlugin::context.item1">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">4</span>' .
-			'<template data-wp-remove--each-child data-wp-each--item2="myPlugin::state.list2">' .
+			'<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-remove--each-child data-wp-text="myPlugin::context.item1">2</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">3</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item1">2</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item2">4</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">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 );
@@ -520,16 +520,16 @@ public function test_wp_each_nested_template_tags_using_previous_item_as_list()
 					'<span data-wp-text="myPlugin::context.number"></span>' .
 				'</template>' .
 			'</template>' .
-			'<template data-wp-remove--each-child data-wp-each--number="myPlugin::context.list">' .
+			'<template data-wp-each-child data-wp-each--number="myPlugin::context.list">' .
 				'<span data-wp-text="myPlugin::context.number"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.number">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.number">2</span>' .
-			'<template data-wp-remove--each-child data-wp-each--number="myPlugin::context.list">' .
+			'<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-remove--each-child data-wp-text="myPlugin::context.number">3</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.number">4</span>' .
+			'<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 );
@@ -620,15 +620,15 @@ public function test_wp_each_doesnt_process_with_manual_server_directive_process
 			'<template data-wp-each="myPlugin::state.list">' .
 				'<span data-wp-text="myPlugin::context.item"></span>' .
 			'</template>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</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>' .
 			'<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-remove--each-child data-wp-text="myPlugin::context.item">1</span>' .
-			'<span data-wp-remove--each-child data-wp-text="myPlugin::context.item">2</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>' .
 			'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>';
 		$new      = $this->interactivity->process_directives( $original );
 		$this->assertEquals( $expected, $new );

From 56f373e7d796e5fd868a7dab00604119dcf2a93c Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sun, 4 Feb 2024 15:35:21 +0100
Subject: [PATCH 19/23] Add missing continue in foreach loop

---
 .../interactivity-api/class-wp-interactivity-api.php             | 1 +
 1 file changed, 1 insertion(+)

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 df81b1b5b493a9..12721cea78bd36 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
@@ -280,6 +280,7 @@ private function process_directives_args( string $html, array &$context_stack, a
 					} else {
 						// Jumps to the tag closer if the tag has a `data-wp-each-child` directive.
 						$p->next_balanced_tag_closer_tag();
+						continue;
 					}
 				}
 

From 62d19c447960919d023d7ee8f54702a5390dfe05 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sun, 4 Feb 2024 15:45:19 +0100
Subject: [PATCH 20/23] Don't return a value

---
 .../interactivity-api/class-wp-interactivity-api.php          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 12721cea78bd36..be9203198d3f2f 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
@@ -866,7 +866,6 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 					! str_starts_with( trim( $inner_content ), '<' ) ||
 					! str_ends_with( trim( $inner_content ), '>' )
 					) {
-					// Pops the last tag because it skipped the closing tag of the template tag.
 					array_pop( $tag_stack );
 					return;
 				}
@@ -894,7 +893,8 @@ private function data_wp_each_processor( WP_Interactivity_API_Directives_Process
 
 					if ( null === $processed_item ) {
 						// If the HTML is unbalanced, stop processing it.
-						return array_pop( $context_stack );
+						array_pop( $context_stack );
+						return;
 					}
 
 					// Adds the `data-wp-each-child` to each top-level tag.

From 8fda7768ae689d40dad806c5e9fd6e9c30434283 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sun, 4 Feb 2024 17:23:43 +0100
Subject: [PATCH 21/23] Transform interactivity index to TS

---
 packages/interactivity/src/{index.js => index.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/interactivity/src/{index.js => index.ts} (100%)

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

From bd858e6cb6ca024d5d5eb0c582e73e202355cff2 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sun, 4 Feb 2024 17:24:05 +0100
Subject: [PATCH 22/23] Fix includes_url logic

---
 lib/experimental/interactivity-api.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/experimental/interactivity-api.php b/lib/experimental/interactivity-api.php
index 15c47498367b45..aff57bf0bce807 100644
--- a/lib/experimental/interactivity-api.php
+++ b/lib/experimental/interactivity-api.php
@@ -14,7 +14,7 @@
 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/' . ( isset( $matches[1] ) ? 'router' : 'index' ) . wp_scripts_get_suffix() . '.js' );
+		return gutenberg_url( '/build/interactivity/' . ( $matches[1] ? 'router' : 'index' ) . wp_scripts_get_suffix() . '.js' );
 	}
 	return $url;
 }

From 628509a3348d257d603fc9f4f67cfa66d38e7251 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Sun, 4 Feb 2024 21:31:03 +0100
Subject: [PATCH 23/23] Also move vdom to TS

---
 packages/interactivity/src/{vdom.js => vdom.ts} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/interactivity/src/{vdom.js => vdom.ts} (98%)

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 01cf58ba00479b..9928012ada3f46 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;