Earlier this year, WordPress contributors announced that they are working on a new Interactivity API WordPress that will allow developers to build interactive blocks. This API will support the kinds of frontend experiences that let visitors interact with content and get feedback without having to refresh the page.

The Interactivity API – A better developer experience in building interactive blocks

What if effortlessly creating performant, fluid, and idiomatic frontend interactivity on block-based WordPress sites was possible? Imagine plugins providing interactions like “heart this post” or “add to cart” without page reloads. Picture instant search, commenting, and native full-page transitions as best-in-class built-ins without complex scaffolding or external tools. Envision achieving this in any block theme by default without sacrificing PHP server rendering and the plugin ecosystem for a JS runtime. Visualize block developers easily declaring and extending such behaviors in a way that is immediately familiar and compatible with the block ecosystem.

That’s what we, the contributors involved in this project, aim to explore and unlock with the Interactivity API. The demo below shows some of this power and flexibility in action.

API Goals

The main goal of the Interactivity API is to provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks.

A standard makes it easier for developers to create rich, interactive user experiences, from simple cases like counters or popups to more complex features like instant page navigation, instant search, or carts and checkouts.

All these user experiences are technically possible right now without the Interactivity API. However, the more complex the user experience and the more blocks interact with each other, the harder it becomes for developers to build and maintain sites. There are a lot of challenges they have to figure out themselves. The API aims to provide out-of-the-box means for supporting these kinds of interactions.

How to create interactive blocks using the API

It’s important to highlight that the block creation workflow doesn’t change.

Until now, WordPress has been intentionally unopinionated about the different solutions used on the frontend of blocks. The Interactivity API changes that. It adds a new standard way to easily add frontend interactivity to blocks while the APIs handling the Block Editor remain the same.

To add interactivity to blocks using the Interactivity API WordPress, developers would need to:

1. Add directives to the markup to add specific behavior to the block.
2. If needed, create a store with the logic (state, actions, or callbacks) needed for interactivity. Blocks using only directives with self-sufficient logic like data-wp-link, don’t need this step.

Before explaining each step in more detail, let’s return to our example: a button that shows and hides some text. We’ll also add logic to send a message in the console whenever the button is hidden/revealed.

Status update on the Interactivity API

The Interactivity API proposal was published a few months ago. This API aims to create a new standard for WordPress that simplifies and empowers building rich interactive web applications with WordPress using declarative and reactive programming principles. 

Since the proposal was published, a dedicated group of contributors has been focused on incorporating the Interactivity API into the Gutenberg project, albeit in an experimental capacity. Fresh documentation resources have also been prepared to guide you through this API’s exciting possibilities.

While the Interactivity API is experimental, you can already start exploring its potential, testing its features, and exploring what’s to come.

Interactivity API WordPress experiences

Interactivity API WordPress allows users to create engaging and interactive WordPress Support for website experiences. This experimental API presents new opportunities for creating dynamic and interactive content.

It is a project in the early stage of development, but with which you can already be amazed by browsing the test website that has been set up in https://wpmovies.dev.

Just browse the web, do a search, turn the page, click on the labels, on a tab, whatever, the response is totally immediate, without any page reload, which It is the closest thing to immediate navigation, practically in real time and without any waiting time on the site.