 how's everybody doing so far? good awesome we excited to learn about what's coming out in 6.4 hopefully hopefully you're all on the 6.3 running the latest stable um i am damon cook let's see let's get this progressing there we go i am damon cook developer advocate with wp engine i'm also a sponsored part-time contributor for through wp engine yeah here to talk about wordpress 6.4 um most of my slides have about 30 slides and i think every single one has a video on it and like they're all under a minute short they're just kind of the basic walkthrough of what i'm talking about to give you an overview um but i just want to give you the heads up and they all are downloaded so even though i'm not on wi-fi this should be working great um a bit about wordpress 6.4 it's due to be released um in november 7th uh given there's no hiccups it's the third major release of 2023 and it's actually the shortest release timeline so there's a little less time to get all the features and adjustments in but uh there's a lot of great stuff in here that we're going to go through today and i suspect this is gonna i'll probably go through the slides pretty quickly i want to leave a lot of room for questions at the end and i'm also um going to if anybody has any things that they want to dig in specifically on i can open up i have a local instance that i can step through some of the features if we want to get them this uh this this upcoming release has uh the the versions of Gutenberg that it will include are listed here um and it's usually uh this is led by an under under representative gender squad which is awesome i think round of applause for that because i think we need more of that definitely um a bit of a heads up i did this presentation uh week or two ago in rochester and the lot of the landscape is changing because this is all work that's being done as i speak for these releases so some of these items have already shifted to the next version of 6.5 the font library was a kind of a major feature that got pushed to 6.5 and i think it's really close and they're still working on it but it's going to be a great feature and then some other things time to read block table of contents and the scrolling marquee just some new blocks on the horizon that got pushed to 6.5 and the interactivity api it was actually merged but um it's not really publicly usable for developers yet so that that's going to be hopefully in 6.5 as well revisions to template and template parts and post formats uh does there anybody remember post formats anybody still using them no okay well they will maybe have another heyday and make a comeback um and now we're getting into the video segment here where i want to show some of these features um image for 6.4 coming out november the image light box is one of the new features um here we're showing just an image well actually it's a gallery block with images and each item you have the ability in the editor to toggle on this feature to have the image overlay and you also have the option being shown here in the global style so you can enable it globally and then the user could you get opt out on an individual basis on each image so you can take a either or approach but it is an opt in out of the box experience unless the the theme explicitly enables it so yeah here's just a preview of adding images into a gallery and then another feature i'll be talking about shortly is that you can see the little thumbnails on the list view which give a little preview of what is being inserted so you can kind of see where your lot uh images are laying out so that's image light blocks placeholder aspect ratios i apologize i think this video came out a little blurry but that's the only one and i apologize this is a feature that should help pattern and theme creators you can if you're creating patterns if you want to insert an image but they might not have an image associated with it you can set the aspect ratio so once somebody inserts that pattern and goes to add an image it'll maintain that aspect ratio for the placeholder so that's a really nice quality of life for pattern developers and also on all these slides which i'll i'll share the the link at the end i also have these you'll see these odd numbers these are links off to the tickets that relate to these features that were emerged so if you want to read up a little bit more on the details of what goes into them you can go there um list view so this is actually uh impacts the group lock you can now rename over in the sidebar you can set custom names on the group lock which is just kind of a nice quality of life again organizing if you want to rename things and keep things organized if you're like a figma user and want to name your layers and all that good stuff and there's two options there's you can rename in the the list view but you can also rename i think it's coming up in this preview but you can rename over here in the side as well and they sync up yeah there's the that's the sidebar there um another group related and columns block related feature enhancement is the ability to set colors it's just introducing more supports basically for more elements nested within a group and column block so you can set colors on buttons and headings so gives it a kind of context so this is again another kind of a pattern if you're a pattern creator it helps set some context and style options to refine when a user inserts your pattern what they what they can do and and change in it as far as colors uh this relates to the group block you can they've added background image support so you can sign it previously i mean the cover block allows for greater flexibility of setting a background image but it kind of has its own use cases whereas the group block it's a nice addition to have the background image and this is kind of a first iteration i'm sure they'll be uh i think there's already plans for two enhancements for this to set positioning or uh scale of the image um but that's a nice addition to the group block and this actually slide uses the lightbox so you can kind of see this in action but this feature another most a lot of these items in 6.4 are just quality life enhancements to add more supports for blocks that you know like the example of having colors available for nested heading elements just kind of refining a lot of the features so this toolbar the toolbar for the quote navigation and list block um previously if you are editing a nested item the toolbar kind of followed it around now it's attached to the top so it became really problematic if you you know if you got down here to this bottom item and you're trying to edit that and the bar was kind of and then you decided you want to go above and edit this one the bar was in the way and it kind of was not a great user experience so now it's captured to the top of the block itself vertical text orientation this is something that a block theme has to opt into but you can change the orientation of your text so you could do some interesting design design choices but i think there's still more work to be done to uh basically just take into account for different right to left languages and yeah well i mean this is great for languages that are up and down probably but yeah it's just kind of a nice style enhancement but that has to be opted in through the block theme and the theme.json and here's the little snippet that would go in there for writing mode um in the navigation block you can now add button elements which is a nice addition because previously i think it just was link support so yep here's an example of just inserting a button into your navigation and i kind of touched on this earlier but in the side list view for gallery and images you can see a little thumbnail now that just gives you a visual reinforcement of what images are attached to these items within the editor and then i think these next few are related to the query block the pagination for the query loop block so if you have you know dozens of posts in your query loop you need pagination obviously and so now you can set the mid number for how many pages are showing so this is justing the query page number block i believe it's called which is a nice addition and then the enhanced pagination so you can enable this so the page will not refresh should the user paginate to the next uh well previous or next so this is a really nice this back to the good old days of ajax but i think this also uses the this is one of the new use cases for the interactivity api for theme developers in theme.json we there it already exists fluid typography support but i think it was a common uh complaint that users wanted to be able to set when the max and min viewport width of when the fluid typography kicks in so like for example this is saying between 800 and 600 the fluid typography would adjust from small to large but at 800 that's where it would stop it would not get any larger than that which is not probably a very good use case but it's just showing an example of how you would use it in theme.json block hooks this is a pretty neat feature but it's in a very early iteration i think there's going to be a lot of follow-ups in probably minor releases after 6.4 to extend this functionality this is for uh block and plugin developers um if you develop a custom block and you can say you could hook it on or insert it um anywhere in a template template part or a pattern so say uh you want to hook into well this example the group block there's verse spacer column in group in this one and you can you can specify whether it's before after and then if you if it's a if you're a hooking into a block that has allows for inter blocks or nested blocks and you can say first child or last child and it'll kind of insert it into that DOM essentially relative to that but there are some new filters that the dev notes for this which usually come out in the next week or two will have a lot more information around this so stay tuned on the developer blog on make.wordpress.org and there's also documentation here for the block hooks but there's it's still early for this but i think it's going to have a lot of potential uh to for extenders to use in the blocks uh per block layout support though this is again block theme authors you can specify whether um blocks that support layout whether you want to have it enabled or not this is like you know um a line wide a line full you can just disable it all together so in this case we're turning it off for buttons so if somebody inserts buttons they won't have the option to go wide or full uh that's a nice enhancement for theme developers and then the new theme 2024 um these are some screenshots of the designs that came out of um it the new theme you typically um we focus on one kind of topic for a new theme but this one has several different topics they're trying to address builders and writers different use cases artists and then businesses so there are different designs and even full page layouts to account for that which is really nice and then back to video this is just a video of showing some of the style variations for 2024 so you can change the colors um and give it an overall aesthetic different view and set the fonts of course the the font library well that's not that's not included in that but you can change the fonts based on the theme that includes it and i can again i can open that up later in a local site if you want to see more of that more quality of life enhancements um open in the new tab if you insert a link anywhere in a post or in the the block editor and you wanted to open it in a new tab i think this is a one or two less clicks to get there um you can get a preview as well so yeah it's just getting that checkbox to open in a new tab a few of these for the list view which is the sidebar on the left hand side the escape key which is a pretty common uh i shortcut i guess essentially you select multiple items um you want to use escape to deselect them so that was added um for the block the list view again list view another shortcut you can use that um down here what is that uh command control d i think um to duplicate items in the list view um this one's for i guess yeah block and plugin um authors you there's a new use block editing mode um which allows you to specify three kind of different things for when a user inserts your block you can have it disabled for editing mode or default which is just what you the default state that you wanted in and uh content only which would disable a lot of the color changes uh margin layout support and just allow the editor to edit the content only so this is a new hook for plugin authors and block user block writers to use which is a great handy feature command palette does anybody use the command palette uh i had a feeling yeah um command palette trying to make things quicker to get to um if anybody's alfred user i guess um it's just kind of another way to navigate these different screens and jump around um the i know that there has been work to make it a little more responsive on smaller screens and then there's been additions of uh items to jump to like in the post editor post block editor you can jump around and um toggle on the sidebar list view the block inspector and insert blocks before and after has been added uh here's the responsiveness for smaller screens uh adjustments been made for that uh patterns um you can set custom categories now when you're creating patterns um and then also synced and unsynced patterns uh used to have kind of their own categories in the this side list uh but now they're merged which kind of makes sense um but you can see you can have your own set of patterns the user can have their own patterns and then the theme can also register patterns and they're categorized for you and then if you the user uh creates a custom pattern they can assign a custom category as well which also makes it easier to find them when you go to insert them in the uh block editor uh you can import and export your patterns they're JSON files uh so this is just kind of a nice way to migrate patterns from one site to another or share them and then a list of just kind of a laundry list of lots of other items that uh i'm happy to touch on in uh yeah in a little demo i guess if anybody if there's anything that stands out to anybody but really um that's all i have i encourage you all to try to test they're always looking for feedback and the more testing we can get the better um there's some ways there's some links here on how to test and um where to provide feedback even and i'll be around today and tomorrow and i'd be happy to to try to triage or create any tickets if you experience any bugs that you'd like to report um and yeah just look for this tall guy in the yellow hat and uh i'd be happy to follow up on any of these features that we've discussed today um these slides are at colorful tones if you just go to colorfultones.com it's listed right on the front page uh for all these slides and i just want to give a huge shout out to a lot of uh Ann McCarthy of Automatic she's a developer advocate actually i think her role has changed but she was a developer advocate but her source of truth um she's been doing for the last few releases where she because it's such a large shifting uh landscape she keeps a document up to date of all the features so a lot of this a lot of the artifacts of the videos and imagery and information came from that source of truth so um i just wanted to give a big shout out to Ann for all the work she does and this was created with the the bounce theme and icon block and that's all i have but i want to leave lots of room for questions and demo if anybody wants to see anything any questions um that's a good question so yeah sorry about that he was asking if i'm yeah let me repeat this back um renaming the group block in the list view which i can actually probably be easier to show he's asking if you hover over a renamed group block does it show a tool tip of once it's right let's see i mean that's yeah if it's been renamed is there a tool tip to show that it would be i i would imagine it would say group lock right because you've already you see a custom name but you would want to know that it's actually a group lock uh let's see and go ahead and insert the group lock graph in here and we can go over here in the side in list view rename custom name save and i'm not seeing a tool tip no yeah it's still it still maintains the group uh icon but i don't know if that's a good enough visual indicator for most folks but um that is a great feedback though i i think you know i think that it might exist but it's not being surfaced in a way so yeah it would take some inspection but aria label uh yeah it's got an aria label and described by so that's interesting um there may be i would have to research but there may be some tickets already to extend i was also kind of referring to more like uh we were scrolling through the page kind of through the recipes oh okay kind of like uh yeah right over here in the editor itself now it just shows the right yeah right yeah no that that isn't available here yeah maybe that that cover right there could show the custom name but it is available over on the side here so but it's kind of tucked away so it's also available over here good question any other questions is there anything anybody wanted to see a little bit more of that i touched on or left off but this is in 6.4 i can demo sure um yeah that that i was actually exploring last week a lot and um i know that nick diego developer advocate automatic full-time sponsored he's writing up the dev notes which are close to come out next week he just did a they just did a workshop around and he touched a lot about block hooks and that's on wordpress.tv so i'd highly recommend checking that out um but yeah i think there's um some more documentation to be surfaced around that but it's going to be i think potentially a very useful feature there there is the current use cases being kicked around in exploration are i know the mini cart like the woo commerce to say you know if a theme author wanted to say make the mini cart available in the navigation you could probably say you know in theory you would say um last child right you just say mini cart last child and it would show up in the navigation and the idea with also with block hooks is that it when because the theory is i guess like a plug-in could write a custom block and have that block hook available so you would enable a plug-in and suddenly a block would appear you know like if it's the mini cart it would appear at the end of the navigation like the example i gave but the if the user has already customized like a template part like that template because that that would typically go in the header so if the user had already customized that that header it would not actually insert itself because it recognizes and respects like user customizations but it would still be available if they go into the site editor there's a little ui for it it's like over on the side here actually i think i have one enabled here yeah i can show it's a the like button plug-in which is kind of the prototype for enabling this experience so i have this this is available uh there's some errors in there this is a i can't remember which contributor wrote this but um i think it was the author the hook feature but let me find a post with comments yeah i think i set one up here so this plug-in is using block hooks to insert this like button after i think it's yeah it's after comment i might have the code oh no i don't have the code open anymore um but yeah that's kind of an example of one use case that they're kicking around but i think that there's already talks of being a little more explicit with the apis like saying maybe before but also being contextually aware of maybe before because in theory somebody could say uh before paragraph block right and you would see billions of blocks appear but you want to be um a little more explicit you could say paragraph in a template header next to you know a navigation that's probably a terrible example but you get where i'm going um but i think those are already to uh discussions about extending that api for stuff like that you have a follow-up for yeah at this yeah no i don't think that's i mean i don't think that's the initial kind of idea in use case i think it's more of or at least my interpretation is yeah you write a custom block and you say where you want that block to hook into um so you would say before yeah navigation if it's some kind of custom navigation block or something like that but with that being said like that that's why i was saying like some of the documentation there's some filters that are in this release of 6.4 that i haven't seen documentation around and i know that's going to come out in the dev notes so you can say um so if you were maybe a theme author and you installed a block that used block hooks and said insert this block before a navigation and you wanted to kind of turn that off i mean yes you could do it in the ui but you can also use a filter and say disable that um like in your another plug-in or in your theme so that is the the stuff that kind of needs to still be fleshed out um so if you'd have use cases that you you're thinking of for block hooks i'd love to hear them because i'm curious to hear more of what i feel like i see the potential that i'm trying to also think of like yeah specific use cases and that's where the the real details start to come out of like where will this go and you can give that feedback um to kind of drive that so uh oh yes so so this example of this like block um if i go into edit site uh so now i'm in the site editor and i'm in a single template um and we scroll down and if we click we get into here and actually we gotta because i think yeah we're targeting this this specific like button plug-in is targeting i think the common template yep so there it is so as a user or a builder you could come in here and say i don't like that disable it and turn it off and that'll persist and even if i had previously modified this template like if i had done something else in here and said you know i don't like the comment date and remove that and then came and inserted or installed the like button plug-in it wouldn't insert itself there because the user's already customized it and opted to to have their own experience so but they could still come over here and opt into it at that point sure yep generally the block is there a motion to add the differences between uh big resolution tablet and mobile resolution to display let's say five on the big resolution and three on the tablet and only one mobile right sorry i'm not repeating the questions i should and i apologize um for the gallery block you're asking is there an option to say when you insert a gallery of images say how many like the layout based on the screen size so maybe you want four images across on desktop and then two images stacked on mobile um i don't believe that's possible um you could do it with css and some theme right yeah no i don't think that's um currently but let's let's explore it real quick pretty sure i have a page yeah with a gallery in here yep here's a gallery just want to make sure yep we've got the gallery selected um yeah so you can set columns over here for your gallery and the resolution of your images but it's kind of where the break points are sent are probably dictated by the block theme so you'd have to do some you could do some custom css or maybe some stuff in the theme.json to kind of account for that of how you want um different screens. You have three columns there but the last two we'll split the width can we have a settings that keeps the grid and not fill the remaining space right um yeah so these last two images since there's only two it's just taking up the remaining space and you're asking whether there's an option to say don't take up the remaining space and stick to that right stick to the three columns i don't think there is right now um i've seen some explorations of grid the css grid being incorporated in certain aspects but it's not no i don't think it's currently available to say that in the gallery block but i think it's a great feature and i would imagine there's already a ticket for it to to explore that so sure how are we doing on time um any other questions or any features or things i can demo um i see that you're going to use the mantel and i'm really not good at it i haven't and i thought i can probably just give the word so that was good uh was there any other kind of things like oh uh not to be confused sorry i have alfred installed which is like a system mac yeah so i was doing that um sorry i didn't mean to confuse but there yeah no you can do uh is it command k to bring up the command palette and wordpress and then i could say since i have uh image for selected right now i could say insert or after oh i forget i'm putting the forward slash that's not i wonder if that's not because i'm on an added gallery you probably check this one yeah add after maybe would be a good use case right there and um if i didn't want to come down here and click this thing or click enter um that's i didn't know i know insert after and before were new commands that were added so yeah it's a useful tool i use that in alfred that's why i was i use that all the time i think i saw somebody comment to that feature in a ticket for sure because i think that would be but i mean the idea with command palette is to have the api is available and then plugin authors could come in and like that would be a great plugin uh laura mipsum generator plugin so if you're in the command palette generate some laura mipsum and place it in the editor write it up yeah no i don't think you would i don't think you'd want a nest buttons yeah no um yeah no i think i know um that was just the navigation block so um you can add let me show you it's easier if i go into the site editor and this is just opening up a custom template i built and i'm gonna open up the list view it's a lot easier to kind of see where i'm going with this so if i select the navigation block the page page list is are you available in there but we can say i think you have to detach that yeah i don't know where you let's see i guess you have to select the navigation and edit and then if we edit you can say i thought you would have been able to just insert the button itself but i guess yeah you have to to switch the block transform it seems after you insert a link into the navigation to convert it into a block but all the rest of these are just links i mean really a button block is ultimately a link right now but there are explorations of having the actual html button element available as well so thank you folks um i don't know if there's any other questions or items you want to go over it's short and sweet today i'll be around today tomorrow and if there was any questions that you think of afterward i'm happy to open up my demo site and step through anything and yeah thank you oh thank you yeah yeah i use that for this presentation and there's a lot of work that i still want to be done on that but