Interactive Block using Interactivity API

This block has been created with the create-block-interactive-template and 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	📦

Understanding the Example Code

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

Related resources

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