Interactivity API: Support setting a namespace using a string in `dat…

…a-wp-interactive` (#58743) * Add failing test * Fix the test * Add changelog (without PR number) * Remove comment about namespace restrictions * Revert namespace char restriction * Update PR number in CHANGELOG.md Co-authored-by: luisherranz <luisherranz@git.wordpress.org> Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
WordPress · Feb 7, 2024 · cda700c · cda700c
1 parent 9edf886
commit cda700c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
@@ -17,7 +17,15 @@
 
 	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div data-wp-show-mock="state.falseValue">
-			<span data-testid="inside an island">
+			<span data-testid="inside an island with json object">
+				This should not be shown because it is inside an island.
+			</span>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-show-mock="state.falseValue">
+			<span data-testid="inside an island with string">
 				This should not be shown because it is inside an island.
 			</span>
 		</div>
@@ -69,8 +77,6 @@
 		</div>
 	</div>
 
-
-
 	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div data-wp-interactive='{ "namespace": "something-new" }'></div>
 		<div data-wp-show-mock="state.falseValue">

diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   Break up init with yielding to main to prevent long task from hydration. ([#58227](https://github.com/WordPress/gutenberg/pull/58227))
+-   Support setting the namespace using a string in `data-wp-interactive`, like `data-wp-interactive="myPlugin"`. ([#58743](https://github.com/WordPress/gutenberg/pull/58743))
 
 ## 4.0.1 (2024-01-31)
 

diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts
@@ -85,7 +85,11 @@ export function toVdom( root ) {
 					} catch ( e ) {}
 					if ( n === islandAttr ) {
 						island = true;
-						namespaces.push( value?.namespace ?? null );
+						namespaces.push(
+							typeof value === 'string'
+								? value
+								: value?.namespace ?? null
+						);
 					} else {
 						directives.push( [ n, ns, value ] );
 					}

diff --git a/test/e2e/specs/interactivity/tovdom-islands.spec.ts b/test/e2e/specs/interactivity/tovdom-islands.spec.ts
@@ -23,10 +23,17 @@ test.describe( 'toVdom - islands', () => {
 		await expect( el ).toBeVisible();
 	} );
 
-	test( 'directives that are inside islands should be hydrated', async ( {
+	test( 'directives that are inside islands with json objects should be hydrated', async ( {
 		page,
 	} ) => {
-		const el = page.getByTestId( 'inside an island' );
+		const el = page.getByTestId( 'inside an island with json object' );
+		await expect( el ).toBeHidden();
+	} );
+
+	test( 'directives that are inside islands with strings should be hydrated', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'inside an island with string' );
 		await expect( el ).toBeHidden();
 	} );