 Hello, my name is Luis Aranth. I'm going to do the workshop today. I'm from Spain. I live in Madrid. I consider myself lucky because I'm sponsored to work full-time in the WordPress.org project. I'm sponsored by Automatic. And I'm currently focused on the developer experience of Gutenberg and Fullsite 18. So I'm very happy because I think it's kind of a revolution for WordPress and for the web. Yeah, and previously to that, I was the tech lead of a headless framework for WordPress called Frontity. So for the workshop, I like to first prepare the local environment so you can download what's necessary, start the NPM install. The Wi-Fi should work but it's not the fastest. So yeah, let's first prepare the local environment and then I'll do an introduction and a small introduction to the activity API. And then we can create some blocks. So for this workshop, the first thing that you have to do is you have to go to this repository. This is github.com. And here there are more instructions. So, well, in reality, yeah, the only thing that you're going to need for this is Node. We'll explain a bit later why you now only need that, okay? But you need version 16 or later. Here we have some technical assistance. If you have questions or if you get stuck or you have problems, just raise your hand and they can go. So I can keep talking and I don't have to stop. They also have three bend drives with all these things in case connection is slow, okay? So first of all, who doesn't have Node 16 installed or later? Okay. So you can go here to download Node and install the latest version. If it's too slow, I don't know how big it is. If it's so slow, just ask for a bend drive, okay? After that, well, it's better that you clone the repository. So if you had Git, just clone the repository. This is the URL again. And the most important thing is running MPM install. Okay. So the repository is GitHub, Luis Ranz, WCEU 2023. Yes. Yes, we have a zip. So you can do that. But, well, yeah, you have a while for MPM install because we're going to be talking about doing a small introduction and so on. Okay. So again, download Node. You don't have it. Clone this repository. You can also download the repository, but I think it's better if you clone it because then you can check out on each step. And then run MPM install. And then here in the repository, there's a special version of the Gutenberg plugin. Okay. You have to download that as well. The most important thing probably is the MPM install. If you don't have Node, well, you need Node for the MPM install. But that's easy with the bend drives. And this zip is also on the bend drives. Okay. I'm going to continue and I'll check in a few minutes how you are doing. Okay. Is it okay? Very slow. Okay. Maybe we should start rolling out the bend drives. Okay. So if you have a question that's good for the general audience, just let me know. It's just for them, just write your hand and look at them and they will go and try to help. Node WordPress. You don't need WordPress. Yes. And actually, yeah, that's a good question because you can clone this repository wherever you want. It doesn't have to be inside of a WP content or anything. No. For now, just MPM install will continue. Yeah. Once we get to the real code, we'll continue. Just MPM install. Okay. I'm going to keep going. So I want to do a brief introduction of the interactivity API for those of you who don't know about it. I don't want to get too deep here. I prefer to explain things in more detail later when we are coding, but I think it's good to be like a brief introduction. So the interactivity API, which is what we are going to be using today to create interactive blocks, it's a proposal right now for an upcoming standard to build interactive blocks. This is coming to kind of fill the void in the Gutenberg API where most of the APIs were for the editor and not for the front end of the site. So this is the editor is still going to use React. In the front end part, use like where you would use PHP to render the blocks or JavaScript then in the front end, with vanilla JavaScript, jQuery or whatever you're using. Okay. Interactivity API is only for the front end. It doesn't affect how the editor works. For now, it doesn't interact with the editor. So the idea here is that for creating interactive blocks with this new API, you keep doing the editor in the same way that you're doing it, but in the front end, you can use this. You can use it in both PHP and JavaScript at the same time that we'll see a bit later. So I wanted to show you what it can do with a website. Well, first, let me show you the proposal. There is a proposal. It was written by Mario, who's around, I don't know where, helping. Hi, Mario. And here in the proposal, there are a lot of details. It's also the demo that I'm going to show now. So if you are interested, I'm not going to go in so many detail as the proposal. It's a very long proposal. Okay. And there's also a long conversation around. So there's a lot of information there. I'm going to explain, I want to explain more how it works. But still, I'm going to explain a little bit why is this way. Because I think that's the main question that people had when we wrote the proposal. It's, why does it need to be the way that it is? Okay. So I'm going to cover that. If you want more information about, yeah, what were the goals of these and so on. Here, the full proposal and so on. Here, like, you can read the proposal. Which is in Make Core. Okay. So what kind of things can be built with this interactivity API? We did a demo. And in this demo, there are some interactive blocks here that can have a state, like front and state, and can interact with each other. There are also client-side navigation. So if you click on a page, if you have a professional strategy, then navigation feels instant between pages. Also, the state is preserved among navigations. You can do things like pagination in place. So these things, for example, here, we're changing the page. We are actually changing the page, but you don't see, like, the refresh. Okay. There are other cool things that you can do, like playing a trailer, and then keep navigating for the web. If you change some state, for example, this is liked. So if I go here, you'll see that this state is, we like this movie. And the state is preserved across all the pages. So if I navigate back, this state is not there anymore. There is, you can do things like instant search, for example, search for things. And this works with the block editor. So if we want to, I don't know if I have the... This is the demo. Okay. Let's go to the WPathmin. Let's open movies. They're here. So this is a block theme. And even though you can't create these type of user experiences, you can still drag and drop blocks. So we're going to modify the search template, for example. So if you go here, template, search. These are the list of the blocks. So this is a query loop block. Nothing special here. We're going to add some text here. So after I work in Europe, if you save this, then the next time that you navigate, so these, for example, it's going to be there, because it's in the HTML. And you can add whatever you want. So for example, let's add a couple more. Let's add the movies like button. The movies score. These are movies score, calls score. Yeah. Movies score. Okay. And you can style them. So maybe do a group. Maybe put this like that. Maybe reduce the size. Change the color. Add some padding. Yeah. Save it. Then you don't even have to refresh the page, because it's not in the page. It's in the HTML. It's in the server. So you go, I don't know, go raw, for example. There's a movie. Okay. There you go. It's, yeah, instead of doing, yeah. But the API is the HTML. That's kind of the approach here. So wherever you put in the HTML, it's going to, it's just this API is capable of doing these transitions maintaining the state. It's closer, if you're following latest React progress, it's closer to the server's component approach, which is not even released, but yeah, it's like, there are some things that render on the server, and then instead of requesting some data through an API and having some JavaScript that can turn the data into the HTML, you just ask for the HTML. Then in that HTML, you know the spots that are interactive. Okay. So you can preserve them. So for example, you're writing here, and yeah, and the focus stays. Yeah, it's just, you don't lose the state of the UI. Okay, because everything that doesn't change is preserved. Okay. So things, for example, like this is a page navigation. You can see the query here changing. Okay. Between these two. So if you refresh this page, it just goes there. Okay. The URL is still the source of truth. Okay. Let's, well, I'll remove this later. Let's keep going. So how does it work? We made the HTML the template language, and we exposed the primitives of the declarative frameworks as directives. Let me explain that with code. It's going to be easier. So for those of you who know React, is it big enough like that? Because I hope so. Okay. So this is a regular React component. It's, if you prefer view or as belt, it's fine as well. They all share the same primitives, this kind of modern declarative frameworks. All of them have some way to declare a state, to have side effects, to add event handlers, to change, yeah, to have conditionals, and so on and so forth. So the thing here is that, and I think this is, I wanted to explain this because I think it's the main question that people had when we released the proposal, is that, okay, Gutenberg is already using React in the editor. Why don't we just React on the front end as well? And the thing is that it doesn't work. It doesn't work. It doesn't play nice with WordPress. WordPress has a PHP server, so it cannot understand JavaScript. Actually, it may seem like this is HTML and we could extract it somehow, but in reality, this is compiled to, whoa, this is compiled to something like deep, and then this, and then an array of children, and then another, and then button, and then on click, and then the toggle here, an array expanded, and so on and so on. Then the toggle here, this is a string, and then another children is open here, and another, the paragraph here. Yes, this is how React builds. This is how GSX, well, I'm using H because I'm used to, but this is create element in React. H is in React, so this is create element, and you keep going, and you say, this element is no visible, and so on. So at the end, it's like a JavaScript function that can contain any arbitrary JavaScript here. So we can't run these components in PHP. That's a problem because whatever we do in the front end, we want to be able to compute that in the server. So the first HTML that we send to the browser contains the HTML already in place to, like, we don't want to send empty HTML and then wait for the JavaScript to load and then start popping up things. That's not a good user experience. That's not good for SEO. So it was very important for us, for the group of contributors working on this API, to make sure that whatever you do, like the first thing that you send to the client in the HTML that's going to be the perfect HTML that's going to match wherever the JavaScript then is going to do. Server-side rendering, that's it. That's the term. So for that reason, we need a system that PHP can understand. Okay. And this is the part where HTML, we make HTML the template language. So instead of adding the state here in a component and the effects here and the handlers and so on, you add them to the HTML. So this is the state. Okay. So this is context because it's more, it's closer to what context is in terms that you declare this state here and it's local to all these elements and they can access them, they can change it, they can... You can also declare effects here and they point to a function and these effects only run on the client. So on the client, you just have to declare that kind of callback here. So the same thing that you are doing here, we are doing here. And you create the kind of link here with these references. You can add event handlers as well. So this is the same that this one here and it points to actions toggle here. So it's going to do this and it's going to mutate the state. It's going to say, okay, this is mutating the state with one syntax. This syntax is a bit different but it is doing basically the same. And then, well, this conditional here, here we're using another directive which is saying, okay, show this when context is open is true, hide it when it's false. The thing is that with this approach we can create what are kind of React. And when I say React, it's the same for view as belt or whatever you like. All these frameworks are declarative frameworks, reactive frameworks. They all work in the same way internally even though they may have superficially different syntax. But you can create with this system you can create something like whatever you can create with React or view as belt or whatever, you can create it with PHP and with these small JavaScript files. Because the primitives here, the component primitives are the same. And the declarativeness and reactivity everything works like in a modern framework. But by doing it this way, PHP can understand it. We can analyze this here, we can call this area expanded. And in the server, PHP can know if context is open or false. This may be some variable here. We'll show that in the examples. This may be a dynamic variable. But then we compute this during the server-side rendering, during the rendering. And then we know if we need to add the area expanded or we need to add it with true or false. And if we need to wrap this up, it's not depending on if we need to show this or not, and so on. Did you have a question? No, okay, sorry. This is an example of how... Yes. How would you do something like this with these syntax? Okay. I want to explain why we did it this way. Okay. And also what is possible with this, which anything that you can build with preact or viewer's belt, you should be able to build with this because it has the same primitives. It kind of works in the same way. This is built on top of preact. Preact. In the front end. So you won't see preact, but preact is powering everything. And actually it's very close to preact. We choose preact because it's a smaller, it's more performant. It's very extensive. It's very, very well written and so on. For a series of reasons, there are more conversations in the proposal. But yeah, it's a great feat. And things like WP effect or WP context are basically small preact components that are using context and effect in preact. And that's a good point because you're basically writing with this syntax, but you're creating something like a preact application underneath. And that's the reason also. Then we can enable these kind of user experiences because here, this type of client-side navigation, like preact is doing all the heavy lifting here. We're getting the HTML and preact is doing the two HTML and doing the preservation of the UI and so on. So preact gives us a lot in this regard. But we have to, like, our proposal is to write it this way because if we write it this way, then we can make PHP understand it. And I wanted to mention also, let's see, HTML API. It's using in the server. It's using for now the HTML attack processor. If you don't know about it, it's animation new API for WordPress that can understand HTML. So you can get some HTML, traverse it, find attributes, replace them, add new ones and so on. And there's going to be more. And it's going to be made by Adam and Dennis. I don't know if Dennis is here. But, well, it's an amazing API and Dennis is going to continue creating, like, even more. So the thing is that now WordPress, for the first time, it's going to be able to understand HTML much better. So we can, like, we can do all these sorts of things because now it can use the HTML, detect the directives and do the necessary changes to do the server rendering perfectly. There are also more benefits here. We'll see them, I think we'll see them in the code, but things like, for example, things that are very complex in using a React component or a viewer's belt that they all compile to JavaScript are very easy with this approach. So, for example, maybe you want to use translations here. So you can do this. It just works. You don't have to send the translation in a gson and a library to do the translation, like, to use here some kind of library with JavaScript or wherever. You don't have to do that. You don't have to run this with a client because you can just modify the HTML because these directives are spread among the HTML. You can just change the HTML. And that's something that is for WordPress is very important because there are a lot of modifications of the HTML happening with a lot of filters as well. So imagine, I don't know, you have an image and there is a filter at the source set. So if a filter is injecting the source set because it's looking into the database and so on and so forth, if you try to do the same here, it doesn't work because this component when it's compiled to JavaScript, it's a kind of black box. So imagine that you set the source set correctly in the server, but then when this component hydrates that filter that changed the HTML is not going to be there in the is not going to be there in the client. So it's going to reverse the changes. So it has many benefits to do it this way. Yeah. And I wanted to explain it because I think is the main thing that people think like why do I have to write it this way? Which is a bit, it's a bit, I don't know, new syntax for those of you who haven't used alpine.js, which is a framework that was somehow an inspiration for this syntax. Okay. How are you doing with the NPM install? How many of you already have the NPM install finished? Oh, okay. How many of you don't? Oh, okay. That's not that many. Okay. Are you on? Okay. Cool. Just ask for the pendrive, it's not working. Okay. Cool. Yeah. Caching. Caching just works because you are doing here the API, it's the exact same URL. If you inspect here in the network to here, for example, okay, you'll see that the request, maybe I did it before, we're profiting very aggressively here, like all the links of the bait. So, but if you navigate you're requesting the exact same URL. So if you navigate here, this is what you get. So, you get the full HTML and then with pre-ac we do the replacement for this type of experience, which by the way, this type of client-side transitions are not like, we don't want them to be like the default for WordPress or something, we just wanted to create like a new API where these type of experiences are possible, which was very difficult before and now with this, after the showing you the code and going through the different steps, I want to show you some examples of, for example, what's the code necessary for this instant search or a couple of more examples so you can get an idea. So in terms of catching, nothing changes, you're just going to use the same HTML request, HTTP request to the HTML files. This is the default value on the server. Yes, but you should send the initial value. So in the server, you create the initial values for everything. So when the JavaScript load, there are no layout changes. Yeah, layout shifts and so on. So this should be, yeah, but this is the default, but you're sending it as the default. So it's also the default in the client. So, yeah, unless you then click on something and change it, it's not going to change. Okay. We'll see more with examples. Yes. It's like the first frame of the application, then you can start changing the state and you only have to change the state and then the HTML change in response. But, yeah, we'll see more in the, it's easier to see with the code, I think. Okay. So that's basically like a small introduction, like making the, why we make the HTML the template languages and how the component primitives are exposed as directives. So, how can I use it when, so with the Gutenberg plugin, there is a we're working on an interactivity branch and we don't plan to merge it before the WordPress 6.3 feature freeze, which is at the end of this month if I'm not mistaken. Since then we're testing it like internally for the interactive core blocks that may or may not get it into 6.3. But, yeah, the important part, which is this package, so you can start using it, testing it and giving us feedback is the WordPress interactivity package. It's going to be available at the end of this month in the Gutenberg plugin. That's the reason I asked you to download this special version of the plugin, the Gutenberg interactivity API plugin, which is already in the what Gutenberg will be at the end of the month and it's what is in the interactivity branch of the Gutenberg repository. Then, our kind of target is to have things ready for WordPress 6.4 which is, I think, the feature freezes at the end of September or something like that. This is still a proposal, there are still discussions, we are still shaping this API, but, well, if everything goes well hopefully there's from WordPress 6.4 you will be able to use it like in production without the Gutenberg plugin. Okay. Before we start coding I want to introduce Adam. We're going to use WPNOW to create a WordPress instance. That's the reason you only need Node and it's part of the WordPress playground project. I don't know if you haven't heard about it, I thought it was so cool that I should invite Adam to do a little presentation about WordPress playground because we're going to use it and for those who don't know about it, it's pretty awesome. Adam, do you want to come? Also in the browser? Yes, sure. Hello, everyone. I work at Automatic and I want to show you a little something that I've been working on for a long time. It's called WordPress Playground and it's WordPress running entirely in JavaScript. So this screenshot I took here it's WordPress running completely in my web browser, in a browser tab. It doesn't need PHP on the server, doesn't need my SQL, doesn't even need Internet at this point. It just works entirely in browser. I even have a live demo here. I can navigate through this website. It's entirely in this browser tab. I can create posts. I can publish them. I can work with this. I can even switch PHP and WordPress versions and it's going to just it's going to just work. So I'm going to tell you very briefly why this is useful, what problem it solves, how we are going to use it today and give you a few cool examples. So the primary problem WordPress Playground solves is that WordPress is difficult and I don't mean creating WordPress websites, but getting started with WordPress at all. Many workshops start with a lot of WordPress setup instructions as in download the environment, install my SQL, install database, it takes quite a bit of time, but even if I'm just a new WordPress user and I want to find that installation takes five minutes, but then in reality, I'll find this list of steps. There's a lot of them. They're going to take me quite a bit more than five minutes, unless I'm willing to get my credit card and pay a hosting company. So another problem with WordPress and setup is learning. If I'm a new developer, I just want to get my development environment up and running. Well, I'll probably find a setup instructions like this that are going to take me hours, maybe days, and these particular ones, actually I wrote them. I don't like having them there. I don't want to have setup instructions in tutorials. So if that setup is difficult, then maybe people are not going to be that keen to use WordPress and are going to use tools that are easier to setup. So Playground solves these problems with a single quick. So as we've seen, if this is a live WordPress running in my browser, I could turn off the internet and click through it and it would still work. I'm not going to do that because I don't know what else is going to break if I turn off the internet on this laptop, but you can go to this website and don't take my word for it. So this is the in-browser version. Today we'll be focusing more on the CLI version, the local one, and this is the one that we don't need it today, but just wanted to show you that it exists. You install it. You click start WordPress server button, and even if you don't have any PHP, any MySQL, any web server on your computer installed, this is just going to start WordPress on your computer. Now the tool we are going to be using today is called WP Now, and my colleagues from Automatic have been doing a lot of work on it. Antonio over here, Vojtek and I are going to show you how to use WordPress with a single node command. Your install package, which we all just did with NPM install, run a command. This is what we will be showing that in a second. And that's it. WordPress is running. You don't have to do anything else. That's because this entire thing runs on JavaScript. So if you run it in a plugin directory, it's just going to run the entire WordPress, and it just starts it with your plugin. Same for themes, and if you start it in WP Content Directory, it will also understand that, and you can even have entire WordPress installation locally, and it will also do the right thing. It can work with MySQL, it can work with SQLite, and it makes things much more smooth. And you can even switch between different PHP and WordPress versions using JavaScript. What does it work? This is the thing that is always confusing at the beginning. There is this new technology called Web Assembly, and it means we can now build programs that used to work on the, used to have to be compiled specifically for different operating systems, different processors. Now we can build them to a form that works in the WordPress Playground using PHP that's built to Web Assembly, JavaScript can run it, so this solves one of the problems. Now we can run PHP in the browser, or on Node, or on VS Code, or on desktop, or mobile, like anywhere we have JavaScript. Now that solves one problem. The other problem is WordPress runs on MySQL, the database it needs, specifically MySQL it doesn't run on any other database. However, we can run it on any other database. So Playground, or WP Now, all these tools, they work with SQLite. And the way they work is that there is an official SQLite plugin for WordPress. If you install it, it will take all MySQL queries, translate them to SQLite, run them, get the results, translate them back to the form that WordPress needs, and WordPress thinks it talks to MySQL, it doesn't have any WordPress website, 99% of core unit tests pass on this, and the other 1% is just specific to MySQL. So here's a few other cool things you can do with Playground, just as a demo for you. So Playground actually supports live code snippets in a browser, which means new developers can learn on their mobile phone, on a tablet, in a break, and this is a and actually like this is by the way a tutorial of the HTML API that Louise was talking about. It has interactive code examples, you can run them, you can play with them, don't have to install anything, so this would solve the setup problem that I showed you earlier. Another thing is that Playground can be used also for live demos on your website. So if you build a WordPress plugin, you want people to use it, maybe buy it, but if you don't want to use it, you don't want to use it, you can use it in videos, you can put a live WordPress website, like embedded on your homepage or whatever, and people will be able to use it, quick through it, if it's a WooCommerce store, even get to the checkout, and sorry, I thought it was a question, and even get to the checkout. So this is going to see it, because this is private to every single user, because it runs in their web browser. So there's also a few APIs for Playground to customize that, like to run these plugins. You can write a JSON file and tell it to run this specific PHP code, maybe insert a post, install a plugin, log in as an admin, do anything at all. There's also a JavaScript API that gives you entirely full control over it. You can write to the file system that PHP uses, and you can download plugins from your own repository, not just the WordPress plugin directory. You can build pull request previewwares, crazy stuff. So Playground is WordPress that runs in your browser, or in your terminal, or wherever you have JavaScript, it's ready to run. It's free, open source, GPL license, and if you want to learn more about it, use a QR code, there's a link, and if you search for WordPress Playground virtually anywhere, you'll find a lot of cool stuff. So that's all I wanted to show you. Thank you, Adam. Very genius. Okay, so we're going to use it now. Package is on. You will see, like, there's only WordPress scripts, which is the banner, the webpack, and so on, and WP Now. Running NPM start is just running both of them at the same time. And that's... Oh, yeah. That's all what it takes. Okay, so to start the project, you can run NPM start. Open local host. And then once you're there, you have to install the Gutenberg plugin. So, okay, is everybody already have the repository done NPM install? Is anyone missing? Everybody's okay. Good. So I have it running here. So you just have to go to here and do NPM start, and in, like, a couple of seconds, or couple of seconds, the website is working. And now go to the dashboard, plugins, add new, yeah, upload the Gutenberg plugin, and you should have this Gutenberg interactivity, which is the interactivity branch on the version of Gutenberg. Then there are three ways to follow the workshop, this part of the workshop, writing all the code which I don't really recommend, unless you're familiar with the interactivity API, I guess. Copy and paste the code snippets. If you go to the here, to the repository here in time to code, you can expand it. And there's a link to the code snippets, which is basically just the comets. So all the steps are here. Step zero is the initial step. If you clone it, you should be on a step zero. And then you can see the Diff for each step. If you click here on the commit hash. So again, repository, scroll down, click here on the code snippets. It's going to open this. Here you have all the steps. You can look at the steps. I'm going to be looking at the steps as well. And then click on the hash. And you have the difference, the files that were modified and the modifications of each file. So you can come here in each step. Copy and paste if you want. Or the other option is to just use git to move through the steps. It's basically you can do git checkout. And there are branches for each step. So you just have to do git checkout to step one, git checkout to step two, and so on. If you get behind the steps, you can do git checkout and wherever the step. Discard the local changes, git checkout and step wherever step we are in. And you should be at that moment. We're starting at zero. Yes. So I'm on main here. Main is going to show you a little bit of what we are going to do. We're going to create these blocks. There's one parent block called quiz progress. And then there are three quizzes here. And then each of them have an open menu. There are two type of quizzes. One you can answer yes or no. Another one you can input the response. And once you're finished, you can check the correct answers. That's it. So, is everybody ready? Let's see if I'm forgetting anything. Should we start? Let me close some things here. So Okay. Close this one. Have my comments. Okay. There are a lot of steps. I think after step 12 or so there are no new concepts. It's just repeating it over and over. So if we get to a step 12 I'm fine. You can do the rest at home if you want. My main goal here is that you get a feeling of how this works and how you write interactive things using this API. So, yeah. It's not like important if you write the code or not. It's more important if you just get a feeling of how this works and how you use this API to kind of write stuff. And also just you to have this repository and working in your computer. So if you go home next week and want to start playing with it, testing things and so on, you have a project that is already working. Okay. Let's go then. Let's go to the first step. I'm going to go into a little bit. We're going to work. So you have to go to a post, create a post, edit the hello world post wherever you want. Yeah. Well, you don't have to create a group. I created just to add some padding and settings to demonstrate that you can do that. And inside as one or two quizzes, we're going to work first on the quiz. You can also add it outside of the quiz progress. But if you get, if we get, if there's enough time to start working on the quiz progress, then you will want to do that. And here there's the configuration on the left. On the block options that we show with this button. There's, yeah, you can choose between text input or yes or no. And, yeah, for the yes or no questions. So it's red, the best color. Yeah, it's blue. I was trying to come up with interesting questions, but how and you can also change here to text input and, yeah, at least one of the, at least one of the yes or no quiz and at least one of the text input type of quiz. So at least add two blocks here. You have questions. Again, yeah, feel free to stop me. No, no, you don't need a group. It was just, you don't have to create a group like you can, yeah, it was just to give like a little more. Yeah, you can even create quizzes outside of the quiz progress. But as we are then going to work on the quiz progress, we're going to work first on the quiz and then on the quiz progress. So if you leave it like this, yeah, it's prepared. Okay, so I'm not going to explain anything about block gson, edit and so on out of the scope. So we just have like the edit here with the controls and what you're seeing in the editor, block gson with all the attributes and a bit of CSS here and then the render PHP files. These are going to be both dynamic blocks. And this is like, well, the starting point. So step zero, yes. So now if you render here, you're going to see something like this. Okay, it's not interactive yet. So this is like the first. So we are doing an echo in a question here translated echo in the attributes, the question. So what you wrote as a question, then we have a, depending on the attribute, we're sending either a button, two buttons with yes or no or in input text and that's it. And this is not interactive. Okay, where are my comments? Can you repeat? No, okay. This should be your starting point. Okay, this is, I'm still in step zero. We're going to work on the quiz block. So source blocks, quiz. And we are mainly working on the render and we are going to create a beauty.js file. We're going to work with those. Okay. So first step, the first thing that we are going to do. We're going to add interactivity to the block JSON. Okay, as of today you need to add this to your interactive blocks because there are some things happening behind the scenes. Okay. So blocks like the quiz, the block JSON of the quiz block, you just go there and that supports interactivity somewhere. And then the first thing that we are going to do is we're going to make a block interactive. So that's with the data WP interactive. So maybe in the future it's going to be like automatically detect if a block is interactive or not and do things like this. Maybe you don't need to do this and here we're going to add the data WP interactive. It's just telling the framework, part of the page is interactive. You should try to find the directives here and do your thing. But probably in the future it won't be necessary. And we are going to do one thing. So right now here we're showing the buttons and the input. And we don't want to show them. We want to have like a button to show and hide them. So they're not present all the time. So we're not going to need this. So for that we are going to use local state. Which is the context. And we're going to put the local state here in the top level deep. And this is going to be is open, false. We're going to use the WC EU2023 which is which is it's the name space of your block. So if you're creating a plugin called myplugin, this would be myplugin. And then with this context what we are going to do is to say okay, I want to add an attribute to this deep here. So this deep the deep that contains the buttons and the input. And we're going to say okay, I want to use hidden and add it if it's not open and remove it if it's open. Okay. So I'm going to also draw here as most color draw. So context is local state. Okay. And we can connect it to directives here. So here WP bind is to change the HTML attributes. So I'm going to be writing also kind of the alternative syntax that you would write in React. Again, same would be in view with the view syntax. It would be as well with as well syntax and so on. So this data WP being hidden it would be like the equivalent of this in JSX. So instead of writing this you just write this. It's a bit long because this is valid HTML, we need to name a space set and so on. But yeah, basically this is the same. But in a way that PHP can process it. And I think that's it for the step changes. And then you refresh the page it's gone. There's no JavaScript at all. This is because, yeah, the server was able to take a look here and say, okay, this is false, so this would be the opposite. Then I add hidden here and it works. Okay. Let's keep going. Now, for the next step, we're going to create a JavaScript file because, well, it's still not interactive. Still you cannot do anything. So yeah, we need JavaScript in the front end to do some interactivity. So back to the block JSON. We're going to add a view script here. So we enqueue the view.js file and create a view.js file here in the quiz folder. And then we can add a toggle. So to add a toggle, we go back to the render PHP. Okay. Yeah, where's the toggle? Below the question. Below attributes question. Okay. So you can hear we add a toggle which is a button with a directive here that points has a reference to an action. It's name is paced as well and then inside these you can put whatever you want. This PHP rendered so we can do an echo of open for example and that's going to work. And again to follow on how is the alternative in reality or what's the alternative in React is something like this. So it's similar to doing this in JSX. You're doing the on click here. By the way, there is syntax you're going to see I'm going to explain a little bit. So all the directives starts with dataWP. Then it's the name of the of the directive. And then the of the directive would be on here would be bind. Then some directives have like a second parameter or something like that when they need like more information in this case on it's to attach them in handlers. So this is like attach a click in JSX but here we write it like this. And now we need to create this. So we can go here and we can do import store from WordPress interactivity and then we're going to just create the store. Let's see if I don't write typos and then inside of your actions I think this is called toggle and this is going to be function. You don't need this file anymore. Okay. So what we want to do in this action is to mutate the state. This is declarative and it's reactive. You shouldn't do DOM manipulations yourself. You should say okay, this attribute is linked to the value of this part of the state and then all you have to do in your actions is just change the state. So you can get context from here and do context. See you. This is open and get the opposite value because it's a toggle and that's it. You change this value here and everything is reactive so hidden should disappear. Let's see if I didn't make any mistakes. So okay, we have the open button. Yeah. It works fine. Okay. Everything good? To the View.js? Sure. So, yeah, in the in the Commits section, if you come here, step two, click on the hash and it should also be here. You can copy and paste, you can look it check out. So, we are declaring actions our name is based in the toggle and inside the toggle we are just changing the state. So, now, yeah, we're introducing actions here and actions can change the local state. Okay. We can trigger actions with the WP on directive. Okay. Okay. Let's keep going. Step three. For step three we are going to add small, very small accessibility behavior. So, I like to review this with an accessibility expert because I didn't. Maybe I'll make more steps if I get someone today to review this. So, but for now, I'm not an expert in accessibility but let's add something so you have to get an idea because accessibility is a huge thing on, yeah, I'm very happy because I think it's the interactivity is a good fit for creating accessible interactive experiences. So, we're going to only change the render PHP here. We're going to create a unique ID. I don't know if this is the best way or not. Probably not. But it seemed to work. And then in our button, apart from the actions, we're going to add an area expanded attribute also linked to the context is open part of the state. So, okay. So now, we have bind for area expanded and in this element, the area expanded is going to be false when it's open is false and true when it's open is true and then we are also adding the ID here for the area controls. So, this is here. We can check these elements here and you can see area expanded is false. Okay. And when you open this, it turns to true. Okay. You close it again, it turns to false. Pretty simple. Okay, step three, that was a step three, right? Okay. In step four, we're going to, okay. What we're going to do in step four is we want to have only one question open at the time. Okay. So, I want to have more like a global state. So, if I open one and then open another, the first one is going to be closed. Okay. So, what we are going to do is we're going to create an estate selected. So, this is global state. You can add global state to the store. You would be somehow similar for those of you who have used Redux or something or another type of browser. This is global to the application. So, we're going to declare a selected null with initial state of null. And then, we're going to store here the quiz that is open. Okay. So, instead of storing it like in a local state here, we're going to store it here. And for that reason, we have to do this. So, there's local state, which is context. And there's global state, which is a state in the store. And then, there's also what we usually refer to as derived state, which is state. So, derived state. These would be selectors. We call them selectors because that's how they call them in Redux. Maybe it's not the final name. I have to hear all their opinions. The thing is that in applications, in this type of reactive applications, you only create... You don't duplicate a state. If one state needs... can be derived from other part of the state, you just create a function of a good stat on the fly. Okay? And we're going to be using that a lot. So, don't worry. There are going to be plenty of examples about that. So, we create a state, and then we're going to change from storing wherever this is open or false here in the state. And we're going to create a selector to know if each one is open or false. Okay? Yes, the global state is accessible from any block. So, that's the difference. The global state is accessible across the page. Context is only accessible to the children. So, and here, instead of it's open or false, in the context, we're going to... We're going to store the state here instead of doing this thing. We're going to just say, okay, we're going to store here in state selected wherever is the this ID. Okay? And now, context is open, doesn't exist anymore, but we are going to create a derived state here to see if this particular quiz is open or not. So, selectors here, and then our selectors is open, it's getting the state and the context computing that on the fly and saying, okay, is this block selected? When it's selected is when the ID is stored here, it's the same that the ID in the block. And that should do it. I think I've added everything. No, okay. And of course, now we need to change here because now it's open, okay? So now, if you go here, they're still open, but when you click on one, the other is closed. And the thing is that we don't have to change anything in terms of what happens, for example, with area expanded, as long as it's pointing to the right part of the state, let's see if I can do it. It's going to be correct. So we have area expanded. In this one is false and area expanded, maybe I should slightly bigger. So we have this one, we have this one. Okay, we have area expanded false here, area expanded true here. If I click on this one, both are going to change. This is true because they're going to change the context and state at the same time. Can you pass a microphone? I don't know if... I'll repeat the question. Yes, you can do whatever you want. You have access to the state, and you can mutate it, you can put here whatever you want. No problem at all. This is JavaScript. You can do whatever you want. You can put it on the context. Can we take it from somewhere else? Sure. Okay. But not with context. You have access, in the actions you have access to the context. That's on the global state. On the PHP file to take some data from here, the only way is with context to set it on the global state. You can say state, yes. We'll show that a bit later. Okay, let's keep going. This was step four, step five. We're going to... We're going to do a toggle. We lost the toggle, so now you click again, and it's not a toggle anymore. I want it to be a toggle. So, just this small change here in the view file, instead of doing this, we're going to check first if selected is equal, and in that case we're going to turn it to null, because it's already selected, and if not, we're going to do the same that we were doing here. So just that, very small change. And now this should toggle as well. Okay. Nothing new here. Let's see. This is step five. Step six, here. Okay. Okay. So here we're going to do... We're going to introduce a new directive. What we want to do is... Here it says open, but this is a toggle, so we want to change it from open to close. Okay. So we need to change the text here. And to do so, we can do it with another directive. I haven't showed the directives, like the list of directives. They're somewhere here. If you go to the proposal, yeah. This is the list of directives. We'll see. But yeah. You can come here and see the rest of them. There are the primitives, these type of applications. So, okay. We're going to do a toggle text. We're going to change the text here in this button. So instead of saying just open here, we're going to say, okay, from now on, the value, like the inner text or whatever you put here in selector's toggle text. For that, it's going to be derived state again. It's not new state, it's derived. So we're going to do toggle text. So we're going to add it here. Yeah. Okay, so we're going to add this new selector, if it's selected, it's going to say close. If not, it's going to say open. So now if you click, it says open. If you don't, it says close. So you cannot not only change attributes. You can also change the inner text. Text with that. And the thing, okay, this is step six. We go to step seven. And the thing is that yeah, like we're repeating this logic here. So if you later change it, these to something different, I don't know, something different, wherever you're changing it, you have to remember to change it here, which is not good. So you also can use selectors inside selectors. Okay, and start creating this kind of graph of reactivity where things are only defined once. There are only present ones in your state. So you just have to mutate those and the rest of the system reacts. So let's do something like this. So here we're going to get the store and then we're going to turn this into uh-huh. We're going to return this and we're going to get we're going to structure here because from the store, so the structure in here, and here we're going to say selectors the name space and open. So yeah. And then we're going to pass the store. We're thinking about like just that this may not be necessary. Maybe in the future we're going to have auto execute the selectors. But yeah, for now you have to pass the store and now we're saying okay, now we're pointing to this one here. So if we change here, then this one reacts and so on. So I think yeah, that's the only modification of this step. So nothing should have changed. Yeah. That's the next step. Good question. Perfect, perfect. No problem, no problem, keep it coming. So step 8. Of course it's like okay, now this is in JavaScript, this is not translated. So we're going to add it, we're going to do yeah, two things. We're going to pre-populate the state okay, the global state in the server and we're going to do that. We're going to add you can add wherever you want. So you can add translations, you can add dynamic data from the database and wherever you add here, state, namespace and wherever it's going to be used in the server for the server rendering in the same way that you saw that we were using context as well. So the function to populate the store here for now it's called WP store which is kind of the homologous of this one and yeah, you have to create state WP WC blah blah blah and then we're going to have like we're going to put two strings in the state and you only have to do this for the translations that you want to change dynamically because this is not going to be an HTML, in the HTML once this is server render this is going to be either one of them so we need the other and when we change it back we also need the previous one. So here in PHP you can pre-populate with initial values you don't need the whole logic here and actually you don't need to repeat the state because this state is serialized and sent to the browser but you need to also add like the initial value of the selectors because the selectors logic so this for example this is like PHP cannot access this JavaScript file and understand this relates to is open and so on. This is the only thing that needs to be duplicated or maybe not duplicated because usually you don't need the whole logic here but you need the initial state of the selectors anyway with the clear state with the clear selectors here and now we can use them so here this is going to be server surrendered with the correct value which is the initial one which is open menu and then we have to change the toggle text here so instead of using the hard coded English versions of this you use whatever it's in the state for this and whatever it's in the state for this I used open menu and close menu because I know they have translations so we can test it instead of open even though this is not like a menu menu okay it still works close menu open menu if we go here and change the this is in general change it to Spanish open menu yes, no open menu okay so that's one way you can do translations for dynamic fields I'm going to switch it back to English so now we've seen that you can prepopulate the state on the server so we were already kind of prepopulating context but you can also prepopulate the state prepopulate selectors and yeah that's serialized and sent from the server so this would be the server here and this would be the browser this would be kind of the initial state you create the initial state here think that's the complete step yes is it clear? yep so that was step 8 let's go to step 9 okay well now that we have we're using WP store here we can most of the time there won't be you would just create the initial state in the server there's no need to create it on the front end because it's serialized so we can add that one here oh yeah okay that was a whole step and that was the step 9, step 10 okay let's add some side effects so now what we want to do when I when I open the menu okay for accessibility I want to focus on the yes okay so let's do that and introduce a new directive so in this button which is the one that we want to focus we're going to use WP effect so let's go to the yes button here and we're going to add WP effect with a reference to a callback called focus on open and this would be similar to making button a component and then using use effect and then focus on open react so that's basically what's happening under the scene so and then we're going to create this effect in JavaScript so we add here to the store effects the namespace and this function and what this function is going to do well it's going to use the selector it's open because we don't want to repeat that logic when this changes from false to true it's going to focus the reference the reference here is this element so also similar to react you have access to the reference and this effect is reactive so if there's something so when you execute it if there's pointing somewhere to the state or context, the state and context are both special they are reactive they are powered by react signals so if you execute this and inside of this there's a state and there's context if it creates kind of an internal graph because this is fine grain reactivity I don't know if you're familiar with signals things like solid and so on the selected changes or ID changes here it's going to trigger this okay so it's going to make sure that this is triggered every time so it's going to be triggered when these changes from false to true and when true to false when it changes from false to true it's going to do the focus when it changes from true to false it's not going to do anything it's going to execute but it's not going to do anything okay let's try this let's open the menu here with the focus here so we can see it's working so that's the other kind of directives this would be like the wp effect directive for with effects so you can trigger like side effects and so on so again the same you would use it when you would use like use effect in react basically okay step 11 now step 12 to the input okay so we also want when we open here the input we also want the focus on the input so we can just add the same wp effect point into the same function because the logic can be reused perfectly so yeah we add it here so I'm glad we made it because I think this is the last one with real information we're going to do a close on and here we want to capture the when the focus is on like on this block so we're going to add this directive here this is going to capture key down and it's going to call close on esc for yeah when the focus is on this lock what we're going to do is again like create an action for this handler and then put the action here we're going to do here is that we have access to the event you always have access to the event and then we're going to change the options so if the key is escape then we're going to do selected equals no so we're going to mutate the global state and that's going to kind of trigger all the changes it's going to close the thing it's going to change the area expanded and so on and then we're going to change the focus back to the button with the area controls that starts yeah to this one here to this button here is the toggle button okay so let's see that works we're here the focus is here, we click on esc focus is back to open menu click here focus is here, click on esc yeah okay let me see what is step 13 okay step 13 is when we start adding things for to make it work with the other component I think I'm going to stop here there are other directives for example class active which are useful here so we have the class WP class directive and the WP style directive wherever you pass here it's a class that's going to be added or removed depending on this value okay yeah but there's only 10 minutes left so I want you to show you some examples of more complex blocks I hope you can still do these steps at home because from here it's basically these all the time or maybe like here WP class to change the class names but from this moment until we get to the point where I showed you it's about storing things in mix of local state global state creating more selectors and using WP bind WP text, WP class to make the UI react to all of this and prepopulate the state in the server for that like there are no new concepts maybe we can take a quick look so discard all these and go to main well you will see that here the state is bigger we move the quizzes to an array to say which is the current value which is the correct value we are serializing the correct value from the answers so we can then there are more selectors to know if one of the quizzes is correct or not most of the things are selectors here and there is the other block the quiz progress okay we also have a render we also have a view here you have a bunch of selectors to output the name of answered questions if all questions are answered in action to check the answers the terms like global show answers so when everything is connected when all the questions are answered then for example this button disable change to true so you can click it and then you can see how many questions are here you can see if all of them are correct and so congratulations you can now show a different button reset button here but again everything from now on is done creating more selectors more actions mutating the state and repeating the process all over again adding WP text WP bind WP disable and click and so on so a bit more example but that was a complex example but nothing new and it also scales very well so for example at the end of this demo you haven't touched area expanded from the beginning but as long as for example you have this and this area expanded here is true because this is open when you click on check answers it's going to be false because it resets the openings and if you click a key here is true if you reset it's only when you click on reset the thing is that this scales really well even though things start getting more complex but this is the clarity from reactive you just keep adding selectors mutating the state and everything that is pointing to some variable it stays like that okay I wanted to show you a couple of examples so I hope you have a grasp of what how to code with this interactivity API and it's all about these concept directives action selectors effects so for example I wanted to show you how's the code for these instance search so you can see how difficult is to create something like that so this would be this block here and if you search for things it kind of refreshes the page so this is here movies demo repository blocks interactive blocks and this is the movie search okay this is this is the view yes this for this block okay it's very small it doesn't have accessibility we should have accessibility to it but other than that it's just setting some value okay the WP movie search and then if the value is nothing we navigate to the home page if not we kind of do the we compute the query loops the query parameters for this URL we navigate to that URL it's that simple and then in the render PHP we pre-populate the store with the search query the search value so it's prepared from the beginning so this example was simple but when things are more complex like they really get very complex with this API there's still very complex things are made quite easy in my opinion so this is one thing that I wanted to show the other thing that I wanted to show well if you go to Gutenberg it's also the navigation block now it's working like that the navigation block the previous implementation used to be like four kilobytes now it's just one kilobyte which means that the code that you need for the same like we replicated we actually well first we replicated the functionality of the navigation block you can see it from four kilobytes to one kilobyte which means that you have to write one fourth of the code by switching from vanilla JavaScript to this declarative reactive thing well I'm not going to show you that but it's in Gutenberg in packages block library and so on you can take a look if you want you're going to see something like very similar to this so another example with I think it's interesting, relevant and how this API is very native to WordPress even though you're kind of building a React application and it's so doing client-side form submissions of the comments so WordPress comments you click on the comment it refreshes the page it reloads everything again and there is your comment so and we did an experiment here it's a bit old but it works and this is the code that it takes to turn the server-side form comments submission to client-side this is it so there is so in the HTML all we had to do was to add like a new deep here to show the errors so it's a new deep with that WP text and then whatever error it gets and then just search for the form with a comment form and inject this is by the way this is the HTML tag processor you just search for this form with the ID comment form which should always be there even though like in all themes maybe you've changed the HTML you were using a comments plugin that changes the aesthetics or whatever and this should work in all the cases so it should be 100% backward compatible you just have to inject a data on submit we were using dots before but it's the same directive so data on submit and then point to this file and what's happening behind the scenes is that it's preventing the default server-side rendering then it's soliciting the error and then it's doing effects to the exact same point that the server-side renderer is doing with the same form data from the form that said that it's doing it in the client and then we're getting an HTML from that response and yeah and if the status is not 200 it means there's an error if there's an error I don't know if you remember the comments if there's an error your theme goes away and it's displayed like on a top thing and that's inside a P here in the inner HTML so we get that error if there's an error we just change... we mutate this global state so the error appears in the deep that we created and if not we do a navigation in the same way that you saw the navigation happening here in the movies demo with the new HTML and we reset the form and that's it that's all it takes with this API to change from server-side renderer comments for submission to server-side form submission with backward compatibility with all the things because we can inject we can just inject directives here okay last but not least this is a still proposal there's a still... we're still shaping this API so just... we wanna have a conversation with people as possible knowing about use cases so from... we've been working on this repository for a while cause at the beginning this was very exploratory we didn't want to make noise for the rest of good timber contributors so there are discussions here if you come to this block interactivity experiments repository you can just come here, ask questions sir what do you need to do if you try this and get stack come here and say so I would hope... I want to give... to ask for permission now we're moving things from that repository to Gutenberg so I want to ask permission to create here in the discussions type of... GitHub to add a new one called interactivity API so we can centralize the conversation here and just stop using that old repository move everything to Gutenberg so I hope we can do so yeah, well if you go to the other one and there's this new one here yeah, well I hope we can centralize there the conversation cause yeah we really... we've gone already we've gone very far with this but we need as many real uses of these we need to see the patterns we need to save the API and for that we need as much help as we can have particularly for me I'm on Twitter, I'm on GitHub, I'm on Slack I'm always at Luisa Ranz so you can also ping me I'm going to try to tweet about the progress on interactivity API you want to follow the things that we change yeah, there was another one thing here if you have a private project and you want to create a website with these type of experiences so it's going to take a while until this is merged with WordPress but you want to use it now have a project project, something like that talk with me any of the other contributors there's things that can be done we are working for example with Wu to create something that it's kind of bundled by them but they can use it now and once core has this like the transition is like just changing a file or something like that so yeah, please, please, please give us feedback come to the discussions we're going to talk about interactivity experiments but hopefully soon in the Gutenberg main repo and yeah, don't be shy to ask, share because that's basically what we need at this point