From df1819d1626c8b90903d067c45f68bb49f5f8e6b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Date: Tue, 16 Jan 2024 17:08:33 +0100
Subject: [PATCH] Interactivity API: Prevent the use of components in `wp-text`
 (#57879)

* Allow only strings for wp-text

* Update changelog

* Update with suggested commit, add try-catch and toString

* Update tests, prevent [object Object]

* Apply suggestion to preven duplicate evaluate calls

* Change changelog

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
---
 .../interactive-blocks/directive-text/render.php   | 14 ++++++++++++++
 .../interactive-blocks/directive-text/view.js      |  5 ++++-
 packages/interactivity/CHANGELOG.md                |  4 ++++
 packages/interactivity/src/directives.js           |  8 +++++++-
 .../specs/interactivity/directives-text.spec.ts    |  9 +++++++++
 5 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
index 98803669c6b0bc..91d03b6fb8e19a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
+++ b/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>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
index 82f37f4f78f1fe..12b8ca9488ea10 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
+++ b/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() {
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 67b25a7e30ee0e..a67775b781d556 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Prevent the usage of Preact components in `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))
diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js
index 931fa07493f44d..b31f8ddb4b84d4 100644
--- a/packages/interactivity/src/directives.js
+++ b/packages/interactivity/src/directives.js
@@ -280,7 +280,13 @@ export default () => {
 	// data-wp-text
 	directive( 'text', ( { directives: { text }, element, evaluate } ) => {
 		const entry = text.find( ( { suffix } ) => suffix === 'default' );
-		element.props.children = evaluate( entry );
+		try {
+			const result = evaluate( entry );
+			element.props.children =
+				typeof result === 'object' ? null : result.toString();
+		} catch ( e ) {
+			element.props.children = null;
+		}
 	} );
 
 	// data-wp-run
diff --git a/test/e2e/specs/interactivity/directives-text.spec.ts b/test/e2e/specs/interactivity/directives-text.spec.ts
index 8e83be26de15ca..3670c5931e15d8 100644
--- a/test/e2e/specs/interactivity/directives-text.spec.ts
+++ b/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' );
+	} );
 } );