Interactivity API: Prevent the use of components in wp-text

packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php

@@ -34,4 +34,18 @@
 			Toggle Context Text
 		</button>
 	</div>
+	<div>
+		<span
+			data-wp-text="state.component"
+			data-testid="show state component"
+		></span>
+		<span
+			data-wp-text="state.number"
+			data-testid="show state number"
+		></span>
+		<span
+			data-wp-text="state.boolean"
+			data-testid="show state boolean"
+		></span>
+	</div>
 </div>

packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js

@@ -1,11 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, createElement } from '@wordpress/interactivity';
 
 const { state } = store( 'directive-context', {
 	state: {
 		text: 'Text 1',
+		component: () => (createElement( 'div', {}, state.text )),
+		number: 1,
+		boolean: true
 	},
 	actions: {
 		toggleStateText() {

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Allow only strings for `wp-text`. ([#57879](https://github.com/WordPress/gutenberg/pull/57879))
+
 ### New Features
 
 -   Add the `data-wp-run` directive along with the `useInit` and `useWatch` hooks. ([57805](https://github.com/WordPress/gutenberg/pull/57805))

packages/interactivity/src/directives.js

@@ -330,7 +330,15 @@ export default () => {
 	// data-wp-text
 	directive( 'text', ( { directives: { text }, element, evaluate } ) => {
 		const entry = text.find( ( { suffix } ) => suffix === 'default' );
-		element.props.children = evaluate( entry );
+		try {
+			if ( typeof evaluate( entry ) === 'object' ) {
+				element.props.children = null;
+				return;
+			}
+			element.props.children = evaluate( entry ).toString();
+		} catch ( e ) {
+			element.props.children = null;
+		}
 	} );
 
 	// data-wp-slot

test/e2e/specs/interactivity/directives-text.spec.ts

@@ -33,4 +33,13 @@ test.describe( 'data-wp-text', () => {
 		await page.getByTestId( 'toggle context text' ).click();
 		await expect( el ).toHaveText( 'Text 1' );
 	} );
+
+	test( 'Transforms results into strings', async ( { page } ) => {
+		const elObject = page.getByTestId( 'show state component' );
+		await expect( elObject ).toBeHidden();
+		const elNumber = page.getByTestId( 'show state number' );
+		await expect( elNumber ).toHaveText( '1' );
+		const elBool = page.getByTestId( 'show state boolean' );
+		await expect( elBool ).toHaveText( 'true' );
+	} );
 } );