diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
index c0b01bfea95fc..428d47ec39795 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -134,3 +134,12 @@
+
+
+
+
+
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index eac1e00d38e6b..9b75f3aab4d0b 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -6,6 +6,10 @@
- Break up init with yielding to main to prevent long task from hydration. ([#58227](https://github.com/WordPress/gutenberg/pull/58227))
+### Bug fixes
+
+- Interactivity API: Remove non default suffix data wp context processing. ([#58664](https://github.com/WordPress/gutenberg/pull/58664))
+
## 4.0.1 (2024-01-31)
### Bug Fixes
diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js
index 38849f53d7f95..ce776af74afa3 100644
--- a/packages/interactivity/src/directives.js
+++ b/packages/interactivity/src/directives.js
@@ -101,21 +101,26 @@ export default () => {
const { Provider } = inheritedContext;
const inheritedValue = useContext( inheritedContext );
const currentValue = useRef( deepSignal( {} ) );
- const passedValues = context.map( ( { value } ) => value );
+ const defaultEntry = context.find(
+ ( { suffix } ) => suffix === 'default'
+ );
currentValue.current = useMemo( () => {
- const newValue = context
- .map( ( c ) => deepSignal( { [ c.namespace ]: c.value } ) )
- .reduceRight( mergeDeepSignals );
-
+ if ( ! defaultEntry ) return null;
+ const { namespace, value } = defaultEntry;
+ const newValue = deepSignal( { [ namespace ]: value } );
mergeDeepSignals( newValue, inheritedValue );
mergeDeepSignals( currentValue.current, newValue, true );
return currentValue.current;
- }, [ inheritedValue, ...passedValues ] );
+ }, [ inheritedValue, defaultEntry ] );
- return (
- { children }
- );
+ if ( currentValue.current ) {
+ return (
+
+ { children }
+
+ );
+ }
},
{ priority: 5 }
);
diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
index f94784865cb75..95300dc53bf86 100644
--- a/test/e2e/specs/interactivity/directive-context.spec.ts
+++ b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -189,4 +189,14 @@ test.describe( 'data-wp-context', () => {
await page.getByTestId( 'async navigate' ).click();
await expect( element ).toHaveText( 'changed from async action' );
} );
+ test( 'should bail out if the context is not a default directive', async ( {
+ page,
+ } ) => {
+ // This test is to ensure that the context directive is only applied to the default directive
+ // and not to any other directive.
+ const defaultElement = page.getByTestId( 'default suffix context' );
+ await expect( defaultElement ).toHaveText( 'default' );
+ const element = page.getByTestId( 'non-default suffix context' );
+ await expect( element ).toHaveText( '' );
+ } );
} );