Interactivity API: Fix context inheritance from namespaces different than the current one (WordPress#64677)

* Add failing test

* Fix contextStack generation to include other namespaces

* Update changelog

Co-authored-by: DAreRodz <[email protected]>
Co-authored-by: luisherranz <[email protected]>

Author: 3 people

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

@@ -212,3 +212,24 @@
 		></span>
 	</div>
 </div>
+
+
+<div
+	data-testid="inheritance from other namespaces"
+	data-wp-interactive="directive-context/parent"
+	data-wp-context='{ "prop": "fromParentNs" }'
+>
+	<div
+		data-wp-interactive="directive-context/child"
+		data-wp-context='{ "prop": "fromChildNs" }'
+	>
+		<span
+			data-testid="parent"
+			data-wp-text="directive-context/parent::context.prop"
+		></span>
+		<span
+			data-testid="child"
+			data-wp-text="directive-context/child::context.prop"
+		></span>
+	</div>
+</div>

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix context inheritance from namespaces different than the current one ([#64677](https://github.com/WordPress/gutenberg/pull/64677)).
+
 ## 6.5.0 (2024-08-07)
 
 ### Enhancements

packages/interactivity/src/directives.tsx

@@ -273,12 +273,11 @@ export default () => {
 			const inheritedValue = useContext( inheritedContext );
 
 			const ns = defaultEntry!.namespace;
-			const currentValue = useRef( {
-				[ ns ]: proxifyState( ns, {} ),
-			} );
+			const currentValue = useRef( proxifyState( ns, {} ) );
 
 			// No change should be made if `defaultEntry` does not exist.
 			const contextStack = useMemo( () => {
+				const result = { ...inheritedValue };
 				if ( defaultEntry ) {
 					const { namespace, value } = defaultEntry;
 					// Check that the value is a JSON object. Send a console warning if not.
@@ -288,15 +287,16 @@ export default () => {
 						);
 					}
 					updateContext(
-						currentValue.current[ namespace ],
+						currentValue.current,
 						deepClone( value ) as object
 					);
-					currentValue.current[ namespace ] = proxifyContext(
-						currentValue.current[ namespace ],
+					currentValue.current = proxifyContext(
+						currentValue.current,
 						inheritedValue[ namespace ]
 					);
+					result[ namespace ] = currentValue.current;
 				}
-				return currentValue.current;
+				return result;
 			}, [ defaultEntry, inheritedValue ] );
 
 			return createElement( Provider, { value: contextStack }, children );

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

@@ -380,4 +380,19 @@ test.describe( 'data-wp-context', () => {
 		expect( childContextAfter.obj2.prop6 ).toBe( 'child' );
 		expect( childContextAfter.obj2.overwritten ).toBeUndefined();
 	} );
+
+	test( 'properties from other namespaces defined in a parent context are inherited', async ( {
+		page,
+	} ) => {
+		const childProp = page
+			.getByTestId( 'inheritance from other namespaces' )
+			.getByTestId( 'child' );
+
+		const parentProp = page
+			.getByTestId( 'inheritance from other namespaces' )
+			.getByTestId( 'parent' );
+
+		await expect( childProp ).toHaveText( 'fromChildNs' );
+		await expect( parentProp ).toHaveText( 'fromParentNs' );
+	} );
 } );