Info The Interactivity API, introduced in WordPress 6.5, provides a standard way for developers to add interactions to the front end of their blocks.
| Folder | Short description | Tags | ID (❓) | Download .zip | Live Demo |
|---|---|---|---|---|---|
| 📁 | Interactivity Router (regions) example | INTERACTIVITY API, INTERACTIVITY ROUTER |
2f43f8 |
📦 |  |
The interactivity-router-2f43f8 block allows to have inner blocks wrapped in the region with ID region-example-2f43f8. This allows to have different instances of the block with different content.
When navigation happens from a page A with regionregion-example-2f43f8to another page B with region region-example-2f43f8 and that navigation is done via using actions.navigate (from wordpress/interactivity-router), then the content from region region-example-2f43f8 on B is brought to region region-example-2f43f8 on A. The URL is also update in the client side.
This example contains:
- A block that can contain inner blocks
- A block with attributes
prevandnextand Inspector controls to edit this values - The markup used in
render.phpuses the directivedata-wp-router-regionto establish a router region which content may vary on each instance of the block.
Check the following resources for more info about the Interactivity API:
- Interactivity API docs
- Interactivity API Examples
- “Interactivity API” category in Gutenberg repo discussions
Note Check the Start Guide for local development with the examples