Interactivity API: Increase directive wp-each-child priority. (#62293)

* Increase  directive priority

* Increase  directive priority

* Add e2e test

* Refactor e2e test

---------

Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: vcanales <vcanales@git.wordpress.org>

packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php

@@ -234,3 +234,29 @@
 	<p data-testid="item" data-wp-each-child>gamma</p>
 	<p data-testid="item" data-wp-each-child>delta</p>
 </div>
+
+<hr>
+
+<div
+	data-wp-interactive="directive-each"
+	data-wp-context='{ "list": [ "beta" ], "callbackRunCount": 0 }'
+	data-testid="elements with directives"
+>
+	<template data-wp-each="context.list">
+		<div
+			data-testid="item"
+			data-wp-text="context.item"
+			data-wp-priority-2-init="callbacks.updateCallbackRunCount"
+		></div>
+	</template>
+	<div
+		data-wp-each-child
+		data-testid="item"
+		data-wp-text="context.item"
+		data-wp-priority-2-init="callbacks.updateCallbackRunCount"
+	></div>
+	<data
+		data-testid="callbackRunCount"
+		data-wp-text="context.callbackRunCount"
+	></data>
+</div>

packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, useInit, privateApis } from '@wordpress/interactivity';
 
 const { state } = store( 'directive-each' );
 
@@ -190,3 +190,30 @@ store( 'directive-each', {
 	}
 } );
 
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+/*
+ * This is a high-priority version of the wp-init directive, to test directives
+ * with such priority or lower don't run in elements with wp-each-child.
+ */
+directive(
+	'priority-2-init',
+	( { directives: { 'priority-2-init': init }, evaluate } ) => {
+		init.forEach( ( entry ) => {
+			useInit( () => evaluate( entry ) );
+		} );
+	},
+	{ priority: 2 }
+);
+
+store('directive-each', {
+    callbacks: {
+		updateCallbackRunCount() {
+			const ctx = getContext();
+			ctx.callbackRunCount += 1;
+		}
+    },
+});
+

packages/interactivity/src/directives.tsx

@@ -632,5 +632,5 @@ export default () => {
 		{ priority: 20 }
 	);
 
-	directive( 'each-child', () => null );
+	directive( 'each-child', () => null, { priority: 1 } );
 };

test/e2e/specs/interactivity/directive-each.spec.ts

@@ -492,4 +492,17 @@ test.describe( 'data-wp-each', () => {
 		await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
 		await expect( banana ).toHaveAttribute( 'data-tag', '1' );
 	} );
+
+	test( 'directives inside elements with `wp-each-child` should not run', async ( {
+		page,
+	} ) => {
+		const element = page
+			.getByTestId( 'elements with directives' )
+			.getByTestId( 'item' );
+		const callbackRunCount = page
+			.getByTestId( 'elements with directives' )
+			.getByTestId( 'callbackRunCount' );
+		await expect( element ).toHaveText( 'beta' );
+		await expect( callbackRunCount ).toHaveText( '1' );
+	} );
 } );