WP Briefing: Episode 73: Inside the Interactivity API

Feb19
by Ike on February 19, 2024 at 12:00 pm
Posted In: Uncategorized

In the latest WordPress Briefing, Josepha Haden Chomphosy discusses the Interactivity API, a new foundational tool that helps developers create memorable interactive front-end experiences. She is joined by special guests and sponsored contributors Ryan Welcher and Mario Santos, who share more about this impactful addition to the WordPress developer experience.

Credits

Host: Josepha Haden Chomphosy
Guest: Mario Santos
Guest: Ryan Welcher
Editor: Dustin Hartzler
Logo: Javier Arce
Production: Brett McSherry
Song: Fearless First by Kevin MacLeod

Show Notes

Transcripts

[00:00:00] Josepha: Hello, everyone, and welcome to the WordPress Briefing, the podcast where you can catch quick explanations of the ideas behind the WordPress open source project, some insight into the community that supports it, and get a small list of big things coming up in the next two weeks. I’m your host, Josepha Haden Chomphosy. Here we go. 

[00:00:29] (Intro music) 

[00:00:40] Josepha: I have with me today a couple of guests, Ryan Welcher and Mario Santos, who have joined me to talk about the Interactivity API. This is an API that we’ve been working on for quite a while, and it’s a fascinating thing. It’s really specifically user-facing in its functionality but makes a lot of work streamlined for everyday developers, whether you are building something for yourself, for your family, or for a client. This whole project probably is gonna really speak to you. 

[00:01:10] Josepha: Hi, guys, and welcome to the show. First-time guests, both of you. Right?

[00:01:15] Ryan: Yes. First time for me.

[00:01:17] Mario: Thanks for inviting us.

[00:01:18] Josepha: Yeah. Well, why don’t you tell us a little bit about yourself, like your name, what you do with WordPress, how you contribute to the project, something like that?

[00:01:27] Ryan: I can go first. My name is Ryan Welcher. I’m a developer advocate and sponsored by Automattic. Then, I contribute full-time to the WordPress project by creating documentation, doing live streams, creating videos, and just generally trying to be helpful in in the space to help engineers and extenders work with the various APIs in WordPress.

[00:01:46] Josepha: I love the just generally trying to be helpful part. Mario, what about you?

[00:01:52] Mario: He really is. He really does it.

[00:01:54] Josepha: I know.

[00:01:55] Mario: I’m Mario Santos. I’m also a sponsored contributor, and I’m more focused on the project management and developer. I consider myself a mix of both. Right now I’m working on projects that are focused on improving the developer experience especially. That can go from the Block API to the Interactivity API; that is the topic today.

[00:02:16] Josepha: Very nice. Very nice. Just lots of helping that everyone’s trying to do. I think that’s a good thing.

So, we’re talking about the Interactivity API today. And, Mario, I believe it was almost a year ago that you first put this proposal out into the WordPress project. Do you wanna tell us a little bit about just, like, where the idea of this came from? Like, I know it wasn’t originally called the Interactivity API, but, like, what was you said you do some a bit of product, a bit of development. Like, what was it about this idea that was so important to you?

[00:02:48] Mario: Yeah. Sure. So, basically, well, the proposal came, like, one year ago, but it has been in the works, like, for many years, I would say. Just to give a bit more context, previously, before being a sponsored contributor, I was working at a startup called Frontity Framework, and we were building a React framework to enable rich user experiences on top of WordPress.

[00:03:13] Mario: So basically, it was a framework for headless WordPress. And at some point, we became sponsored contributors, the idea was to bring those user experiences to those rich and cool websites that lead to WordPress. So, you don’t need an external framework to create them, and you can do that directly in WordPress. So that’s where the idea of the Interactivity API comes from. From there, we started exploring different possibilities and tailoring it more to WordPress to ensure it works with its APIs.

And I think after many many months working on that, the Interactivity API is the result.

[00:03:54] Josepha: I just wanted to note that you started that answer with, like, the proposal was about a year ago, but the work had been happening for a long time. I think that’s generally true, and it’s not something that we always really acknowledge. This happens with patents also. This is going to be a strange tangent, but this is how we do in in my brain. This is how my brain works. So frequently, you’ll see a brand new product, but the patent for it was, like, 30 years beforehand, like, way before you ever see anything. And I think that’s kinda how this works also with software development. Like, the idea, has been going for a long time.

