Interactivity API: Support setting a namespace using a string in data-wp-interactive

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">

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)
 

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 ] );
 					}

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();
 	} );