Since the introduction of `block.json` in WordPress 5.8, developers have enjoyed a standardized way to define and configure blocks in the editor. But what about interactivity on the front end?
Before WordPress 6.5, developers had to roll their own JavaScript (or use external frameworks) to create interactive experiences—introducing complexity, duplication, and inconsistency.
With the arrival of the **Interactivity API**, WordPress now offers a native, declarative way to add client-side behavior to blocks using directives like `data-wp-on–click`, `data-wp-bind`, and `data-wp-context`. Developers can define reactive behavior, state management, and side effects—all while staying in the WordPress stack.
In this developer-focused talk, we’ll explore:
– The architecture and goals of the Interactivity API
– How to mark blocks as interactive with `supports.interactivity`
– How to use directives to handle clicks, toggle classes, bind data, loop over arrays, and more
– How to define a store to manage shared state, actions, and side effects
– Real-world examples including:
– Button toggles and UI state
– Gallery sliders using Core Image blocks
– Query Loop filtering and SPA-style navigation—without a full page reload