viewSource

## [00:00:00] Introduction

[00:00:00] **Brian Coords:** You are listening to viewSource, conversations around WordPress and adjacent tech with hosts, Aurooba Ahmed and me, Brian Coords.

[00:00:08] **Aurooba Ahmed:** So, we have been in Laravel land, and Next. js land, Reacty land, but. I think you probably agree with me, it's time to come back home to WordPress land. What do you think?

[00:00:23] **Brian Coords:** Yeah, I think so. When you said those two, Laravel and then react next, I was like, yeah, those are like the two like siblings, you know, the PHP sibling, the JavaScript sibling, I don't, I know that there's obviously like CMS siblings, kind of like Drupal, all that stuff. But, um, I don't, I don't have anything to say about those.

[00:00:41] I have no experience. So I think you're right. I think we did the siblings and now we've got to come back to like. The, uh, to the mothership and talk about a little more WordPress, especially because there's, it does feel like there's, there's a lot happening with this last release, you know?

[00:00:56] **Aurooba Ahmed:** Yeah, it's been amazing and a lot of things are coming to fruition that, you know, the work for that had begun a little while ago. There's a lot of excitement, there's a lot of fun stuff happening, and so let's do that. What is the exciting thing that we're gonna do in this project, right?

## [00:01:12] Introducing the next project!

[00:01:12] **Brian Coords:** Okay. So we are going to do another project just like we did before, like four ish episodes, digging deep into a topic. Like you said, we're back on WordPress and this time we are going to mess around with the interactivity API because it's the thing that people either don't get at all or, uh, are really excited.

[00:01:34] Yeah. So,

[00:01:35] **Aurooba Ahmed:** I think you and I both fall in the camp of like really excited. I remember when that proposal first came out. I went on Twitter. I was just like, yes, yes, this is the thing. This is awesome. Let's go. Let's go. You know, and now it's, it's in core. It's merged part of like, you know, the, the basic plumbing is properly merged into core and you can actually use it.

[00:01:55] And I'm really excited to sort of dig into that and then see what we do with it.

[00:01:59] **Brian Coords:** And it's, I think it's been in core for like two, two releases now, but

[00:02:07] **Aurooba Ahmed:** Yeah. But it wasn't like, you know, Exactly. Yeah, like it was in core, but the public API, the public facing exposed APIs weren't officially in there, but now they are and, you know, you don't have to hack something in order to use it. You can just use it because it's available.

[00:02:23] **Brian Coords:** Yeah, and that is an important thing because like I was working on something where I was using a different one, the data views API, like those new tables and stuff, which are in core. And I was like, yay. And then it's still not public. So they can put things in core, but they won't put it as public if they think there's going to be breaking changes to it.

[00:02:39] So this means that from this point forward, We should be, you should be safe to use it. You don't have to flag any experimental features. It should not break in future versions. Yeah. We'll cross our

[00:02:50] **Aurooba Ahmed:** Let the, let the record, yeah, note that I crossed my fingers because we remember what happened with classes in Gutenberg when it got merged into core the very first time and they changed it and it was something, something. Yeah.

[00:03:04] **Brian Coords:** Yeah. We won't even,

[00:03:06] **Aurooba Ahmed:** We won't go there. That's trauma.

[00:03:09] **Brian Coords:** we know that breaking changes. Honestly, it's funny because it's breaking changes happen. Plus there's some changes I wish they would break like some backwards compatibility. I'd be like, I'm ready for it. I'm ready for it. Drop that customizer. Do what you gotta

## [00:03:23] What is the Interactivity API?

[00:03:23] **Aurooba Ahmed:** Okay. So let's step back. Yeah. And why don't you show us what the interactivity API is capable of? Like, this is something amazing that they, when they first proposed and they really introduced it with quite a bang.

[00:03:39] **Brian Coords:** Yeah, that is, it's definitely one of those things where, like we said, it's very polarizing people. Some people feel like it kind of came out of nowhere and it's just like, it's here, it's in core and, um, it's, it's very unique. So they kind of came out with this demo of this like WP movies site, which it's basically like if you haven't seen this, definitely go wpmovies.dev and check it out. But it basically just looks like Netflix and it shows a bunch of movie titles. And when you click on them, they very quickly load. Like the page loads are extremely quick, things like when you press the like button on a movie on one corner, the like count in the top corner of the page automatically refreshes, um, things like looping through queries, um, that's a, that one actually, did that not do it?

