Note This package is a extension of the API shared at Proposal: The Interactivity API – A better developer experience in building interactive blocks. As part of an Open Source project we encourage participation in helping shape this API and the discussions in GitHub is the best place to engage.
This package defines an Interactivity API store with the core/router
namespace, exposing state and actions like navigate
and prefetch
to handle client-side navigations.
The package is intended to be imported dynamically in the view.js
files of interactive blocks.
import { store } from '@wordpress/interactivity';
store( 'myblock', {
actions: {
*navigate( e ) {
e.preventDefault();
const { actions } = yield import(
'@wordpress/interactivity-router'
);
yield actions.navigate( e.target.href );
},
},
} );
At this point, some of the questions you have about the Interactivity API may be:
This is the base of a new standard to create interactive blocks. Read the proposal to learn more about this.
You can test it, but it's still very experimental.
The best place to start with the Interactivity API is this Getting started guide. There you'll will find a very quick start guide and the current requirements of the Interactivity API.
The “Interactivity API” category in Gutenberg repo discussions is the best place to ask questions about the Interactivity API.
The “Interactivity API” category in Gutenberg repo discussions is also the best place to share your feedback about the Interactivity API.
Install the module:
npm install @wordpress/interactivity --save
This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default
in your code.
Interactivity API Documentation is the best place to learn about this proposal. Although it's still in progress, some key pages are already available:
- Getting Started Guide: Follow this Getting Started guide to learn how to scaffold a new project and create your first interactive blocks.
- API Reference: Check this page for technical detailed explanations and examples of the directives and the store.
Here you have some more resources to learn/read more about the Interactivity API:
- Interactivity API Discussions
- Proposal: The Interactivity API – A better developer experience in building interactive blocks
- Developer Hours sessions (Americas & APAC/EMEA)
- wpmovies.dev demo and its wp-movies-demo repo