From db5f214b072293ce9186dd28ec9bfcbbe24a041f Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 16 Jan 2024 12:44:48 +0100 Subject: [PATCH 1/6] Allow only strings for wp-text --- .../interactive-blocks/directive-text/render.php | 14 ++++++++++++++ .../interactive-blocks/directive-text/view.js | 5 ++++- packages/interactivity/src/directives.js | 4 +++- .../specs/interactivity/directives-text.spec.ts | 9 +++++++++ 4 files changed, 30 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 +
+ + + +
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/src/directives.js b/packages/interactivity/src/directives.js index e9cc66fa50a6f0..77190da3c45fa6 100644 --- a/packages/interactivity/src/directives.js +++ b/packages/interactivity/src/directives.js @@ -330,7 +330,9 @@ export default () => { // data-wp-text directive( 'text', ( { directives: { text }, element, evaluate } ) => { const entry = text.find( ( { suffix } ) => suffix === 'default' ); - element.props.children = evaluate( entry ); + const evaluatedEntry = evaluate( entry ); + if ( typeof evaluatedEntry !== 'string' ) return null; + element.props.children = evaluatedEntry; } ); // data-wp-slot diff --git a/test/e2e/specs/interactivity/directives-text.spec.ts b/test/e2e/specs/interactivity/directives-text.spec.ts index 8e83be26de15ca..97a49f097ca77a 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( 'work only with strings', async ( { page } ) => { + const elObject = page.getByTestId( 'show state component' ); + await expect( elObject ).toBeHidden(); + const elNumber = page.getByTestId( 'show state number' ); + await expect( elNumber ).toBeHidden(); + const elBool = page.getByTestId( 'show state boolean' ); + await expect( elBool ).toBeHidden(); + } ); } ); From cfe08bdd31a64a4be7e480992de2fd62e20ea5bd Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 16 Jan 2024 12:53:01 +0100 Subject: [PATCH 2/6] Update changelog --- packages/interactivity/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index ff0c4942abb3f1..756ca683c9ed6f 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/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)) From e06d980796ee8e7c284807c91ae79e51bf771ec1 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 16 Jan 2024 13:27:08 +0100 Subject: [PATCH 3/6] Update with suggested commit, add try-catch and toString --- packages/interactivity/src/directives.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js index 77190da3c45fa6..2b81bd89ac288c 100644 --- a/packages/interactivity/src/directives.js +++ b/packages/interactivity/src/directives.js @@ -330,9 +330,11 @@ export default () => { // data-wp-text directive( 'text', ( { directives: { text }, element, evaluate } ) => { const entry = text.find( ( { suffix } ) => suffix === 'default' ); - const evaluatedEntry = evaluate( entry ); - if ( typeof evaluatedEntry !== 'string' ) return null; - element.props.children = evaluatedEntry; + try { + element.props.children = evaluate( entry ).toString(); + } catch ( e ) { + element.props.children = null; + } } ); // data-wp-slot From dd2830c0ae8888f5ebe5fb9ffef080b337494053 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 16 Jan 2024 13:50:50 +0100 Subject: [PATCH 4/6] Update tests, prevent [object Object] --- packages/interactivity/src/directives.js | 4 ++++ test/e2e/specs/interactivity/directives-text.spec.ts | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js index 2b81bd89ac288c..4381ee5df7db3c 100644 --- a/packages/interactivity/src/directives.js +++ b/packages/interactivity/src/directives.js @@ -331,6 +331,10 @@ export default () => { directive( 'text', ( { directives: { text }, element, evaluate } ) => { const entry = text.find( ( { suffix } ) => suffix === 'default' ); try { + if ( typeof evaluate( entry ) === 'object' ) { + element.props.children = null; + return; + } element.props.children = evaluate( entry ).toString(); } catch ( e ) { element.props.children = null; diff --git a/test/e2e/specs/interactivity/directives-text.spec.ts b/test/e2e/specs/interactivity/directives-text.spec.ts index 97a49f097ca77a..3670c5931e15d8 100644 --- a/test/e2e/specs/interactivity/directives-text.spec.ts +++ b/test/e2e/specs/interactivity/directives-text.spec.ts @@ -34,12 +34,12 @@ test.describe( 'data-wp-text', () => { await expect( el ).toHaveText( 'Text 1' ); } ); - test( 'work only with strings', async ( { page } ) => { + 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 ).toBeHidden(); + await expect( elNumber ).toHaveText( '1' ); const elBool = page.getByTestId( 'show state boolean' ); - await expect( elBool ).toBeHidden(); + await expect( elBool ).toHaveText( 'true' ); } ); } ); From ba91a0c362ebeebd9d523d312b6e510e5db35b3c Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 16 Jan 2024 15:12:56 +0100 Subject: [PATCH 5/6] Apply suggestion to preven duplicate evaluate calls --- packages/interactivity/src/directives.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js index 4381ee5df7db3c..d34c510c2d8ef2 100644 --- a/packages/interactivity/src/directives.js +++ b/packages/interactivity/src/directives.js @@ -331,11 +331,9 @@ export default () => { directive( 'text', ( { directives: { text }, element, evaluate } ) => { const entry = text.find( ( { suffix } ) => suffix === 'default' ); try { - if ( typeof evaluate( entry ) === 'object' ) { - element.props.children = null; - return; - } - element.props.children = evaluate( entry ).toString(); + const result = evaluate( entry ); + element.props.children = + typeof result === 'object' ? null : result.toString(); } catch ( e ) { element.props.children = null; } From 3cd073f074f7b796993f533aa106f0b982c023f1 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 16 Jan 2024 16:02:38 +0100 Subject: [PATCH 6/6] Change changelog --- packages/interactivity/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 756ca683c9ed6f..a34bb832d0cfd4 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Allow only strings for `wp-text`. ([#57879](https://github.com/WordPress/gutenberg/pull/57879)) +- Prevent the usage of Preact components in `wp-text`. ([#57879](https://github.com/WordPress/gutenberg/pull/57879)) ### New Features