[00:04:26] Had, I can't tell

[00:04:26] **Aurooba Ahmed:** it did. It did, but

[00:04:29] **Brian Coords:** There's tabs.

[00:04:31] **Aurooba Ahmed:** Right.

[00:04:31] **Brian Coords:** I think if you play a movie trailer, it actually stays in the corner as you navigate through the site. Like the video just keeps playing and you can go to other pages. So there's a lot here. There's a lot of things, but like the central idea is that, I mean, I guess the way I would frame it is like, they've kind of put in a JavaScript library for the front end, like a modern JavaScript library for the front end that is really meant for everybody to use and is really built like out out of WordPress like core principles and some core PHP functions and stuff like that. Do you think that's a good summary?

[00:05:05] **Aurooba Ahmed:** I think so. Like right now, you know, we do front end JavaScript in WordPress land in so many different ways. You could technically import React. You could use Vue. You could use jQuery. You could use just basic JavaScript. I mean, there's so many different ways to do a lot of things that we all kind of do, you know, on complex projects with like clients and stuff.

[00:05:27] We all do them. So I think that there's a really valid reason for finding a common language for how we express certain types of things that we know are common and we know everyone wants to be able to do. But I think what's really interesting about this particular demo, the demo is beautiful, first of all, right?

[00:05:50] Like it's very well designed, it's very modern, but I think the core thing, like when I, if I were to really crystallize this down, it's that like button.

## [00:06:00] The WooCommerce usecase

[00:06:00] **Brian Coords:** Yeah, and I think that is critical because that you know, like we have done in the past key past like Series arcs. We're going to build something with the interactivity API, and we're going to walk through, not like step by step, but very deeply into the code of it. Um, and so that like button is sort of the inspiration and we'll talk about what we're going to build in a minute, but like that idea, that idea, because like the best kind of place where I think about the interactivity API and where I think a lot of the attention came from is that WooCommerce use case and like,

[00:06:32] **Aurooba Ahmed:** Yes.

[00:06:33] **Brian Coords:** WooCommerce developers worked on this feature a lot.

[00:06:36] Like this is very much an Automattic centric feature. WooCommerce have a big part to play in it. And it's sort of like the best example of that. Like when it's like add to cart, my cart up here updates, right? I add something to my cart, my cart updates that that is not an easy thing right now. And

[00:06:53] **Aurooba Ahmed:** It is not.

[00:06:55] **Brian Coords:** It's like Ajax and this and that and plugins.

[00:06:57] And what if my plugin has a bunch of price variations? Well, that didn't work with that. You know, like you can see why when I add something to my cart and it dynamically updates somewhere else on the page from a completely different block and those blocks talk to each other and there's a larger like data store that kind of maps everything, you can see why this gets some developers really excited.

## [00:07:18] How Interactivity API fits into the larger picture

[00:07:18] **Aurooba Ahmed:** Totally. And I think there's like, if I were to step back even further, there is a larger arc happening here. Think about block bindings. Think about custom fields coming to blocks. Think about the interactivity API. They have a single, not a single, but they, they come from the same, same, like, Perspective way of thinking and wanting certain types of things and interactions between something that is very block going towards blocks, which is, you know, where we are and wanting that to connect in a way that wordPress has never done, you know, it's not like this is something that we're trying to retroactively fit to the block editor. We've never had anything like this before.

[00:07:58] **Brian Coords:** And I think if you're just building websites, you can do whatever JavaScript you want with WordPress. Like they look, that's never going to go away. If you want to live in jQuery on the front end of your site, like no, one's ever going to stop you. I don't ever see a version of that changing, if you want to build a product plugin add on for WooCommerce, that's a different story because WooCommerce will probably lean fully into this and maybe some of the other ones will, but honestly I think it'll end up after some pain, I think it'll actually end up better.

[00:08:26] And like you said, like a lot of these things, like block bindings is another good example where people were making like 50 blocks, a block for your price, a block for your, this, all of these. And it was just like, can we just take a block that already exists and just bind it to some data in one simple API that everyone can use that ACF can use that pods use every, and it's like, those pieces are all starting to come together to like, Hey, we're going to be a little bit more opinionated about this stuff because we kind of have to be, because we took over all the HTML, the front end of your site, and, uh, you're not allowed to like, and we took over all the CSS, so take over the JavaScript to take over the data binding.

