What is the Interactivity API in WordPress 6.5?

WordPress 6.5 is set to introduce the groundbreaking Interactivity API, a lightweight JavaScript library built on preactjs. Its primary objective is to standardise the reactive manipulation of HTML elements, revolutionising how developers interact with WordPress websites.
Traditionally, developers utilized various methods in vanilla JavaScript to achieve similar results. However, managing these approaches becomes cumbersome and unwieldy as applications grow more complex. The Interactive API addresses this challenge by simplifying the process.
In this video I'll walk through how to set it up and develop a simple but pratical calculator.
All links and references
Here is the link to my Github repo
github.com/eirichmond/interac...
Here’s the node package template command
npx @wordpress/create-block@latest pizza-dough-calculator --template @wordpress/create-block-interactive-template
More on scaffolding your first Interactivity block using npx
developer.wordpress.org/block...
More documentation on the Interactivity APIdeveloper.wordpress.org/block...

[@ian-tumulak]

Superb content. In a span of 15 minutes, you explain the basic concept of Interactivity API.

[@elliottrichmondwp]

Thanks you so much, your feedback means a lot 🙏

[@SiteStudio]

I love that a hypermedia-driven tool is now native to WordPress. That said, I prefer using HTMX with my WordPress sites.

[@ivanbarta2821]

I have a very similar feeling

[@tsxpneo]

Clearest Interactivity API walk-through I've seen so far! thanks a lot!

[@elliottrichmondwp]

Thank you so much 🙏

[@tsxpneo]

@@elliottrichmondwp you're very welcome! One question, since you mention that you attented a workshop with one of the project leads. Was there any discussion about how to do the backend represenation of frontend interactive blocks? Just placeholders? I'm wondering because that runs counter to the "visual" editing idea in Gutenberg, doesn't it? But it's probably impossible to rebuild more complex inter-block-interactivity in react in the editor without a similar API. It would also mean duplicating a lot of code. So I'm wondering if there was a favored approach or if that issue wasn't even on their minds.

[@SHISHIRLIKESIT]

Thank you for the quick and informative tutorial! The pacing was excellent.
I'm really excited about the interactivity API. I've been using Vue JS for the front end by integrating my PHP templates. However, the main challenge is utilizing blocks within WordPress to achieve the desired interactivity.
The implementation in the Query Block is impressive:
a. You can use other blocks to style and adjust the layout.
b. It allows you to create interactivity without coding, provided the right blocks are available.
I would love to see an example that demonstrates building with multiple blocks and styling using existing blocks. For instance, creating functionality with input building blocks would be very helpful.

[@elliottrichmondwp]

Thanks 🙏 for your kind words, it means a lot. I’m interested in your last comment, can you provide more context? I’d love to create a video based on specific requests 😇

[@saqibKisana]

Thank you Elliott Richmond for producing this video.

[@elliottrichmondwp]

No worries!

[@nusapixelweb]

Not a developer, but so excited with what's possible with the Interactivity API.
Great explanation!

[@elliottrichmondwp]

Great to hear!

[@cdaveeeez]

Great video! You're very easy to listen to and learn from, please make more WP videos

[@elliottrichmondwp]

Thank you 🙏

[@visualmodo]

Truly good work!!!

[@elliottrichmondwp]

Thank you 🙏

[@cholo2605]

Great tutorial as always, thanks🚀🙏

[@elliottrichmondwp]

Appreciate it!

[@jamiewp]

Fab video 👍

[@elliottrichmondwp]

Thanks Jamie 😀

[@thebilalafsar]

Hey bro! Have you considered doing a WordPress speed tutorial or maybe a series geared towards freelancers, covering things like bug fixing or web development projects related to WordPress? It would be awesome if you could also do a dedicated tutorial on Core Web Vitals. Thanks!

[@theaminul]

I have a question, how to handle page navigation?? I mean how to handle headless route with Interactivity API??

[@elliottrichmondwp]

There is a package you can dyamically import for routing developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/ its already being used in the Query Loop block.
You can also see an example of this in core query block's view.js file github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query/view.js

[@mahmodissa4169]

Hey, thanks for this awesome video, can you share the repo link please?

[@elliottrichmondwp]

Oh sorry, I meant to add that to the description, check again in 5 mins