[Music] 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 know in the chat. Um, got some music going that seems to be working nicely. Couldn't turn the flooding down, just turned. Hey, Jerry. I think it's Andrew. I think it's Andrew. Says loud and clear. So thank you, Andrew. It's because you're a terrible remembering name, Sveta. Sorry if I get it wrong. All right. Today we are testing
out WordPress 6.5 again. I did this last week. No, last week, three years ago. So if you want to catch that, you can find it here on the YouTube. So I'm going to copy that link into the chat for 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 publishe
d 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 6.5 tag. I think it's 6.5 dev notes. And I'm going to remember it now. And I linked it up last week. Let's see if I get it right. No, it's not that one. It's annoying. It's going to be one year somewhere. So that's probably 6.5 dev notes. Nope, I've got that one either. Let's see if I can find one. Here
we go. Oh, it's dev notes 6.5, 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 y
et. And it's great 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, have a 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, the block bindings API. We worked on, we cataract with 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 APIs. I might not have a look at that. But I'm just going to kind of run through some of these, just see what's interesting, what's coming. Before I do that though, I need to update my WordPress version. So it's usually a help test Word
Press post in the, in the core site somewhere. WordPress release day, code trees release party, I have to test the WordPress there it is. So that was the last beta. I want a newer one. Let's just just search for help test 6.5. First. Here we go. That's beta. And basically I'm looking for the WordPress command. Let's see if I've got it in my history summary. My bash history. Oh, there it is. Cool. So what RCS are they going to be on now? Let's have a look. Definitely an RC stanch already. Somethi
ng could be helping me out. Okay, we're on RC3. Okay, so we're on RC3. So, hey, Cardina. Welcome to the chat. I'm busy trying to remove a help update my WordPress version. Use WPCLR. And sites. Let's go to WordPress. And then we can run that. And this should be RC3. So let's see if that works. I wonder what happens if you go RC4 if it doesn't exist. Should we fly down? [Music] Someone says hello from Chicago. Hello, John. Welcome. We're busy updating WordPress using WPCLR. [Music] I just pressed
the music button a little. I'll just take my wall. [Music] 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 wonder if I got RC4. Oh, there is an RC4. Okay. I must have missed that. Ah, there is an RC4. Okay, it's interesting. So it looks like it looks for it. Tries to download. It doesn't find it. Interesting. [Music] I'm just checking something here. I want to have a quick look in the Slack. Pretty sure. Yeah
, we're definitely on RC3 list. I'm just checking for everything. [Music] I'm just going to pause on the screen because I'm checking Slack for it. [Music] Here's the last question. Yeah, RC3 definitely looks like the last. Okay, I put this wrong. Okay, so we're running on the latest version. Cool. And RC3. All right. So this release brings with it many, many, many things. And the first one I want to check out is the font library. I want to see how that works because I haven't been following it a
ctually, to be honest. So to do that, I am going to create my own plugin. My own theme using Create Block Theme. I'm going to add Create Block Theme quickly. It's the beauty of these livestream sessions. I can just literally just do whatever I want. No bread work. If you ever want to have fun, I know people watching livestreams are great. But I do. Okay, so Create Block Theme is Installer Active. Come on. This is one of my biggest bugbears. This doesn't show that it's busy being activated. You a
ctivate it from here. Let's take this over. You want to look finished as well. Oh, it is activated. Oh, 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 a 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 Theme. That's interesting. I didn't know that was a requirement. All good. Okay, so t
hat's created. Save the go over to Themes. There's my awesome theme. Oh, look, it actually creates a default Create Block Theme thumbnail for me. That's my fault. 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 Readme. There's a screenshot. There's a style that says this. It has a theme for Json Awesome. It has an index template. Fix that. That's al
l it should need. And it has put an error box. So it's the most basic of themes you can get. All right. So now I'm guessing if I go into the editor, I'm going to go to the editor. Styles. Apography. System fonts. Manage fonts. Okay, so I can manage fonts from there. And I can install fonts. And Google fonts. I know Google whole Google fonts thing is... Some people don't like Google fonts. I understand that. I also understand why we're sort of making it available to those that are using Google fo
nts. I also like the fact that this allows you to download the fonts 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 a... We'll do one of these. So here we go. Okay. We need to cover the font name now. Think of a random... Let's type in the word "grid" because it will come up like that. I mean, we can select any one of these fonts from here. That's interesting. It's paginated. I can think of a fun word on "grid". Okay. Let's go for
a learn test. It doesn't have any "grid". It's fun. Let's go for "almario". So let's go for 300 normal, 800 normal, wow. And then let's install these fonts. Now, I seem to remember there was a conversation about where the fonts 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. So let's see. There was an error installing fonts. Oh dear. Okay. I don't know why that is. So it created the fonts directly
and downloaded something. I wonder if we can see in the... In the console that the error is written. So let's push this. This could very well be something to do with my local environment. I'll be honest, my local environment is a bit red and wonky. So I will definitely blame my environment for... Oh, it actually installed the font. Interesting. I wonder if it failed downloading my variants. That's possible. So let's search for another... Let's go "almario" once and let's go ahead and... I'm just
going to search for... Now that seems to work. Okay, so then I'm going to say that the problem is the font. So let's take "almario" and delete it. Let's try and install it again. To the other side. So let's go... We're in 380. So let's try and install that again. This time it works. Okay, so... I wonder if... I wonder if that was my kid's fuck-it-turn. 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 that seems to be working now, so... Could have been a red kitchen, so I could have been a red medication issue. Interesting. Okay, but that does seem to work. So now, theoretically, if I click on "text"... I should be able to... Maybe not. I should be able to choose "almario". Well, let's... Yeah, let's do "almatix". That's such a two-parabens. Let me save that. Yeah, that could change. Yes. Yes, change. That's the system font. That's the default. Yeah, th
ey are changing. Of course. That's cool. Okay, so it installs it in the wvcontent fonts directory. I know there was some discussion around this. And there were concerns it should go to uploads. It should be in fonts. I know there was more conversation around that. I don't know what the final resolution was. Obviously, the final resolution was the story in fonts. But that doesn't 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 F
onts thing, surely? Let's have a look. Let's go to Google Fonts. And let's change font. Like this. And let's go to font. Let's download. I'm going to just stick this on my desktop. I'll go to my desktop. Yeah, it doesn't have that red map. So this is obviously something that WordPress is doing. I wonder why they're doing this. Interesting to know why. It seems to me unnecessary in a way. Why not just include the names from Google Fonts? Maybe it's the way the Google Fonts integration works. It c
ould 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 which one of these two is Alamarai, which one is the other one. So it would be better for me for which we named it. So that's an interesting design choice. I think there might be a bug about this. I wonder if it's opening an issue about this. I wonder. It's just interesting. It's an interesting discovery. I would prefer
to have kept the names as per when they're coming from it. 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 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 the 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 on. So I guess that's a UX choice. It would be cool if there was a fonts submenu. And then because now you've got to go to third topography and then there you click on fonts and then it pops it up. But again, that's not my decision. It's just that's what it's decided. So that does work and that's cool. So what I do want to do now is I want to re-enable the create block theme plugin. Because this also has a font manager option. And what's in
teresting 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. And the same font. Where's the same font? And these are going to be added to my feed. Which I honestly still prefer if I'm honest. However, 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 make it armorite. So that's now a system font. So that's saving to custom styles. Cool. So now let's sa
ve these changes. So these changes will get saved to my theme font. Okay. Theme change is saved. So what this means is if I go into my theme, it's going to have specified the fonts. So that's not great because now those fonts are not part of the theme. So if I export this theme. So this function I'm showing you here is the create block theme function. It's not core functionality. And if I export this zip. Actually it's created new theme. So let's go to the transform font. Now I'll have a separat
e theme. Copy on the server and activate it. Okay. So now that's my active theme. So now I can see that. So now if I go into that. Let's see. That's still pointing to the fonts that are in store of glow. 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 and remove those fonts. Install the theme fonts. So let's remove the install fonts. So now I've got the theme fonts installed. I'm not going to be able to find this. So now if I set i
t to. Now it's not open. Give me a save because it's still the same name. Which makes things tricky. Which is fine. Let's turn it to that. And save that. Right. And then let's write these changes. Done. Okay. It's still pointing to those fonts. Okay. So that is specifically a create block theme thing. So if you are a theme developer and you're using create block theme to bolt your fonts. You should keep managing your fonts here. Because then they will be. Well then. Let's delete some things here
. Delete that. Delete that. Okay. I'm going to go back to WordPress and freak it out. It's currently not exactly. 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. No, there's a lot of it. Oh, that's different. Oh, of course. See now that's. Okay, that's fine. I just went up on a tangent of mine. Alright. So let's go back to create block theme. Okay. Now we're selecting f
rom scratch. Okay. That's okay. So now if I manage my theme fonts and I add a Google font to the theme. And so for example, single variant. Okay. That's not part of my theme fonts. Alright. So if I go back to the editor. We've got styles. I like to photography. I said, in front. Save save. And then save the changes to the files. Now if I go back to that theme. And now it's in the assets in the theme. Okay. So managing fonts via the new font library will install them. Install them system wide for
WordPress. Managing the fonts in create block theme. Well install them in the theme. So that's good to know because I say, well, it's good to know. For me at least. I'm busy working on. Some content for WordPress is all around. Well, I'm not working as one of my fellow contributors is working on this. All around great block theme and all those things. And one of the issues that we had. Issues. One of the content items we were working on was specifically. The use of create block theme. So I want
to actually share this update with Cynthia. Who's the contributor working on it. That. The font library. Is only applicable to the site and not to the theme. So I just want to make that note here. So. Okay. (gentle music) - I've got a check, but that thing is cold. I manage to go first. (gentle music) Welcome from Ecuador. All right, so I'm gonna leave that there for Cynthia. She can ask me about it. I might just update it a little next so she can see what's happening. But that's useful to know
. As I said, that's maybe why the font names are hashed that are not 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. Andrew, sorry, not actually. That's a very good call out. That's a 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 CreateBlock theme to help develop
your theme process, then use the ManagedThemeFonts in CreateBlockTheme to install your theme fonts to the 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 wanna change the fonts or whatever they c
an 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 changes to their site, which I know some theme developers are not huge fans of. I'm like it's the user's site. Let them 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 wanna change the text, I can change it back to whatever the default was, and then make that change. Just working out for some reason. 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 a fun change if they want to. Make it easy, why not? Says I. I don't know, I have this opinion on, let them break their site and then you can charge them to fix it. If you're a developer, maybe that's the wrong way to look at it. All
right, so that's the FUD library. That's a cool addition coming. Appearance tools for classic themes. And I can more create a control. Gonna 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 gonna 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, not recovering, looking into
again. So interactivity basically is something that is added to, (mumbles) added to blocks. Let's see if we can find some documentation here. If you use a previous updated docs. So I'm gonna go to the updated docs. I have never used interactivity before. Well, I have, but I'm gonna act like I've never used it before and I'm going to dive straight into how it all works. So we're gonna build a block that demonstrates interactivity API in WordPress. We need the node environment set up. We need to
use the create block package and use the interactive template. So let's grab that. I do already have the node.js environment set up. 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 word block. My first word block, sorry, to turn this over, that should all work. That's gonna take a few minutes. So while that's doing its thing, we can actually just pull this off screen. Yes. I'm gonna 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, yeah, okay. Okay, we need a code of the tail, we need the tools, we need a local site to get code. So, code requirements, add interactivity support to block JSON, to indicate block support, set to the T, 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 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 start thinking about what we can build today with this. So, ooh, it's all in, this used to all be in GitHub. It's no longer there anymore. It's now all part of the developer resources. It does say specifically 6.5 for a responsible dev. So to add interactions to blocks using the interactivity API, developers can use directives, whi
ch 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. And there's a nice graphic, which shows how all these things work. And here's an example where you could have an isOpen, a context directive. You can say isOpen is false, and then you can set up a watch so that you can check against callbacks log isOpen. And then obviously if you set something to true or set something to false at a
ll, 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 fold this up as well. So very, very happy being here today. All right. So let's have a look at the code that that turned out. Oh, haha, put it in the block place. Let's just be first to the plugins directory. I should have done that in the plugins directory. It's funny. There we go. My phone just peeped at me. All right, let's close down the JSON.
And let's go and look. It's, well there's the block. It's loading all of that all in good. Let's have a look at the block to JSON. Okay, it does already support interactivity because we use that interactivity template. So that's great. It also uses the Viewscript 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. Okay, it's not big. I'll just find it over here. Yeah, jus
t in here. Let me get some descript loader. Yes, so in WordPress 6.5, there's a script modules API which brings native JavaScript modules support 6.5 and provides two modules for use with interactivity API. So there is a blog post ones, a new script modules interface. Has been introduced to support native JavaScript modules in WordPress. So if we open that, this article about modules and basically something about providing mechanisms for splitting JavaScript programs up into separate modules tha
t can be imported when needed. Now, if you've ever worked with a block plugin, you will have seen this, for example, when you do things like this, when you import things in and my understanding, 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 opti
on 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 of modules, make it more efficient than having to use a library and do
all of that extra client side processing. So this is all the history around modules and how they work. I'm gonna share this one in the chat if anybody wants to read about how this works and background knowledge and all of that. But essentially, this functionality allows us to specify our module here. So in this case, it's the ViewScript 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 o
n my Dodge game. So let me share that liquid quickly. (soft music) So this is a game that I developed sometime 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 gonna actually just start the game here. I don't need to worry about my score. I'm gonna half run it into my GitHub. So you can see the code that I'm talking about. There's Dodge there. I just called it interact again. What I
discovered was that I could make changes to the ViewScript 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 use 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 ViewScript module as well. So I kind of want to give 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 gonna go through that now. But 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 o
ther words, you have a PHP file that is used to render the blocks content in front end. If you have created, where's that conduct? If you've created your first block using the template, it'll actually set everything up for you. So it'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 essentially the code that we see from the, from the documentation. An
d then if we have a look at the ViewJS, so it basically uses the store 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'll suggest 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. I wonder if you just check that in the API. You can see there's an example of the context. Yeah, you see, 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'm gonna check that out. It's actually on the same page. Let's find that. So that returns a stringified JSON of context directive. This func
tion is the recommended way to print the data context attribute on the server side market. So 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 a prevent function for having to write all this out. So it's just a single PHP file, PHP function call. So that's very interesting. This helper function simplifies the creation of WP context directive by providing the way to pass an array of data, which encodes to JSON strin
g. So probably you wanna be able to set up your data in PHP, maybe, and this is an easier way to do that. So you get it from PHP somewhere and then you'll 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 on the clouds. Turn it down a 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. I'll first try to bl
ock. So there, there's nothing in the editor, which is fine. I wanna see what this does on the front end. So there's my toggle button and hey, there's my content of theory. 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, sorry, is false, is open, is set to false, it then watches the log is o
pen callback. So this this wrapper is watching. So if I go over to that one, let's show you what it's doing. So log is open as a callback. It gets the is open from the context and just logs it out. 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, boom, boom, boom, 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, unclick actions, toggle, open, for example. And I can then change this to toggle open and I think this will just work, but I didn't have to run up all the time. Let's verify that. It's just loaded. 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 a 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 the necessity of a build step. But what that is 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 top, it 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 interact, data, data.ep 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 it to context, which is false. Then the hidden directive is bound to the paragraph tag. And that one is set
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, yeah, it starts at false. So hidden, if this one starts, hidden will be false. So, sorry, 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 i
t'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, ther
e is the context that we spoke about, there is the bind, so it allows you to set HTML attributes on elements based on Boolean or 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 a 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 inner text of an element. So here, for example, the spans text is receiving the text from the context, the 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 put away at some point. And then there's things like on events, so on click, on key up, on key down,
all those kinds of things. So there's a lot available there. I really am 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 wanna find it very quickly, there was an example that he built. So I wanna find that shared with you all. Now I'm not gonna find it that way. (laughs) 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 site in a
second here folks. Yeah, so his name is Elliot Richmond. He is a WordPress developer like myself. He's also a Goldie like myself. And he created this interactivity API tutorial. So do check that out. There's some, he actually goes and builds something with it. So let me share that link with you all in the chat. You can check that out. Give it a like and a subscribe maybe, because I think he's doing some fun things there. So that's also some examples of how it looks. So yes, I'm quite excited abo
ut interactivity and what it can do. So give that a look. All right, I'm gonna close this down, move on to something that's what else can I play with. Let's see, yeah. So we have interactivity. I think he very specifically for like the word developer-y things, things that require me to write code. Block bindings we did last week. We go back up to the list of things here. Script modules API we discussed. HTML I updates. A lot of blocks fields specify, to specify a lot of children. That's interest
ing. New style sheets support the block types, what's that? Find the style sheet for your blocks by the view style property. Frontend only block styles. Okay. Block scripts there was already script for use script and just block style there was any style and editor style. Oh, so now you can actually have it. This is super small, but it's one of my biggest annoyances about holding 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.
So I just wanna do a standard block. I love it when I find stuff that I want. So let's go. Let's go. Static block. Okay, so that's gonna create a block for me. While that's doing that, I'm going to disable interactivity. (mumbles) All right. Static block has been rendered. Okay, installing packages. Now, but a feeling the create block won't have the support built in because create block probably hasn't been updated, which is fine 'cause that gives us an example of what we're working with. Let's
have a look here. (mellow music) Wow, this has been open since September, 2023. That's amazing. Okay. Come on, build a block. Oh dear. (mellow music) Perhaps this happens so quickly as not just this takes so much to life. (mumbles) Come on. (mellow music) I like to put some on place here. Okay. Okay, there's my block. Cool. Okay, this goes all the way down. Okay. So, let's go into here. Let's go into the vlog. Okay, so it's not, okay, awesome. So, previously, previously on WordPress, when you bu
ilt a block, you had the editor.scss file, which is applied to the editor only, and you have 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 to this file and then get overridden in the editor, which is annoying, all right? No, I don't want the file to work out. I'm gonna use scss. So, when you're working with the block, let's go over here and let's activate the plugin. Try another code se
rver as well. Doop doop doop. So, let's add the block some way. And you must. ( Okay, so my static block in the editor has the border, the blue background, whatever, it has a red dotted border, you can only see it there. And if I go into the front end, it has no border. So let's make the border a bit bigger so we can see it. Let's make the border five pixels. And then while we're here, it's fine. So let's refresh this. So there you can see the dotted border and on the front end, there is no bord
er. So the way to achieve that is to specify background color, color adding, install the scss and then your editor does scss, you apply the border. Now, the annoying thing about that is in the editor, it then means (clears throat) I see somebody's asked me interactivity thing, I'll answer your question in a second. It then means that you have, (mumbles) We have two star sheets in Qt. (mumbles) (soft music) I just look like such. Yeah, there you go. So you end up with, (soft music) Interesting. (
soft music) Yeah, there we go. 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 we have that go down. 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 in the app. Let's pause on that and get back to our, to Senna'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 gonna 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. (mumbles) 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 WordPress. 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 turns 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 a specific border in the editor and a specific border in the front end. 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. I'm gonna move the dotted border there. And I'm gonna remove it from editor in CSS. Okay, and I'm gonna let this all build and then we refresh. (soft music) There it is in the editor. And if I preview this, it's on the front end 'cause it's in that one file. But if I want something different in the editor, then I need to, I'm specifically gonna go with border. So let's say we wanted one five pixels solid, for example, in the editor. There we go. Let's do a quick refresh. Let's
close this one down. (soft music) 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 editor in CSS. 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 the other place. We can now do that with the view style option, which is very, very cool. I'm going to do that now. So it's a view style property.
So if we 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'm going to have to get this to fold. So what I could do is I could just do that. I could do that. Actually what might be better is if I review style and then, I wonder what's going to, so that's in its essence, that's style.scss. So let's create one called, what's called view.scss. I think that'll work. Let's go back to block things from the inverse. I'm just going to see what it
generates. Guess it needs to look. So style can be the background color. In editor we want it solid. In the front end we want the dotted one. This would be front end only. Let's make it that. Confine. And the front end only. Okay, and this one I want the dotted. There we go. Sold in there now, I've dotted in the editor. And started on the front end. (soft music) There 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 se
e what that folds. Should have run pretty. So in the bowl, I should not have. Why does it, it doesn't seem to bold. (soft music) How do I turn it to bold in the new style? Yeah, let's see. That looks. (soft music) And the one that's present. (soft music) So I wonder if I'll just be a case of view, such a relative use script will be viewed at CSS. Where it must be. (soft music) Maybe that's where, yeah. (soft music) I don't gather a naming list in currently. (soft music) So there's a talking sess
ion. (soft music) Note. (soft music) Not viewed. (soft music) So I wonder if I need to create, start from being, start from being divided. (soft music) (soft music) (soft music) (soft music) I guess I need to give it a specific name. (soft music) Let's go. (soft music) Let's see if I can get that. (soft music) I'm literally trying to figure out what to do. I wonder if WordPress scripts isn't updated yet. That might be a possibility. (soft music) (soft music) (soft music) (soft music) (soft music
) See what I can find. So that, I feel like I should have worked. (soft music) Yeah, that should have actually worked. It's like it should have worked. (soft music) I don't know, maybe in the source. Wow. (soft music) Hmm. (soft music) I feel like I'm doing it right. (soft music) I wonder if the, (soft music) version of WordPress scripts isn't too simple. (soft music) That's the latest version. (soft music) I'm kind of stuck with that one. I'm gonna have to make a note of that and go digging a l
ittle bit further. Looks like this should have just worked. Created the view style to look for, I would assume a view.css file, which the whole process would create from the view.css. As soon as 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 to block it. As far as I know, as long as the theme supports the 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. So your content should still be there. Let's take a break and test them. Why not? (laughs) Because I'm stuck here. So let's go and do a test. Let's go into my, my site. And let's go and apply a block theme. Let's delete that. Let's delete that. And let's go into the themes. And let's apply turn to the floor. Let's go to pages. And I'm going to study these pages because it creates when I was testing the comments the other day. So,
trash, my account, check out cart. So this is my site. This is visited quickly. There it is WordPress. So that's dashboard. Let's go create a page. It's a new page. Let's just use one of these templates one up. Giving us these template options. RSVP, here we go. RSVP, there we go. So this is a block template that I've got. It's got all the content. I couldn't have got it to redesign right now. So let's publish that page. And then let's view that page. And this is what it looks like. It has all t
he block content that I imported. So here we go, resume for spot, link to something. So now let us go to back to themes. And let's install an old theme. Let's install like 2016 or something. Like that. Special the 20s. Oh, and first. So let's go 16. So there's 2016. Let's install it. Why not? Yeah, I don't. Activate it. And let's go back to the pages. So there's an RSVP page. Okay, it looks slightly different because obviously the theme will apply its own theme styles. But the content is still t
here. The button is still there. The image is still there. So 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 gonna bring this to an end now. I was really hoping that I could figure out the new style thing. I'm gonna 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, said everything correctly. It's probably just a file name thing or an update thing or something or something something. So I'm gonna 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 with you if you wanna 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 recommend checking out WordPress Developer Resources, sorry, WordPress Developer News, which is apps, developer.wordpress.org/news. The "Watch New 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 WordPres
s. There's loads more, as you can see from, 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 Dev Notes. I could have just grabbed it from there. (laughs) Cool. So those of you who are having fun testing WordPress 6.5, let me know what you think of some of these cool new features. You can find me all over the place. My blog is just my name, johnbustinger.com. I'm on Twitter @john_bustinger. I'm on Mastodon. Somewhere, there's the link there. I'm on GitHub. You can connect with me via WordPress
and my WordPress Slack. I do recommend, if you need to ask me to get a friend of me, Art & Center, I hope that was useful. I recommend, look, the block editor, the block post editor, the page editor, the site editor is the feature 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 re... What's the word I'm looking for? Reignite t
his year? There was a live stream project I was working on last year where we were forming a theme in the block editor. It's called sending. I want to reinvigorate that this year and start 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 at Artworks. And so I do recommend checking that 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 WK 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 two weeks time, that'll be where we are. 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, I'm going to be away from the 15th, 18th of April, I think it is. So I think the next live stream will probably happen around about the fourth of April. Yeah, so probably around about the fourth of April, but keep an eye on the Meet's Up page, keep an eye on the Learn WordPress sites and do join me for that. Otherwise, enjoy your F
riday, enjoy the rest of your weekend. And yeah, go forth and have fun with the coming features to WordPress 6.5. Bye. (soft music) SC par 2
Comments