[00:09:00] Like, honestly provide the tools. I'm, I'm, I'm all for it.

[00:09:05] **Aurooba Ahmed:** You know, I remember you and I had a conversation, not on the podcast, it was just you and me. I don't know. I think it was sometime last year. Do you remember when we talked about, you know, what would a data centric type of situation and flow look like inside WordPress? You know, and at the time it just felt so nebulous.

[00:09:22] And like, we thought of all kinds of weird ideas that might've worked, but now we're seeing how that data can be bound to the visual aspect. And I think overall, like it's a good direction, right? It's a good direction for how you can take something that feels a lot more visual and less data centric and put it together in a way that still feels expressive, but still allows you to manipulate data the way you may need to.

[00:09:48] Uh, I'm really excited by this. I think interactive, I mean, I just love the interactivity API. I just have to say that, like, I think it's such a, such a great move. It makes a lot of sense. I'm really excited for that.

## [00:10:02] The Alpine.js Comparison

[00:10:02] **Brian Coords:** So I had a project like maybe last year where I needed, like, just, I just needed this. I needed some JavaScript in the front end where I had a couple blocks that were going to be related like a carousel, but I wanted the carousel over here. And I wanted the numbers over here. Like I, and I wanted them all to talk and I used Alpine.

[00:10:18] I used Alpine. js for it because of another developer recommended it. And I had used it in like the Laravel world and I had never thought about it like, Oh, that's perfect. And it worked really well. It was really great. Um, having alpine. js, a lot of people are drawing the comparison between this and alpine.

[00:10:32] js because they both do the same thing, which is they use these like declarative, like attributes on HTML to kind of scaffold and set up your, your job is like you, sometimes you don't even have to have a JavaScript file. To really use it if you don't, if your use case is simple enough. Um, and so that worked really well.

[00:10:52] I now, um, have I, I don't think I've used this in a project, but like I can basically take those same concepts and it was, and so just having experienced that side of it, it was like. Oh man, just one store for like handling all these interactions that like, I click a button here and it triggers a pop up there.

[00:11:10] And if they filled out a thing here, I have that data over here, like, and it's all just in one central place. Um, yeah, if you've used like Vue, Alpine, that sort of stuff, you're going to feel really happy with this, I think.

[00:11:24] **Aurooba Ahmed:** Yeah, and if you're wondering why not just use Alpine JS, I think that the initial proposal post in Make WordPress, we should link to that. It explains really well why that was explored and these other things were explored, but then ultimately, You know, we chose to do something in house in within the project instead, and it's not worth it right now to get into it.

[00:11:47] But if that is something you're curious about, go to go read the proposal. I think the discussion around it there is really valuable and helpful to help to figure out and understand why this decision was really made.

## [00:11:57] So what project are we building?

[00:11:57] **Aurooba Ahmed:** But let's get into, you know, what we're actually doing. What is the, what is the project idea?

[00:12:03] What are we going to do to demonstrate and really dig deep into this API?

[00:12:09] **Brian Coords:** Okay. So I'm going to start actually on the backend to just show the two blocks that we have, and then we'll sort of talk about what they do. So every time we come up with an idea for a, like a demo, at the end of the day, it's always a to do list. Everything on the internet is like a spreadsheet or a to do list.

[00:12:28] It's one of those two things, right? And in this case, It's sort of another to do list, like the, we did the episode suggestion tool that was like a to do list of episodes. We did the, um,

[00:12:40] **Aurooba Ahmed:** List of audit checklist.

[00:12:42] **Brian Coords:** audit checklist, a literal checklist. So we're doing a reading list interactivity API block. And the idea here is that this is, we're in the backend of the block editor.

[00:12:51] We're looking at like an archive template. So this is like a list of blog posts and there's two custom blocks that I've added. One is called the reading list and the reading list will just show all the articles that you want to read on our blog and the second block I've added. And you'll see that they have this like faint yellow background when you scaffold blocks with the interactivity API.

[00:13:11] Instead of like the blue background, you know, when you do like a create block, like this one does it with like a yellow background, um, is it's a pretty cool. It's a, is a little bookmark button. And so it's two separate blocks, but the idea is I can be able to bookmark as many blog posts as I want across the site, across pages, everything.

[00:13:30] And my reading list, which, you know, we'd maybe stick in an off canvas menu somewhere or something. We'll keep adding those posts as I add them to my reading list. And it's

