This example demonstrates how to use regions with the @wordpress/interactivity-router package (see video)

Example	Description	Tags	Download .zip	Live Demo
Interactivity Router (regions) example	Shows how to implement client-side routing in blocks using the WordPress Interactivity API router functionality.	interactivity-api interactivity-router	📦

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 prev and next and Inspector controls to edit this values
• The markup used in render.php uses the directive data-wp-router-region to 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