 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 Hayden-Champosy. Here we go. 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 going to really speak to you. Hi, guys, and welcome to the show. First time, first time guests, both of you, right? Yes, first time for me. Thanks for inviting us. 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. My name is Ryan Welcher. I'm a developer advocate and sponsored by Automatic, and I contribute full-time to the WordPress project by creating documentation, doing live streams, creating videos, and just generally trying to be helpful in the space to help engineers and extenders work with the various APIs in WordPress. I love the just generally trying to be helpful part. Mario, what about you? He really does it. I know, I know. I'm Mario Santos. I'm also a sponsor 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. 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 want to 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? 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 sponsor 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. So basically, it was a framework for helpless WordPress. And at some point, we became a sponsor contributors. The idea was to bring those user experiences, 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 they already need 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. 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 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 kind of how this works also with software development. Like the idea has been going for a long time. 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. 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 going to 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. 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? I would say that trying to summarize it, it covers many things. But the main problem was that creating those kind 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 a standard 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 was 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, on how blocks are created. And this is a first attempt to cover the part of the front end, the interactions that users may want to create in the front end. It solves a ton of problems, but I mean, coming from someone, like I have a firm of agency experience and I've been 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 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 someone else built two weeks for earlier. This takes the guesswork out. It takes the sort of the plumbing out of the equation. One of the reasons I really love 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. 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 going to 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 a site right now for a workshop that I'm going to be giving at WordCamp Asia, which is a shameless plug, sorry. It's coming up so fast, y'all. WordCamp Asia is like two weeks away. 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 want to move those blocks around, I can move the blocks around. I can change anything that I want to 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. But also both, like it can be both. No, 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 worlds. Because we are still working with blocks. And that's amazing. Given that it's still, it's not even been released yet. Like it's coming very soon. But 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. 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. Thank you, kudos to everyone. So I've got 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? That'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 want to click a button and expand something, for example. Or you want to click an image and have the light box 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. 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. 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 for all of us know 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? I would say yes. They're just triggered by some actions. It could be scrolling, clicking or whatever. But it can go from a simple example like drop down or a pop over to more complex things like the movies demo where you can navigate on the pages and 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. For example, it could be instant search that 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. And Ryan said you said that you like built a whole survey system, a whole polling system. 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 it's tracking it all and it's showing you how much time you voted, how much is left. And once you run out of time, it blurs like disables all of the voting buttons so you can't add more cause you've run out of time. 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 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 like, okay, great. Like sort of, you know, a 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 and now it's just enabled and otherwise was not possible prior to the interactivity API. I feel like the query loop block was like a three year project four years ago. And I had forgotten about it but it was just surprising cause 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. 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? I would like to clarify first. Right now 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 WordPress 6.5. So yes, anyone can start testing it. Yeah, the best way to get involved is first. Sharing what interactions you want to see. I mean, everyone has different ideas and we would 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 blogs or site and serve 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 the Gutenberg plugin discussions and we try to keep everything there. So if you have any questions, any feedback, you can share it there. You can also find more discussions about the roadmap, the changelog and 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. Yeah, I think that from a contributor standpoint, especially those who are trying to get into contributing because I mean, it's 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 saying, oh, well that's supposed to do this. So let me go try that and if it works, great. If it doesn't work, 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 or testing is a really, really great way to kind of 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. I mean, we wanna see 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 that they're running into, what issues they're running into is the best way to contribute. So people smarter than me can build it for you. 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. Cause 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 longterm 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 and tell us, that's it. That's all we need. And I love it. But I just passed my nine 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 I feel like I do find that very exciting. I'm willing to see how people break things. That's what we need. I totally agree with your reasoning. 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? For me, the most exciting part of the interactive API is the functionality, the client side navigation and APOs. 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 not be amazing. 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, it's so cool. It works so well with WordPress. Just, 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, you know, the things that I want to do are not hindered by the interactivity API. They're rather, I'm able to do more things because of it. I prefer Ryan's answer. 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. It's what makes it really powerful, actually. 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 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. 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, 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? 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 kind of 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 as 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 walk-in 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. So cool. Sorry, I got really sidetracked. You'll have anything that you wanted to be sure to share about either the interactivity API or anything that's coming up, something you want to make sure that our listeners know? I would just like to emphasize that will of feedback. It's serial feedback. If you test it, yeah, if you think it's bad feedback, share it with us as well. That's the, especially the feedback we like. Like I don't like this part. That's great. We want to know because the idea is that it serves all purposes for these kind of interactions that nothing new, but I would like to emphasize that part. You know what? There's nothing new under the sun. It's fine. You're good. You should always tell people what you need. If you're interested in getting started with the interactivity API and I just don't have any idea where to begin, there's actually a package. There's a create block template. So the create block package allows you to quickly scaffold blocks. And there's a template that's a 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 by the interactivity API. But it's a really, really great sort of like, like hello world style. I'm going to shamelessly self promote myself at Workamp Asia. I'll be at Workamp Asia this year doing a workshop where I will be doing some stuff with the interactivity API. But if you're there and you want to chat more about the interactivity API, I am at all ears and I love talking about this stuff. Cool. Ryan, Mario, thank you so much for joining me today. This has been a wonderful conversation. Thank you so much for having me. Thank you. 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, 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 streams, 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. Now that brings us to our smallest 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 and 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. 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 hope 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 they're 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. And that my friends is your smallest big things. Don't forget to follow us on your favorite podcast app or subscribe directly on wordpress.org slash 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 wpbriefing at wordpress.org. I'm your host, Josefa Hayden-Champosie. Thanks for tuning in today for the WordPress briefing and I'll see you again in a couple of weeks.