[00:13:39] **Aurooba Ahmed:** And I mean, that's really common, right? As a pattern. It's very common. It's in a to do list, sure. But like your browser does this, Reddit does this, like anywhere you can favorite something. It's a concept of basically favoriting something, right?

[00:13:50] **Brian Coords:** Yeah, like if I was, if this was like the New York Times and I wanted to like bookmark a bunch of articles to read later to share or something like that, as I'm going throughout the site, it's like, yeah, this is a very common pattern.

[00:14:01] **Aurooba Ahmed:** Yeah.

[00:14:02] **Brian Coords:** Let's go to the front end. I'm going to go to the actually like an, an actual archive.

[00:14:08] **Aurooba Ahmed:** Okay. So I'm looking at your archive and at the top I see my reading list and it says 11. And

[00:14:14] **Brian Coords:** so it's very,

[00:14:15] **Aurooba Ahmed:** of posts. Yeah.

[00:14:17] **Brian Coords:** very unstyled, very basic right here. So I've done no styling, I've done no, there's very basic data. So in the reading list, do you want to guess what the 11 is? I'll

[00:14:30] **Aurooba Ahmed:** I don't want to guess, just tell me. Is it an

[00:14:33] **Brian Coords:** give

[00:14:34] **Aurooba Ahmed:** Post ID?

[00:14:35] **Brian Coords:** So, so I'm going to click bookmark on this post right here. And when I click it, the button changes to say bookmark and my reading list gets a new entry and the entry for that one is 13. And it's so right now you're literally clicking bookmark and it's adding the post ID to like an array of post IDs.

[00:14:54] And if I click it again, I'm unbookmarking it. So I can do this, I can reload the page. It'll still be here because I'm storing it in your, in your local, you know, browser cache.

[00:15:05] **Aurooba Ahmed:** Mm hmm.

[00:15:06] **Brian Coords:** Yeah. And so, but the basic functionality is I have two different blocks. They're communicating with each other. There's one central source of JavaScript that's going to like keep track of this.

[00:15:15] And yeah, I will, you know, update it to like display the post title, not the post ID and that sort of stuff, but like the basic

[00:15:22] **Aurooba Ahmed:** Proof of concept.

[00:15:23] **Brian Coords:** are here. Yeah.

## [00:15:24] Tracking the list with Local Storage

[00:15:24] **Aurooba Ahmed:** Totally. Totally. So you use local storage. You didn't use session storage, right? So you could go away, you can come back and it'll just work. Or did you use session storage? So it's based on your current session.

[00:15:34] **Brian Coords:** No, no, no. It's a, it's local storage. Yeah. If we, um, if you want, we can actually look and find it in our application. Right. So under local storage, you can see like a bunch of stuff. Um, and here I'm just literally storing an array of post IDs as, as under this VS reading list.

[00:15:54] **Aurooba Ahmed:** I mean, I think that's perfect. Right. I mean, not only is this privacy centric at the moment, you don't actually have to be logged in for this to work. It'll work even if you're not a logged in user. There could be value in doing like a logged in version, but like this will work for anyone who goes to like a site and, Nobody else knows this.

[00:16:12] It's just for you at the moment. Although I suppose we could add analytics or something to it. But, uh, I like it, you know, it's simple. It's very clear to understand.

[00:16:23] **Brian Coords:** Yeah. It's like I click here, my array updates, you know, I click here, my array updates again. It's, I don't know. It's, um, from the front end, it's very simple and it's very much like, and it's fast and it's quick. And the other thing you were talking about, like, well, you were talking about why would, why not fork like Alpine JS and just like start from there, which is a different discussion.

## [00:16:44] Using a resource already being loaded on the site

[00:16:44] **Brian Coords:** But I was even thinking like, I have sites where I used AlpineJS, this interactivity API, if you're using a block theme and you're using the navigation block or the query loop or whatever, it's basically being loaded on your site already. So like, you know, the, the, the weight is already there. So

[00:17:00] **Aurooba Ahmed:** Yeah, the assets already there. Why don't you just use it? Yeah, exactly. No, I totally get that. So I think one of the other things you and I talked about is how cool it would have been if the off canvas area was like a block of its own, or it was separated out from the nav, because this would be perfect for that, right?

[00:17:19] Like, it would be so nice if you could have like a little floaty bookmark symbol somewhere on the site, and then when you click it, it just pops open.

[00:17:26] **Brian Coords:** Open.