[00:04:27] Josepha: The problem was identified a long time ago. And by the time you see something that helps to solve the problem or bring a new set of features to you, like, you didn’t know, but it had been being worked on for, like, five years or something. And I think that’s such a fascinating thing. That’s always apparent to me, but I think it’s not really apparent for a lot of people in the, in I don’t know, who use software.

I was gonna say in the space, quote, unquote, but that’s not even it. Like, it’s the people who are using software. We don’t know how long anything’s been under development. We just know that at some point, a magical thing appeared, and we get to use it. 

[00:05:03] Josepha: So speaking of the problems that we have identified that we’re trying to solve with this. Like, was there an inherent problem that you all were trying to solve as you were coming up with this idea around the Interactivity API itself?

[00:05:16] Mario: I would say that trying to summarize it, it covers many things, but the main problem was that creating those kinds of interactions in the client was kind of difficult. You had to manage many things many tools, and each developer could come up with different solutions, and maybe they don’t combine well together. So, the idea is to provide an extended way so developers don’t have to take care of many things. They just have to take care of the interactions they wanna create. And ensuring that it works well with the WordPress way, it works well with the block system, and any block created with this Interactivity API can communicate with each other. You can combine those blocks, and you are not gonna encounter any problem. So, I would say that the main issue we were trying to solve is that there wasn’t a standard solution. There were different approaches taken by different developers, and that could create some issues. So, until now, Gutenberg has been mainly focused on the editor side and how blocks are created. And this is a first attempt to to cover the part of the front end, the interactions that users may want to create in the front end.

[00:06:31] Ryan: It solves a ton of problems. But, I mean, coming from someone like, I have a fair amount of agency experience. I’ve been, you know, you’re working on large projects. And every time someone solves a problem, they solve it slightly differently. And that’s problematic because you switch teams or, you know, someone else picks up the code base, and all of a sudden, now they have to learn your custom system that’s slightly different from the one that I built last week and the one that, you know, someone else built two weeks earlier. And this takes the guesswork out. It takes the sort of the plumbing out of the equation. One of the reasons I really loves working with WordPress when I started working with WordPress was that when I was building for clients, I didn’t have to worry about building the CMS. I didn’t have to worry about building a menu system or figuring out how to handle media.

[00:07:10] Ryan: I just had to do the things that that client was paying me to do. Like, I just had to make their site look the way that they wanted it to. And with the Interactivity API, I think there’s a bit of that where I don’t have to worry about figuring out how am I gonna get all these pieces to talk to each other on the front end. It’s all there. I just have to connect the dots, and it makes it very, very simple.

I’m building the site right now for a workshop that I’m gonna be giving a WordCamp Asia, which is a a shameless plug. Sorry.

[00:07:33] Josepha: Coming up so fast, y’all. WordCamp Asia is, like, two weeks away.

[00:07:37] Ryan: I’m so excited. I have so much work to do.

But I’ve built an entire voting system on a website where people can pick what we’re going to be talking about in my workshop, and I built it in the Interactivity API, and it took me, you know, probably five hours. And that’s me trying to learn some things and mess around with it. And to do that without the Interactivity API would have probably been an entire React-based, you know, completely outside of WordPress. I would have loaded one thing on the page and had it build out my whole application, and now I’m doing it with blocks and I’m doing it with a block theme. So if I wanna move those blocks around. I can move the blocks around. I can change anything that I wanna change inside of WordPress the way I would normally, and all that in interactivity just still works. And that’s It’s awesome. I just I love it. I can’t like, the Interactivity API, not my website. 

[00:08:26] Josepha: But also both. Like, it can be both. 

[00:08:28] Mario: I wanted to say that I think it’s a great point. I like to think about it like having the best of both worlds. Right now, we have modern frameworks like React, Vue that are used to create these cool websites.

