Exploring the Interactivity API in WordPress Part 2
04/29/24 • 29 min
Aurooba and Brian dig deeper into the WordPress Interactivity API. This episode mostly focuses on the HTML directives they used in their custom blocks, how they work with block markup, and how the Interactivity API uses them to hydrate data. Along the way they also compare it to other templating and logic tools like the ones in Laravel and Next.js from previous episodes.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
- https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api?discussions_q=is%3Aopen+category%3A%22Interactivity+API%22
- https://twitter.com/SethRubenstein
- https://twitter.com/DevelopWoo
- https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
- (00:00) - S03E14 Sequence
- (00:09) - Introduction
- (01:21) - Packages vs Feature Plugins
- (04:24) - Browsing the Documentation
- (08:24) - Preview of our frontend block
- (09:53) - HTML Directives
- (13:12) - Conventions for binding and events handlers
- (16:31) - Callbacks and Actions
- (18:37) - State, Context and Loops
- (20:04) - Using Attributes and Hydration
- (24:01) - Wrapping up and Next Steps
Aurooba and Brian dig deeper into the WordPress Interactivity API. This episode mostly focuses on the HTML directives they used in their custom blocks, how they work with block markup, and how the Interactivity API uses them to hydrate data. Along the way they also compare it to other templating and logic tools like the ones in Laravel and Next.js from previous episodes.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
- https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api?discussions_q=is%3Aopen+category%3A%22Interactivity+API%22
- https://twitter.com/SethRubenstein
- https://twitter.com/DevelopWoo
- https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
- (00:00) - S03E14 Sequence
- (00:09) - Introduction
- (01:21) - Packages vs Feature Plugins
- (04:24) - Browsing the Documentation
- (08:24) - Preview of our frontend block
- (09:53) - HTML Directives
- (13:12) - Conventions for binding and events handlers
- (16:31) - Callbacks and Actions
- (18:37) - State, Context and Loops
- (20:04) - Using Attributes and Hydration
- (24:01) - Wrapping up and Next Steps
Previous Episode
Exploring the Interactivity API in WordPress Part 1
So begins another project! This time back inside WordPress. Brian and Aurooba discuss the Interactivity API in WordPress. They explore how to use the API, the challenges they faced, and the benefits it provides. They also touch on JavaScript modules and how they are used in the context of the Interactivity API. The conversation ends with a discussion about future topics to cover in the series as they build out the plugin using the API.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
- Quick Start Guide - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/#quick-start-guide
- Interactivity API Proposal - https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/
- WP Movies - https://wpmovies.dev/
- Our demo repo - https://github.com/viewSourcePodcast/vs-reading-list
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
- (00:00) - Introduction
- (01:12) - Introducing the next project!
- (03:23) - What is the Interactivity API?
- (06:00) - The WooCommerce usecase
- (07:18) - How Interactivity API fits into the larger picture
- (10:02) - The Alpine.js Comparison
- (11:57) - So what project are we building?
- (15:24) - Tracking the list with Local Storage
- (16:44) - Using a resource already being loaded on the site
- (19:55) - How do you get started with the Interactivity API?
- (21:45) - What are JavaScript Modules?
- (32:56) - What's next in the series?
If you like this episode you’ll love
Episode Comments
Generate a badge
Get a badge for your website that links back to this episode
<a href="https://goodpods.com/podcasts/viewsource-254249/exploring-the-interactivity-api-in-wordpress-part-2-50274787"> <img src="https://storage.googleapis.com/goodpods-images-bucket/badges/generic-badge-1.svg" alt="listen to exploring the interactivity api in wordpress part 2 on goodpods" style="width: 225px" /> </a>
Copy