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' ); + } ); } );