And I think the Interactivity API plus WordPress brings everything together. Like, you can create those cool user experiences while keeping the full power of WordPress, its management system, the Block editor, and to be honest, I don’t think there’s anything like that out there. Like having the best of both both worlds because we are still working with blocks, and that’s amazing. 

[00:09:04] Ryan: Given that it’s still, it’s not even been released yet. Like, it’s coming very soon. But.

[00:09:08] Josepha: Yeah. This is all still in the Gutenberg plugin. So, like, if you don’t know what we’re talking about, get the Gutenberg plugin.

[00:09:16] Ryan: But just how mature the API is now, considering it is still kind of not even fully released, it’s only gonna get better? I just think it’s awesome.

So, kudos to Mario and your team for doing all this stuff.

[00:09:28] Mario: Thank you. Kudos to everyone involved.

[00:09:32] Josepha: So, I’ve a question that I think probably, Ryan, you can start with, but then also probably, Mario, you’re gonna have some opinions on also. In this conversation so far, we’ve done a lot of, like, when you want to have these interactions and also when you want to have these cool experiences. For folks who actually do not know what the Interactivity API is yet, and they don’t know what we’re talking about when we say these interactions like, what exactly are we talking about from a user perspective?

Like, what types of things will users be able to see when they are experiencing the Interactivity API’s features and functionality.

[00:10:07] Ryan: I think it’s a great question. From a user standpoint, it’ll just look like your regular website, I think. Depending on what you’re doing. So, like the interactions that we’re talking about is when you’re in the browser and you wanna click a button and expand something, for example, or you wanna click an image and have the lightbox pop-up, which is in core now, that’s driven by the Interactivity API, but these interactions are basically when a user wants to interact with something, what it does. That’s a really generic way of saying it. 

[00:10:34] Josepha: Our current favorite example and, Ryan, it sounds like you also have another example. But our current favorite example is like a movie collection site, you know? And so, like, when we’re talking about what the Interactivity API is going to power, it’s things like, when you favorite a series of movies, and then you can, and it just updates that on the fly, and you’ll be able to in essentially real-time as instant as reasonably possible based on your computer and stuff.

[00:11:03] Josepha: Like, then look at your list of things that you favorited or things like that. Like, for folks who don’t understand interactive site like, all of us know that that, like, if you get on a site, you have interacted with it. But when we’re talking about Interactivity API, we’re talking about types of direct actions users can take. Right? 

[00:11:19] Mario: I would say yes.

They are just only triggered by some actions. It could be scrolling, clicking, or, or whatever. But, it can go from a simple example like drop down or a popover to more complex things like the movies demo, where you can navigate and the page is not reloading, and that allows you to play a trailer. It starts in a pop-up, and you can keep navigating through different pages, and the trailer keeps playing without reloading. Another example could be instant search; like you start typing the search, and it directly updates the list of films, in this case, that are shown, those kinds of things that happen In the browser. 

[00:12:00] Josepha: And Ryan said you, you said that you, like, built a whole survey system, A whole polling system. 

[00:12:06] Ryan: Yeah, a voting system. So there’s a series of buttons, each one representing a certain topic, and people can vote, and it tallies the amount. So each, I’m calling them recipes, has amount of time associated with it, and then so you vote until you run out of time, at which point, like in its tracking it all, and it’s showing you how much time you voted, how much is left, and once you’ve run out of time it blurs like it disables all of the voting buttons so you can’t add more because you run out of time.

[00:12:30] Ryan: So if you remove one, you can add again. It’s very, very powerful. And, like, before the Interactivity API, you would have to have, I would have built that whole thing in React, and it would have been one single application that just get loaded on a page. And I just think it’s amazing. And, like the, the ability to create what are called, like, single page applications or what have always sort of been called SPAs or single page applications where you’re not reloading the browser every single time you click on a link.

You have to do some things to make that work, but that’s just available to you and in WordPress. That’s amazing. I just think that’s so neat. I mean, it’s already powering things like the Query Loop block has the ability to move pagination without reloading the page, which is, sounds like a sort of a like a okay, great, like sort of, you know, mundane thing but imagine you had two or three different query loops sitting on your homepage and you wanted to be able to paginate through each one and not refresh the page. That’s a fantastic user experience that now is just enabled and otherwise was not possible prior to the Interactivity API.