[00:17:27] **Aurooba Ahmed:** Exactly. Just like that when you open the mobile menu and you'd be able to see your list there. That'd be so nice.

[00:17:33] **Brian Coords:** Well, I was thinking about this because technically, and I've been doing this on a couple of projects recently, you can now put any block inside the navigation block, so you can do this. Like I sort of did kind of Nick Diego's thing, but like adapted it where instead of this showing like these two list items.

[00:17:52] It's actually like a block template, like template part that loads in. I can design, like design the full thing or whatever, and like make an off canvas. But the problem is, is it still thinks it's a navigation. So it wraps it in like a nav. It actually wraps you, whatever you're pop up in, in a unordered list.

[00:18:09] So it's like very semantically like opinionated. And so, um, it's not terrible, but it's, um, it's not. It would be nice. And I've been thinking about doing just a very basic block. That's just an off canvas. But then if I do it, I can use all of this stuff that's in there already. So you can already see, like, this is the core navigation block, all this like data WP on click WP on.

[00:18:32] These are all part of the interactivity API. So I could just copy what they're doing here with my own little data store.

[00:18:39] **Aurooba Ahmed:** Yeah, definitely. I think you and I made like a pop up block once for a different random thing that we did. Remember? So it would be kind of like that, right? You could just have an off canvas little block. You can add it somewhere. And in this case though, you could use the navigation block for our use case here because it is a kind of a navigation.

[00:19:00] It is an unordered list. It is all the things that a navigation technically is. So you could.

[00:19:06] **Brian Coords:** Yeah, it's like a menu of links. Yeah, that's actually a good point. I could just, I honestly, this block. Which maybe we'll even do I can just change it. but um,

[00:19:20] **Aurooba Ahmed:** be cool. Yeah.

[00:19:23] **Brian Coords:** yeah, except you can't also change this icon

[00:19:26] **Aurooba Ahmed:** Yes. I think that's the other thing with the navigation block. Well, we won't go there because the navigation block is like, it, it has a long and storied history.

[00:19:37] **Brian Coords:** Yeah, you know do we want to be the do we want to turn this into a two hour episode it's um I think for the purposes of this We'll just keep it like on the page because I think we're more like I don't want to go down the rabbit hole of that Even though I kind of do But we will just focus on Yeah.

[00:19:54] We'll just focus on

## [00:19:55] How do you get started with the Interactivity API?

[00:19:55] **Aurooba Ahmed:** So what did it kind of take to get started with the Interactivity API when you wanted to, you know, actually use it in a plugin? Was there anything different about it? I mean, how would you get started right now if you wanted to create a block with the Interactivity API?

[00:20:11] **Brian Coords:** Okay, so I'm sharing my code editor and, you know, to start with the interactivity API, the key thing is that it's, it's a block feature, really, if you think about it, like it's a feature for blocks. So to use it. You have to make a block, like, which sounds weird. I mean, or you have to filter a block.

[00:20:28] Technically you can filter a block in PHP with like a render block filter. Technically that would work as well. But you, what, if you go to the documentation, they kind of have an example, like little starter to play around with it and it uses the same WordPress slash create block package, but you have to pass it this kind of flag.

[00:20:45] That's like. interactivity or something like that. And then what happens is it's an experimental version of, so you, you can't use this with other projects because it turns on this experimental modules flag, and so if you're doing, I don't know. But if you're doing other, like you kind of have to, like, I couldn't do an interactive block, like in a project that I was already doing a bunch of stuff on.

[00:21:10] I had to make like a new repo, like a new plugin or something for it because that experimental modules. Yeah. It, what happened? Well, it, I'll be honest. What happened is, is that we like in code that you and I use, we use a custom web pack config on top of WordPress scripts. And that's what I did not like, like, It's such a weird flag.

[00:21:31] Like the thing, it changes so much that literally the, the Webpack config override does not work at all. So,

[00:21:37] **Aurooba Ahmed:** Oh. Do you think this is something that's going to get removed and just hasn't happened since we merged it into core and exposed it?

## [00:21:45] What are JavaScript Modules?

[00:21:45] **Brian Coords:** I mean, I can't imagine they're going to keep experimental modules like as a requirement forever, but it's the, the underlying reason is that it, yeah, is that it uses JavaScript modules. So the JavaScript that you load for an interactive block to use the interactive API uses JavaScript modules. And I'm not going to lie to you.

