diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index eac1e00d38e6b..2fb2a7e1683c5 100644
--- 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
index 9928012ada3f4..5a99799366809 100644
--- 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
index 849001274cfd5..da4839c18afb2 100644
--- 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();
} );