Interactivity Api Quiz Block

The goal of this example is to show how to use the Interactivity API to communicate info between two blocks.

This example has been adapted (to use the latest API of the Interactivity API) from the original example used for the WordCamp Europe 2023 workshop, Building Interactive blocks workshopby Luis Herranz. The recording of this workshop is available here.

Example	Description	Tags	Download .zip	Live Demo
Interactivity API Quiz	Demonstrates building an interactive quiz interface using the WordPress Interactivity API.	interactive-block interactivity-api	📦

Understanding the Example Code

Some key ideas for this example are:

• Both blocks share a common store named quiz-1835fa-project-store
• Each quiz has a unique ID which is stored in the local state (its context) of each quiz
• For quiz-1835fa block, the components used to define the controls in the sidebar are defined in a component apart (editControls.js)

Related resources

• https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/

---

Note Check the Start Guide for local development with the examples