Interactivity API: fix property modification from inherited context t…

…wo or more levels above (WordPress#66872) * Add failing test * Fix code * Add changelog entry * Define "modal" prop in submenu context Co-authored-by: DAreRodz <[email protected]> Co-authored-by: sirreal <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: danielpost <[email protected]>
up1512001 · Nov 12, 2024 · d2bc9ea · d2bc9ea
1 parent 99fd9c7
commit d2bc9ea
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -813,7 +813,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 	) ) {
 		// Add directives to the parent `<li>`.
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
-		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' );
+		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
 		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );

diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix property modification from inherited context two or more levels above ([#66872](https://github.com/WordPress/gutenberg/pull/66872)).
+
 ## 6.11.0 (2024-10-30)
 
 ### Bug Fixes

diff --git a/packages/interactivity/src/proxies/context.ts b/packages/interactivity/src/proxies/context.ts
@@ -38,6 +38,9 @@ const contextHandlers: ProxyHandler< object > = {
 	getOwnPropertyDescriptor: ( target, key ) =>
 		descriptor( target, key ) ||
 		descriptor( contextObjectToFallback.get( target ), key ),
+	has: ( target, key ) =>
+		Reflect.has( target, key ) ||
+		Reflect.has( contextObjectToFallback.get( target ), key ),
 };
 
 /**

diff --git a/packages/interactivity/src/proxies/test/context-proxy.ts b/packages/interactivity/src/proxies/test/context-proxy.ts
@@ -137,6 +137,24 @@ describe( 'Interactivity API', () => {
 				expect( context.a ).toBe( 2 );
 				expect( state.a ).toBe( 2 );
 			} );
+
+			it( "should modify props inherited from fallback's ancestors", () => {
+				const ancestor: any = proxifyContext(
+					{ ancestorProp: 'ancestor' },
+					{}
+				);
+				const fallback: any = proxifyContext(
+					{ fallbackProp: 'fallback' },
+					ancestor
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				context.ancestorProp = 'modified';
+
+				expect( context.ancestorProp ).toBe( 'modified' );
+				expect( fallback.ancestorProp ).toBe( 'modified' );
+				expect( ancestor.ancestorProp ).toBe( 'modified' );
+			} );
 		} );
 
 		describe( 'computations', () => {