[00:13:28] Josepha: I feel like the Query Loop block was, like, a three-year project four years ago. And I had forgotten about it, which is surprising because I was so concerned with it when we were working directly on it all the time. But yeah. Yeah. That’s exactly the kind of example. 

So we’ve talked about kind of the user thing and people who are gonna build stuff for clients. But, like, if you’re a contributor and you want to figure out more about either how to use this or how to expand on what is already there.

[00:14:01] Josepha: We already talked about how it’s in the Gutenberg plugin. It’s kind of experimental over there. But, like, do you all have like, good first bugs? Things that can be worked on in there? Or is there, like, an experiment zone where people can just be like, this is what I tried with the Interactivity API until it broke? How do people work with that?

[00:14:20] Mario: I would like to clarify first, it’s right now, it’s private in, it’s a private API in WordPress core in 6.4, And it’s public in Gutenberg, but it’s gonna be a public API already in WordPress 6.5. So, yes. Anyone can start testing it.

The best way to get involved is first sharing what interactions you want to see. I mean, everyone has different ideas, and we will love to know the interactions that people want to create using the Interactivity API, so that would be the first step. Then, test it, create your own blocks or site, and send feedback what do you like what you don’t like. Raise issues, and for that, we are mainly using GitHub. We created a new category in GitHub in the Gutenberg plugin discussions, and we try to to keep everything there.

[00:15:13] Mario: So if you have any questions any feedback, you can share it there. You can also find more discussions about the road map, the change log, many things that are going on right now. And, yeah, I would say those are the ways of getting involved, and I can also expect, maybe Ryan can tell you more here, to start working more on tutorials or videos or whatever. And for me, personally, I would love to see the community working on that as well.

[00:15:43] Ryan: Yeah. I can, yeah. I think that from a contributor standpoint, especially those who are trying to get into contributing, because, I mean, it’s not not complicated. Let’s put it that way, like the Interactivity API. And that’s not meaning to be a barrier to anyone, but a great place to start is documentation. A great place to start is going through those docs and making sure they’re up to date and, you know, saying, oh, well, that’s supposed to do this, so let me go try that. And if it works, great. If it doesn’t, you know, file a bug, update the documentation, that’s a great way to get started. It’s gonna familiarize yourself with the code base and what it’s supposed to do. And then, sort of, just through osmosis, you’ll start to pick up more about it. And for anyone starting to contribute to the WordPress project in general, I would say starting with documentation or unit testing is a really, really great way to kinda, dip your toe in the water and not feel too frustrated. And tutorials and demos and show us what you’re building. We wanna see it. I mean, send it to me, and I will show everyone that I know.

[00:16:40] Ryan: I mean, we wanna see what what people are building with it and because, you know, just like WordPress, I always use this example, but, like, people used to hack WordPress until we got a hook added for that particular thing that they were adding. So, if we don’t know what people are building or wanting to build with it, we can’t make those things happen. So knowing what people are building, how they’re building, and what they can’t build, what they’re running into, what issues they’re running into is the best way to contribute. So, so people smarter than me can build it for you. 

[00:17:08] Josepha: I love that call out, frankly.

So there’s, you know, the theory of tech adoption. And for things like the Interactivity API where we’re still kind of in the early adopter phase like, Ryan, you’re an early adopter. You’re doing everything you think you want to be able to do until it breaks. And, like, I love, like, test it till it fails as a concept of how to get involved in something because, like, you’re just experimenting, and we encourage experimentation in open source and in open source software and certainly in WordPress. And so, like, it is an unusual thing to think of, like, the best way that I can give back to this project, that I can contribute to this project and make sure that it continues to succeed long term is by using it until the wheels fall off and then tell people what made the wheels fall off.

Like, that is a change in thought, But you’re right. Like, it’s a very old school open source idea to just get in there and see where it breaks, and tell us. That’s it. That’s all we need. And I love it.

[00:18:08] Josepha: But I just passed my 9-year anniversary being a sponsored contributor, and I was in WordPress for a little bit before it. And so, like, I’m officially the old guard of us, and so the fact that I’m, like, so excited about the fact that people are gonna come in and break Mario’s stuff. Mario, don’t be scared. It’s how it works. But also, like, I do find that very exciting.

