Jukebox has a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the blocks, the themes and in this case, how you can start to make your sites more interactive.
If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast, player of choice, or by going to WPTavern.com forward slash feed forward slash podcast. And you can copy that URL into most podcast players.
If you have a topic that you’d like us to feature on the podcast, I’m keen to hear from you, and hopefully get you or your idea featured on the show. Head to WPTavern.com forward slash contact forward slash jukebox, and use the form there.
So on the podcast today, we have Mario Santos and Luis Herranz. They both work for Automattic but are sponsored to work full-time in WordPress.
The main focus of their work is the block developer experience, and they are part of the group of contributors that worked on the Interactivity API proposal.
The Interactivity API is the main focus of the podcast today, and if you’re working with blocks and dynamically displaying data, this is sure to be of interest to you.
We start out the podcast today with the usual introductions, and get to know Mario and Luis. And then we learn what the Interactivity API is and what it can do.
The conversation is framed around a blog post written by Mario entitled, The interactivity API, a better developer experience in building interactive blocks.
In this Mario shows examples of what website interactivity is. In short, it’s the ability for content to be amended on the fly without a page refresh. Of course, this is nothing new on the web. We’ve been seeing this for years in WordPress sites and elsewhere. But now you’re going to be able to create interactivity in a standard way across the different blocks on your site.
The project hopes to absorb complexity and make the creation of interactive objects fairly trivial. Mario and Luis talk about examples of where the API might be used, and how it can be implemented.
We also discussed the fact that in the past developers have gone their own way to make their sites interactive. It all works, but it means that no two implementations are the same. This causes issues if the project is taken over by another developer. But it’s also a drain on resources.
Mario and Luis make the point that having a standard way of creating interactivity will benefit everyone in the long run. We get into the weeds a little and talk about the approach the team took when building the API. They decided to use directives and we find out why this was, and what benefit it brings over other possible solutions.
The project is still experimental, and they’re looking for people to test and report back on what they find to move the interactivity API forwards.
If you’re interested in finding out more, you can find all of the links in the show notes by heading to. WPTavern.com forward slash podcast, where you’ll find all the other episodes as well.
And so without further delay, I bring you Mario Santos and Luis Herranz.
I am joined on the podcast today by Luis Herranz and Mario Santos. Hello.[00:04:15] Luis Herranz: Hey, hello Nathan. [00:04:16] Mario Santos: Thanks for inviting us. [00:04:18] Nathan Wrigley: You’re so welcome. We had an introduction on Slack from Anne McCarthy, who listeners to the podcast may very well have heard of, and she wanted me to chat to these two about the Interactivity API, so we’re going to get onto that. It’s a brand new project. Could be very interesting if you’re a developer implementing it, but also if you’re an implementer of WordPress websites and not a developer, you’ll be interested in the outcomes of it.
Before we do that, the usual questions at the beginning. I’m going to go to Luis first, if that’s all right. Would you mind just giving us your backstory, how you’ve come to be on a WordPress podcast, how long you’ve been working with WordPress, who you work for as much or as little as you wish.[00:04:57] Luis Herranz: Okay, thank you. I started creating websites with WordPress 2010, I think, maybe nine, I don’t know, a long time ago. And I wanted to start a company in 2013, with Pablo Postigo. And we thought, okay, we wanted to create native apps for different companies, like services and so on.
And we knew WordPress, so we basically started with what was later known as headless WordPress, but back in 2013. And since then we iterated, we created a team. We got some investment and we started doing things on top of WordPress. Mostly in headless. First with native applications. Then we moved to just web have applications, but still on headless. Very focused on React.
And in 2019 we launched a open source framework for headless WordPress, powered by React. So we were very focused on developer experience and performance.
And in 2021, that company, Frontity was acquired by Automattic, so we could become like full-time contributors and focus on, well, basically what the Interactivity API proposal is today. Bringing some of those user experiences, what are possible with other solutions, to WordPress itself, on top of full site editing, or block themes.[00:06:31] Nathan Wrigley: Thank you so much. That’s really interesting. I appreciate your nice history there. Thank you. And we’ll ask the same question this time of Mario. So Mario, backstory please. [00:06:41] Mario Santos: Thank you. Actually, my story is really similar to Luis. Well first, when I finished the degree, I studied industrial engineer, but I didn’t want to be an engineer. So I started trying different things, and while I got my first job, I created a store in WordPress with WooCommerce. And then, that is when I started to learn about WordPress and all those things.
And later, based on that, I joined Frontity. I don’t remember exactly the year, 2015 maybe. And from there I really learned what was WordPress because we started going to meetups to WordCamps, and we started to, well at least I started to learn from the community.
From there the story is mostly the same as Luis. We were working on headless mainly. We were working with WordPress. And at some point, we were acquired by Automattic, and now I’m a sponsored contributor, working full-time. And as Luis said, we are focused on the developer experience, and the Interactivity API that we are going to talk about is part of it.[00:07:45] Nathan Wrigley: Thank you so much for that. So the Interactivity API, I’m going to link in the show notes to a post which you can find. Now the post you’re going to be looking at is on the make.wordpress.org website. It’s written by Mario. It was on the 30th of March, 2023 that came out, and it’s entitled, Proposal, The Interactivity API, A Better Developer Experience in Building Interactive Blocks.
Now, if at any point during this podcast you become a little bit confused or you wish to have some more background, I would recommend pausing and going and reading what is an incredibly lengthy and detailed post, with actually a boatload of interaction and comments as well. It’s really heartening to see so many people chipping in, and giving their thoughts on this Interactivity API.
But I guess the best place to kick this conversation off simply asking, what is it? What is the Interactivity API? What does it do? Why does WordPress need such a thing?[00:08:47] Mario Santos: I can start with this one. So, the Interactivity API is what we are proposing. The group of contributors that are working on that. It’s basically a new standard system to easily add front end interactivity to your blocks. Until now, most of the Gutenberg APIs have been focused on the block editor side, and there was unintentional gap on the front end.
So imagine functionalities like, like this post or e-commerce functionalities like add to cart, or the checkout, the instant search, page transitions, the comments form, without a page reload. So those are the user experiences that the Interactivity API aims to cover.
In a way that is real easy to build them, and block developers don’t have to deal with complex scaffolding or external tools. And it’s important to note also that it’s completely familiar and compatible with PHP and the block ecosystem. So overall, that’s what the Interactivity API is. Basically a standard to easily create any interactive experience that your users want.[00:10:06] Nathan Wrigley: Luis, anything to add? [00:10:09] Luis Herranz: No, it’s really filling that gap, or even that opportunity of absorbing as much complexity from the developers. Standardizing everything in a single solution, and making sure that it’s performant, and so on.
But yeah, we think that it’s an opportunity as well to absorb a lot of complexity for the developers, and to enable some of the user experiences that were not possible with WordPress before.[00:10:52] Nathan Wrigley: Now we have some show notes, and we’ve got a list of questions that we’re potentially going to run through, but I’m going to skip to the end, more or less of the list of our questions. Because one of the things I think to do at the beginning would be to provide listeners concrete examples of how this might be used.
So do you have any examples that you think would demonstrate clearly the kind of things that the Interactivity API is touching on? I’ll just mention one. Which is the very first thing you’re going to see more or less when you open up Mario’s article, and it’s a video. It’s pretty short, two minutes long. And it demonstrates something a little bit like Netflix, where you’ve got, a view of three or four different video thumbnails. There’s a bunch of different movies there.
And the intention is that you would like to preserve your favorites. And so there’s a little heart icon, which is lodged in the top left of the thumbnails for each video. And as you click on that thumbnail, the heart becomes colored in. It goes from gray to red. But also in a different part of the UI, in the right hand of the view, the menu, traditional place for the menu, there’s a little total which goes up from two to three to four, and if you remove the hearts, it goes back down to two and so on and so forth.
And one of the features that is enabled by having a standard is the client site navigation that basically is navigating through different pages of your WordPress site without triggering a page reload.
It’s important to know that this is something that is going to be enabled by the Interactivity API, but it’s going to be completely optional. So if you don’t need it, you don’t have to use it. But it powers other features like you can see in the movie, that we are paginating between the different pages. We are in the query loop. You have the pagination block, and you can go through the page one to the page two without page reload.
And for example, well, in the movies demo, we are showing that you can play the trailer and you can keep navigating and the video doesn’t stop. So those kind of user experiences that, for example, in this podcast you could be listening to this podcast in WP Tavern, and you could navigate to the articles.
So, maybe you can be reading an article while you are listening to the podcast in the same way. And the podcast will keep playing. Those kind of user experiences are enabled by client side navigation. And you can also find in the movies the instant search that you start typing and the list of results is automatically updated.
But this is creating a standard inside of WordPress. Why did you feel it was important to do this? Why not just leave developers to do their own thing? Again, we’ve seen WordPress websites implementing this. You know, I’ve been to countless WordPress websites where I’ve seen these features.
Clearly somebody’s dealt with it before and implemented it in their own way. I guess you’re just trying to make it so that everybody can build on top of the work that you are doing, rather than everybody going off in their own way and implementing a completely different solution based upon, well, however they wish to do it?[00:17:43] Luis Herranz: Yes. It’s about absorbing complexity. So, definitely anything you can imagine, it’s possible with WordPress. The thing is how easy is to do it. And with this kind of standard, our hope is that those user experiences are not only easy, but also working practically out of the box. [00:18:05] Nathan Wrigley: I’m guessing that this standard is going to be something that you are aiming at developers. Presumably the developers will then make it fairly straightforward for end users to interact with blocks and what have you, to make this available to them. But how would the standard actually work? What is going on in the background? How are developers going to implement this? [00:18:25] Mario Santos: If I can add one note to the why this standard, is I think it’s also important to note apart from what Luis says, is that it absorbs a lot of complexity. In an ecosystem like WordPress where there are a lot of plugins interacting with other plugins and those kind of experiences that we have.
So yeah, it’s important. Now that sites are, are a mix of blocks from different developers, these blocks are like small units. Yeah, it’s important to agree on a single kind of solution.[00:20:17] Nathan Wrigley: Yeah, good point. Okay, so how is it actually going to work then? You mentioned in the article, and I think one of you mentioned it just a moment ago, that you’re trying to make it so that people are familiar with PHP, don’t necessarily have to get into the whole space of learning React or what have you. I’m not entirely clear on what the position is there, but is the intention to make this as simple as possible for people who are steeped in WordPress’s PHP history. [00:20:44] Mario Santos: Yes. We wanted to make it as easy as possible to everyone. So yeah, that’s included. And yes, we said this is compatible with PHP, and it has been designed to be block first and PHP friendly. So yeah, it’s should be easy.
This doesn’t have to be like the final API of creating blocks. We can work, keep working on simplifying things over time. For example, right now none of these touches like the editor part. So if you are creating a block, the edit is just, is still done in the same way that it is done today using a React component. But maybe in the future we can explore how we can kind of extend these directives also to the editor and if it makes sense to unify and simplify the templating for both use cases. But is not the main goal of this proposal at this moment right now.[00:23:32] Nathan Wrigley: When you were making decisions about this, and you decided to go with directives instead of things like using React or something. Was there quite a lot of toing and froing? Was there a lot of soul searching, what the best way to do it was? Or was it just fairly straightforward from the very beginning that using directives was the way you were going to do it? How long did the conversation take before you settled on this? is it fair to say that everybody’s on board with this? This seems to be the way to do it. [00:23:58] Mario Santos: We believe so. I mean, we have researched a lot of alternatives. Actually, as we mentioned, we come from Frontity, that it was a React framework. React was like the first alternative we had in mind, but we defined as a list of requirements and we started researching different possibilities, and at the end we come up with the solution to be the only one that it was the only one fully compatible with WordPress.
Just to explain this a bit better. As directives are custom attributes that we have in the HTML, we are using the HTML as the templating system. And this comes with many benefits, for example, were not possible with React. As HTML is the templating system, the service rendering is supported by default, for example.
That is something really important in WordPress, or WordPress, APIs like WordPress hooks, that we are used to WordPress hooks in plugins, to extend some functionality, or translations. Those things, with directives using the HTML as the templating system work out of the box. And we can keep using those APIs to even extend the directives.
You’ve obviously just mentioned some reasons why that could be the case. But I’m wondering if there is anything else buried in there. In other words, what’s the use case to switch? There’ll be a bit of retooling, you might have to rewrite a whole bunch of stuff that you’ve already rewritten.
Do you think the benefit’s going to be in there purely for people who are creating new things? Or do you think there’s going to be a benefit for people who already have existing things out there in the real world, to go and rewrite what they’re doing using the Interactivity API?[00:26:54] Luis Herranz: Of course, as everything in WordPress, this is optional. Even though we want it to become a standard. It’s optional. But there’s going to be some kind of sitewide experiences that can only be enabled if all the blocks use this language, or this standard. So yeah, our hope is that there’s not going to be any reason for new blocks to not use this.
I think we did mention this, but it’s using React under the system. So that’s why it is so small. And yeah, it is actually performant and we are looking for other ways of optimizing it. For example, we want to only send the directives that are needed by the blocks that are in the page. Or we want to send the scripts so they don’t block the page rendering.
Or for example, we are also exploring the possibility of the scripts, so they are only load when they are in the view port. So, yeah, overall I would say it’s performant. It’s been designed to be performant. The code is relatively small, and we are still looking for ways to optimize it even more.[00:29:51] Luis Herranz: Yeah, I think that’s important. It’s not only performant today, but you have the guarantee that it’s going to be performant in the future, in the terms of you don’t have to, as a block developer, you don’t have to deal with performance in that sense anymore. Because that’s absorbed now by, well will be, hopefully absorbed by WordPress at some point.
And then if there’s something new in the web platform that can be leveraged to increase the performance and so on, it will be done in the WordPress side. So your block will just benefit from that, from just adopting this standard.[00:30:29] Nathan Wrigley: In the article that you wrote, Mario, the first word is the word proposal. Which implies that this is a work in progress, shall we say. And I’m just wondering how far down the path of usability you would say you’ve got. In other words, can developers begin using this out of the box? Have you seen real world examples of people using this?
And have you had some interest from developers who perhaps haven’t implemented it, but certainly want to get on board? Because I’m guessing the more yes’s we can answer to that question, the more likely it is that other people will say, okay, yeah, let’s take a, let’s take a look at this. So, can you use it, and have people been using it?.[00:31:08] Mario Santos: I would say, yes, you can use it, but we remind that this is still experimental, although we included the proposal word there. This is still experimental, very likely to change. So the APIs that we are using right now, that are used for example in the movies demo site, we are confident that they work, but maybe the syntax change.
So we haven’t promoted it yet to be used too much. There are people experimenting with it and giving feedback. For example, there’s an ongoing experiment in WooCommerce to replicate some of their blocks using directives. But there’s nothing in production yet because, as I said, this is still experimental.
There are some missing functionalities that may break your site, and it doesn’t have any documentation yet. So, I would say you can use it at your own risk because it’s experimental. We would love people to test it. To give feedback. We want to understand better if it’s easy to use the blockers that people may face.
Just to to clarify. In order to be able to use it, we are working on repository in GitHub. It’s a plugin that you can install, and from there you can create your own interactive blocks. Or if you prefer, there’s also the repository for the movies, with some examples that you can take a look and modify or whatever you want to do.[00:32:34] Nathan Wrigley: Are those repositories linked from Mario’s article on make.wordpress.org? [00:32:40] Mario Santos: Yes. [00:32:41] Nathan Wrigley: Okay, so perfect. So if you want to find those, you can just go to the article, which is going to be in the show notes and you can find them all there. Now you’re both working at Automattic, and although it was only about 30 minutes ago that you gave me your bio, I wasn’t quite sure.
I know that you’re both sponsored full-time in WordPress. Is this project, the Interactivity API, is this a focus for both of you at the moment? In other words, are you being asked to implement this, full-time, part-time? Are you tasked with making this happen?[00:33:12] Luis Herranz: Yes, we are. But we are not the only ones. It’s a large group of contributors. But yes. It was part of when we stopped developing Frontity the headless framework, and joined Automattic, it was precisely to focus on this. And we thought it made a lot of sense. Yeah, and thanks to Automattic for sponsoring us to be able to work on this for WordPress. [00:33:40] Mario Santos: One note on this, as you said, there are more contributors working on this Interactivity API, and yeah, we are part of a bigger group that is working on the whole developer experience of Gutenberg. So this is just a project to improve the front end interactive parts of your blocks, but there are ongoing efforts to improve the whole developer experience. [00:34:04] Luis Herranz: Yeah, and maybe it’s a good moment to say that if anyone is interested in this topic, just come to the repository and so on. And contact us and join us. [00:34:15] Nathan Wrigley: Yeah, I was going to ask about exactly that. How open are you to contributions? Presumably any people that you can get interested in this, the more the merrier. [00:34:24] Luis Herranz: A hundred percent open. We need people. We need people testing these. We need people using it. We need people giving feedback. Sharing different ideas. The most exposure, the better. How do you say that? [00:34:37] Nathan Wrigley: Yeah, exactly that. So I guess really if this podcast serves to do anything, it would be exactly that. It would be to encourage people to go over. Read the post on make.wordpress.org, and if you’re interested and you think that you can help, then certainly it looks like your help would be most welcome. Testing, getting involved.
In terms of what’s coming, you mentioned that there are things which you desire to have. So I guess that’s a roadmap question. What is on the roadmap? What do you want to have in there that is not in there? Don’t worry about timeframes. It might be a year off, two years off, six months, doesn’t really matter. What are you hoping that it will do that it currently is unable to do?[00:35:16] Mario Santos: Basically finish the Interactivity API, because it’s not finished. But, for example, our initial idea is to create the list of core directives that covers, I don’t know, 90% of the use cases, most of the use cases. Although then developers can create their custom directives.
So for example, that list is not finished yet. We still have to ensure that the APIs work for most of the use cases. We have to finish. And our idea for this is to, at some point, include it as experimental in Gutenberg. Start testing it in real core blocks, for example. Doing some experiments there.
Ensure that those user experiences are easy to create with the Interactivity API. Start receiving more feedback. So yeah, the idea is that. Keep experimenting. Keep developing the API. Receive feedback of users using it. And I think that’s it.[00:36:16] Luis Herranz: It’s going to be important the moment when we add, we added as experimental API in Gutenberg. Because that’s going to increase the exposure by, I don’t know, ten fold.
tenfold.[00:36:25] Nathan Wrigley: One of you mentioned before we click record that you are going to be giving a presentation at WordCamp Europe around the Interactivity API. By good coincidence, this podcast episode is going out just prior to that. So it may be that people listening to this are very soon going to be getting in the car train or a plane to head to Athens. Which one of you is giving that talk and what is it that you’re going to be covering exactly? [00:36:51] Luis Herranz: That would be me, Luis. I hope Mario helps. [00:36:55] Mario Santos: Yeah, I will help. [00:36:57] Luis Herranz: It’s going to be a workshop. I don’t know if it’s a two hour workshop or two hour and a half workshop. It’s going to be hands-on. A step by step introduction to the Interactivity API and creating some interactive blocks and user experiences. [00:37:12] Nathan Wrigley: So very much a hands-on experience. You are going to be teaching people and hopefully getting them to learn in real time. Do you know if any of that gets recorded and put on WordPress TV? [00:37:22] Luis Herranz: I don’t know if workshops are recorded or not. Presentations are, yes. I don’t know. [00:37:27] Nathan Wrigley: Yeah, okay. So you can very much be seen at WordCamp Europe, in Athens. Hopefully both Luis and Mario are going to be there. Head over to the workshop and say hi, and get involved. If people want to reach out to either of you, be that on social media or email or whatever works best. Maybe we can go to Luis first. Can you give us some details of where people could get in touch with you, specifically around this topic? [00:37:53] Luis Herranz: Sure. I actually started like, I left Twitter for a while and I’m back from last week or so. I’m going to try to answer any question that people may have about the Interactivity API and to share the progress there at my personal account, which is @luisherranz, like my name and surname in Twitter. [00:38:11] Nathan Wrigley: Thank you very much, and Mario, where can we reach you? [00:38:14] Mario Santos: I would say Twitter as well. I’m not actively tweeting, but if someone writes to me, I will answer for sure. Handle is @santosguillamot. It’s a bit difficult, so maybe it’s better to include the link? [00:38:28] Nathan Wrigley: I will link to it in the show notes because yeah, that might be the best way of doing it. [00:38:33] Luis Herranz: And probably I would say come by the Block Interactivity Experiments repository. So in GitHub, WordPress slash block interactivity experiments. And then there’s, open a issue, open a discussion. Yeah. [00:38:47] Mario Santos: And if people don’t use Twitter, I think they can reach both of us also in WordPress Slack, if they prefer to do so. [00:38:55] Nathan Wrigley: I will link to both of those things as well. I will include both of your Twitter handles and both of your Slacks, plus all of the links to anything that we mentioned during the course of the podcast. So yeah, an interesting discussion about the Interactivity API. I know it’s not just the pair of you, but Luis and Mario, much appreciation for taking on this work, which hopefully in the near future will be improving, not only the performance, but the interactivity of our WordPress websites. Thanks very much for joining me today. [00:39:21] Mario Santos: Thank you a lot for inviting. [00:39:23] Luis Herranz: Thanks, Nathan.
On the podcast today we have Mario Santos and Luis Herranz. They both work for Automattic, but are sponsored to work full-time in WordPress. The main focus of their work is the block developer experience, and they are part of the group of contributors that worked on the Interactivity API proposal.
The Interactivity API is the main focus of the podcast today, and if you’re working with blocks and dynamically displaying data, this is sure to be of interest to you.
We start out the podcast with the usual introductions and get to know Mario and Luis, and then we learn what the Interactivity API is, and what it can do.
The conversation is framed around a blog post written by Mario entitled The Interactivity API, a Better Developer Experience in Building Interactive Blocks. In this, Mario shows examples of what website interactivity is. In short, it’s the ability for content to be amended on-the-fly without a page refresh.
Of course, this is nothing new on the web, we’ve been seeing this for years in WordPress sites and elsewhere, but now you’re going to be able to create interactivity in a standard way across the different blocks on your site. The project hopes to absorb complexity and make the creation of interactive objects fairly trivial. Mario and Luis talk about examples of where the API might be used and how it can be implemented.
We also discuss the fact that in the past developers have gone their own way to make their sites interactive. It all works, but it means that no two implementations are the same. This causes issues if the project is taken over by another developer, but it’s also a drain on resources. Mario and Luis make the point that having a standard way of creating interactivity will benefit everyone in the long run.
We get into the weeds a little and talk about the approach the team took when building the API. They decided to use directives, and we find out why this was and what benefit it brings over other possible solutions.
The project is still experimental, and they’re looking for people to test and report back on what they find to move the Interactivity API forwards.