 Good day folks Good morning. Good afternoon. Good evening wherever you are in the world. I stole that line from somewhere I saw it in a YouTube video somewhere. I hope that everybody can hear me. I am Presenting from home today, so I'm using a different headset and a different mic So if you can't hear me, please do let me know in the chat and I will figure out why I might be muted But welcome. Thank you Elizabeth for confirming that you can hear me clearly. That's excellent. Well, I'll come to this WordPress developer API session As you're joining, please do let us know in the chat where you're joining us from and Maybe feel free to share a little bit about either what you do with WordPress Or because it is that time of year as we're moving towards the end of the year. Maybe what are your plans? Are you taking some end of year leave? Are you if you celebrate Christmas? Are you do you have plans for Christmas? Maybe share a bit of that if you would like While I do my usual introductions So my name is Jonathan. I live in Cape Town in South Africa I'm a developer educator and automatic and I'm sponsored to work with the training team and the training team Are the other team within the WordPress project that works on primarily works on learn WordPress Learn WordPress org we create all kinds of educational content for WordPress developers users designers beginners advanced And my focus is generally on the developer experience More specifically the extender community plugins and themes, but also a little bit of sort of core development if we can get some time in I'll share my my plans for the holidays. I am taking two weeks leave next week is my last week of work And then I will be taking two weeks leave And I will be going There's a there's a place in the Western Cape of South Africa called the garden route It is called the garden route because it's lovely and green and flurry and lots of prettiness at the coast And I'll be getting up there with my family after Christmas and spending some time At the beach at the coast Ideally unplugged. I have to take some books along with me and do lots of reading Maybe a little gaming. So I guess I'm not fully unplugged But yes, hopefully lots and lots of downtime Jim is from Philly U.S. Code for fun while retired. Nice. I look forward to the day that I can go to the fun A few more folks come in Awesome, well, thank you all for joining me today Today we are chatting about something called the interactivity API It is a brand new API that hasn't even been added to WordPress call yet. It hasn't shipped to WordPress call yet it's very much in the sort of It was very much in the experimental phases up until now but it's something that is Hopefully coming to WordPress core soon. Maybe That's still to be decided. It's something that the the team who work on the Gutenberg plugin have been working on or Part of that team have been working on You may know of a team called front2t. They were a team of developers that I think were based primarily in Europe And they were working on a Framework around the block editor That team was acquired by automatic recently and now they tend to focus more on Gutenberg development and Improving the developer experience and developer APIs Within within the block editor. So that that's the team that's working on this We're gonna be diving a little bit into it today what it does how it works How it might be similar to things you may have used in the past some of us are very similar familiar to me So we'll kind of dive into that and I'll share some of how it works and how you can start testing it and ideally providing your feedback Today's session is very much about showing you what's what's there and how to get it up and running But then hopefully you're able to go off and play with it and then share your feedback about the experience And I'll share some places where you can leave feedback on the on the interactivity API Alright a couple of announcements before we get started again, just welcome to everybody who's with us here today Please let me know if you can't see my shared screen right now. So I'm sharing my slides I'm also going to while I'm doing this I'm going to share the link to these slides in the chat in case you want to open it up on your side and Have a copy running on your side. You want to welcome to do that. I specifically didn't share these slides via Slide shares I did last as I've done before because this is a bit more of a Playing around session And I hadn't really finished finished them yet to upload to WordPress TV But I will do that before I do that for upload, but you can check out those slides that way As always we are presenting in focus mode, which means I can see all of your video screens But you can't see each other your videos are all disabled right now if you would like to enable your video You're more than welcome to you don't have to And and that's just how focus mode is just to keep everybody safe and present any instances of Zoom bombing And then as always you're welcome to ask questions. You're welcome to post them in the chat or unmute to ask them This is going to be a little bit less formal of a session today So feel free to jam questions as you come through I can't guarantee I'll be able to answer all of them because I have not the know of all things when it comes to this API But hopefully I'll be able to point you in the right direction or at least give you my personal opinion on whatever we're chatting about at the time All right If I start speaking too fast or you can't understand what I'm saying Please let me know and I will slow down if I'm rushing through something on screen and you want me to pause for a second So you can read it. Let me know that's fine We are recording the session and it will be uploaded to WordPress TV probably sometime next week So if you have to leave halfway, that's also fine Or if you want to catch up on this later and watch it again, it'll be there It also goes to our YouTube channel so you can catch it on YouTube as well The link of you can see in the slide at the bottom and then the places where you can find all of our sort of developer focus educational content is on learn.wordpress.org developer.wordpress.org News that's a different team that manages that but it's a lot of interesting new developer focus things that happen there And then finally our YouTube channel, which is at youtube.com Slash at WordPress and then forward slash videos and we'll take you to all the videos Everything on WordPress TV is pushed to YouTube as well But if you're somebody who prefers to watch videos on YouTube, you can do it over there if you like Okay, so as I mentioned today, we're going to be looking at the interactivity API going to be chatting about what it is And kind of showing you how to get started with it Diving to a few examples of how it works. We're not going to go too deep I'm going to be sharing lots of links with you for further reading And then I'm also going to show you a cool little example of what it could do on my personal blog that I set up yesterday And how you can set it up on your blog if you would like to as well for some Christmas Eve fun or any other fun if you like If you want to code along with me today If you want to replicate the examples that I'm doing today either today or a later stage if you're watching this video later There are some requirements that you will need you will need a local WordPress installation You will need to have Node.js and NPM installed so that you can use the create block A tool to generate sorry. What am I doing here to scaffold a new block? I'll share that link to that tutorial in the chat So if you haven't got those things set up you can watch said video to later stage and get them set up You will need a text editor and you will need a terminal to be able to run commands to just scaffold the initial block So those are the tools that I'm going to be using today. So if you don't have Node.js and NPM installed today, you can't follow along with me today But hopefully you're able to if you you know watching the recording later after the session you decide to give it a try You can go ahead and set those things up My my piece of advice for 2024 is if you don't have Node.js and NPM installed on your machine and you want to play with some of these new things Get it going for 2024 Even if you never use it have it ready to rock and roll Because a lot of what I'm going to be doing in the new years not all of it But a lot of it is going to be relying on having that installed on your machine. So I do recommend getting that installed. Okay Are there any questions or any comments or anything before we before we get into things? I'm going to just have a little sip of water and then we can get going The one disadvantage of the headset is I have to move it to drink water. I don't have to do that in my office All right Okay So the first thing that I want to share with you is this proposal Post this was published on the 30th of March 2023 so beginning of this year And it's basically the proposal for the interactivity API. I'm going to scroll right to the top quickly It's quite a lengthy post So if you if you want to read through it, I suggest dedicating some time to sit and read through it There's a lot of technical discussion in there There are also a lot of comments on the post where people are asking questions about certain things And why certain things weren't done in a certain way or whatever the case may be But it's kind of the initial start of where this all kicked off And how far it's gone. So it was proposed in in March by March already They the developers had developed this interactivity API preview, which you can click on the life side demo from that post And you can I'm going to post that into the chat as well And you can go and see kind of what it does and how it works And and the and the idea behind this thing being an interactivity API is it enables interactivity on your blocks So it makes your blocks interactive. In other words, when you click on things, things happen And the idea is to make it easier to make things interactive Those those of you who've been around for a while, you will remember the early days of jQuery Where we used to do things like jQuery on click or whatever it was and then we used to make things happen and call Ajax requests and make things interactive So this is kind of like Based on built on top of the foundation of block editor Currently a Gutenberg blocks block editor blocks are not very interactive. They're very static. So they have a they have an edit component which renders in the editor They have a save component, which is what renders on the front end. That is very static. It doesn't do anything interactive. And so the goal of this API is to take blocks and enable that interactivity enable things that are Clickable, changeable, movable and all that kind of thing. And if you click through this demo, you will see things like the little when you hover over it, the little Movie Card, whatever you want sort of zooms in you can wish it, you know, you say you like it, you could do that kind of thing. You can click on a specific item and then it will kind of Go straight to that page. You can do things like play the trailer and it'll open up the trailer on the page. You can then close that trailer, for example, you can like this movie here. You can click on Morgan and it'll take you through to Morgan or whoever your favorite actors are from those movies. So just creating you can click on crime, for example, and it does some interactive things there. You will see on the top right my wish list items are being tracked So this is this is happening in some kind of local storage. It's not serving it on the it's not saving it on the server somewhere. It's probably some kind of local storage. Which if I if I come back to this if I refresh this you'll see the wish clears that shows you that it's not being stored locally. Obviously, at some point, you might want to store that locally, but it's creating all of those kind of interactive experiences in this environment. So this is a very simple example of what it does and how it works and what is possible using this interactivity API. The next thing I want to share with you if I move That out of the way. Is the status update. So the status update happened in August. So once you've read the proposal, I recommend reading the status update as well. The status update in August was basically what has happened since March. What is the current status? What is the roadmap? Where can I find documentation, which is what we're going to be diving in today a little bit. And how you can contribute. So if the interactivity API is something that you want to either get involved in you want to test you want to give feedback. You want to maybe you're a JavaScript developer. Maybe you want to contribute. You want to test it and give feedback on any bugs you find this is a good post. Let me actually I just realized I didn't share this in the chat. This is a good post to keep bookmarked because all of the links all of the relevant links are here. So there's a current status. You'll see that it was added to Gutenberg 16.2 as the entire interactivity package. There's some some things in the roadmap. There are now specifically getting started guides, which we're going to be using today and an API reference. There's a quick start guide current requirements where you can ask questions. So there's an interactivity API discussions place in GitHub, where you can ask questions about what it does and how it works and all of those things. You can contribute in the discussions or there are specific issues in the Gutenberg repository that are linked and tagged for the interactivity API. So you'll see there's a feature a label and there's a package label for interactivity. So those issues relate specifically to that. And then sharing your feedback and all those kind of things. So if this is something that interests you, I recommend bookmarking these links and using these links to navigate your way through to be able to talk about the what's the ways and the how's and the why false all right. So those are the kind of the the two posts that I wanted to share to start off with. Now let's dive into the nitty gritty of what we can do with this. And the very first link I'm going to share with you is the sort of official documentation for the interactivity API. It does exist in the GitHub repository. You can access the documentation there, but it also exists in the WordPress developer resources. So if you didn't know the block editor documentation is basically synced from the GitHub repository documentation to the developer documentation on WordPress.org. So if I go to the reference guides of the block editor and I go down to package reference and I search for the interactivity package, which will be alphabetically somewhere. There it is WordPress interactivity. There is the documentation and you will see that it's very similar to the documentation from here. I think they take the read me, which is the other read me is the first one. So interactivity quick start deep dive and it kind of sinks those up. So there's those two places that you can read this documentation. I tend to hang out in GitHub a little bit more for this because this is still very experimental, still very new. And that's what I'm going to be using today, but you can access it in the developer documentation on the WordPress developer docs as well. I'm going to copy that and paste that into the chat as well. So you can read through all of that. And what's nice is they've created a very cool getting started guide, which kind of talks you through how you can sort of get an example or a live demo set up on your local WordPress site. What's very, very cool is that I've mentioned the create block tool before the create block tool allows you to scaffold a brand new block for the block editor. And there is a specific template that you can use that exists for and uses the interactivity API. So with one command in your command line, you can scaffold a block that supports interactivity and has an interactive block that you can actually see and play with. And that's what I love about it's one line and you're good to go. So that's what we're going to be working with today. Run one line and we'll see some things happening. Okay, as mentioned, there are some requirements for this the very first requirement they do discuss it here in the requirements of the interactivity API. Because this is still being developed in the Gutenberg repository, you are going to need to have the latest version of Gutenberg installed, which is currently Gutenberg 7.2. I think there's just been a 7.2.1 was released maybe two or three days ago, but you will need seven. Sorry, it's not 7.2 17.2 or newer. The original requirement was 16.2 between 16.2 and 17.2 there were some changes made to the interactivity API. So if you try and run it on 16.2 now those things will break. And this if you're interested is the reason that my very first workshop on this topic was canceled because we were in that in between stage where they were busy merging the changes from 16.2 to 17.2. And all of my demos were breaking and I couldn't figure out why it was because of this change. So we had to wait for the 17.2 update to happen. But so you will need to in your I'm going to open up my local WordPress environment. No, that's not my local WordPress environment. Sorry. So it's learn press. So in your local WordPress environment in your in your plugins area you will need to install and activate the Gutenberg plugin. If installing and activating the Gutenberg plugin is not your cup of tea then the interactivity API probably won't be your cup of tea either. But if you do want to play with it for now you will need to install it so that you can that you can test it out. I've heard that they're aiming they would the developers that are working on this would like to get it merged in the next major release of WordPress 6.5 which will be sometime next year. That will depend on the core developers reviewing the work so far and whether or not they agree that it should be shipped. So I can't say for sure that that's when it will happen but that's what they're aiming for. So for now until then until that's a mission to call if you want to test it out you will need to install Gutenberg 17.2 at a minimum. With that installed and active as I mentioned you will need Node.js and MPM installed on your machine and then you can use the create block tool to scaffold an interactive plugin. And it's this command over here in the getting started guide it's quite a long command because we're using a template. So I'm using this template switch over here and it's the interactive template that we're using so I can just copy this command from here. I'll pop it into the chat as well if you want to see it on your side and I can hop on over to my terminal. I'm already inside of my word my learn press site so I'm already there so I'm going to switch over to the WP content directory and then I'm going to switch to the plugins directory and I could have done that in one command but I tend to do individually like that. And then I'm just going to paste that command so it's npx at WordPress last create block at latest and that at latest is important if you've used create block before it'll the way create block works it caches the current version of create block locally. So if you use the at latest it'll get the latest version of create block and then you give it a name and in this one we're just going to call my first interactive block just for fun. Baby's first interactive block whatever you want to call it and then you pass it this template option and you say we want to use the WordPress create block interactive template. So that's going to scaffold the code using that template which would be a specific block purchase on a specific edit file a specific render and view and all those kind of things which I will dive into together. So when I hit enter on that command it's going to start doing a whole bunch of things it's going to start trying to download the latest version of create block. You see there there's a new version already says yes I want to use that version. And this takes a few moments, depending obviously on your internet speed, because it has download the files off the net, and then set up the scaffolded block for you. So while we're waiting for that to download I just want to take a pause and just check if anybody has any questions around all of this, anything that they that pops into the head while we were looking through all those pieces of documentation. Otherwise, I'll just take a water break. That was my last sip of water so I don't know what I'm going to do for my next water break. All right so it's installing any npm dependencies it's installing the interactivity package. It's installing the scripts package which takes a few minutes and then it'll start scaffolding the block while that's doing that. I'm going to hop back over to my notes here and I want to share with you this link. So this link is and yes this is a sort of pro tip folks if you're ever presenting a live coding demo that takes a few minutes for something to happen have a link for folks to look at while they're waiting. So this is an example block development examples repository that Juan Ma, who is a colleague of mine at automatic he's also the team lead for the developer relations team at automatic. He has created this block development examples repo for examples of block development projects that you can work on. And there's all kinds of fun interesting things in here what I love about this is he's got downloadable zips for each one so you can just download it and install it in your setup and see how it works. He's also using the playground to set up live demos of each one of these you know what the playground is it's a it's a version of WordPress that runs inside the browser. It's developed using something called a wasm which is web assembly something or other I don't know any of the technology of how it works I just think it's pretty amazing. But he set up live demos for these so if you're ever looking for examples of how things work for block development ideas. This is a great resource and we're going to use the interactivity API countdown later on in this workshop. So I just thought that was I discovered this while I was preparing this workshop and I thought it would be a cool resource to share with all of you. All right, and I was hoping that this would be done by now after I'd shared the resource with you. So we're going to dive we're going to dive ahead a little bit so we're going to kind of look at what the code for this might look like. So if we go back to the quick start guide. You'll see there's a note here about the interactivity API using modules instead of scripts on the front end. That's only really relevant if you are needing to create a zip file of the of the plugin you're generating. So don't worry too much about that. Then it talks about generating the build. So once you've installed everything you need to generate the build so you just switch to the directory and run MPM start so that it starts the development process. And then you can actually use it in your installation. If it's easier if you have a local WordPress installation already running you can start using the plugin. If you don't you can use something like WP now whatever the case may be and then dive into the API reference. Okay, good. My block is done and it took me five minutes of waffling to get you. So my first block has been scaffolded. So what I'm going to do now is I'm going to switch over to that directory. My first interface actually clear this up so it's a little bit. Clear this. Okay, so I'm going to switch over to my first interactive block. And then I'm going to run MPM start just to get the development server running. This is something we're using in block development is kind of every time we make changes to the files it rebuilds the build directory. All right. If I now go back to my WordPress site and I refresh refresh my plugins page. There we have I have my first interactive block. I can now activate this and I can now see what this is doing. So what I'm going to do is over in my posts over here I'm going to create a new post. And I'm just going to call it interactive block and then I'm going to add the interactive block. Okay, there it is my first interactive block. And in the editor it just has some text because we don't need the interactivity in the editor right now. The interactivity is primarily happening on the front end. So in the editor view it just has some text and that's all it's going to have for the rest of the rest of this demo. But if I save this draft and now preview this in a new tab for example. What it renders is a very simple little toggle button and clicking on the toggle button reveals the content. It's a very simple demo but it shows that kind of interactivity. Now I'm sure those of you who have worked using either vanilla JavaScript or jQuery or any one of these libraries. There are multiple ways to do this. We hide the div or we style it differently or whatever the case may be. Then when we click on the button we bind to the event listener. When the button gets clicked we hide or show or however the case may be. Very, very simple example of how this works and what this does. And I'm sure we've all got many different ways that we would achieve this solution. But what I would like to show you today is how this works with the interactivity API. So if I open up my WordPress site in Visual Studio Code and I hop on over to the plugin directory. And I find that block. The first thing I want to show you is the block.json file. So inside of the block.json file the important thing to see is the fact that it has the supports property in the block.json. And we basically need to set interactivity to true. So that tells the block editor that this plugin supports interactivity. So that'll load any JavaScript that might be required for the interactivity API for this block. And what I like about that is that tells me that if I have non-interactive blocks on any postal page, then those blocks won't load interactivity API. It means that JavaScript is not being loaded on every page load. So that's another reason why I like blocks is it allows that modularity of what resources get loaded and what don't. The other slight difference you might see you may never have seen this before with block development, but you may have is that there is a render property. And basically the render property allows you to if you don't know what it's called a dynamic block. A dynamic block basically allows you to instead of having the save function and the save function handling what happens and renders on the front end. You can specify PHP code to render on the front end. The original way you used to do that was there was a hook used to hook into in your plugin or theme code. And there was a callback and then you could then put your PHP in the callback. As the block editor evolved, they made it possible to use for you to specify a specific render PHP file, which is, I believe, a little bit easier and better to manage. You just have all that code sitting in one file and you do that by specifying the render property and pointing it to the render PHP file. The PHP file name is largely arbitrary. You can call it whatever you want as long as you have the render property pointing to that file. Then the edit.js is fairly straightforward. It's just rendering the text in the editor. So we're not going to have a look at that again. The index.js is also very straightforward. It's basically setting up the block type. We're not going to look at that again. The next one I want to show you is the render dot PHP. So in the render dot PHP telefencers giving me messages. Just give me a second here while I dismiss that. So in the render dot PHP, there's a whole bunch of stuff in the notes and there's this unique ID thing. Don't worry too much about that. And there's this module. Don't worry too much about that. But essentially what we've got here is fairly standard HTML. So this is a div tag. It just happens to be over multiple lines, which you can do in HTML. It's still valid. And you'll see that it's using the block editor wrapper attributes to get the attributes from the block. And then it's specifying these data attributes here. Now, again, if you're like me and you come from the jQuery days, you remember we used to use these data attributes. Sometimes we would pass in an ID or we would pass in a value or something like that. You can do something within JavaScript. And so the interactivity API makes use of these attributes. If you didn't know in HTML elements, you can specify your own custom attributes just as we've got these here. And then you can use them all over the place in your JavaScript if you want to. So the interactivity API makes use of these data attributes. You'll see they all have the word data to begin with. And then it's WP is the second part. And then interactive is the first sort of key name that you can use. And you will see that you specify a namespace. So what that means is if I specify a namespace, everything that belongs to that namespace stays with that namespace. So you can't call a namespace from somewhere else. It kind of makes the code a little bit more modular, a little bit more enclosed. Then you'll see there's this context attribute. And it's basically you'll see that this code is essentially just JSON. So if you're used to JSON objects, it's property and value, property, value, property, value. It's kind of like an array that way. So the is open property is set to false. And then there is something called a watch. And the watch is going to use the log is open callback. And I'll show you how that's working in the code in a second. Then there is this on click attribute. Now all of these WP attributes are specific to the interactivity API. So when we look through the docs, just now we'll see them all. So you have to specify them as data, WP interactive, data, WP context, data, WP watch for it to perform the specific functionality. So you can have things like aria expanded and then you'll see it says context is open. So currently context is open is false. And so when you click on the button, you want something to happen. So just bear with me on that one. Okay. Okay. Mateus says he can't see the shared screen. So I'm going to pause there for a second because sometimes that's a zoom thing. I'm going to pause there and reshare my screen. Hopefully that'll fix the problem. So let me just stop the share. And then let me reshare. I hope I'm pronouncing your name correctly. Mateus. And share again. And then Mateus, let me know if you can see my screen now. If you can't, then I'm afraid the problem happens to be on your side. Okay. All right. So then we have this toggle. You see, there's the button with the toggle text. And it's got this click attribute. And if you start thinking about like a click attribute and it's saying the action is to fire off toggle. So toggle, think about toggle being somewhere that happens, something that happens. And when it's expanded, the context is open. And then for the paragraph, the paragraph has an ID. That's just a standard HTML attribute. This WP bind hidden attribute is not context is open. So in other words, if you start thinking about it, if context is open becomes true, then the data by hidden probably will change engine. Something will change. So you start seeing how this all works together. So just by using the attributes in that way, we can almost start thinking about like how the code for this might look. The way the code works is in the block.js on the file. There's another property that you can specify that I didn't mention earlier specifically. Oh wait. No, it's not here. I'm talking absolute nonsense. I think it's supposed to be here. So no, it's not supposed to be here because it is working. Oh yes. I'll get back to that in a second. But there is this view.js file. Now, originally, if you wanted the view.js file to render, you would specify it as the view property in the block.js file and then pass the path to the view.js file. Currently in the interactivity API, we're not doing that and I'll dive into why in a second, but just bear with me. But for now, let's have a look at the code. So in the code, in the view.js code, you'll see it is not a lot of JavaScript code that's happened. So the first thing that it's doing is importing store and get context from the interactivity API. So these are callbacks, functions, objects, whatever that exists in interactivity API and we're importing them into our codes because we want to use them. And then you'll see we set up this new store object or alias or function, whatever you want to call it. And we pass it the namespace. So you'll see that's the name, same namespace there as the namespace we specified in the first container. The one that is WP data interactive. Switch these two round. And then you'll see there is actions that you can specify. So that ties into the actions that we're calling here. And inside of those actions, we specify the toggle action. So we set it up to say right when the click of the button happens. So this is how we set up the click event handler. We don't have to write, but it's an on click event handler. We use data WP on click and that sets all that up for us. And that's one of the reasons I love this because just by using that attribute, it does a whole bunch of things for us. So when the click happens, trigger the actions toggle action. And that is the function that is defined here. Then inside of that function, then we can do what we need to do. So inside of there, we're saying, right, get the context from our interactive block. And the context we specified over here in WP data context, we set that up as a JSON object. And the first property was in is open and the value was false. And then we said when we click, change context is open to whatever context is open wasn't. So it's either true or false. And if you've used JavaScript and true or false, we know that you're going to JavaScript folks like to switch it on and off like that. So not is open. So essentially in about three lines of code, maybe more, let's call it, let's call it four to five lines of code. And a couple of attributes on the front end, we have bound to the on click event. We have passed the context from the container to that on click event handler. And then we run the code just the code we need inside of there. And that's what makes all these things toggling it on and off happen. So what I like about this is a it's a lot less code for me to write and be the attributes they're using are very sort of. There's a special word they use in the post to control what it is now. I think it's declarative. I think it's the right word where the attribute makes sense. The attribute ties into the action it does. So data WP on click ties into the on click event registers a handler for you and all it needs you to do is tell it right where is the action that I'm firing. And then you specify the action in your store tied to your namespace and then you put your code in your action. Okay, the log is open is essentially just another callback. Where did we set that up originally? Sorry, I hear my cat moaning. So I hope he's not stuck anyway. Here we go. So the log is open callback is happening on the div. So the div is watching all the time and anytime something changes, it's going to run that log is open callback and it simply logs the value of is open as true or false to the console. So you can set up watches to watch different things and do different things and report on different things. Sorry, just give me one sec. Happy to report that the moaning cat is outside the bedroom. So not my problem. So so yes, so the log is open callback is just running all the time when things change reports whatever you need to do so you can set up those kind of watches on things and again it's a very simple little bit of code. You say I want to register a watcher and I wanted to and what I like about this as well is the fact that I've set up callbacks and actions is kind of sort of custom but how I wanted to be I could probably call action something else I could call callback something else. I can have multiple sets of functionality within my store for my name space and then do whatever I want. So it gives me that flexibility to write kind of write the code the way I wanted to and then use the things that I need to do. Adrian says I'm not the only one who gets a rest and bust around by a cat. It's just because I'm at home today so I'm at home with the two cats and the two dogs. All right, so that is a brief overview of the first plugin that you can create and kind of what it does and what it can do. I wanted to just stop and check if there are any questions on all of that I know it's a lot to take in. It's a lot of information to dump on you so I understand if you might not have questions. I do recommend checking this out playing with it diving through the documentation seeing how all this works and taking it from there but I just wanted to check if there are any questions before we before we carry on with the rest of what I wanted to show you. All right, we don't seem to have any questions at this point in time which is perfectly fine. What I would like to dive into just sort of diving very briefly with you is the API reference documentation. So in the reference documentation, there's this wonderful instruction talks about how things work. There's a nice visual overview of how this all fits together if you're somebody who understands things better visually. I'm the kind of person who understands things better when I fiddle with the code so this visual doesn't help me at all. But there is that and then there is the table of contents with all the directors so you'll see that it has the list of directives and then some information about the store. So the directives are basically the custom attributes as we discussed. Each directive has a specific thing that it can do and the very first interactive sorry the very first directive they talk about is the WP interactive directive. So this basically activates interactivity for the DOM element and all of its children. So when you are developing, I'm just going to make this a little bit smaller because I find it a bit difficult to just zoom out a little bit here. Can I remember how to zoom out? Here we go. Just zoom out once. There we go. So you'll notice that the container div element has the WP interactive directive. So that needs to be set up for every container that is going to require interactivity to happen. You'll notice it's usually the same container element that is the sort of parent element for your block. If you know from block development or blocks have one parent element. So if you need to have multiple elements inside that's usually a div. And so that's the one you would usually specify as interactive. I see there are some questions. I'm just going to check. It says so after an action is triggered, any binded value is refreshed just like a render function being called in react. I think so. I don't know for sure, but I think that answer is true. But I will make a note of that and find out and I'll post the answer in the comments. I don't know if that's exactly the right answer, but I'll post the answer in the comments afterwards. Aaron says, if you import the interactivity package into a block plugin, do you need to have the Gutenberg plugin installed for it to work? Essentially, yes. So if you're developing locally and you import the instructions, they talk about importing the package because you're developing locally. When it goes on to someone's site, they're going to need to have Gutenberg 17.2 installed on their site for your plugin to work because then the libraries that are installed will get installed that way. So that's why it's not really ready for building products for customers or for clients yet unless you get them to install Gutenberg in its current version until it gets merged into a core. So that is the case there as far as I know. But I will check that one as well, Aaron, and just feedback if there's a different answer that I get from anybody in the team. Okay. So let's go through the API documentation against them. There's the interactive directive. Then there is the context director. So that provides a local state to state being some form of data being stored and used to move around. We saw that earlier. We set up the is open value and we use that and it changed. Then there are other things. There's the bind one that we've seen. No, I don't think we saw all bind could be. No, we didn't see bind. So I wanted to show you bind quickly. Now what I'm going to do is I'm going to take this list item alps and I'm going to replace it with the current button and paragraph that I have here. And you'll notice that I'm not getting rid of my parent element. I'm keeping that there. I'm going to pop that list in there, which is using the bind. Actually, no, sorry. Did we use the bind? We did. Yes. We use it for the context is open and closed. So it's bound on that. And when when his open changes, then the element changes. So we have used that already. So I apologize. Then there is class. So you can add or remove a class on an HTML element. We all remember has a class. If is class or if has class, then add class. Remember those from the jQuery days. So you can do that kind of thing. You can add or remove inline styles on an element using the WP style directive. And what I like about these examples. This is very, very cool is you've got the, the style directive element. Yes. I can copy out this. For example, the style. And I'm going to pop it inside of my. Inside of my main, my main container here. And I'm going to just format it a bit better. I don't need the log is open watch in the context anymore. So I'm just going to remove those for this example. There's the context already. They're color red. There's the on click actions toggle color. And then there's the style. Color context color. So that's what's happening over there. Let's just format this a bit better. What I like about the examples is they also, they use the, the sort of little opener item here and you can just grab the code. And you can use it in your, in your example code. So if you start with the interactive template, then you can just kind of use this and have some fun with it. So I'm going to do that just now. I'm going to pop this in here. The one thing I want to change is the store needs to change to create block because that's the store I'm using. I actually, I actually might try and update these examples because if you're working off the, off the scaffolded block, it'll be easy if it was all just create block. So there you'll see it's calling the toggle content color. Sorry, toggle context color action. It's getting the contents. Then it's saying if it's red or if it's red, make blue, if it's blue, make it red. So that's a few lines of code there. And then we've set up the click calling that action. And then there is the color style and there is that. So let's see if that works. My build should have finished. Yes, my build did finish. And let me find my, my interactive block here. So there we go. So let's toggle the color. Hey, it works. So that's very cool. So those kind of very simple examples I like it kind of shows you how things work and you can use it and you can dive into it. And so all these directives are listed in the documentation. They've all got example code that you can have fun with. So there's the WP style WP text. You can change text. There is a WP on which runs code on dispatch DOM elements like click or key key up. We've seen that there's the watch which we chatted about. So it runs a callback when the node is created and runs it again when the state or context changes. So let's say this might be in relation to your answer as well. So whenever the state of the context changes that watch callback will run and you can do things with it. It's useful for counters, increasing counters, decreasing counters. So all of them are listed with examples that you can use that you can play with with your scaffolded block and understand and see how they work. Okay. So that's the last bit of documentation I wanted to share with you. Are there any other questions? If you do have questions and I can't answer them, I will find out the answers and share them in the Meetup chat, in the Meetup comments. So if you have any other questions now, please do let me know. I'm happy to admit that I don't know everything, but I'm also happy to go and find out answers. While we do that, the last thing that I wanted to show you was, let me just go back here quickly. Yes. So I've shared all the reading with you. One of the cool examples in the block example, block development examples repository, is right at the bottom here. It's this interactivity API countdown. You can download this and install it on your site. You will need Gutenberg 16.2 to have it up and running, but you can then do something like this, which I thought was very, very cool. I created this on my personal blog yesterday. I just created a very little jolly Christmas countdown and it basically uses the interactivity API to have a countdown on my blog, which is counting down the seconds till Christmas. Somebody asked me on Twitter when I shared this, what time of date is your Christmas start? So I set this to 2359 on the 24th. So just before midnight, I set it to, so that's what it's counting down to. And I'm in South Africa's time, so probably the time zones are a bit off. So probably for that person, it's showing at a different time. On the back end of this page, I'll actually show you the post. I don't mind editing this post and showing you how it works. In the edit component, you'll see that it's not interactive. It's just the time that you've set it to and you can then click on the change date button and it simply just pops up a date time picker. So you'll see, I set it for midnight. That's where I went wrong. I set it for midnight on the 24th. It should be midnight on the 25th. That's why it was wrong. So it's set for midnight on the 25th. Is that even right? No. That should be midnight on the 24th. It was right. But now will it be midnight to the start of the 24th and the start of the 25th? I can't remember. It doesn't matter. That's not the point of this. So that's the edit component. It just handles showing that value and that date picker. But then interactivity is handling all of this on the front end. So it's taking that value and it handles all of those values as the seconds count down. It's probably using some kind of live, you know, time, whatever. I just thought it was a really cool little example of how the interactivity API can make things interactive on your WordPress site. Okay. Crash days, what will happen to interactive blocks if a website visitor has disabled JavaScript? Will they just do nothing or is there some sort of fallback? Again, I don't know the answer to that. I would assume it's like a fallback. Happy to find that out for you. If folks disable JavaScript then that's other things breaking as well. It might be JavaScript enabled. I can't control that. I will check if there's a fallback and find out for that one. But I says, can I bind to events that are not related to DOM elements inside my block like listen to root changes or scroll position? I don't know. I can find that out. And then Sega says how do we to communicate between two interactive blocks? I really don't know the answer to that. It's so brand new. So I can find that out for you as well. Happy to do so. If you want to ask these questions yourselves which you are more than welcome to the status update post that I shared earlier has the discussions link. So right at the top of this there is a where can I ask questions? So if you want to wait for me to find out the answers, happy to do that. If you want to ask the questions yourselves you can go there. You can go to interactivity API discussions. And please I would encourage you to ask these questions. I haven't developed the software. I'm just the developer educator sharing it with you and showing you sort of the basics of how it works. I'm still diving into it myself. I waited until because I knew that there was this I don't like playing with things but interactivity API was sort of marked as experimental up until 17.2 of Gutenberg. And so that's when I started playing with it when it wasn't experimental anymore because I know as developers when we say things are experimental they're going to change. Code is going to change how it works is going to change. And then it means I have to learn a new thing. So I wait until it's not experimental anymore. I wait until sort of RC stage beta RC stage. Elliot that's a good question. I don't know myself. That's why I've only started playing with it now. And I want to talk a little bit about why I'm doing that after we wrap this up because it also ties into my plans for the new year and my online workshops. So I don't have all the answers just yet. And it says I'm supposing both our questions can be solved by registering events on the next life cycle just was checking something again. I don't know. I couldn't tell you possibly very possibly but I don't know the answer to that. So I love the fact that you're asking these questions, but if you would like to ask them yourselves, you can do them in those places. So I will go and ask those questions. I have a log of this of the meeting chat so I can pull them out and ask them and I'll get some feedback for you and share it in the comments. But yes. All right. So that's my bit. That's all I wanted to share with you today. If nothing else, I hope I've encouraged you to go and play with it and try it out and see what it can do. I want to thank the folks who have asked to come to our meeting chat with our community so we know how these things work. But that ties quite nicely into. Oh, it is a lot of the idea of interactive API but isn't this this isn't a replacement for Ajax, right? Well, that's the thing it depends on how you define a replacement for Ajax. If you mean just standard Ajax, possibly if you mean specifically WordPress and admin Ajax possibly as well. So my recommendation, if you're still using WordPress as Ajax implementation using that admin Ajax implementation, my recommendation would be to move away from doing that to move more towards a REST API environment where you're making calls to the REST API and getting the data back that way. If you mean Ajax in general, probably not. Probably standard Ajax will still work but you probably won't use Ajax. You'll probably start wanting to use a core data package that ships with the block editor which you can use to request data from your WordPress site. If you need to request data from elsewhere there's also something called the Axios package which is a third party JavaScript package. I would recommend using that rather. So standard old school Ajax still has some issues in a security problem. So I would recommend switching over to using those things. And you will notice that in the original proposal and if you come from environments where you've used things like Alpine.js and all of that in the comments there is a lot of discussion around other third party libraries that exist and why the team who was working on this didn't use it. So I'm glad Sega that you mentioned Alpine.js. I'm just going to scroll down to the comments quickly. But there was specifically a comment about why don't you use library X. I can't remember if it was Alpine or if it was something else. I just want to find it very quickly. Yeah, here we go. Kimmery grabs says are you familiar with HTML first interactivity libraries like HTMLX, Alpine or iPolly and there's some discussion there about why they didn't use things. There is also a discussion further down. Andrew Oz also mentioned Alpine.js and then Louis Haran's responded as to why they chose Alpine.js. So I recommend reading that. So if you're used to some of those things, a lot of this probably looks very familiar. It's kind of WordPress's version of that. I'm not involved in those decisions or whether that was a good decision or a bad one is not one that I can comment on. My job is just to teach folks how these things work as much as I possibly can. So I'm going to go into that and then I'll go into the specific questions that I have with the theme and custom CSS because it will handle better when things should be loaded, etc. Yes, that's one very good example. At the end of the day it all depends on what your background is. My background is I use whatever is in front of me. So when I was working as a Laraval dev I was doing Laraval things and whatever Laraval was I would, and I literally said to that person that day whatever the framework is that I'm using uses and that wasn't seen as a very clever answer but that is my mentality. I'm not going to have an argument about what is the best or what is the best framework or the best whatever I'm working on that's what I'm going to learn to use and try and do the best that I can with that. Whether that's a good thing or not we can have that discussion before we wrap up is that as we move into 2024 if you don't know the training team has been working on something called the Learning Pathways Project. And so there is the link there. If you want to read it you're more than welcome to let me just hide this and share that. And so my role within the training team has changed slightly. I'm not going to be doing in the past. I'm not going to have as much time to prepare my workshops. My workshops are going to be very similar to what I did today. So introduction to stuff playing with things, questions that I don't have answers to that I'll find out later. And they're also switching to more of a live stream format. So instead of using Zoom I'm going to be using Twitch and live streaming on Twitch. And that's because I'm not going to be using Zoom because I haven't spent the whole week studying it and learning it and hopefully I'll be able to learn from you all as well as we go through this. But in the future they're going to be a lot less structured. A lot more sort of this is just what I'm working on. This is what I'm doing and we'll sort of take it from there. The main topic that I'll be starting off with in the new year will be contributing to WordPress. Kind of everybody's focusing on the JavaScript side Gutenberg and how that works. Nobody's really working on the REST API which powers Gutenberg. So I'm going to be diving into reminding myself of how that all works. I'm also going to be kind of using that time to review some of the current local development environments that are available. So in other words looking at WPNOW, looking at WPENV and kind of my opinions on those two and using those and so using one of those to start looking at contributing to WordPress and then going through from there. Crash says, well someone else take your role at Learn WordPress and providing really well structured explanation for developers. So I'm not leaving I'm not leaving my job or leaving what I'm doing. The workshops that I'm working on just won't be as structured but that's because the content that I'm working on will be more structured. So the learning pathways project that I'm working on in the past I used to just create these tutorials about topics and kind of try and put them together in something that made sense. Now what I'm going to be doing is I'm going to be working on specific topics for the learning pathways project that are way more structured, way more goal orientated. There is a beginner developer intermediate theme and plugin developer and then advanced developer track for those learning pathways and that's what I'll be focusing on. So once that's all done then that content will exist which is more structured and I'll be explaining these things better. I'll have more time to dive into these new APIs like the interactivity API, how it works, what it does, really understanding what it does and that will come into those learning pathways. So I'll still be around and you'll still be able to ping me with questions and if there are specific topics you want me to discuss we can certainly do that but the workshops that I do every Thursday will be more like today session, a little bit more relaxed questions from your side that I can go find answers to and bring back the following week. So hopefully it'll be something that you're keen to join every week because we'll have answers from the previous week coming over to the next week and those kind of things. A little bit more of a group environment, a group session that we do every week and learn with each other as opposed to being very this is what you should do and this is how it works and we have a lot of questions and this is one of the the teams that I'm going to talk about is more fleshed out modules the modules will be more fleshed out. Right now if you have a look I want to show you if you have a look at learn. WordPress.org for example and you go to the homepage there's this list of courses and it's like community is to have more of a structured environment where when you come to learn WordPress, you choose your path. You're either beginner developer, intermediate developer, advanced developer, beginner user, da-da-da-da. And you go through that path step by step by step by step. And when you get to the end of that path, you know everything about that path and then you can move on to the next path. So the ultimate goal is more structured and more detailed and more goal-orientated. It takes a while to get there though. It's gonna take us probably at least the first half of next year to get there. So if you are somebody who likes creating that kind of structured content, I invite you to join us in the training team. You can go over to the, I'm gonna open up Slack and hope it's on the right channel. Hopefully that's the WordPress one. Yes, it is. So if you're in the WordPress Slack, there is a training team channel, just hashtag training. Come and join us if you like creating structured learning content, specifically video content or text content. We can work with that. And come and join us and help us make all this developer content. If you want to see where we're starting in the project thread that I shared with you, there is, if you scroll down to the, I think it's in the comments. Yes, there are some learning pathway outlines, content order, here we go. They're the learning pathway outlines. I can share that with you as well, happy to do that. And you will share that, you will share that. You will see that we've got user, we've got designer, we've got developer. And this is quite a lot of content that we're busy working on. There's plugin developer, theme developer, advanced debugging. So there's a lot of work we need to do to get this going. There's designer focused things. So if you're somebody who likes creating educational content around WordPress for designers, there's lots of stuff you can do there and for end users as well. So if you're interested in joining us with this project, please do consider joining the training channel. The Slack link, if you want to join the WordPress Slack, you can go to chat.wordpress.org. That will require you to have a WordPress.org account. And then once you've got that account, you can join the Slack team. It's open to anybody who wants to join who has a WordPress.org account. So you can come and join us in training. There's also one last thing I wanna share with you. If you go to the training team handbook, think it is, there is something called the guide program. And the guide program specifically is aimed at new contributors to the training team. So the way it works is you're new to the training team, you wanna know where to get started. The guide program will pair you up with a program guide who will meet with you three times over the course of, excuse me, three weeks and kind of step you through that progress. So if you're the kind of person who likes to have somebody along with you for the ride, I do recommend checking that out. There is a link of how you can participate in the program. If you're the kind of person that likes to just get in and get started on your own, we do have a getting started guide. So let me share that link as well. And you can just get started from tomorrow. So it'll talk you through the process of getting started and you can see where you wanna go. So I would like to invite anybody interested in creating any of this kind of content to join me next year in doing this. If you're somebody who likes doing videos or you like doing these kind of things, please feel free. If you like doing these kinds of online workshops and you want to help full the gap of me not doing them as structured as I have been, you're welcome to do that as well. There's a process for doing that as well. So do check that out and let me know if you have any questions. Sorry, my voice is going there. All right, so this will be my last workshop for this year. Next week is my last week at work and then I go on leave for two weeks, as I mentioned earlier. I want to thank everybody who's joined any one of these workshops this year and especially those of you who have joined today and shared your questions, especially those who've asked me the hard ones that I need to go and research. I love finding out those answers. Thank you all for your time. Thank you for joining me this year. It has been great to learn WordPress along with you. And I look forward to us learning more WordPress next year as we go. Thank you, Elizabeth, for that comment. Elizabeth is from South Africa as well. So she knows exactly how nice the world route is. 2024 to me, I feel like is going to be a very exciting year for WordPress. Because there's lots of cool stuff happening built on top of the foundation of how far we've come with the block editor. Things like the interactivity API. Things like the collaborative editing, which is the next phase. Things like multi-lingual, which is the phase after that. I think there is so many cool things happening. I'm very, very excited about it. So yeah, enjoy the rest of your year. Those of you who are celebrating Christmas have a great Christmas and new year. And I will see you sometime in January for my first live stream. And I hope you all have, if you're taking some time off, I will have hope you all have a great break. And I'll see you in the new year. Okay, bye-bye.