 Oh dear, it seems that my stream setup has gone wonky. Let me fix that. There we go. Hopefully you all can hear me. If you can't hear me. Can't hear me. Let me end the chat. I've got some music going. That seems to be working nicely. Come on, let's turn the volume down. Just turn it. Hey, Jaylee. I think it's Andrew. I think it's Andrew. He says, loud and clear. So thank you, Andrew. Pleasure. I'm terrible at remembering names for it. Sorry if I get it wrong. All right. Today we are testing out WordPress 6.5 again. I did this last week. No, last last week. Three, zero. So if you want to catch that, you can find it here on the YouTube. So I'm going to copy that link to the chat. If you want to watch the last session I did on this. Today I'm going to continue doing some testing. What's nice about today is that Anne McCarthy has posted her 6.5 source of truth. So we can use that to kind of pick through and see what's available there. What's new for developers has also been published. That was published the day after my last live stream. So that includes new things coming to WordPress. So these are the two docs that I usually look at when I'm looking at new developments. Or I check out the dev. The 6.5 tag. I think it's 6.5 dev notes. I've got to remember it now. I linked it up last week. Let's see if I get it right. No, it's not that one. That's a nine. It's been one year somewhere. It's pretty 6.5 dev notes. No, it's not that one either. Let's see if I can find one. There we go. It's dev notes, 6.5, there we go. So those are the three that I usually look through when I'm looking for new things. So let me share those links. If anybody wants to check them out. It's the source of truth. It's the what's new for developers. Those come out every month. So those are usually good to check out. And then they're related to dev notes. Those will be all the things that are coming. I don't usually follow the dev notes unless the source of truth hasn't been published yet. And it's great at publishing these around about the RSE release candidate time. So this is usually what I work off. And then I'll just go through and I'll just see what's interesting, see what's coming, how to play with it. Last week we played with the, what was it? Let me see if I can remember. It was the block attributes and custom fields with the block bindings API we worked on. We catered on that last week. And we played around with the plugin dependencies feature. Which is over here. So if you want to see those, check out that YouTube video that I shared earlier. I'll share it again later towards the end of the session. Today I'm going to jump around a little bit, see what else might be interesting. We might, I have done a session on interactivity API, so I might not have a look at that. But I'm just going to kind of run through some of these to see what's interesting that's coming. Before I do that though, I need to update my WordPress version. So it's usually a help test WordPress post in the core site somewhere. WordPress release day. There it is. So that was the last beta. I want a newer one. It's just a search for help test 6.5. I see. There we go. That's beta. I'm basically I'm looking for the WordPress, the WPCLI. Come on. Let's see if I've got it in my history somewhere. My bash history. Oh, there it is. Cool. So what RCA they're going to be on now? Let's have a look. Definitely an RC stature already. Oh, we're on RC 3. Okay. So RC 3. So, hey, Cardina. Welcome to the chat. Hey, Cardina. Welcome to the chat. I'm busy trying to remember how to take my WordPress version with WPCLI sites. Let's go to WordPress. And this should be RC 3. So let's see if that works. Yay. I wonder what happens if you got RC 4 if it doesn't exist. Should we find out? Someone says hello from Chicago. Hello, John. Welcome. We're busy updating WordPress using WPCLI. Just across the music volume a little. Oh, it's taking a while. Let's see if it's updated. Okay, it's done. Of course, as I checked it, it finished. I want to see what happens. Hey, Alan. Welcome. I want to see if I got RC 4. Oh, there is an RC 4. Okay. Must have missed that. There is an RC 4. Okay. It's interesting. So it looks like it looks for it. It tries to download. It doesn't find it. Interesting. A quick look in the Slack. I'm pretty sure. Yeah, we're definitely on RC 3 this. There's no better thing. We're actually going to pull this into the screen because it's checking Slack 4. There was the last question. Yeah, RC 3 definitely looks like the last upgrade. Put this one. Okay. So we're running on the latest version. Cool. RC 4. Okay. Alright. So this release brings with it many, many, many things. And the first one I want to check out is the front light. I want to see how that works. Because I haven't been following it, actually, to be honest. So to do that, I am going to create my own plugin. My own plugin. My own theme. My own theme. My own theme. My own theme. My own theme. My own theme. My own theme. My own theme. My own plugin. My own plugin. My own theme. My own theme. Using create block theme. So I'm going to add create block theme quickly. It's the beauty of these live stream sessions. I can just literally just do whatever I want. No break work. If you ever want to have fun and let people watch your live streams, you're a great way to do it. Okay. So create block theme has installed an active. Come on. This is one of my biggest bugbears. This doesn't show that it's busy being activated. I'm going to activate it from here. Let's take this. Do you want to finish this? Oh, it is activated. Okay. Okay. So create block theme is activated. So let's go and use create block theme to create a new theme. I'm going to create blank theme. Or call it John's awesome theme. And then the rest I think we just leave. Let's generate that theme. Oh, the name cannot contain the word theme. Okay. John's awesome thing. That's interesting. I didn't know that was required. All good. Okay. So that's created. So we go over to themes. There's my awesome theme. Oh, look. It actually creates a default create block theme thumbnail for me. That's not cool. So now it's deactivate create block theme. So I've got my plugins enabled. There's my awesome theme. It's activated. Let's take a look at what the code looks like. There's my awesome theme. It has read me. There's a screenshot. There's a style of CSS. It has a theme for JSON. Awesome. It has an index template. Excellent. That's all it should need. And it has footer. So it's the most basic theme to get. All right. So now I'm guessing if I go into the editor. The system funds. Manage funds. Okay. So I can manage funds from there. I can install funds. And Google funds. Now I know that the whole Google funds thing is some people don't like Google funds. I understand that. I also understand why we're sort of making it available to those that are using Google funds. I also like the fact that this allows you to download the funds so they're not being posted externally, which is kind of the point. But I think we'll try both. I think we'll do one of these. So here we go. Okay. You can come up with a fun name now. Let's think of a random. Let's type in the word group. I mean, we can select any one of these funds from here. That's interesting. It's paginated. Find the word. Let's go for a link to this. Doesn't have any. I don't know. I don't know. I don't know. I don't know. I don't know. Let's go for a link to a stance model. It doesn't have many variants. Let's go for Aalmari on my own. So let's go for 300 normal. 800 normal. Wow. And then let's install these funds. Now, I seem to remember there was a conversation about where the funds were going to be installed. I think they're going to be installed in the uploads directory. I think that was the final agreed upon decision made. It was an error installing fonts, oh dear. Okay, um, I don't know why that is. So it created the font style directory and downloaded something. I wonder if we can see in the console that the error was written. So let's refresh this. This could very well be something to do with my local environment, I'll be honest, my local environment has been really longy. So I will definitely blame my environment before. Oh, it actually installed the font. Interesting. I wonder if it failed downloading my variants. That's possible. So let's search for another, but let's get my own one since it's still full. Now that seems to work. Okay, so then I'm going to say that the problem is the font. So let's take our Monterey and delete it. Let's try and install it again. So let's go, what do we, we're in 300 and 800. So again, let's try and install that again. This time it works. Okay, so I wonder if, I wonder if that was my kid's hockey toy. What's up chat? I wonder if there was a problem creating the directory the first time around. It seems to be okay now. It's a pity I didn't see what the error was the first time, but it does seem to be working now. So could it have been a red kitchen time? Could it have been a red network issue? Interesting. Okay, but that does seem to work. So now theoretically, if I click on text, you should be able to, there we go. You should be able to choose MRI. Well, let's, yeah, let's do all the text. Let's switch it to the parallel sense mode. Let me save that. Yeah, that could change. Yes, let's change. That's the system font. That's the default. Yeah, they are changing. Okay, so it installs it in the WB content funds directory. I know there was, there was some discussion around this and there were concerns. Should go to uploads. Should be in funds. I know there was more conversation around that. I don't know what the final resolution was. Obviously the final resolution was the story. But that does seem to work well. The naming convention, I wonder why it's named like this. I wonder if this is a, this can't be a Google Fonts thing, surely. Let's go to Google Fonts. Stick this on my desktop. Okay, to my desktop. Yeah, it doesn't, yeah, it doesn't have that weird name. So this is obviously something that WordPress is doing. I wonder why they're doing this. Interesting. I just need to know why. It seems to me unnecessary, anyway. Why not just include the names from Google Fonts? Maybe it's the way the Google Fonts integration works, could be. I don't think anybody other than me would care, because I don't think anybody installing a font through the editor would actually care about that. I'd just like to know that, you know, which one of these two is on a Mirai? Which one is the other one? So it would be better for me if it was renamed differently. So that's interesting design choice. I wonder if there might be a bug about this. I don't know if it's an opening issue about this. It's just, it's interesting. It's an interesting discovery. I really prefer to have kept the names as per when it comes from. So what is interesting is that it's downloading the WAF2 version. So maybe it's downloading through something that converts it. And that's what gets the name like that, possibly. I don't know the, I don't know the integration. I don't know why. But from a, using the editor point of view, it does work pretty well. I was surprised to discover that you can only do it through styles. It does make sense. I mean, that's what I would expect to find it. But I kind of also expected to find having its own top level menu. So I guess that's a, that's a UX choice. Like I said, yeah, it would be cool if there was a fonts submenu. And then you, because now you've got to go for cert, biography, and then they click on fonts and then it pops it up. But again, that's, that's not my decision. It's just, that's what it's decided. So that, that does work and that's cool. So what I do want to do now is I want to re-enable the create block beam plugin because this also has a font manager option. And what's interesting is if you have a look yet, only includes the system font. So currently, if you manage fonts through this, these are going to be installed. Where's the same font? And these are going to be added to my theme, which I honestly still prefer if I'm honest. However, if we, so if we go back to the editor now and we apply font, I want to see what happens. So let's add a system font. We'll make it far more right. So that's now a system font. So that's saving to custom styles. Cool. Now let's save these changes. So these changes will get saved to my impulse. Okay. Inchanges saved. Okay. So what this means is if I go into my theme, it's going to have specified the fonts. Right. So that's not great because now those fonts are not part of the theme. So if I export this theme, so this functionality that I'm showing you here is the create block theme functionality. It's not core functionality. But if I export this, actually it's, it creates a new theme. Why not? So let's go a chance or some fun. Now I'll have a separate theme. Copy on the server and activate it. Yes, that's right. Okay. So now that's my active theme. Yes. So now if I go into that theme, I want to see what's going to happen. That's still pointing to the fonts that are installed globally. So if I take this theme and stick it somewhere else, it's not going to work. However, if I go back to the editor, remove those fonts, install fonts, themes fonts. So let's remove the installed fonts and install fonts. Okay. So now I've got the theme fonts installed. All right. I hope you're all following this. So now if I set it to, now it's not doing what I should save because it's not the same name, which makes things tricky, which is fine. Let's turn it to that and let's save that. Right. And then let's write these changes down. Okay. Now I go back here. It's still pointing to those fonts. Okay. So that is specifically a create block theme thing. So if you're a theme developer and you're using create block theme to build your fonts, you should keep using managing your fonts here because then they will be more than, yeah, let's delete some things. Delete that. That's the WordPress and freak it out. It's currently not exactly active. I'm going to activate it to be full. Done. Okay. It has its own theme fonts. That's fine. I'm going to go back into the editor and make sure there's no system fonts installed. Oh, that's different. Oh, because, of course, because see now that's, okay, that's fine. I just went up on a tangent of my head. All right. So let's go back to create block theme. Let's create a new black theme. Okay. Now we're selling scratch. Okay. So now if I manage my theme fonts and I add a Google font to the theme and so for example, let's do a single variant. Okay. So that's not part of my theme fonts. All right. So if I go back to the editor with our styles, I go back to topography, I set theme font, save, save, and then save the changes to the files. Now if I go back into that theme and now it's in the assets in the theme. Okay. So managing fonts via the new front library will install them system wide for WordPress. Managing the fonts in create block theme will install them in the theme. Okay. So that's good to know because I'll tell you why that's good to know. For me, at least I'm busy working on some content for WordPress. There's all around, well, I'm not working out as one of my favorite contributors working on us, all around create block theme and all those things. And one of the issues that we had, not issues, one of the content items we were working on was specifically the use of create block theme. So I went to actually share this update with Cynthia, who's the contributor working on us, that the font library is only applicable to the site and not to the theme. So I just want to make that note here. Welcome from Ecuador. All right. So I'm going to leave that there for Cynthia. She can ask me about it. I might just update it with Alexa so she can see that happening. But that's useful to know. I just said that's maybe why the font names are hashed that aren't clashed. That's a very strong possibility because in theme, you'll see they're not hashed. So that is a very, very good call out there. That's very good call out. That's very strong possibility why they're hashed like that, why they're named like that. So they don't clash with theme fonts. So that's useful to know. So if you're a theme developer, if you're using create block theme to help develop your theme process, then use the manage theme fonts and create block theme to install your theme fonts to theme. The font library is very specifically, I would say a user focused feature. It allows the user to add themes to their WordPress install. It's a very cool feature I have to admit. I love the way that it works. It works really, really well. What I like about it as a theme developer, you can add your fonts as part of the theme, but then if users want to change the fonts or whatever they can do. And that's very, very cool. Just kind of, it moves. What I think is interesting about it is more and more as I'm seeing the site editor development, it does move the ability, it does allow users more and more of the ability to make change to their site, which I know some theme developers are not huge fans of. I'm like it's the user site. Change fonts if they want to. Give them a full back to switch back if they want to, which is what the theme will do. If I go into the styles here and I want to change the text, I can change it back to whatever the default was and then make that change. Maybe there wasn't a default set for the theme or whatever, but I have that full back option, but allow the user to make the font change if they want to make it easy. Why not? It says I. I don't know. I have this opinion of let the break their site and then you can charge it to fix it if you're a developer. Maybe that's the wrong way to look at it. All right, so that's the font library. That's a cool addition coming. Appearance tools for classic themes and making more clear to control. I'm going to dive into that now. The visions in the site editor. Block attributes we did last week. Design tools. These are all very design tools. I'm not going to write too much about them. UX improvements go through those. Interactivity. Interactivity is something I haven't I did in a workshop a while ago, but it might be worth recovering. Recovering. Looking into it again. Interactivity basically is something that is added to blocks. Let's see if we can find some documentation here. If you use a previous update of docs. I'm going to go to the updated docs. I have never used interactivity before. Well, I don't, but I'm going to act like I've never used it before, and I'm going to dive straight into how it all looks. We're going to build a block that demonstrates the interactivity API WordPress. We need the node environment setup. We need to use the great block package and use the interactive template. Let's grab that. I do already have the Node.js environment setup. Let's just get to that site and then let's spin up a quick interactive block. So we'll just leave it my first, my first interactive block. Work. That's going to take a few minutes. So while that's doing its thing, we can we're actually going to just pull this off screen. Yes. I'm going to pull this off screen so I can read through the docs while that's installing. Yeah. The basic use. You switch the block. You run the dev server. Okay. Okay. We need a code editor. We need tools. We need a local site to get cool. So code requirements, add interactivity support to block JSON. The to indicate the last support activity, add this to the support of block JSON file. Okay. Add interactive element to a DOM element. So any kind of dev or whatever the case may be, we need to add that. And then we can start, we can start doing things. We can start playing with things and we can start using the API reference. So my block is still installing over here. So I'm going to check out the API reference along. And so I'm thinking about what we can build today with this. So it's all in, this used to all be in GitHub. It's no longer there anymore. It's now part of the developer resources. It does say specifically 6.5. So to add interactions to blocks using the interactivity API, developers can use directives, which are added to the markup to add a specific behavior to the DOM element of the block. And we can use a store which stores the logic of data needed for the behavior. It's a nice graphic which shows how all these things work. And here's an example where you can have is open a context directive. You can say is open is false. And then you can set up a watch so you can check against callbacks log is open. And then obviously if you set something to true or set something to false at all, it'll do whatever it needs to do. Okay, my block has been built according to that. I'm going to grab a quick sip of water here. Actually going to pull this up as well. It's a very, very hot day today. All right. So let's have a look at the query detection. Oh, haha, I put it in the wrong place. Let's just leave this to the plugins directory. I should have, I should have done them like it's a trip and it's funny. There we go. My phone just peeps at me. All right, let's close down the JSON. And let's go in there's the block. It's loading all of that or what I'm good. Let's have a look at block.JSON. Okay, it does already support interactivity because we use that interactivity template. So that's great. It also uses the view script module, which is the view.js file, which is where all the cool things can happen. This is actually a new thing that came to 6.5 as well. So let's diverge into that very quickly. It's not there. Just find it over here. Yeah. Yes. So in WordPress 6.5, there's a script modules API, which brings native JavaScript module support 6.5 and provides two modules for use with interactivity API. So there is a blog post month. A new script modules interface has been introduced to support native JavaScript modules in WordPress. So if we open that, this whole article about modules and basically something about providing mechanisms for splitting JavaScript programs up into separate modules that can be imported when needed. Now, if you've ever worked with a block plugin, you would have seen this, for example, when you do things like this, when you import things in. And I'll be honest, I don't have the most amount of knowledge around this, but my understanding is that doing these kinds of things required the bold step. You needed to take that code and convert it and then everything compiled into one thing. And now, more recently, browsers have started supporting the option that you can have. So in the old days, everything was sitting in one big JavaScript file and you couldn't separate them out nicely. And then JavaScript modules came along where you could physically take your code and put it into a separate location for JavaScript code and then import content, features and functions and whatever from separate files. So now, so they say this can be a good thing, browsers can optimize loading modules, make it more efficient than having to use a library and do all of that extra client-side process. So this is all the history around modules and how they work. I'm going to share this one in the chat if anybody wants to read about how this works in the background of it. But essentially, this functionality allows us to specify our module here. So in this case, it's the view script module. And then there is the view.js file. And it can then do all the things it needs to do. And basically, when you, so I discovered this when I was working on my dodge game. So let me, let me share that liquidity quickly. So this is a game that I developed some time last year. It's using the interactivity API. When you start the game, I'm now busy moving the W with my keyboard and mouse. And essentially what I discovered, I'm going to actually start the game here. I don't need to worry about my score. I'm going to hop on over to my GitHub so you can see the code that I'm talking about. What I discovered was that I could make changes to the view script file without having to rerun the build step every time. So that was a cool benefit from that process. All of the stuff inside of the React part, the editor.js and all of that, I had to rebuild. But the view.js, I could just, you know, use regular, regular JavaScript with it. I actually, I think I ended up, I ended up moving some of the JavaScript into a dodge.js file anyway, just to keep things up a bit. But I probably could have registered that dodge file as a view script module as well. So I kind of want to get back to that. So anyway, if you're interested in all the history about all that works, there's all the reading I recommend going to check it out. You can read all about how it works. I'm not going to read through that now. It basically in your... So here's your activity, you set up sports interactivity, you create a DOM element, and then off you go to the races. So the recommended way to do this is in a what's known as a dynamic block. So in other words, you have a PHP file that is used to render the blocks content in front end. If you have created... Where's that? If you've created your first block using the template, it'll actually set everything up for you. So that's the perfect way to get started. And it actually builds a block that already has some things happening. So it has... Let's have a look here. It has this is open false. It has the login is open. So it's essentially the code that we see from the documentation. And then if we have a look at the Vue.js. So it basically uses the stall and get context from the WordPress interactivity package. And it then has a toggle action where it takes the context, checks if the context is open, and if it isn't, then switches it to whatever it is. So it's true, it's false, if it's false, it's changed to true. So that context is what is specified. Where is that? Here. Using the WP interactivity data WP context. This used to be something that you would set as a directive. Let's just check that in the API. You see there's an example of the context. Yeah, you see you can, you can set your context this way. So you can set the WP data WP context directive, and then you can give it a JSON object. But it looks like they've also added this WP interactivity data WP context function, which is quite interesting. So I want to check that out. It's actually at the same page. Let's find that. So that returns a Stringify JSON of context, the rective, this function is the recommended way to print the data context attribute on the server side market. So that's, that's interesting that they've done that. It'd be interesting to know why they did that. I don't mind either way. Maybe it's just to prevent folks having to write all this out. So it's just a simple PHP file, PHP function call. So that's, that's very interesting. This helper function simplifies the creation of WP data to the context directly by providing a way to pass an array of data which encodes the JSON string. So probably that you want, you want to be able to set up your data in PHP, maybe, and this is an easy way to do that. So you get it from PHP somewhere and then you put it in. So that's kind of cool. So let's have a look at what this block does. So we can kind of see this in action. So let's go over to plugins, but the music is getting a bit loud so I'm going to turn it down a little bit. Okay, let's activate the block and let's pop it into the post. Oh, look, my font is still working. Add that to a post. So there's nothing in the editor, which is fine. I want to see what this does on the front end. So there's my toggle button and hey, there's my content appeared. So if you remember the old jQuery days, we used to have jQuery bind events and we used to bind to buttons and we used to then trigger things. This reminds me of that very much, just a lot sort of simpler. So because the context initially is set, is false, is sorry, is false, is open, is set to false. It then watches, the lug is open callback. So this wrapper is watching. So if I go over to that one, let's show you what it's doing. So lug is open, is a callback, it gets the is open from the context and just logs it up. That's just happening every time that the context changes. So let me open up. So there you go, is open true, is open false. So there we go. Well, that's all that's doing. And so the core work is this toggle action, which is specified in the code. So I can call that pretty much anything. So let's do it this way. Let's say I'm click actions, toggle open, for example, and I can then change this to toggle open. And I think this will just work. But I don't even have to run a build step. It's very, very bad. Just reload it. Theoretically this should work. Yay, it works. So you see no build step required. It's using standard JavaScript modules, which means it will just work. I'm importing modules from the package that just works, which is cool. And I didn't have to, I didn't have to run any build step for this. It just, it's loaded in the browser. So it's using more modern JavaScript functionality without this, the necessity of a build step. But what that essentially doing is it's setting up the context. It's false. It's then setting the button, binding to the click event. And when the button is clicked, it triggers the toggle triggers triggers. You can tell I'm excited. I'm talking fast and messing up my words. It triggers the toggle open action, which is defined inside the store. So inside the store here, you'll see that I need to specify a namespace for the store, which is specified here on when we set the interactive data, data, WP interactive directive, that's where we set the namespace. And then based on the namespace, this code will belongs to that namespace. And then when it triggers the toggle open action, it calls this code, the code gets the context, and then switches the context from true to false. Then the hidden directive is bound to the paragraph tag. And that one is said to whether is open is true or false, whether or not we show or hide it. So if hidden is true, in other words, not is open because in open, yes, started false. So hidden at this when it starts, hidden will be false. So hidden will be true. So it hides it. And then as soon as we trigger the button, trigger trigger the button, it runs the toggle open, which will then get the context, update the context, and then show the button. So that's kind of how all that works in this space. And it's all built in. It's all native to WordPress. I don't need any additional jQuery. I don't need any additional libraries. It's all built into WordPress. I think it's very, very cool. I'm quite keen to play with this a bit more. As I say, I played with this with a dodge game. I was binding to keyboard events. And I was binding to I've closed it down already. I was binding to other kinds of events. It did make that process a lot easier. So to run through the kinds of things that you can do, there is the context that we spoke about. There is the bind. So it allows you to set HTML address on elements based on brilliant string value. So you can bind to a click. You can bind Aria expanded. You can bind hidden. There's a whole bunch of options there. There is a WP class directive. So you can specify the class name is selected or is selected. And then do things based on whether it adds or removes a class. So you can add or remove the class. You can add or remove styles. So you can use the style attribute to specify color, for example. And then it'll apply that color. There is text. You can set the text of an element. So here, for example, the spans text is receiving the text from the context. The context set up here is text text one. You can then have some kind of action which updates the text content. And on the click, it'll then update the content. That can be quite a cool one to to put forward at some point. And then there's things like on events. So on click, on key up, on key down, all those kind of things. So there's a lot available there. I really, I'm looking for something that I can play with, that I can build with on this. But somebody who has been interacting with me a while back actually shared, I want to find it very quickly. There was a little example that he built. So I want to find that he shared with you all. Now I'm not going to find it out. Here we go. Actually, I think he shared it on my Twitter. Let me find my Twitter. So let me just pull this to my side in a second, Jeff, folks. Yeah. So his name is Elliot Richmond. He is a WordPress developer like myself. He's also boldly like myself. And he created this interactivity API tutorial. So do check that out. There's some, there's some, he actually goes and builds something with it. So let me share that link with you on the chat. You can check that out. Give Elliot a like and a subscribe maybe, because I think he's doing some fun things there. So that's also some examples of how that works. So yes, I'm quite, quite excited about interactivity and what it can do. So give that, give that a look. All right. I'm going to close this down and move on to something that's what else I'm going to play with. Let's have a look at some of the interactivity. We keep very specifically for like the word, developer-y things, things that require me to write code. Block bindings we did last week. Go back up to the list of script modules API we discussed. HTML, iUpdates allowed blocksfields specify, to specify allowed children. That's interesting. New style sheet support for block charts. What's that? Find the style sheet for your blocks file review style property. Front end only block styles. Okay. Block scripts, there was a really script view script. There was a script block style. There was only style and here's a style. Oh, so now you can actually have it. This is super small, but it's one of my biggest annoyances about building blocks. So that's cool. Okay. Can you tell I'm excited? Let's build a quick block and I'll show you what I'm talking about. So I just want to do a standard block. I'll have it when I find stuff that I want. So let's go and let's go, don't be block. Okay, so that's going to create a block for me. Well, that's doing that. I'm going to disable interactivity. So static block is busy being rendered. Okay, installing packages. Now I've got a feeling that create block won't have the support built in because create block probably hasn't been updated, which is fine because that gives us an example of what we're working with. So let's have a look here. Wow, this has been open since September 23. That's amazing. Okay, come on, build a block. Once this happens so quickly on San Francisco. Okay, here's my block. Cool. Okay, let's go. So it's going to here. Okay, so it's not okay. So previously, previously on Wordpress, when you built a block, you had the editor.scss file, which is applied to the editor only. And you had the style.scss file, which is applied to both the front end and the editor. So if you wanted something to only be applied to the front end, you had to apply it to this file and then get overwritten an editor, which is annoying. All right. No, I don't want to far watch it. I'm going to use something else. So when you're working with your block, let's go over here and let's activate the plugin. So let's add the block somewhere. Then the moustache block. Yes, the moustache block in the editor has the border, the blue background, whatever. It has a red dotted border. You can already see it there. And if I go to the front end, it has no border. So let's make the border a bit bigger so we could see it with the border five pixels. While we're here, time. So let's refresh this. There. So there you can see the dotted border. And on the front end, there is no border. So the way to achieve that is to specify background color, color, adding, install the scss, and then your editor says you applied the border. Now, the annoying thing about that is in the editor, it then means, I see somebody's asked me an interactivity thing. I'll answer your question in a second. It then means that you have, you have two star sheets in Qt. Yeah, there you go. So you end up with, so you end up with two CSS files, your style.index and your index.css. And if we have a look at those, there's the one that gets applied in both. And then that goes out. And then the index only gets applied in the editor. So you're essentially overriding. If you need to make specific changes, you have to override the one of the other. Let's pause on that and get back to our Sena's question around can this interactivity interact with an external API source? For example, the Pokemon API. I don't know the Pokemon API. I guess it's an external REST API of some kind. I'm not going to go search it now. I don't know what it is. But essentially, yes, you should be able to. If it's just a, let's go back there. If it's just a external API of some kind, you can probably use the API Fetch package. I wouldn't say that's related to interactivity. That's just a built-in package in Wordless. The API Fetch package, for example. And you could use that to make requests to any external API. If it's as long as it's an API that returns JSON data, like a REST API. So essentially, yes, you should be able to use it there. I hope that answers your question. Okay. So getting back to this now. So let me show you a simple example of what I'm talking about. Let's close that. So let's say I want specific border in the editor and specific border in the frontend. I then have to, so let's say I do the, let's just do the dotted border here and we'll see what I'm talking about. Remove the dotted border there. And I'm going to remove it from editor. It says this. Okay. And I'm going to let this all go. And then move it fresh. There it is in the editor. Have I previewed this? It's on the frontend because it's in that one file. But if I want something different in the editor, then I need to, let's see if I can go with border. So let's say we wanted one five pixel solid, for example, in the editor. There we go. Look for fresh. Let's close this in the style. And I'm going to set the refresh there. So if you now inspect this, you'll see that there. The static block dotted style from the style that is here is applied and then overridden by the editors. I would prefer it if I didn't have to have the dotted one twice. And only the dotted one applied in one place and the regular border applied in others. We can now do that with the view style, which is very, very cool. I'm going to do that now. So it's a view style property. Go here. So there's editor style and there's style. So now what I can do, so let's do this. So let's say I have to get this to build. So what I could do is I could just do that. Actually, what might be better is if I do the view style. And then I wonder what's going on. So that's edit SSS, that's style that is SSS. So let's create one called, let's call it view.scss and think that'll work. So style can be the background color. In the editor, we want a solid. In the front end, we want the border, the dotted one. So this would be front end only. Confined. The front end only. Okay. And this one I want the dotted. What are we doing? Sold in it. Now I'm dotted in the editor and solid in the front end. Here we go. That's view. That's editor. That's the style which can be both. So that's cool. So what I want to do now is I want to see what that builds. It should have already. Yeah. So I'm bold. I should now have... Why does it, it doesn't seem to bold. How do I tell it to bold the new view style? I wonder if I need to specify something. So I wonder if I should be okay. So view, script will be view.css. Maybe that's why. Yeah. This thing, that's what I like. And go there. I'm naming this incorrectly. Note. Block view. I wonder if I need to create style life review. Maybe that'll do it. Does this make sense? I guess I need to give it a specific name. Oh, I'm not sure what you're trying to do. I was trying to figure out. I wonder if WordPress scripts isn't updated yet. That might be a possibility. View.css should see what I can find. So that, I feel like I should have built. Yeah. I should have actually built. Looks like I should have worked. I wonder if I'm naming the source. Yeah, like I'm doing it right. I wonder if the version of WordPress scripts is too simple. That is the latest version. I'm kind of stumped with that one. I'm going to have to make a note of that and go digging a little bit further. It looks like this should have just worked. Created the view style to look for, I would assume, a view.css file, which the old process would create from the view.css. It says, can I use the block editor for any kind of themes? For example, if I switch with any kind of themes, it will preserve my page that I designed using block editor. As far as I know, as long as the theme supports a block editor, you should be fine. That having been said, one of the benefits of using the block editor is that it just renders HTML at the end of the day. Your content should still be there. Let's take a break and test them. Why not? Because I'm stumped here. Let's go and do a test. Let's go into my site and let's go and apply block theme. Let's delete that. Let's delete that. Let's go into themes and let's apply 224. Let's go to pages. I'm going to delete these pages because it creates a lot of testing. We'll commerce the other day. This is my site. Let's just visit it quickly. There it is WordPress. Let's go to dashboard. Let's create a page. Let's add a new page. Let's just use one of these templates. Why not? They're giving us these template options. RSVP. There we go. RSVP. There we go. This is a block template that I use. God, it's got all the content. I couldn't have bothered to redesign one now. Let's publish that page and then let's view that page. This is what it looks like. It has all the block content. Now that I imported, there we go. Resume for sputch. Look to something. Now, let us go back to themes and let's install an old theme. Let's install like 2016 or something, especially for the 20s. Oh, first. Let's go 16. There's 2016. Let's install it. Why not? Let's activate it. Let's go back to the pages. There's an RSVP page. It looks slightly different because obviously the theme will apply its own theme styles, but the content is still there. The button is still there. The image is still there. You won't lose any data, but you'll lose possibly what it looks like if you change themes. Cool. I hope that answered your question. All right. Folks, I'm going to bring this to an end now. I was really hoping that I could figure out the view style thing. I'm going to make a note and dive into this a little bit further after this call, after this live stream and see what I was doing wrong there. And I might just try and record the updates as to what I was doing. As far as I can tell, I'm doing everything right, set everything correctly. It's probably just a file name thing or an update thing or something that's missing somewhere. So I'm going to go find that out and I'll try and record a quick snippet and I'll add it to this video. And then I will upload this video to YouTube in a couple of days or at least to WordPress TV in a couple of days, to YouTube in a couple of days. And I'll share it with you if you want to watch it. If you weren't able to join me live. So once again, if you're wanting to see some of all the new things coming to WordPress, I do recommend checking out and source of truth. Always a good place to start. I also do check recommend checking out WordPress developer resources, sorry, WordPress developer news, which is apps developer like WordPress.org slash news. The Watson developers link is the very first article there. So I do recommend checking that one out. And that'll give you an idea as to what's coming for WordPress. There's loads more as you can see from and source of truth. There's just lists and lists and lists of cool things coming. There's designer related features. There's developer related features. There's core data API things coming, revisions in the site editor, block bindings, just all kinds of fun stuff coming. So do check that out. Make sure you test your plugins and your themes in WordPress 6.5. That's actually something I need to do. I haven't had a chance to do that. So I need to do that at some point. So all the information you might need is there. Oh, there's the upcoming DevNotes. I could have just grabbed it from there. Cool. So those of you who are having fun testing WordPress 6.5, let me know what you think of some of these cool features. You can find me all over the place. My blog is just my name, JohnBossager.com. I'm on Twitter at John underscore Bossager. I'm a master on some way. There's the link there. I'm on GitHub. You can connect with me via WordPress and WordPress Slack. I do recommend if you need to ask me to find me there. Arts and Center, I hope that was useful. I recommend the block editor, the block post editor, the page editor, the site editor. It is the future of WordPress. So I do recommend checking it out. I use it exclusively on my sites. I have fun with it. I'll be honest, I don't build live sites anymore. But if I was, I would build it. There is a project that I want to reignite this year. There was a live stream project I was working on last year. We were forming a theme in the block editor. It's called Sending. I want to reinvigorate that this year itself, picking that up. So hopefully folks will get a good idea of what's happening there. But yes, if you're holding back on learning the block editor, now is a good time. It's really become robust into what it can do and how it works. So I do recommend checking it out. Okay. For the rest of you all, thank you for joining me. I hope you have a wonderful rest of your Friday, rest of your weekend. And I'll see you again in two weeks time for another live stream where I'm probably going to be testing out the WordPress Playground local environment. If you don't know what WordPress Playground is, it's a way to set up a local WordPress environment that runs in the browser. It's had a lot of development done to it recently. So I think I'm going to spend some time checking that out again, seeing what it's doing, where it is. So in two weeks time, that'll be where we're now. We're in March, that'll be sometime in April. Ooh, I have to check my dates here because I'm going to be away from the 15th, the 18th of April, I think it is. So I think the next live stream will probably happen around about the 4th of April. Yeah, it's probably around about the 4th of April, but keep an eye on the Meetup page, keep an eye on the WordPress site, and do join me for that. Otherwise, enjoy your Friday, enjoy the rest of your weekend. And yeah, go forth and have fun with the coming features to WordPress 6.5. Bye.