[00:22:04] I'm really hoping that you're going to explain to me JavaScript module. Because I don't, I haven't fully like wrapped my head around JavaScript modules as this like new approach to JavaScript.

[00:22:15] **Aurooba Ahmed:** Well, I don't know if it's a new approach. You already use JavaScript modules every single day that you make a block, Brian. JavaScript module is every single time you've imported something. From a different library, you're importing a JavaScript module, right? It's a, allows you to break up your code, allows you to bring code in from a different package or library.

[00:22:35] The difference is that once upon a time, this was something a browser couldn't handle, but our browsers can actually handle that. themselves. So when you import something that's actually a native JavaScript feature and not something that needs to be polyfilled, right? So instead of like you compiling all of your code and then the whole library being having to be dumped inside that file so that the browser can actually use it, the browser actually understands being able to import the JavaScript module and it is able to use that.

[00:23:04] Now, do we always do that? Is that always the right thing even now? No, but. That is maybe the one difference between like how modules were treated before and how they can be now.

[00:23:15] **Brian Coords:** Okay. So in the JavaScript that I'm writing here, like when I'm exporting, I'm actually really like exporting and,

[00:23:22] **Aurooba Ahmed:** That's right.

[00:23:23] **Brian Coords:** the interactivity API is really importing it. Yeah.

[00:23:25] **Aurooba Ahmed:** Exactly, so maybe the other aspect is you can inspect the code of your own files, but a JavaScript module, you can't, the other modules, other files can only see what that other file exports. They can't inspect the rest of its code. So I think that maybe is the more defining feature of like how you might think, Oh, that's a file, but that's a module.

[00:23:52] **Brian Coords:** Yeah. Okay. That makes a lot of sense. That actually clarifies. A lot of things. And like, I think that maybe is part of why the build process for this is a little bit different and why it's, you know, experimental. I know that this was the release where like just JavaScript modules in general are sort of coming.

[00:24:11] I think that's definitely like a place people are leaning towards.

[00:24:14] **Aurooba Ahmed:** Yes.

[00:24:15] **Brian Coords:** but it definitely changed things. So this is all scaffolded out, but really there's the only thing you have to do is number one in your block.json, you just have to put interactivity true under your supports. So, so we're just basically saying this block supports the interactivity API.

[00:24:30] Um, and then you'll notice that instead of a normal view script, there's a view script module.

[00:24:37] **Aurooba Ahmed:** Yeah.

[00:24:38] **Brian Coords:** So that's a new one.

[00:24:39] **Aurooba Ahmed:** That's interesting. I, that's, that's very interesting because, so what that makes me think about is how there are different types of modules. And I'm wondering, because I haven't looked into this yet, what kind of modules this actually is. Because when you think about importing and exporting, like, When you look at a webpack file, you remember at the top, you sometimes will see things like, require something, right?

[00:25:10] Like the term require is used and it's stored inside a const. But then in react, we don't actually do that. We actually do import something, something, something from somewhere. Right? So the difference is one is, uh, require is like the kind of browser can kind of understand on its own. It's a, it's called a, uh, Common JavaScript module, and then you have your ES module, which is like the more modern official option for JavaScript that, you know, older browsers don't necessarily support right now.

[00:25:37] And usually needs to be polyfilled and that uses import export, in order to use import export you must have your module. Uh, be defined like in your package. json and stuff, you have to give it the type of module. But, uh, if you use a common. js, you would not have that. So I, I guess I'm wondering behind the scenes, what kind of module this is because it doesn't feel clear. Yeah,

[00:26:05] **Brian Coords:** And so what's interesting is, well, two things. One is because, because of that, you can't import the way that you normally would in the JavaScript of your block. Like, let's say if I was building, um, any other block and I wanted to import, like I've done one where I wanted to import like the WordPress, like date package, cause I just wanted to use it.

[00:26:26] Um, it doesn't really work here. Cause I mean, I'm on the front of the site. You can technically normal JavaScript import it. Cause it's all going to get bundled and built and everything like that. But this isn't going to build all of your imports, if that makes sense. You know, it's not going to like go get them for you because it's assuming that you're using that module approach.

[00:26:42] So like. There are some different tricky things, and the second one was that I, each block gets its own piece of JavaScript, but you can see here, I'm actually referencing the JavaScript from the bookmark block, um, because I wanted, I wanted one piece of JavaScript for both blocks, regardless of which one was on the page, because I just wanted one, one like data store, you know, I didn't want like multiple stores, I wanted one set of functions.

