Interactivity API: Fix context inheritance from namespaces different …

…than the current one (#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]>
WordPress · Aug 21, 2024 · 5fb9c1c · 5fb9c1c · github-actions · Aug 21, 2024
1 parent 8352584
commit 5fb9c1c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/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>
diff --git a/packages/interactivity/CHANGELOG.md b/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

diff --git a/packages/interactivity/src/directives.tsx b/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 );

diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/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' );
+	} );
 } );