This block has been created with the create-block-interactive-template as explained in Reference Guides > Interactivity API Reference > Quick start guide. This example shows a basic structure of an interactive block that uses the Interactivity API.

Example	Description	Tags	Download .zip	Live Demo
Interactivity API Block	Demonstrates the usage of WordPress's Interactivity API to create blocks with enhanced interactive capabilities.	create-block-template interactive-block interactivity-api	📦

The block of the example has dynamic render defined at render.php and it enables the interactivity API via block.json("supports": { "interactivity": true })

• The store for the block is defined at view.js that will be loaded in the frontend when the block is displayed
• The markup used in render.php use directives such as data-wp-interactive, data-wp-on--click, data-wp-bind--hidden, data-wp-context or data-wp-effect
• The store for the block is defined at view.js that will be loaded in the frontend when the block is displayed

Check the following resources for more info about the Interactivity API:

• Interactivity API docs
• @wordpress/interactivity package
• Proposal: The Interactivity API – A better developer experience in building interactive blocks
• “Interactivity API” category in Gutenberg repo discussions
• Make WordPress posts with tag interactivity-api
• Interactivity API docs

Note Check the Start Guide for local development with the examples