{"id":2595,"date":"2026-08-09T08:17:18","date_gmt":"2026-08-09T15:17:18","guid":{"rendered":"https:\/\/canada.wordcamp.org\/2026\/?post_type=wcb_session&#038;p=2595"},"modified":"2026-08-09T09:44:41","modified_gmt":"2026-08-09T16:44:41","slug":"building-dynamic-gallery-experiences-with-the-wordpress-interactivity-api","status":"publish","type":"wcb_session","link":"https:\/\/canada.wordcamp.org\/2026\/session\/building-dynamic-gallery-experiences-with-the-wordpress-interactivity-api\/","title":{"rendered":"Building Dynamic Gallery Experiences with the WordPress Interactivity API"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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\u2014demonstrating real-world application of the IAPI\u2019s core concepts while extending functionality to include carousel mode and mobile-friendly swipe gestures.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Attendees will learn to leverage existing WordPress core blocks (Cover, Media &amp;amp; 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Participants will gain practical experience with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Configuring blocks for interactivity via block.json and viewScriptModule<\/li>\n\n\n\n<li>Implementing directives (data-wp-interactive, data-wp-on, data-wp-bind, data-wp-style, data-wp-init)<\/li>\n\n\n\n<li>Managing state vs. context for optimal reactivity<\/li>\n\n\n\n<li>Creating derived state using JavaScript getters<\/li>\n\n\n\n<li>Filtering and extending core blocks for IAPI compatibility<\/li>\n\n\n\n<li>Adding Inspector Controls for carousel settings<\/li>\n\n\n\n<li>Handling touch events (touchstart, touchmove, touchend) for mobile swipe navigation<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2014all powered by a reactive store architecture.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build a fully interactive gallery slider from scratch using the WordPress Interactivity API \u2014 directives, state, and mobile swipe gestures.<\/p>\n","protected":false},"author":7543064,"featured_media":0,"template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_wcpt_session_time":0,"_wcpt_session_duration":3000,"_wcpt_session_type":"session","_wcpt_session_slides":"","_wcpt_session_video":"","_wcpt_speaker_id":[2591],"footnotes":""},"session_track":[],"session_category":[55,60],"class_list":["post-2595","wcb_session","type-wcb_session","status-publish","hentry","wcb_session_category-interactivity-api","wcb_session_category-workshop"],"jetpack_sharing_enabled":true,"session_date_time":{"date":"","time":""},"session_speakers":[{"id":"2591","slug":"ryan-welcher","name":"Ryan Welcher","link":"https:\/\/canada.wordcamp.org\/2026\/speaker\/ryan-welcher\/"}],"session_cats_rendered":"Interactivity API, Workshop","_links":{"self":[{"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions\/2595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":3,"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions\/2595\/revisions"}],"predecessor-version":[{"id":2828,"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions\/2595\/revisions\/2828"}],"speakers":[{"embeddable":true,"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/speakers\/2591"}],"author":[{"embeddable":true,"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wporg\/v1\/users\/welcher"}],"wp:attachment":[{"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/media?parent=2595"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/session_track?post=2595"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/canada.wordcamp.org\/2026\/wp-json\/wp\/v2\/session_category?post=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}