The WordPress Interactivity API (IAPI) represents a paradigm shift in how developers create dynamic, reactive user experiences within the Block Editor ecosystem. This hands-on workshop guides participants through building a fully functional interactive gallery slider block from scratch—demonstrating real-world application of the IAPI’s core concepts while extending functionality to include carousel mode and mobile-friendly swipe gestures.
Attendees will learn to leverage existing WordPress core blocks (Cover, Media & Text, Image) as slides within a custom slider architecture, extending their functionality through PHP filters and the powerful WP_HTML_Tag_Processor class. The workshop covers essential IAPI concepts including stores, state management, context, directives, actions, and callbacks.
Participants will gain practical experience with:
- Configuring blocks for interactivity via block.json and viewScriptModule
- Implementing directives (data-wp-interactive, data-wp-on, data-wp-bind, data-wp-style, data-wp-init)
- Managing state vs. context for optimal reactivity
- Creating derived state using JavaScript getters
- Filtering and extending core blocks for IAPI compatibility
- Adding Inspector Controls for carousel settings
- Handling touch events (touchstart, touchmove, touchend) for mobile swipe navigation
By the end of this workshop, attendees will have built a production-ready gallery slider featuring previous/next navigation, carousel mode with infinite looping, auto-play functionality, touch-enabled swipe gestures for mobile devices, and smooth CSS transform transitions—all powered by a reactive store architecture.