[00:27:08] So that's, those are like the two kind of caveats of what I've learned, building out the JavaScript for this. Yeah,

[00:27:13] **Aurooba Ahmed:** But that doesn't affect your edit, right? Just front. It just affects what you're able to do in your front end.

[00:27:18] **Brian Coords:** yeah, yeah. This is all front end. Yeah. Yeah. I mean, that's the thing about interactive API. It's like, it's really just a front end feature. Um, for the backend, I mean, I still have to just build, like, I didn't do it yet, but I still have to like, build a normal, like UI in normal edit. js, save it, like all of that stuff is the same, still have to do it all the same, but there's a few things, um, that you get to do that are cool, which is like, number one, yeah.

[00:27:42] Um, in my render block, I can use a lot of these sort of like interactivity API functions to spit out different, like pieces of data. This is all like information that I would need, or like in this one, do I use it, I don't use it in this one, this, this one. So you're, you're kind of using some of the PHP functions, but again, this is all on the front end.

[00:28:01] This is only in the rendered up PHP. This is really has nothing to do with the block editor. Yes.

[00:28:08] **Aurooba Ahmed:** So can we look at a view. js file that uses it? So this is, I think this is really interesting because now this is where it starts to feel different, right? It's not a way, this is not what you would normally associate with WordPress. And, and in a very exciting way, because now this is starting to feel really modern. You know, it is funky because all things WordPress are funky, but it's very cool.

[00:28:39] So high level, we have a few minutes, high level, walk me through what's going on here.

[00:28:45] **Brian Coords:** Yeah, so high level, I'm, there's a WordPress interactivity API like package that I get to pull from. Um, and I need two things. I need the store and get context. And so store is basically the one you're mostly going to use, um, get rid of that. So I'm creating a store and a store is just going to have. It's going to hold the state for my interactivity.

[00:29:06] It's going to hold any functions that I need. And technically on like smaller scale stuff, you can do all this in the HTML. Like you can make a state in your HTML and not do any of this, but this, we were doing enough complicated things, like putting stuff in local storage. That to me, it made more sense to do it in a JavaScript file, trying to write that in like a attribute in a HTML tag or whatever, but So typically there are simpler versions of this, but then we're going a little more complicated.

[00:29:33] So we're basically making a state, which is like all bookmarks. That's that array that we saw. And then context is our sort of way to communicate outside of our like individual state. So there's some stuff that I want to kind of store at the global context level. And then there's some stuff I need, like in this instance of state. So those two sort of things work together. And then you're just making functions like I have a function for toggling it and like adding the bookmark to the array and removing it. I have an initialization function where I'm putting stuff in context and I have, you know, a couple of different things like that.

[00:30:07] So. If you've done this sort of like Vue. js kind of approach, you probably feel like this feels familiar. If you've done anything like with state and like reducers and stuff like, um, on the backend, this feels familiar. But if you're, if you're not, if you've been like in jQuery world, this feels like overkill.

[00:30:26] It feels like very, it's a big step up for sure.

[00:30:30] **Aurooba Ahmed:** You know, what I really like about this is, for example, JavaScript is something you can do inside HTML attributes. You know, you can have like an on click and then have it do stuff. But then if you are doing more complicated stuff, you obviously pull it out into a little script tag area, or a completely different file.

[00:30:48] And, um, I just love how close this stays to like web technology patterns in that way. You know what I mean? It's declarative. It's uh, allows you to do something within the HTML. It allows you to do it outside of the HTML. And let's be honest, when I look at this, I say, yeah, you know, this is just simple JavaScript and, but with like really a really nice library that you're using in basic JavaScript.

[00:31:12] And I'm not going to lie, that makes me really happy.

[00:31:15] **Brian Coords:** Yeah. Because the thing about it is, is as this stuff, like it took me a while to sort of fully understand that I was pulling state out. And then like, I pull it out here, but then I would like to use it later. Or I was pulling context out from here. Like a lot of that stuff, um, was a little bit, it took a minute to wrap my head around and it took a lot of trial and error and there's no console.

[00:31:38] You, you know, with this, there's no console, like, like you can kind of console log a little bit, but like a lot of it doesn't in the same like ways. So there's a lot of issues with it, but like. The nice thing is, is that like, if I'm doing this and you're doing this, like, we're gonna settle on the same approach versus if we were just doing vanilla JavaScript with like the Wild West, it would just be, there'd be no structure at all.

