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...
Пікірлер: 24
Superb content. In a span of 15 minutes, you explain the basic concept of Interactivity API.
@elliottrichmondwp
6 күн бұрын
Thanks you so much, your feedback means a lot 🙏
Clearest Interactivity API walk-through I've seen so far! thanks a lot!
@elliottrichmondwp
3 ай бұрын
Thank you so much 🙏
@tsxpneo
3 ай бұрын
@@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.
Thank you Elliott Richmond for producing this video.
@elliottrichmondwp
3 ай бұрын
No worries!
I love that a hypermedia-driven tool is now native to WordPress. That said, I prefer using HTMX with my WordPress sites.
@ivanbarta2821
2 ай бұрын
I have a very similar feeling
Not a developer, but so excited with what's possible with the Interactivity API. Great explanation!
@elliottrichmondwp
3 ай бұрын
Great to hear!
Great video! You're very easy to listen to and learn from, please make more WP videos
@elliottrichmondwp
Ай бұрын
Thank you 🙏
Great tutorial as always, thanks🚀🙏
@elliottrichmondwp
3 ай бұрын
Appreciate it!
Truly good work!!!
@elliottrichmondwp
3 ай бұрын
Thank you 🙏
Fab video 👍
@elliottrichmondwp
3 ай бұрын
Thanks Jamie 😀
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!
Hey, thanks for this awesome video, can you share the repo link please?
@elliottrichmondwp
3 ай бұрын
Oh sorry, I meant to add that to the description, check again in 5 mins
I have a question, how to handle page navigation?? I mean how to handle headless route with Interactivity API??
@elliottrichmondwp
3 ай бұрын
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