Skip to content

Commit

Permalink
Interactivity API: Prevent the use of components in wp-text (#57879)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
cbravobernal and luisherranz authored Jan 16, 2024
1 parent cdd6cec commit df1819d
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down
4 changes: 4 additions & 0 deletions packages/interactivity/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
8 changes: 7 additions & 1 deletion packages/interactivity/src/directives.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions test/e2e/specs/interactivity/directives-text.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
} );
} );

0 comments on commit df1819d

Please sign in to comment.