 All right, welcome everybody as you're joining us. I don't have my introductory slide open, do I? There we go. Welcome, welcome, welcome. While you're joining us, please do let us know in the chat where you're joining us from. And maybe a little bit about what you do with WordPress. And I will then get on with my announcements. My name is Jonathan. I live in Cape Town in South Africa. I am a developer educator at Automatic. And I'm sponsored to work with the training team. And I create tutorials, lesson plans, online workshops like this one courses, everything around learn WordPress. I'm a little bit, those of you who usually join me on a Thursday, I'm a little bit more scattered today than usual, I would say. I'm getting ready for a work trip next week. And I'm leaving on Saturday. So I've just got lots of things in my head that I need to plan for, which is why I prepared a more relaxed workshop this week. It's not a heavy coding session. We're just gonna be looking at some WordPress 6.4 improvements and sharing with you what I think is interesting coming to WordPress 6.4, but also sharing a list of all the changes coming so you can go and check them out in your own time as well. Hey, we've got Mark from Issaquah, welcome. Jim from Philadelphia, retired Oracle Enterprise Developer Manager. Awesome, welcome Jim. Aaron for Sacramento, WordPress plugin developer, my people. Hey, it's Milana from Sylvia. I eat cookies with WordPress. If you are ever at a WordCam contributor today and Milana is there, make sure you find her because she always has cookies. Mary Beth, welcome from New York. Freelancer web developer, welcome Valerie. Hello, Oklahoma. Welcome Rui from Portugal. Milana says, give us heavy coding. Not today, Milana. Maybe when I get back from my trip, but not today. It always kind of freaks me out a little bit with people that I personally know attend these workshops. So no pressure there, hey, Milana. And Pradeep, welcome Pradeep from India. Awesome to have you all here today. All right, as I mentioned earlier, today we're gonna be looking at some WordPress 6.4 improvements. So if you don't know, WordPress 6.4 is coming out on a run about the 7th of November. That's the target release date. So that's in just a little under over two weeks now. I think at the point of release candidate one soon or beta three, I can't remember exactly which, we'll see just now when I do the beta update. And so it's always a good idea. I always prefer to start testing WordPress when the sort of second and third beta start coming out. Sort of two to four weeks before the release candidates if I can. And then I usually test things again during release candidate period, especially if you're a plugin developer or a theme developer, that's a good time to start testing your plugin and your theme to make sure that it works with the newer versions of WordPress. So today we're gonna be focusing on a couple of interesting improvements that are coming that I think at least are interesting, but we'll dive into that in a moment. Just a few announcements before we kick off. Again, welcome to everybody. Awesome to have you with us today. And welcome and thank you to Tracy who is co-hosting with me here again today. I really do appreciate Tracy co-hosting. If you do ever want to co-host one of these online workshops, you are always more than welcome to, you can go over to the training team site. So if you go to make.wordpress.org forward slash training and if you take a look at our handbook, there is a getting started guide yeah, under getting started that'll take you through all the different options of how you can do things. And it'll be under, I think it's the content creator on boarding, they've got the workshops, the tutorials and the lesson plans there. So go and check that out if you're interested in co-hosting one of these workshops. As always, we are presenting in focus mode. So that means I can see your video screens, Tracy and I can see your video screens, but you can't see each other's video screens. That just prevents any kind of zoom bombing that might happen. If you would like to enable your video so that we can see your face, you're more than welcome to, but you don't have to. You are welcome to ask questions. You're welcome to post your questions in the chat or unmute to ask questions. Today is not as formalized as my usual workshops. So any questions you have as we're going through these things, you're welcome just to let me know. However, it suits you. As I mentioned today is a very relaxed session. So hopefully I won't be speaking too fast at any point in time. But if I do start speaking fast and I'm rushing off and you want me to slow down, please let me know if there's anything on screen, you want me to share or slow down to please let me know. If you can't see my screen right now, you should see an announcement slide with some links on the screen. If you can't ever see my shared screen, let me know and I'll just re-enable the screen share. And then we will be recording and posting this session to WordPress TV afterwards. And then if you're looking for any further WordPress learning resources, you can go to learnedupwordpress.org. That's all the tutorials and the lesson plans and the things that we work on are hosted. And then if you're looking for developer-focused news and blogs and tutorials, you can also check out the developer blog. This was launched. Launched, I can't speak my own language. This was launched earlier this year and there are some great tutorials and how tos specifically around some of the newer things that are coming, how to use them. Whenever I'm looking for tutorials on some of the newer functionality of WordPress, I go to the developer news or the developer blog first before I go looking anywhere else. All right, as mentioned today, we're going to be looking at WordPress 6.4. I'm going to take you very quickly through the process of upgrading a local WordPress site using the beta tester plugin so that you can run 6.4 and test out 6.4. Many of you probably know how to do this, but it's just a good reminder of how it works. Then we'll just take a quick look through the 2024 theme very briefly to see how that's put together. I'd like to then look at some editor improvements that are coming. There's one really cool one that I've been, I personally, I don't know, a number of people have personally wanted for a while and then we'll just review some of the others. Then I'd like to dive into some coding related things. There's a new thing called block hooks coming that I'd like to dive into. There's something called use block editing mode which has existed for a while, but was recently made public. And then there's some PHP compatibility notes. And as a sort of, let's call it traditional or ex-PHP developer, I suppose I still am a PHP developer, but I do a bit of both now, PHP and JavaScript. But PHP is where I came into the web development. Anything related to PHP compatibility is always interesting to me. So we're gonna have a look at what the notes are there. If you want to test along with me today, you all need a local WordPress installation and a text editor. And then we're going to install the WordPress beta tester plugin. They create block theme plugin and then an example block. And I just grabbed a block that I presented a couple of workshops on a while back, which is a block that doesn't use React. It just uses plain vanilla JavaScript. It just makes it easier for us to change things if we want to. So I will reshare these links again later on. I'm gonna copy and share them in the chat now, but I will share them later on as we go through. So if you want to start downloading some of these things you can do. Otherwise, if you're just here to watch, that's so fine and you can catch up on this later. Okay, I'm gonna pause for a supporter. Check if there are any questions before we get started and then we can dive into the WordPress 6.4 source of truth blog, which some of you may know about. Okay, so there is a member of the WordPress community called Ad McCarthy. Anne is a developer advocate at Automatic. So she works at the same company that I do. And Anne is very, very, very good at monitoring what's happening in the WordPress release cycle and every release for the past two or three releases, she's published what she calls the source of truth document. So she did it for 6.2, she did it for 6.3. And essentially this is a list of all the improvements that are coming to a new release as well as anything that is planned for the release. And then as the release cycle, as the official release cycle happens, if things get bumped to a future release, she will note that. But it's basically, she takes all of these dev notes that you can find on the make blog. And I'm going to open up the make blog as well and share that link with you. No, I don't want 6.3. So let me just find this quickly here. So if we go down to 6.4, I think it's 6.4 dev notes is the actual tag. I should have copied this. Is it 6.4 dev notes? 6.4 dev notes is a specific tag that one can use to follow these things. And I thought I had saved the link, but it looks like I have not. So let's see if we can find it here. Dev chat meeting, no. I'm not going to find it now, am I? Come on, it's going to be one year somewhere. There we go. It's dev notes 6.4, that's the one. So let me share that link with you as well. So essentially the dev notes are a series of blog posts that get posted to the WordPress make or blog about all the developer things coming to WordPress in the new releases. And basically summarizes all of those dev notes in her source of truth doc. What I like about the way she does this is she kind of gives you an overview and then she actually has a table of contents at the top of the blog. She has some important links, some assets, some tags. Then she has priority items listed right at the top and then she goes through to any additional items. And then right at the bottom, she has anything that's been pushed to 6.5. So during the release cycle, if anything is not ready for release, the release team will push it through to the future release. To be able to test all of this out, we need to have a way of testing WordPress 6.4 in our local environment. And to do that, we use the beta tester plugin. Now the beta tester plugin is a plugin that is very easy to install and use. You can install it either by downloading it from the WordPress link that I shared with you earlier or you can just go add new in your plugins page and search for the term beta tester. And if you search for that, it should be the first plugin that comes up. It's the plugin that a lot of folks use to test WordPress. So if you install that, you can then change some settings in the beta tester setting page and basically force your WordPress to update to whatever the latest beta or the latest releases, a release candidate, should I say. So once you have activated the plugin, it'll add an item to your tools menu called beta testing. And then my personal preference for when it comes to beta testing is I like to prop it onto bleeding edge. And then I go for beta and RC only. So you can choose release candidates only. You can choose beta RC only or you can go nightlies which is every day some code gets pushed and you update to that. I usually go for the beta RC only or if you just want the release candidates when the release candidates come out you can switch to that one. So once you've saved those changes, the plugin is great. It gives it all messages. It says perhaps you should head on over and upgrade now. You click on upgrade. And then you can see there is an option to update to version 6.4 RC one. So currently this WordPress version is on the stable version of 632 and we want to update to 6.4 RC one. You click on that button and everything just magically happens in the background. So it'll download the zip file with all of the source code for the RC. It'll overwrite it into your local WordPress install. If there's any kind of database things that need to be run, it'll trigger those. It should also download and install if there's a new default theme, it should download and install that as well. And it'll kind of just set you up, set your local WordPress installation up as a 6.4 version of WordPress or at least whatever the newest version that is coming out is. As always, I do recommend only doing this on local development sites or using a staging environment. I don't recommend doing this on any production sites. What I sometimes do personally is I'll sometimes switch this on on my personal blog just because I want to see how it interacts with my personal blog content and any customizations I may have done on the blog. But that's because my blog is not super, super important. If it falls over because of a bag in a bait or an RC, it doesn't affect me. You'll see a database update is required, so I can run that. And then once that's done, I'm now running WordPress 6.4 and I'm seeing everything that somebody should see when they install WordPress 6.4. I see earlier, it says I use Git to pull the latest changes. Is there any disadvantages of doing that way? Essentially, what Elliot is doing is running the nightlies. So he's getting the very latest code. And Elliot, in my opinion, there's no disadvantages of doing it that way. You can certainly do it that way as well. You can go and get, especially if you're somebody who's working regularly on call, having that WordPress setup in your local and pulling from that is perfectly fine or wherever you pull it from. There's no specific advantage or disadvantage. In fact, I might say there's a slightly more advantage because you're getting the latest and greatest code, but with the latest and greatest code comes possibly the higher number of bugs. So those are the pros and cons. But in terms of testing, there's no major disadvantage for you doing it that way. I just like the plugin way because it's a lot simpler. All right. So with the plugin installed, I should now have 2024 installed. There it is, I do. So let's dive straight into 2024. You'll notice that the default, default themes are moving away from what they used to be, which is kind of very blog-orientated. And 2024, because of the block editor, because we've got templates that we can edit and page templates that we can edit, looks a lot more like a site that you might want to build for our customer, for example. So it has a nice sort of header with an image. It's using some columns to create sort of areas that you could have for call to actions or features or whatever. It has some interesting areas and layouts and things. It even has a, let's say a quote section that we could use for a review or a testimonial area. So it's very much less sort of blog-focused and more sort of site-builder-focused, which kind of makes sense if you think about the site editor and the way it's going. It even has a sign-up area. I don't even know if this is gonna do anything. Let's see if it, no, it doesn't link to anything at the moment. It does have blog areas, so you've got your blogs happening so you can see what blogs are looking like. It has a sample page, which is essentially still the same sample page content that WordPress has always had. It's just obviously nicely laid out. And then this is your default theme. In terms of the theme itself, I want to dive into the code a little bit and kind of just see what's going on there. And I have no idea what to expect. I haven't actually done this yet. But if we have a look in 2024, we will notice that, and this is something I was chatting about the other day about block themes and functions.php files and all of that. The last few block themes, if you have a look at 2022, sorry, 2023. 2023 did not have a functions.php file. 2022 did, but the functions.php was specifically only doing two things. And it was things that were needed that weren't available in WordPress core yet. So by the time 2023 came out, those things were included and so it didn't need a functions.php. I noticed that 2024 does have a functions.php, so let's go and have a look and see what this functions.php is doing. And it looks like it's the same reason that there was a functions.php in 2022. There is specific functionality that is needed. And so this is registering some custom block styles. It looks like it's registering it for the core button block, for the core details block, for core post terms, core list. So this is kind of cool to see how this is implemented. So it's specific styles for specific core blocks all happening in the functions.php. There are also some custom pattern categories. And this is actually something that's in 6.4, that's coming to 6.4, we'll chat about in a second, but you can register custom pattern categories. And those are really only the two things that the functions.php is doing. So it's a bit more sort of how you would use your functions.php in a block theme now, as opposed to doing it to fix bugs or issues with WordPress core, which is very, very interesting. If we have a look at the style.css, we can see that there's no custom styling happening here. And this is probably because it's all custom styling is happening in PHP. So you'll see it is the core button block style, for example, is using the asset CSS button outline CSS. And the path to that file is there. So if we're gonna have a look at that file, we will see that there is the button outline. So it looks like the sort of way things are moving now is that instead of having all of your styles in your style CSS file, you customize a specific block by setting up a custom style and then you have a specific CSS for that custom style. Which I personally really, really like. I've always liked the ability of modern CSS and Sask syntactically or some style sheets and less, I'm not gonna remember what less is called, where you can sort of separate your styling into different files for different things where it makes sense. And then during the transpiling process, it kind of pulls it all together. It looks like WordPress is starting to adopt this concept which I really, really like. If you think about it, it makes sense because now if we think about the blocks on a page as their own little entity, having its own custom style in a single file does make sense. It means you can then enable or disable that custom style in code or probably in the editor. And as Elliot points out, and I don't know this and it would be a good idea to dive into this, but presumably only that style is loaded if that block is used, which means WordPress is faster. It's not loading that style in the style that CSS and that button is never used. So I'm really, really liking what I'm seeing here. I definitely think this is probably what's happening. This is what Elliot is saying about it only being loaded because the performance team, if you don't know, there's a WordPress performance team now is getting involved with a lot of these core releases. So this is a really cool thing. I didn't know this was there. I literally just discovered it today. So this is actually a very, very cool thing to see and kind of stumble across. If you want to know more about what's happening with the 2024 theme, there is a GitHub repository where you can go and check things out. There is the 2024 theme post. So you can go and read up about what it's going to do and how it works. Elliot says, if that is the case, then this is sweet. I didn't know this either. I would assume so. Elliot, it might be worth checking out for yourself and verifying that. Maybe get back to us somehow if you can via the makeslack and let us know. But I would assume that that is definitely the case. So there is the blog post. Anton says, yes, that is my understanding as well. So yes, it's very, very exciting. So if you think about, you know, being able to create your custom styles and only loads of the button loads, that's really sort of moving towards this, you know, controlling every aspect of the site in the site editor using the blocks. It's very, very cool to see. I almost feel like we're reaching a point where the pain of migrating to this new block paradigm is starting to bear fruit with some of these newer releases because now that we've got the foundation in place and we all understand how blocks work and we're starting to learn how to build them, now we can start adding these improvements which just makes things better for everybody. So it's very, very exciting stuff. Okay. So that is the new core theme. I do recommend going and checking it out. I can almost see myself using this theme as my new homepage because if you look at this theme, if you look at the homepage list of this theme and you have a look at my homepage on my blog, you can see I have like a featured image and then I have a little bit of text and then below that I have my posts and I have my social media icons. So I'm actually honestly, and this is, I didn't plan to say this, but I'm actually looking forward to using this on my blog and kind of using it to build my new homepage. So this has kind of made me excited again. All right. I'm gonna take another sip of water and then we're going to dive into the other things that I wanted to show you inside the editor quickly. All right. So on Tuesday I ran an online workshop on some of the new changes coming to WordPress. And this one, Elliot was in the, in the Elliot who's just commented was in the, was in the live stream. Sorry, it was a live stream I ran. And that is finally going to be possible to rename your group locks for improved site organization and 1,000,000, 100, whatever you want to call number, web developers around the world are probably jumping for joy at this concept. If you don't know what I'm talking about, let's dive into the editor very quickly. So group blocks are this sort of core, let's go to the homepage. Group blocks are this sort of core foundational building block of anything in the site that it's a lately. If you wanna put anything together, you pop it into a group and you have, you'll see groups just happen, there's like five or six or seven groups in this layout. Groups are like container doves, if you think about old school HTML and it was not possible to rename these group blocks until now. So now if you open up the list view whenever you're editing any kind of template in the editor and you click on the options for the group, there is now an option that says rename and you can go to time. So we can call this the main container and there it shows up as the main container and then we can select the next group and this group looks like the header area or let's call it, I don't know what you would call that. Let's say the, yeah, let's call it the header. Now, header is probably the wrong thing. Let's say heading, whatever you wanna call it. I don't know what these things are called. Then the next group looks like this series of features. So let's call this, now I'm trying to use my standard context menu. Let's call this the feature area and you can really go to town and it just means that when you're building your templates you can have these names in the layout so that when you're working, you can go right. You can jump straight to the featured area and you can go edit the featured area. You can jump straight to the heading and notice what I really like about this. I haven't noticed this before. When you click on that group, it jumps you straight there. Maybe this is not a 6.4 thing this might've been around for a while but it really makes the list view so much more powerful now, so much more easier to navigate through your design, through your layouts. It's really, really cool. I'm glad to see it finally coming. It has been something that folks have been asking for for a number of releases now. And so I'm not sure why it's only arriving now but it is super exciting to see it happen. The other thing that I noticed in this blog post was that there's an option to, I wanted to show that there's an option to add an aspect ratio to an image blocks placeholder. You can set styling. You can also add background images to group blocks. So this is something that I wasn't aware was a new thing. So let's actually go and find a group that we feel like adding. Let's go to the featured area and let's test this out. I have no idea if this is gonna break or not but let's see how we would add a background image. So I'm going to open this up and I'm going to background images what has been added to group blocks making this a little bit of adding a grouping, a heading block and adding a background image. I'm gonna just pop open the demo and just see what the settings are. So this is a, gonna just turn that off. So here's our transform to group. So it's a group and then in the command palette they're toggling the expector and then they're clicking on the styles. Oh, there it is on the styles. Okay. So if you don't know what all of that was going on the WordPress now has a command palette which you can then start typing in things that you're looking for and it'll jump to whatever that thing is. I don't use it but I know that the folks do use command palette. So do check that out if you're interested but in terms of the group and the group image let's see how that works. So if I click on this featured area here and I click on the styles area there we go background image. Oh, that's cool. I don't think I have any media in my media library so let me see if I can upload an image off my desktop. I generated a D&D adventurers image the other day so we'll use that one. And nothing seems to be happening. I don't know if the image is the problem but it definitely, there we go it works. Okay. So it was happening in the background. There wasn't a visual representation of what was going on but hey it worked. That's so cool. So that's maybe some feedback I could send to the team. It works but there's no visual representation if it's quite a large image. For those of you who are wondering this was generated by AI which is why all these eyes look as weird as they do but that's really, really cool. The ability to be able to just add an image to a group block. That means that anything inside the group block will be underneath that image. So that's something that's very, very cool and awesome to see coming to 6.4. All right. So those are kind of some of the editor improvements that you can dive into. There's so many in this list. We've got the group blocks. We've got as I say the command pallets. We've got image ratios, background images, vertical text orientation supports. There's so many things going on. So I do recommend checking them out going through these items in that blog post. I'll share the blog post again at the end of the session but there's just a lot going on. What I would like to do now is I'd like to take a break from building in the editor and write a little bit of code. And I want to dive into something called block hooks. Before I dive into block hooks I want to spend five minutes sharing a little something that I discovered recently about a plugin that I use whenever I'm recommending folks start working with block development. So let me, I'm going to not save these changes. There is a plugin that is recommended for block theme developers called create block theme. I have used it a number of times. I use it when I am working with block theme courses that I'm creating. Whenever I'm teaching people how to start working with block themes. It's a plugin that basically adds some functionality over and above the site editor. And a lot of this functionality will eventually become part of the site editor. But at the moment it's kind of either not ready or it needs the editor needs to be improved to support some of this functionality and some of it's only available in PHP. And so a group of theme developers have got together to work on this plugin called create block theme. If you haven't seen it before I do recommend checking it out. I'm going to just pop it over pop the link in the chat here. And one of the great things I like about create block theme is that let me just open up the create block theme interface is that allows me to export my current theme with changes, create a child theme, clone the current theme so I can start building overwrite the current theme with any changes or create a blank theme or create a style variation. It also has the ability for me to upload fonts to my theme that I'm busy working on. And I can then add themes theme fonts specifically to the theme and then export those fonts with the theme. So whenever I'm creating and I mentioned earlier about my homepage whenever I'm creating a theme for my personal blog I will take the current default theme and I will clone it into a clone of that theme so that I can then make my changes in the clone version and I can work with them from there. So the first thing I'm going to do now is I'm going to create this clone of 2024 and I'm just going to call it John's TT for clone and I'm just going to say generate from that. I see that Tias has a question so we can create theme from existing custom theme also. Yes, absolutely. So this is built for block themes but any block theme that you have in store you can then create a clone using this theme. Miguel says, why not a child theme? No reason why not? We could go child theme as well. I just, that's the thing that I do but there's no reason you couldn't do a child theme exactly the same. The same reason that you would have done a child theme traditionally is the same reason you would use one here. I just always clone it. I don't know why. It's a personal idiosyncrasy I guess is the best way to explain it. So there's no better or worse way here. It's a me thing, very much a me thing. So I'm going to clone that theme. If I think about it the actual reason I like to clone a theme is because if anything ever goes wrong I could just wipe my clone theme and just revert everything back to the defaults. I could do the same with the child theme. So really there's no specific reason. I've now exported that theme so I'm now going to add that theme to my site and then I'm going to make my changes specifically to that theme. Okay. So I've now got my clone theme activated in my site. This is effectively just a clone of 2024. So any changes I make will be in the clone and there we go. As I mentioned earlier the thing that I wanted to chat to you now was this thing called block hooks. So block hooks is a new API for blocks that allows a dynamic block to hook into the rendering of another block enabling that block to render its contents before after the other block. Now that sounds like a whole bunch of words but let's understand what that means. So in the context of a block and what I'm going to do now is I'm going to install a custom block that I shared with you earlier. So let me find that link first. So it's this block over here. Yeah, sorry. I copy that link. So this is a custom block that I worked on for another workshop. It's basically just a pure JavaScript block. You can click on the WP Learn JavaScript 0.0.4.zip file. It will then allow you to download the zip file of this plugin. I already have this installed on my... Where is it? No, I don't have it installed apparently. Great, we're going to do it. I just can't see it. Oh, there it is. It's already saved to my desktop but I'm just going to replace it there. And then I'm going to add this plugin to my local site and I'm going to show you what this block does. So let's upload this. And there is the Learn JavaScript plugin and we're just going to activate it. And all this does is it adds a single block to my WordPress site. So I'm just going to pop into a post quickly and show you what that block looks like. It's, there it is over there, WP Learn JavaScript. It just renders a rich text component that with a green background. I can edit this text here and then if I preview this on the front end, wait, did I not save that? I didn't press preview, that's why. It renders it with a red border on the front end. That's all it does. So now let's go back to what we was reading about block hooks. So block hooks as it says here is an API that allows a dynamic block. So that's very important. The fact that it's a that dynamic block. So we'll dive into that in a second to hook into the rendering of another block enabling the block to render its content before after the other block. So what does that mean? That means I can take my block and I can hook it into other blocks that are already registered. So core blocks or blocks registered by another plugin and it will then automatically render my block as soon as that block gets loaded. So let me show you what I mean by that. If I open up my block code, let me find it here. Learn JavaScript, there it is. So this is the plugin that renders the block and then it loads the block.json file from the current directory and this is the metadata for the block. You could either do it, you can either pass in the metadata in registered block type as an array of values or you could just pass it that are actually where the block to JSON resides and it'll read the block to JSON file from there. You can then use, and I'm gonna share the documentation link with you from my notes. Let me just get a chair for you. Here we go. You can then use this block hooks property. So here we go block hooks and you can specify whether or not to hook your custom block before or after or after the first child or after the last child of an existing block. So when they say before, it literally just means before. When they say after, it just means after. When they say first child, they mean it's a block that has other blocks inside of it. So parent block has child blocks and it'll be before the first child or you could append it after the last child. So that's usually when it's gonna be inside of a column or a group or something like that. So to show you how this works, what I'm going to do is I'm going to use the block hooks property. Now you'll see in this example, the property is not quoted. That's because this is probably not being done inside of a block to JSON file. So I will just need to make some slight changes. So if I just pop this into my block to JSON as block hooks and I open up a new property and then I want to hook this onto an existing block. Let's just see that I'm following that. Yes, I'm following the correct JSON format. I'm going to hook this into what's known as the post title block. So it's core post title. And I just want to insert it after any time the post title block exists. So let me pop it back over here and we say after, there we go. All right, so what that means is any time the post title block is rendered in a template or anywhere else in the site editor, then hook my block in. So what we should expect to see is we should expect to see, let's find my block here, I've got so many things open, we should expect to see in the editor this block coming up. But one important thing we need to note about block hooks, it specifically says it must allow a dynamic block. Okay, now if you don't know what a dynamic block is, don't stress. I will talk you through it very quickly. There are two types of blocks you can create, a static block, what they call a static block or a dynamic block. Let me show you my block code. In a static block, there is both an edit function which renders the block code that exists in the editor. And there is a save function and that renders the code that is fired when the block is saved and it writes the output to the database. That's a static block. So you add the block to the editor in the post of the page or the site editor somewhere. And when the post page or template is saved, it writes that content to the database on save. A dynamic block is where the save function doesn't happen. So the save returns an L. So we can actually take out this code inside of the block.js file. I'm just gonna take out the entire save function there. And it's then when you render the block on the front end, it uses PHP to render the block. And so there's a few ways to do this. The one way is you can register the front end rendering in PHP. The other way you can do it is you can do it in the block.json file which is what I'm going to do here. And you do that by specifying the render property and passing it a path to wherever that render.php file is. So that's what I'm gonna do there. So it's gonna look for a render.php file inside of the root of my load JavaScript location. So that means I need to create that file. So I'm gonna pop the file there, render.php and I'm gonna keep the code very, very simple. I'm simply just copying this code from some notes that I have. I'll share it with you in the chat as well. So there's the code there. So all this is gonna do is gonna output a div with the block wrapper attributes echoed in the div as attributes. And it's then just going to echo the content attributes of the block which will be whatever is typed in the content area. The default should be hello JavaScript block. So that's what we're doing there. So now it's become a dynamic block. So the PHP is handling the rendering on the front end, no longer JavaScript. The JavaScript save function doesn't exist. It's not really doing anything and the rendering is handled by the PHP. So let's first make sure this works by testing it on our post. So let's go back to hello world. Let's refresh this. Okay, and if we add the learn JavaScript block there, it's still working. And what I'm going to do to make it obvious that this is working is I'm going to update the render.php and I'm just gonna pop in at the back here PHP so we can see that it is working. It's always handy to visually see that something is working the way you expected to. So if I now preview this poster that I'm working on, there we go, there's PHP. It's doing it twice for some reason. I've probably done something wrong somewhere, but there it is, it's echoing it out on the front end. It's probably because I saved it and then what I needed to probably do is refresh this. Let's see that again. Let's preview that. Now it's doing it twice. Why is it doing it twice? I've definitely done something wrong here somewhere. Let me go back and create a new post and see if it's doing it there. Let's preview this. Now it's just rendering it all over the place. Oh, that's because I hooked it in. So it's doing what it's expecting it to do because I told it to hook it into the post title. It's hooking my block in. So be careful of what cool blocks you hook into because it might do weird things. So because I'm hooking it into post title, WordPress is going, well, you wanted me to do that, so there we go, I'm gonna hook it in. So that's why that's happening on the postal page. However, the important thing to also see is that if we go into the site editor and you go and have a look at any templates. So I haven't, and this is another reason getting back to Miguel's question, why I created a clone today because I want my template file to load from the file, not from the parent theme. I want it to load from my theme because I don't wanna affect anything in the parent theme because I'm gonna make some changes just now. So it's more for demonstration purposes today. But if I go into the single post template, for example, we will see there my block is rendering. Now it's not rendering with any content and that's because I've got it set up on attributes and actually I should have hard coded that content in the edit functionality, but it is rendering that block where I expected to. So it is working. So it's as simple as making sure that your block, let me go back here, making sure that your block is using dynamic rendering, number one, and then hooking that block into whatever other block you want to hook it into. So this is kind of like the action and filter hook process that we have in PHP. What's cool about this is the example that they've actually shared in the source of truth is somebody creates it a little like button that can appear after any product or any content. And that's great because you can create a like button and then say hook it onto certain blocks and then it'll exist across the whole site. Your users don't have to come along and add its enforcer to be wherever you want it to be. So those are block hooks. Basically if you're building blocks, you're building custom themes, you want your blocks to appear in a specific place, you can use block hooks to hook your custom blocks into any core blocks, into any other blocks. If you think about it, it starts opening up a whole world of extensibility because if you're installing something like WooCommerce and you want to build a custom block for WooCommerce products, for example, and you want something to always show after products, you can now do that before products, whatever the case may be. So that's an exciting feature that is coming to WordPress 6.4 that I thought was cool to dive into. Okay, any questions on block hooks? I know I've just gone through that very quickly but I do recommend checking that out before we dive into the next thing I want to show you. I'm going to close some windows down while we do that because I've got too many tabs open. Okay, let's pop back back over here. Let's hop out of here. Let's de-hook that hook. Let's unhook it because we don't want it always re-intriging after the post title. We'll leave the render as it is, that's fine. And we're going to be working inside of this file. So I'm going to leave that open. All right, we've got 15 minutes left. So I want to show you the last little cool thing coming that I wanted to cover today. So let's hop on back over to Ann's post. I can find it. There we go. The other one I want to show you is there is a something that has been that has existed in the editor for some time but it was recently made public. And if I can't find it, I'm going to be annoyed. And second year additional items, improvements, lay off query loop, progress bar. Here we go. Add the ability to prevent editing blocks using the use block editing mode function. All right. So those of you who may have been building block themes, building blocks, something that has come up a lot is I want to be able to add my block to a template or a template part or a pattern. But I don't want my users to be able to edit it. I want to lock down that block. And there previously was a private API or function or whatever you want to use it that allowed you to do that. And it was a simple case of calling something called the use block editing mode hook, which is not an action hook or a filter hook, as we know it in PHP. It's what's known as a react hook. It's basically a special function that performs a special functionality. And if you use this hook in your blocks, you can disable your blocks for the user. So there are three options that you can set, three modes that you can set. You can set it to be disabled completely. So it locks the block entirely. The block cannot be selected or interacted with. It's part of the template forever and always. You can say content only, which allows the editing of the block, but most of the UI around formatting, sorry, it allows editing the block, but removes most of the UI around things like formatting. The block cannot be moved or deleted. You can only edit the content. And then default, the block is fully editable, removable, movable, whatever you want. So this is a very quick and easy way that if you're developing blocks, you can make your blocks, especially if you're using those blocks and themes, you can lock them in place where they are and the user cannot do anything to them. So to show you how that works, I'm going to go into my editor and I'm going to open up the single post template and I'm going to add my block that I've just added to the system. I'm gonna add it just under the header. Let's see if it'll actually, let's add it inside this group. So I'm going to pop it just above the content. So I'm gonna say add before and I'm gonna pop in a group just so it's in a nice position. We can even rename it. And then I'm going to simply add my block inside of that group. There it is, WP Learn JavaScript. So now it's sitting below the title area just above the content here. Now there are a number of ways that I can get these changes saved to this theme file. One way is to use create block theme. I wanna show you that very quickly. I'm not gonna do that way. But one way is to use create block theme and inside of create block theme, once you've, once I've saved this change, I can then use the overwrite Johns TT clone option and it'll overwrite the files to my, to my template files, to the files on my hard drive. The other option, which I discovered recently is create block theme actually has an option inside the editor where once I've saved these changes, I can click create block theme there and then I can say save changes and it'll again, it'll write those files. I'm being a little bit sort of lazy today. So all I'm gonna do is I'm gonna switch to the code editor version, which gives me the block code for this template and I'm going to copy it out and I'm simply going to overwrite the current single, single HTML template in my local theme. So if I go into my cloned theme and again, there's no right or wrong here. This is just me being me, I guess. So inside of my single.html template file, I'm simply going to delete out all that content and paste in the updated content. And if we have a look in here, we should see the learned JavaScript block somewhere. There it is. Just below the group, there it is. There's the learned JavaScript block just above the post content. So now that file is saved on my local hard drive inside of my theme. So what that means is if I exit the code editor here and I don't save these changes and I could just refresh, that's probably going to be easier. So let's just do a refresh. I might have to click reload. So there we go, it's refreshing. Now it's refreshing it from the file and there we go, there's the block appearing. And as we saw earlier, it doesn't appear with the text. That's my fault in the block plugin code. I should hard code that text. Maybe I can do that quickly. Let's hard code that text quickly in the block. So let's change this to hello from this block. So we can actually see something. So there it is. And then that's refresh. And it should now show some text there. Okay, it's still not up. There's something wrong in my block plugin somewhere. I'm not quite sure what. But at least it is adding the block. So I hope you're following me that the block code is now inside of the single.html file. So the block marker, which is then calling my blocks code to render that markup in the editor. But at the moment I can, if I edit this page, I can go in and I can select that block. There it is, WP Learn JavaScript block. I can see it in the list in the group. I can make any changes that are available to this block. I can move it if I made moving available. I can change alignment and I can do various things to it. I don't want my users to do that. I want to lock this block down and not make it editable or usable by anybody. So to do that, I can use, as I say, this new use block editing mode thing. So I'm going to share the link with you for that in the documentation. Let's just do that. I'll put it in the chat there. And there we go. All right, so it's use block editing mode. It allows a block to restrict the user interface. You'll see that you simply call the hook and pass in the mode. And if you've never worked with blocks before, this hook is available inside what's known as the block editor package. So depending on how you build your plugins, if you're building it using React and the more modern JavaScript syntax, you would import, you would use this import and you would import use block editor from the, sorry, not use block editor, what is it called? Use block editing mode from the block editor package. If you're going the vanilla JavaScript route, which is what my plugin is doing, I can simply at the top here, I can say var use block editing mode and I can then call it from the block editor use block editing modes. There it is there. Then inside of my block, anywhere inside of the edit function, I'm going to do just before the content is returned. I can say use block editing mode, no, not auto. I can say disabled. And now if I refresh that template page, I should see the fact that I can't select this block now. There it's saying hello from this block, it's been refreshed, that's why. So there I click on the block and you'll notice that when I click on this block, it has slightly different controls than it did previously because it's actually selecting the group. If I click on the list view and I click on the group, that block doesn't even exist in the list view. I can't even remove it from the list view. So it is locked on the page, the user can't do anything to it. They can't move it, they can't change it. It is now part of the template and there's nothing they can do. The only way that they might be able to remove it is if they could somehow access the single.html file and physically remove that block from the code. But other than that, the block is there, it's part of the template and it just doesn't allow anybody to do things. So that's a nice little feature if you're building block themes and you want to be able to lock down your blocks and not allow folks to do anything. It does kind of take away from the ability that blocks can change things and make things happen. But it's perfect if you're building blocks and especially if you're building in the editor and you then want to lock down custom blocks the way they are. You can then enable that in the code and it will then lock those blocks down. Okay, so that is the use block editing mode. I haven't played with the content only or the default yet but I probably would just go with disabled by default from my side. All right, and then the last thing I wanted to dive into today very quickly is this technical note on PHP 8 compatibility. So WordPress 6.3 was compatible with exceptions to PHP 8.0 and 8.1, meaning the base support label is now removed. As a result, the same applies to WordPress 6.4. So if you click on the server environment recommendations, you will see they actually list there and they say WordPress recommends for WordPress 6.3, 8.1 or 8.2. It is compatible with exceptions with 8.0 and 8.1 and beta compatible with 8.2. The exceptions are very limited though. Named parameters are currently, WordPress is not currently support those, which I don't know how many WordPress plugin and theme developers are using those. And there's an issue with the WP file system, SSH 2 that needs to be fixed and then three issues for 8.1. So what's nice about that is we're getting closer and closer and closer to being fully compatible. There's only a handful of issues left and I'm not aware of any of those issues being problems on my blog. I think I'm running 8.1 on my blog. So we're definitely getting closer and closer and closer to being fully compatible. All right, see there was a question around assuming that hides blocks from the insert as well, Anton says. That's a great question. Let's find out. I don't know the answer. So let's click on toggle insert and let's say, okay, it looks like you might still be able to insert them. So that is something that I think you can disable another way but I don't know of hand. That's actually a good question. Let's see, WordPress, disable block being inserted. I think that may be a support that you add. I'm not actually sure myself. That's actually a great question, Anton. I will find out about that but I'm pretty sure I have seen that somewhere but it escapes me for now but it looks like that function doesn't have anything to do with the insertor. So users could still insert your block but once it's inserted, that block could be removed but not the original version. I can't just delete the wrong thing now let me refresh this. Not the original version as specified in the block template code. Okay, Valerie, I noticed you asked me a question which seems to be directly to me. I just wanted to check. Did you want to ask me that specifically or did you want to ask that to everybody as well? Did you want to share that or did you want to ask me that specifically? If it was specific to me, maybe we can take it to a Slack DM but I just wanted to check before I just answer it. Valerie, I'll reach out to you about that one afterwards if this wasn't something you wanted to share with the group which I totally understand. I'll send you a DM in Slack. Okay, so that was my very quick and it was very quick overview of some of the cool features coming to WordPress 6.4. As you can see from this list, there are so many things coming. Okay, Tracy says anyone can answer, I have not received an answer in Slack. All right, so Valerie's question was in building a theme and submitting it with nice page, I don't know what nice page is. So give me a second while I just, I'm guessing it's this. I'm not sure, I don't know nice page but I'm guessing it's this. Do I have to, it's a CMS. Okay, building a theme and submitting with nice page, do I have to buy the license before updating to WordPress theme review? I don't know the answer to that specifically, I don't know nice page, so it's difficult for me to answer. In terms of license, I guess it depends on the nice page license. As far as I know in terms of licensing, your themes need to be GPR licensed, fully GPR licensed before you can submit them to the WordPress environment. So you'd need to check on that. What I can do is I can share with you the theme handbook, and I think there's a section there on licensing. Just trying to see if there is, there's a releasing your theme section. There is, so there is a section on submitting your theme to.org which takes you through all the guidelines and that should give you the answers. I don't know nice page well enough to know specifically what you mean there, but if you would like to reach out to me privately in Slack, maybe we can work through it together and I can help you on, you help me understand what nice page is and then I'll see if I can help you understand about the licensing part. The only thing I do know, if you're gonna submit something to the WordPress.org repository, it does need to be GPR licensed, so you'll need to just follow those guidelines on that. All right, okay, as I was saying folks, there is a lot coming to WordPress 6.4. There is a lot to that has been pushed out to 6.5. One of the things that is not coming to 6.4 which I was a little bit sad about is that the first version of the public interactivity API is not coming to 6.4. If you haven't been following the interactivity API, I would recommend going to check that out. There are a number of blog posts around that talk about what it does and how it works. I'm just gonna see if I can find the blog post in the proposal. The proposal as far as I remember actually has a demo. There it is. So let me share this link with you. There we go. And you can actually click on the live site demo and you'll see this is very much a Netflix-like experience or whatever streaming service of choice you use. You can hover over these things. When you click on it, it goes to the page. You can play the trailer. You can like the thing. And so when they talk about interactivity, this means this is interacting with your WordPress database. So when you click like, it's storing that data. It's got Morgan Freeman. You can read more about him. And this is all powered off a WordPress site using the interactivity API. So the first sort of version of that was supposed to be coming to 6.4. It was decided to move it to 6.45. I'm totally fine with that. I'm a little bit sad because I was hoping to play with it, but I'll look forward to playing with it with 6.5. But yes, this list is very extensive. So I do recommend checking all these things out. One of the more common, I would say complaints that I see from folks is that they find it hard to keep up to date with what's happening in WordPress land, especially when new releases come out. And my recommendation to folks there is number one, keep an eye out for Anne's source of truth. She posted on her blog, she has done for the last three times. So it's nomad.blog is where you can find her. And she does share it in various other places as well. And then keep an eye on the make call blog, specifically the six point whatever release dev notes. So I think you can even just search for dev notes, I think is the tag. And then it'll give you dev notes for everything, not just related to 6.4. I'm not gonna find one now, am I? Let me see what I can find here. So maybe not that one. There's block hooks. So there's a nice little post about how block hooks work. So there we go. So dev notes is specifically for all dev notes. So that's a tag to keep an eye on. And then when the release comes up, dev notes 6.4 or 6. whatever or number whatever is a good tag to keep an eye on. So I'm gonna share those with you in the chat. Thank you, Milana. No worries, I'm gonna wrap up soon anyway. So definitely keep an eye on those and read through those if you can. But also keep an eye on Anne's blog. That source of truth is super super helpful. All right, that's my bit for today. I could spend the whole afternoon talking about some of these cool features. But that's all I have time for. Does anybody else have any questions before we wrap up for today? Otherwise we will call it a day. While we're thinking if there are any questions, I'm just gonna mention that I'm away next week and I'm also on leave the following week. So you're not gonna see me for two weeks. So you'll have to take a break from my workshops for a couple of weeks. But when I get back, I will be picking things up again. I still haven't decided what I'm doing yet, but I'll let you know once I know. But thank you everybody for joining me. I hope this was interesting and informative. There was another developer hours a while back that I wanna just share with you as a passing note. So Nick Diego and Ryan Welcher also just did a walkthrough of 6.4 features coming and they would have recorded that and uploaded it to WordPress TV. So let me see if I can find that for you very quickly. Wasn't that one? That was me, hallway hangout. There we go, what's new for developers? So a lot of what they cover in there is probably stuff that I've covered already, but go and see there should be a link to the WordPress TV recording. Yes, there it is. There's a link there. So go and check that out as well. That'll give you some updates of what's coming. It's always good to have as much information as possible. Otherwise, folks, thank you very much for joining me. It's been lovely to see all of you today or hear all of you or know you're all there, chat to you in the chat. Go and test out WordPress 6.4, see if you can find some bugs. I'm gonna log that thing about the group image. It needs some kind of visual note that it's happening. But get ready for 6.4. It's gonna be about the release. And enjoy the rest of your Thursday and the rest of your week and I will see you in two weeks time. Awesome. Thanks, folks. Bye-bye.