[00:32:01] And I think you and I both kind of like that like structure.

[00:32:04] **Aurooba Ahmed:** 100%. I mean, I remember, what was it? You and I did like a zillion accordions in like three months or something and then we ended up doing a talk on it, but we settled on a way and we're like, you know, this is how we're going to do it because, uh, it's nice to have a common language for how you do a certain thing.

[00:32:19] And I enjoy that this encourages that.

[00:32:23] **Brian Coords:** Yeah. And it would be really easy to do accordions with this, where you'd have a state of like which accordion was open and you'd have a toggle for like opening and closing. And like, I mean, it makes that sort of stuff just feel a lot easier. And then we've added the local storage kind of layer on top of it to make it a little bit more persistent, but you know, that, that opens up, I guess, where, where we're going with the series and where we're going with this code, really, if we should. It's

[00:32:52] **Aurooba Ahmed:** Yeah. What's next?

## [00:32:56] What's next in the series?

[00:32:56] **Brian Coords:** So big picture, there's stuff that we should talk about here, which is like, um, getting like me giving like actual real answers about storing a context, which I didn't, we didn't want to really want to do this episode, but like actually digging into what is a store, what is context, how are these similar maybe to like, if you've come from like a react, but how are they different?

[00:33:16] So getting into all of the like more functional stuff of this JavaScript, getting a little bit more functional into some of these data attributes and actually breaking this code apart and seeing what a lot of these things do. Um, that'll be sort of the next, um, piece of this. And then I think like, obviously we need to add styles and stuff like that, but then the last piece, which I, you know, we were talking about is it would be really nice to track how many bookmarks each article gets, which means

[00:33:47] **Aurooba Ahmed:** Totally.

[00:33:48] **Brian Coords:** Communicating back to the WordPress database, which, you know, in our original example of time at the shopping cart on WooCommerce, like that's exactly what they're having to do, right?

[00:33:57] Like that information has to come back into WordPress somehow.

[00:34:01] **Aurooba Ahmed:** Definitely.

[00:34:03] **Brian Coords:** The interactive API doesn't really talk about that. It really, it makes it really easy to take data out of WordPress and like send it into the context very easily.

[00:34:12] **Aurooba Ahmed:** Right.

[00:34:12] **Brian Coords:** other side of it, not quite the same and not really part of its scope.

[00:34:18] Yeah. Yeah.

[00:34:19] **Aurooba Ahmed:** I mean, it's not part of this first scope, but I mean, we obviously know that's where it's going to go. At some point, it's going to get there, I think. But until then, that might be the piece that's a little Wild West y.

[00:34:30] **Brian Coords:** And, and probably if you really want to do that, you know, something like a rest API endpoint or something, you know, is not, is, is probably going to be your friend. And so I think we're going to dig into all of that stuff, but I think the next step is really talking about store context, how this stuff works, um, getting into really more specific like understanding of all these like new functions. So new, like they're not even like in my like code editor snippet thing yet.

[00:35:00] **Aurooba Ahmed:** Yeah.

[00:35:01] **Brian Coords:** It's very outdated, but, uh, yeah, so I'm excited because, uh, I really think once this becomes common language, I think we'll start seeing it get used pretty widely, I think.

[00:35:13] **Aurooba Ahmed:** and I think it would be cool for us to get this to a place where we just submit it to the repo because why not to the plugin repo?

[00:35:21] **Brian Coords:** Yeah. I mean, obviously the style that I showed was pretty terrible, but like, yeah, I mean, how cool would it be to put this on your website where, as I'm reading, I could like save some articles and then have a little like button to open up like the ones that I wanted to come back to or something like that.

[00:35:34] Yeah, there's probably some other stuff like removing them or, or, you know, that sort of thing.

[00:35:39] **Aurooba Ahmed:** I think I'm really excited for this series and I, I will be honest with you. It really is like coming home. It's like the best possible way talking about WordPress again. It just feels really great. So, all right, I will see you in the next episode and we'll dive a little deeper into context and state as it deals with in the interactivity API.

[00:36:00] **Brian Coords:** All right. I'll see you then.

[00:36:02] **Aurooba Ahmed:** See ya.

[00:36:02] Visit viewSource.fm for the show notes and if you're enjoying the show, we would love a review on iTunes or a comment on YouTube.