[00:18:31] Mario: I’m willing to see how people break things; that’s what we need. I totally agree with your reasoning.

[00:18:38] Josepha: Exactly. So I do have kind of, just, like, a final question for y’all. If there were one thing that you wanted the people who are listening to the WordPress Briefing to know about the Interactivity API, like a hidden gem, a little secret trick. Like, what would it be?

[00:18:57] Mario: For me, the most exciting part of the Interactivity API is the functionality the client-side navigation enables because there are many, many things there. And I’m sure that there are many things we haven’t thought about yet, and the community will come up with some ideas and that would be amazing.

[00:19:17] Ryan: For me, the thing is, I love how integrated it is with WordPress, and I know a lot of thought has gone into that without getting too into the weeds. The reasons the decisions that were made were made was so all the hooks and filters and all that goodness that we’ve had for 20 years is still gonna work. And with the HTML API, the tag processor stuff that’s going on behind the scenes, it’s just so cool. It works so well with WordPress. It just works and that’s probably it for me.

When I work with it, I’m not having to do any weird janky filtering or stuff that, like, you know, the things that I want to do are not hindered by the Interactivity API. The rather, I’m able to do more things because of it.

[00:19:58] Mario: I prefer Ryan’s answer.

[00:20:00] Mario: It’s something really important and it’s something we usually take for granted that it just works with WordPress APIs and the Block Editor, but if you think more about it, it’s amazing. Like, It’s what makes it really powerful, I I believe.

[00:20:15] Josepha: For what it’s worth, I think that’s true for a lot of, like, the R&D type things that we’re working on in the project right now. Right? Across Our ecosystem, like WP Playground. It is mind-boggling how progressive that is as a concept, and we currently have, like, you know, 25 ideas about what we could do with it, and we’re currently working on, like, five because we’ve got two and a half developers on it or something.

But, like, the expectation that it will just work is there for everybody who has, is not part of the R&D process, but for everyone else who’s, like, been watching its development over time, shocking. Shocking that it works at all. Not because it wasn’t supposed to work, but because, like, if someone had asked you five years ago if it was gonna be possible to run WordPress development environments locally and then also just export it and import it into whatever host you want. Like, without a host, without a server, we would all think that you were nuts. 

[00:21:22] Josepha: Amazing what’s happening there and, like, some of the things that we’re seeing, people who are, like, researching with AI in the WordPress space doing? Equally shocking. All of these things. Like, had you said anything to me about it five years ago, I’d be like, well, that is a mystery. So, every once in a while, I do have wild ideas about things that I wish we could do with our software. And so yesterday, I went and looked at a prototype for something that someone built based on a wish that I had in 2019. In 2019, I was like, you can play Skyrim on an Amazon Dot using just your voice. So like, why can’t we build a website?

[00:22:01] Josepha: And then in 2021, someone prototyped that for me. It was ridiculous. It was very bad. It was hilarious. But, also, like, it took 35 minutes to create a ‘Hello world’ page, which was ridiculous.

And now, like, what we’re looking at, the research that I keep seeing from that AI space is people saying, like, I’m gonna put in a plain text prompt. I need a website as a yoga instructor who also makes custom hats. Right? And then, like, poof. You have this thing that kinda looks like a website with your basic functions and features using the blocks that we have created for WordPress. Like it’s fascinating how far it’s come. And that’s in 2021. It was literally impossible the last time that I was talking about it with anyone, equally literally impossible. Everyone’s like, plain language prompts for stuff, like that is just a pipe dream. Get away from us.

And now I keep seeing, like, these demos of the research, and it’s not as far away as we all thought it was. For all these things, Playground, Interactivity API, The AI research is being done. Like, we’re just a walking R&D group over here in WordPress, and I love it. It’s fascinating. We’re just making the impossible possible every day, and I think that’s really cool.

[00:23:16] Ryan: So cool.

[00:23:18] Josepha: Sorry. I got really sidetracked. Do y’all have anything that you wanted to be sure to share about either the Interactivity API or anything that’s coming up? Something you wanna make that our listeners know? 

