Building Interactive Blocks with the Interactivity API

• Ryan Welcher, Automattic

Pre-Workshop Setup Checklist

To avoid wifi bottlenecks on the day, please complete this before you arrive:

1. WordPress Studio — Download and install WordPress Studio.

2. Create a site from the blueprint — Download the blueprint.json file from this repository. In Studio, click Add site → Start from a blueprint → Choose blueprint file and select the downloaded file.

   Set the WordPress version to latest in the Advanced settings of the Add a site dialog.

3. Node.js v20+ — Recommended via NVM:

    nvm install 20 && nvm use 20

4. Install JS dependencies in the workshop plugin directory:

    cd /path/to/your/studio/site/wp-content/plugins/iapi-gallery-slider
    npm install

Documentation & References

• Interactivity API docs
• @wordpress/interactivity package
• Block Editor Handbook
• WordPress Studio
• VSCode Extension: WordPress Interactivity API Helper

Welcome!

This is a self-guided walkthrough. Each section lives in workshop-outline/ and links to the next, so we can move at our own pace. Coding sections include an end-of-section snapshot under code-reference/section-N/ — if we get stuck or fall behind, we can copy that snapshot over src/ and pick up at the next section.

What Are We Building?

A WordPress block called Gallery Slider that turns any group of inner blocks (Image, Cover, Media & Text) into an interactive slider — clickable prev/next buttons, an optional autoplay with a configurable speed, optional continuous looping, plus touch swiping and an accessible keyboard / screen-reader experience. By the end we'll have built it from a static starter into a fully interactive block using nothing but the Interactivity API.

Structure

Sections 1, 2, and 4 are tour/reading and don't change any source files, so there's no code-reference/section-1/, section-2/, or section-4/ directory — that's intentional, not a missing snapshot.

Let's go! → Section 1