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 196d04f32a2537..27fd6c7d172939 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -234,3 +234,29 @@
gamma
delta
+
+
+
+
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
index c78be9f81200ad..129e4f61270bd8 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
+++ b/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;
+ }
+ },
+});
+
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index a4a320eda57f02..a013d442166897 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -632,5 +632,5 @@ export default () => {
{ priority: 20 }
);
- directive( 'each-child', () => null );
+ directive( 'each-child', () => null, { priority: 1 } );
};
diff --git a/test/e2e/specs/interactivity/directive-each.spec.ts b/test/e2e/specs/interactivity/directive-each.spec.ts
index a9f09191685a3b..9dbd1e47a2ef1c 100644
--- a/test/e2e/specs/interactivity/directive-each.spec.ts
+++ b/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' );
+ } );
} );