[00:23:29] Mario: I would just like to emphasize that we love feedback. Please share your feedback. If you test it, yeah, if you think it’s bad feedback, share it with us as well.

That’s especially the feedback we like. I don’t like this part. That’s great. We we want to know because the idea is that it serves all purposes for this kind of interactions. 

That nothing new, but I would like to emphasize that part.

[00:23:56] Josepha: You know what? There’s nothing new under the sun. It’s fine. You’re good. You should always tell people what you need.

[00:24:01] Ryan: If you’re interested in getting started with the Interactivity API and just don’t have any idea where to begin, there’s actually a pack there. There’s a Create Block template. So the Create Block package allows you to to quickly scaffold blocks.

And there’s a template that’s part of the Gutenberg repository. It’s been published on it and NPM. And it will scaffold a very simple block out for you and it’ll give you, it’ll show you all the plumbing and how all the pieces work together. So, I think that’s a fantastic place to get started. It’s a very simple block. It just basically shows and hides a message, but it’s all done via the Interactivity API, but it’s a really, really great sort of, like, like, ‘Hello world’ style. I’m gonna shamelessly self-promote myself at WordCamp Asia. I’ll be at WordCamp Asia this year doing a workshop where I will be doing some stuff with your Interactivity API. But, if you’re there and you wanna chat more about the Interactivity API, I am all ears, and I love talking about this stuff.

[00:24:51] Josepha: Cool. Ryan, Mario thank you so much for joining me today. This has been a wonderful conversation.

[00:24:58] Ryan: Thank you.

[00:24:58] Mario: Thank you.

[00:25:01] Josepha: So I hope that you all find that whole project as fascinating as I find it. The Interactivity API is, I know, something that we’ve kind of been talking about for a while. It showed up specifically in State of the Word, and it’s hard to understand how important, how vital that work is going to be until you really get your hands on it.

So I recommend you get in there. You take a look at it. I think also Ryan has a few live streams that he does, and he’s planning on a couple for the Interactivity API coming up. And so just keep an eye out for all of that as we go. 

[00:25:37] (Music interlude)

[00:25:49] Josepha: Now that brings us to our small list of big things.

Today, it’s a bunch of feedback and documentation. So, first things first. Did you know that the Documentation Team holds an online monthly Contributor Day on the fourth Tuesday of every month. It’s just an online docs day, and I love it. So, the next one that’s coming up is February 27th. We’re looking for folks to help. So show up, figure out how to get some docs done, and make the WordPress project easier to follow, one bit of documentation at a time. 

[00:26:16] Josepha: The next thing that I have is a request for feedback. So, we announced in December that we have a new centralized WordPress events landing page on WordPress.org, and we wanted to give more visibility to all kinds of WordPress events across the globe. But as always, we really could use your feedback about what is useful for you, what you had hoped to see, what you didn’t see. So, leave your comments with any relevant feedback about how you would improve those pages and the text on it. If you’re missing anything relevant, if there are ideas that you have for what could be there, all ideas are welcome. 

And then, the third thing that I have on our list today is another documentation thing. So, over the last year, a group of contributors have been working to improve the block development onboarding experience within the Block Editor handbook. That contains over 400 published pages, and the effort in 2023 to kind of overhaul that and make it easier was just the beginning. So, it’s a daunting task. It’s big. It’s complex, but improving documentation is one of the easiest ways to contribute to the WordPress project, especially If there are just quick fixes like typos or formatting. Feedback on the existing content, such as the new block tutorial, is invaluable. And so, if you have not taken a look at those yet, wander over to the show notes, click a link or two, take a look, get some feedback to us. 

[00:27:41] Josepha: And that, my friends, is your small list of big things. Don’t forget to follow us on your favorite podcast app or subscribe directly on WordPress.org/news. You’ll get a friendly reminder whenever there’s a new episode. If you like what you heard today, share it with a fellow WordPresser. Or, if you had questions about what you heard, you can share those with me at [email protected]. I’m your host, Josepha Haden Chomphosy. Thanks for tuning in today for the WordPress Briefing, and I’ll see you again in a couple of weeks.

[00:28:09] (Music outro)