Interactivity API — data-wp-text vs data-wp-bind

The idea

The WordPress Interactivity API uses HTML "directives" to wire a block's markup to a shared store. Two get mixed up. data-wp-text sets an element's text content from a store value. data-wp-bind--<attr> sets an HTML attribute from a store value. Text content is not an attribute, so there is no data-wp-bind--text — if you want to change what an element says, you need data-wp-text.

How it shows up

<span data-wp-text="state.count"></span>          <!-- sets the text inside the span -->
<button data-wp-bind--disabled="state.isBusy">Go</button>  <!-- sets the disabled attribute -->

Read more

• Interactivity API reference — directives
• Interactivity API — Getting started

Exercises

1. Bind text — In a test block, add a data-wp-text element pointing at a store value and confirm the text renders from the store. Done when: changing the store value updates the visible text with no page reload.
2. Bind an attribute — Add data-wp-bind--hidden to an element driven by a boolean in state. Done when: toggling the boolean shows/hides the element.