Well welcome everybody Good afternoon. Now this is the WordPress six launch event here on iThemes Training. My name is Nathan Ingram. I'm the host and I iThemes Training and today we are going to walk through the features of WordPress six, which was released last week and to help us do that. We're joined by Timothy Jacobs. Timothy is the lead developer for I theme security. He's also a WordPress Core committer and the component maintainer of the WordPress REST API. Timothy also co organizes the WordPress New York City helpdesk meet up just a few things on your plate. Timothy, how're you doing today?
I'm doing great. How are you doing Nathan?
I'm doing good. Doing good. So WordPress. Six launch Tuesday of last week I believe we some of us saw those emails and maybe got the notifications in our WordPress dashboards. Give us a little overview of some of the things we're going to cover in the next hour or so. Yeah, we're
gonna be talking about WordPress six point now. Like you mentioned, there's a couple of performance things that we're going to touch on. Some new work from the newly minted performance team has made its way into our best explainer. But then we're gonna really dive into Gutenberg features. There's a couple of cool updates that are available for pretty much any user who's using the Gutenberg editor. But we also have some cool new improvements to full site editing. And that's where some more of the big things are there. But like you mentioned this, although it is a six dot o release. WordPress doesn't actually follow a versioning number system where 6.0 is any more of a significant release than 5.9 or five that to be truthful we really just got lucky with five that Oh, and the Gutenberg editor that was just coincided that well it could have been 4.9 or 5.1 depending on how things shook out. So six Dotto isn't a any more of a major release than normal. In fact, I'd say it is more of a kind of maintenance and cleanup and definitely significant improvements that are worth upgrading for over 5.9. But it's more of a polishing and continued enhancements as opposed to hey, here's this brand new thing. That brand new thing really was full site editing that we got in our last release in fact that time Yeah,
for sure. So we're going to take the next hour and walk through some of the new features of WordPress six, really focusing in on full site editing and then some other things as well. And of course, we'll open it up for questions throughout and have a good time of wrap up q&a with Timothy as we go. A couple of notes. One thing if you are fairly new to iThemes Training, I would like to post the link in just a minute in the chat but we do in WordPress news roundup each month. Sometime around the middle of the month I go through and we talk about all these features of Gutenberg as they're being released in the Gutenberg plugin, many of which Timothy will be demonstrating today. So if you're interested in WordPress news of that nature, you can stay up to date each month with me on WordPress news roundup and just be watching the chat. I'll share that in a minute. A couple of other housekeeping notes that I will mention. If you're just joining us in zoom, make sure you pop that chat window open and say hi, tell us where you're logging in from today. We have folks logging in from around the world. It's great to see everybody here. Also, we use now that we're into zoom out a couple of new things. We do save the chat log from every webinar and that will be available on the replay page, which I'm going to post the link for now. There in the chat. I know slides today. It's all live demo, but the chat log as well as the live transcript which you see the captioning happening on the screen all that will be available on the replay page about an hour after we wrap up today. Now, one thing that's also new is we started to use Zoom as we are using the zoom q&a feature to ask questions. So you can pop that open. You can see all the questions that everyone is asking throughout today's training. And I would encourage you to use the little thumbs up icon there under the question. If you have the same question. You can upvote that question and we'll take questions in order of votes when we get to our wrap up time of q&a with Timothy at the end today. So with that, Timothy, I'll turn it over to you. Let's get into WordPress six.
Awesome. Yeah, let's do it. Um, so yeah, like I mentioned, I'm going to touch on a couple of performance improvements that are in Sokoto. If you might have been paying attention to some of the WordPress discourse over the past couple of weeks or months on Twitter, social media and elsewhere. You might have heard some talk about performance in WordPress. And one of the things that the WordPress project has done about that is that they've started up a WordPress performance team and the performance team is focused on making performance improvements in WordPress sport and the work that they've done first has just come with the WordPress six Seto release and there are three kind of small there's a really developer ish things. If you're just using WordPress, you can know that your site tomorrow is probably faster after installing WordPress 6.0 than it was beforehand. But I'll just touch on a couple of them. One of them is that there have been some caching improvements for WordPress six point out so these are changes to the actual WordPress caching API that WordPress uses under the hood to make sure that doesn't have to hit your database all the time for things and so depending on your hosting environment, and I think I've talked to the Nexus team this is something that is available on Nexus hosting for instance, there are some new caching API's that WordPress supports. And so that all that plugin developers and a bit of WordPress Core makes some performance improvements not hammering your database so hard. Similarly, there have been improved performance improvements for taxonomies. Almost related to caching and how different queries are done to try and structure things better. Again, this is something that your hosting company will probably have needed to support in the form of having what's called an object cache. So if you're hosting on a good host, like manage WordPress, you'll be benefiting from these types of improvements. And lastly, there have been performance increases for very large sites sites with over 10,000 users from WordPress. WordPress used to have optimizations or excuse me, still does have optimizations when you have a very large site but previously these only applied to multi site. And so what's new with WordPress 6.0 Is that some of these performance optimizations also happen for just regular WordPress single sites single site installs as long as they have over 10,000 users. Also related on the more things that isn't so easy to demo, there have been a huge host of accessibility improvements to WordPress 6.0. The accessibility team and today we're developers and accessibility developers have been working very hard on this. And there is this blog post that enumerates over almost all of these, I think they've gotten them. And there have been a lot of fixes in place. So if you've been hearing about performance, excuse me, accessibility issues with Gutenberg and WordPress, the accessibility team has been working really hard to improve those. So with that all being said, let's actually dive into kind of the more user facing enhancements for WordPress six point out. So one of the things you'll get when you first install WordPress six minutes you're gonna get this gigantic banner. It tells you about a couple of the new features that exist in WordPress six. If you want you can dismiss this of course you can also be taken to this about page. And there is actually an about page for WordPress in every single release. With auto updates now being the norm more than ever, you might actually not see this page, but it's a really helpful page. That kind of gives you an overview of what's changed in this release. So we can see that there have been over 500 enhancements and 400 bug fixes and WordPress 6.0. And over here we're highlighting a couple of them that we're going to touch on.
And so like I said you can visit this page by going over from this banner. But if you've dismissed that banner, you can always get back to this by going to the about WordPress link. And so this is here like I said for every single release you can see who worked on it. It's very cool, and see an overview of the features. So let's dive into it. So I'm gonna start off with the list view the list view. Welcome to the block editor. Let's get through our little pop up there. Fun tidbit on that you will no longer have that issue of being Welcome to the VOC editor every so often starting I believe in WordPress 6.1. There's a change in the Gutenberg plug in I think the last release the release before that I will make those types of preferences actually persisted so you won't you won't see that every single time you log on to a new site and a new browser or anything like that anymore. But yeah, I like to talk about the list. view. I think the ListView is one of the really cool features in Gutenberg and it makes it really easy to navigate through the Gutenberg editor. I have this about page here where I've inserted one of the about templates from 2022. And you can see when I opened up the ListView I changed here now is that all of the box are collapsed previously this would only happen in the site that or believe. But this is now behavior that extends to all of the editors in WordPress and so we can unfold these as we want. Another cool thing that is new is that you can select multiple blocks and move them all at once. So I have this heading and paragraph block here. And I've always been able to move this around but if I want now I could select the heading block and select the paragraph block and move them and what's different though is that I actually have these blocks locked. And so locking is a new feature in WordPress 6.0. That lets me say whether I want to prevent moving these blocks or deleting these blocks without first unlocking them. So if I go into the options for this block, and I'm doing this through the List Editor, but I can also do it from the regular black toolbar, I can go to my mouth. I can specify what things are locked so I'm going to disable them movement and prevent removal. I'm going to unlock these for a second. Let's unlock this. And let's unlock this guy. And let's unlock the social icons. And now hopefully I should be able to drag these around. So by holding Shift and click, I can select multiple and then I can move these group of them together. So you can see that I just moved the social icons block above where the textbox are. But let's get back to that block locking and add those all that so you can see here that I have this about page and let's say Doug over here is my client. And I want to kind of make the editing experience a bit nicer for Doug. So what I've done is I've locked down a whole bunch of the blocks here you can see I've blocked almost all of them. And I again did that by going into the block menu and hitting unlock or lock. And now I can't move this block. So without there's no way for me to kind of like break this layout by dragging it somewhere else. And there's no way for me to just easily remove this block. Now of course I as the administrator of this site, I can unlock this block, but what I've done and there is a little bit of custom code that you have to do to be able to do this. But what I've done is I've set this up so that when my client logs in, they don't have any controls over block locking. So I'm going to switch over to my client user. And now when my client user edits the about page you're gonna have to take over this post. So now when my client edits this page, they don't have any controls over locking. The lock controls are hidden. And so it means that Doug here can't accidentally mess things up. So Doug can't drag this and move it somewhere else. You can see that q numeric prevents that from happening. Doug can't accidentally delete this text. But he can still make changes. So if he wants to say that his radio show is no longer at 11pm but 10pm Doug can still do that. And this is I think kind of like part of the first steps of locking. I would love to see locking improved to extend more things, talking about like maybe preventing editing and things like that. But I think this is a really cool first step that should give you a little bit more control when you're handing over your site to a client and make it a little bit harder for them to shoot themselves in the foot.
So let's switch back to my regular Timothy user. And we'll go into a blog post here as these are some of the other kind of like small changes that have happened. This is some lorem ipsum text previously and WordPress 5.9. If I wanted to select some bit of text from this block and some bit of text from this block, I couldn't really do that I would end up selecting both of the entire blocks. But now I can actually select text from the block boundaries and go between them without any issue. So I've now selected all that text and I'm actually selecting multiple blocks here. But I wasn't forced to select the whole text of all these blocks. And that that makes for some bit nicer controls for interacting with text. Another new thing that comes with editing text is we have a new keyboard shortcut. So my favorite way of inserting blocks into Gutenberg is to use the slash inserter. So what you can do is whenever you see this phrase, it says type slash to choose a block. You can take the forward slash key in your keyboard and it brings up the inserter that we can like tap through and figure out what we want to add. But there's a new shortcut here, which is to have the square brackets. So I've typed in one I typed in two. And when I type into square brackets Gutenberg says okay, the user is trying to link to a different page. And I can really easily insert a link to my about page for instance, without needing to fiddle through the menus go through some linking interface, I can just go ahead and type what I want to link to. I think that's really cool for getting getting the interface out of the way when you just want to type in insert content into your site. There have been a couple of other changes. So I'm going to insert a column as BOC three columns of text and new feature is the border style controls. So I have being able to set a border here and I can also change the style so I can change it to dashed or dotted. And this uses this kind of new control that could or break has been introducing that lets me control which things I want to show up. So if I want to hide some of these features, I can or if I want to show them, I can. So let's get our border back to let's say 10 pixels. That looks pretty nice and let's do a dash. We also have a slight change to colors. They made the color controls also more a bit compact previously the colors which are like everything here and it took up a whole bunch of vertical real estate. What's new is that when I click these color changes I just get pulled up into this little pop up overlay. That lets me focus on selecting a color and then get all the other additional controls out of the way. Stop them from cluttering up the UI. Let's see this nice orangey pinkish color tangerine I don't know. Not a color person. Don't know what that color is, but it's nice. Another new change is to the gallery block. So I'm going to insert a gallery and I'm going to use one of the block patterns that gets populated and what I can now do when I am selecting the gallery, let's go over to select the gallery block is I can configure the block spacing. So by default, I believe this sets it to half an M, which is about eight pixels. But if I want this user I can change it I can remove all the block spacing, or I can make it really large and this is a new control to give us more, some more fine tuning over how you want your galleries and images to be displayed on your site. Another cool feature is the cover block. So the cover block is I think probably one of the most powerful blocks that we have in WordPress, inside of the block editor. And allows you to do a lot of cool visual design treatments. So let's insert the cover block. And what's new is that previously you would have to select an image. But let's say you have a post like this one that already has a featured image attached to it. You can see here I have an image of the New York City skyline. And so previously, I would have to go into the media library and then select this featured image again if I wanted to display it somewhere in my post, but new to WordPress six point now I can use this little button over here. And this is next to the add media button. There's a button that says use Featured Image. And so when I click that it automatically uses the featured image that I've controlled. So I could say New York, let's make this text. Something that's a bit more readable, being go to color white. And we have that there. And so now if I update my Featured Image, I don't have to update all of the cover blocks in my post. I can just switch it around and it automatically gets updated for me. That's another thing to help speed you along.
Now what's really cool though, is that you don't you don't just have that available to you inside of the post editor. We can also do some really cool things with that if we go into the site editor. So we're going to travel on over to the site editor now and focus on some of the new fluid editing improvements. Let's close these out. So let's see how we could do something really cool with that cover block. Now. I'm going to go over to our template parts and go into the header. And so I'm going to actually take this group block and copy that. And then what I'm going to do is I'm going to create a new template part for the header that has that featured image. So we're gonna select header as a cover. Featured Image header probably would be better to be more concise. I'd say cover Featured Image covered featured featured cover that's good. And we'll select the header is this is the area that we're gonna go to recruiting our template part. Alright, there we go. This is all demo So, fingers crossed. Everything goes well from here so I'm going to paste in the existing pattern that we have before. But what I'm gonna do now is I'm going to insert after this a cover block and so I am going to select to tell this to use the featured image. And then something I found the need to do is you need to kind of like set what I believe is a fallback. So I'm going to say the fallback as the, let's say green background here. And so I'm going to do is I'm going to drag the group block into the cover block, get rid of this extra paragraph here. Let's make a couple of other changes. You can see we have these new row blocks here. I'm going to change my site title. I'm going to want to make this text white, I believe I said white text and we'll change the link color to white. Okay, so now I should be able to use this block elsewhere. So fingers crossed, this works. I'm gonna go over to the templates and we're gonna edit the single post template. And to now right now I'm using the regular header pattern, but I'm going to change this to the featured cover pattern. And now let's save save and now hopefully when I go to my site, a lot of hopefully is going on here but I think this should work. I'm gonna go over to my Hello World post and you can see I have this really cool design where the featured image of my post is brought into the header area of my site. And this will be dynamic whenever I create new posts I'll have the featured image up there. And so we could go now into our site editor. And we could remove that duplicate featured image because we don't really need it. Seeing a post to remove the featured image block and let's maybe add some margin to the top of our post title. Yeah, we get a nice, pretty single post template that has the featured image. And I don't think that's something that you really would have been able to do pre full site editing on your own. And it's now power that you have to do that you can do without any code, which I think is pretty neat. So speaking of the site editor, though, that's not the only change about I'm going to go ahead series. I'm going to go ahead and pop open into the design tools section. So we've had global styles. We're getting a nice little intro here. What's new though, is this browse Styles button. So this is kind of the default of what WordPress 2020 twos theme looks like. But it also now comes with a couple of different style variations. If you ever default one selected here, but we can change this to a blue color palette, which changes things pretty dramatically. This pink color palette
and this darker, mixed high contrast color palette. And so this gives me a great way that I can kind of like pick different styles for my theme without needing to go through the styles and choose all of them one by one myself. As theme authors you can now provide a couple of different style options. And you also get with this different font support you can kind of see this here. We're pulling in different fonts, and so on. So you might have been reading about font API's coming to WordPress. This is the first pass at this. So it's an API that is available to theme authors that are using theme dot JSON. And they can configure different font faces that they want to use without writing any code just as part of the theme dot JSON file. That's a feature that will be coming probably to everyone in WordPress 6.1. But it's here first for users who are using floats at editing. Now those are kind of like the stylish and color changes but we also have some new changes in terms of the templates that are allowed. So I'm gonna go from two templates here. And I have this Add new button where I can add different templates and we've added a couple of them in WordPress six point now. I can now add a template for the author's page template for any categories or tags, or a custom one using the taxonomy template as well as the date one. So if we want we could insert an author template and this is kind of one of those things that still requires a fair bit of work I think. So I'm going to insert the header template part and I'm going to choose from let's say header one looks nice. This kind of looks nice, I think text only header with green background. You can choose that one. Let's also then add in our footer template parch. Huge choose Add in or default footer and it's now if we insert a block before here. Let's see do we get a prompt for this Yeah. Okay. So we can add the author block and the post author biography block
let's say that this is going to be pretty ugly. You'll want to as a designer do more layout things probably put these in groups. So you can do that right here. Let's group those together, put them in something a little bit nicer, inherit the default layout. But I now have a template that will be used when the author template is displayed. Let's see if we can show that somewhere. That's not linking to it. Live demos. Let's see
there we go. So no, that doesn't seem right to me. Doesn't look like it's using that template. I'm not sure what I did wrong. Template displays latest posts written by single author might be a bug I might be doing something wrong. entirely possible. I'm not sure which. Yeah, it's strange. Okay. We'll move on to a different template that we want to edit. So let's go back to our single post template and new thing and you'll see this this is a new 2020 theme. Or excuse me, 2022 theme. And when you get it you'll see this kind of like notice here post comments block. Yeah, you'll see here excuse me, post comments deprecated. And for better compatibility with a block editor, please consider replacing this block was a new comments query block. So I'm gonna go ahead and do that. I'm going to remove this block. And so this comments block kind of like just display the default comments loop but it didn't allow really any customization as a user. But if we go ahead and remove this, we can insert a new block. So I'm going to insert the comments query Loop block. And this inserts a whole bunch of blocks for me, the comments title, the complex template pagination columns, kind of like the post query block and it allows me to customize what the comments looked like on my posts. So I have the comment, author, the comment date, the comment content. If I wanted to, for instance, I could change some things about this. So we have our image block if we want to do kind of like the cool. I'm not sure where this trend started, but where I guess it's a squircle design is what it's called, where we change the avatars. So it's like not exactly a circle. We could do that. If we wanted to take this edit button out. We could remove that if we wanted to. If we wanted to put the comment state below the comment content, we could do that. We can even change the font size here. So we have not sure why that's not changing. But yeah, we should be able to change things like comments and typography and styles. There we go. This is allowing me to change it. So if we want to make the date in a vivid red for some reason we could do that. We get a whole lot of controls now to change every aspect of our comments. So yeah, maybe they will set a nice, dark background with light text. You can add some padding to it and save that anyone can take a look at how it'll be on our Hello World post. Things aren't saving oh let's see single post. This is the single post template
some caching going on there.
There might be some caching going on. I'm not sure Timothy that I think that dev Oh, here we go. I'm just very bad. Here we go. We have multiple demo sites, multiple dev sites. things. Things are working better now. Here we go. So yeah, I was just on the wrong site there. Apologies everyone. Yeah, so we can see our changes. And we have this comment box that has all the changes that I made. It's this script was designed for the avatar. The text is in here. I think we would have to change something or they're to make this comment date be read I think ah, because this is a link so it's using the link style. That's a little bit confusing. So we'll need to change our link color on the comment date, to maybe also be that red and this is also a new thing while I'm here we should talk about we have the default format for dates, but we can change it. So if we want to choose a different form on our site or even enter our custom one. We can do that. We'll change it over to this one. I think it's really important that we show the comment time I guess that's what your changes and we've got this set up Yeah, we have our text enter comma date all changed how we have liked it
is there anything else I want to cover there? Yes. So we have a couple of changes to the post author as well. So we've always had this post author block, which kind of is a multipurpose box that lets you show and hide the avatar show and hide the bio, but we have that's new now is we've broken those out into individual blocks. So if let's say we want to have a more dedicated author section, we can do that. So I'm going to insert a block before this or do I want to do this after? I'll say before, and let's pop open or ListView. Yeah, I think this might be so we'll set up maybe a commerce backer maybe we could set up the new stack block. And we'll insert in our post author. And then we'll add after that the post author biography so now these are separate blocks. So if I wanted to, I can make some changes here. So I could say let's make the post author much larger than their actual biography. And we can say maybe the biography should be small. We could change the colors here. individually. Add a Kichi pinkish back around here. And let's add some padding to make it look nicer. And we can see that in action. There we go. Whatever we're gonna make that look nicer. We put this into a group box inherit the default layout. That'll do it. There we go. So yeah, essentially in this release a lot of new controls have been added to let you customize more aspects of your editor. Um, a couple of other things that I wanted to touch on. I have registered a custom taxonomy on this site. So let's add a couple of I've already done that added a couple of terms here. What's new and decided or now is that I can also filter posts by those taxonomy items. So if I wanted to, for instance, we have our query loop here. Actually, I don't know if I want to adjust this one. I'm going to do it just for the purposes of demo here. You probably don't want to adjust your homepage query to do something that's different but I'm going to say I do. What's new is that there is now a Custom Text field here. So if I wanted to limit this to posts that appear in my custom taxonomy, I can do that. And if I wanted to limit him to multiple authors, that's also new that I can do. So I could say I want posts written by my client and posted that were written by me. So more controls have been added to the post gray template block. Let's undo those because I don't think we actually want to make those changes. Okay, and a couple of other tiny small things, and then we'll open it up for questions. We've gotten some more parity between the full site editor and the post editor. One of those is we now have a code editor option. So this is I would say for advanced users only. But if you want to you can actually see the code under the hood that is driving your different templates. And we can go back to safety by selecting visual editor. And a another small change here is that we also have the keyboard shortcuts menu. So this was previously only shown in the regular editor, but we now have an handy keyboard shortcuts pop up that we can use to see all of the different shortcuts and there's a lot of them there that you can really as a power user engage in to make your navigation a lot easier.
And I think that is everything. Oh yes, we saw this a couple of times. We have block patterns are inserted, I guess you'd say more prominently now. So if I insert before and I open up the inserter it's actually going to show me block patterns by default as opposed to blocks. And so this can make things a little bit nicer. When you're creating new content. When you're up in the full set editor. If you want to of course you can always just open up the full inserter and choose wherever you want. And it makes it look a bit nicer. There's also a kind of developer feature that isn't built into any of the WordPress themes right now. So don't have it available to show you but if you want, there's a new feature available that lets you customize what the experience is like for your users when they create a new page. And so what you can do is you can have them, excuse me, go to the Add New Page menu, and you'll actually be able to open up this page with a pop up that shows them a couple of patterns. That they want to select from. That's not something that's built into any of the WordPress themes right now. But it is a feature that's available to you as the theme developer. And yes, I believe that is everything that I wanted to cover for WordPress 6.0.
All right, good stuff. And yeah, high praise in the chat here. One of the big skeptics of the block editor is saying I'm slowly becoming a believer in the block editor. So that's interesting. This the new full site editing has come a long way in this release and it will continue to make improvements. The block editor itself for I know a lot of folks in our audience have been very slow to adopt the block editor altogether. But you know, we've on the agency side, we've started using it in blog posts, for example, for all of our clients works great. It's really it's much easier to use than the classic editor, in my opinion. I agree. Alright, so we have a bunch of questions. That have been asked, I would invite everybody who is on to pop up in the q&a window if it's not open already. And just scan through those questions and upvote the ones that you would like to see answers to by clicking the thumbs up icon under each of the questions. And that will get those questions over to Timothy in the order of votes. So we'll start out with this one from Shandra at the top. Is there a way to add more colors or edit a color in the block editor?
Yeah, yeah. Um, so by default, colors, most of this is a multi phase question because it depends on a lot of things. But as a theme author, you can customize the color palette. So if we hop over to let's say this text control as the theme author, you can add colors here so we have this theme selection. WordPress Core provides this kind of like default set of colors you can customize and remove those as well if you want, but you can provide those theme colors. If you're using a full site editing theme, we can do this to the global design tool. So I'm going to hop over into the editor. Open up the styles tab, go to colors, and I can actually create custom colors so you can see here we have our theme ones and if I wanted to change this I actually can't believe it's not giving me an option to right now. Oh there we go edit colors. So I can select a different primary color if I wanted to. You can see that's updated our button there. But we can also just add completely custom colors through here. So if we want some greenish thing, we could do that. And then as a user, this color is available to you. Wherever you're editing things. You can see they're making changes in global styles. And if we hop back over to our content, when I edit this post, I can select that color definitely very readable. But you can absolutely make those kinds of changes.
Very cool. And for those of you who are Kadence users, the Kadence of course has a excellent Global Site palette and which all those colors inherit nicely throughout whichever blocks that that you're selecting. We did have a question earlier on regarding accessibility from cue when you were showing the the pale peach text with a white background there like is in some places in the block editor it does pop an accessibility warning like hey, these colors, you know right so but it didn't in that particular block. Can you speak anything to the you know? The accessibility that
was just accessible color combination? Essentially, anywhere that you see this color panel that has text in background specifically, it will be doing a contrast check there. So I think pretty much for any core blocks. That should be a thing that's available to you. Yeah, interesting. This example here. Yeah. So pretty much everywhere. If you have a custom block that is doing things weirdly, but it's, it might not by default, the easiest way to get color support into your block gives you this functionality.
Interesting. Q is saying in the chat it did not check color contrast and buttons and 5.9 Is that changed?
Let's see so if we make this background white, and change text to white, yeah, looks like it's not picking it up in the buttons box. I'm not sure why it wouldn't make them buttons box. The button block is a little bit weird of like more advanced case of things. But it sounds like probably something worth opening is a feature request. But yeah, it should pretty much wherever this palette is used because it's built into how the controls work. My guess is that this isn't actually being identified as a background color. And this is naturally being identified by text, or some other instance of like how it's actually examining the button. Block HTML and structure for that. But yeah, the contrast checker is part of these color tools. So I imagine Bach might be doing something funky, to make that network.
Interesting and I think this is a good little sidebar discussion. You said entered as a feature request and I want to dig into that just for a second. For a lot of us who use WordPress, we're not aware that like we're part of the community that can help to you know, make these decisions right some some folks that I've talked to think that all the changes in core WordPress are things that happen to us, instead of things that are happening potentially with us. So how does one go about raising a flag to say, hey, the accessibility color checker doesn't work on the button block?
Yeah, so we're gonna hop over to github.com and you'll want to search for WordPress slash union Burg, and then we have this issues painting and I don't think I'm logged in so it's going to prompt me to log in. But when you click this new issue button, you will be able to choose from a couple of different templates and you can choose to file a bug number submit a feature we could check. But in contrast, co design tools accessibility issues, buttons, there we go. No color contrast warning, regardless of choosing colors. And yeah, so this is the button block doing something funky. The buttons have this nested child div inside of it. So it's not actually able to do the contrast check appropriately. But it's something that is trying to do whenever this color to appears. So it looks like this is a bug and probably Yeah, looks like it got recorded through the WordPress org news team is actually another cool entirely Open Source Initiative that you can take a look at. But yeah, that's basically the process that you do is go to Gutenberg issues. Search first and find example you can say hey, I just this this social applies to me. You can subscribe. When you're logged in, you'll see a little subscribe button here that will give you any notifications when stuff changes.
Yeah, very cool. So if you're invested in WordPress, you ought to know about this process to report issues. It's uh, you know, we are encouraged as WordPress users and part of the open source community to have these discussions Right. Exactly. Okay, great question coming up here from Deb. You earlier you were showing a color border where we pick from the colors is there a way to type in the hex color for a particular color?
So let's go what's a good thing? I guess I could probably customize this from here color text customer. If I select here I don't know what's what's a good hex color. I don't have a hex codes. I want to shout out.
Fa FA FA be a red.
Very light gray. Oh, but yes, you have those options there. edpb. Yep, that is available to you if you don't want to use the fancy visual editor.
Very good. Let's see. Paul has a question earlier when you were showing the locking of the different blocks, which is super. The demo showed the client could not unlock and move things around. Was that when the client role was there can only admins do that? What are the roles so
by default, anyone who is editing a post can do locking. Let me see if I can get you over to the code. And yes, we have this block lock settings in WordPress six by now. So there is a filter that you can use as developer to lock down whether block locking can be used or not. And so what I did is I said settings can lock blocks is equal to current user can manage options. And what that means is that any user who can manage options can use block mocking and then I set up my client user as a user with the editor role. That's one of the ways that I like to do client projects when possible is to set up my clients with a user that has an editor, give them an administrator just in case we say hey, don't use this break glass in case of fire if I get run over by a car or something you have an administrator role, but your day to day usage in your site should be through your editor role. And so that lets you do this kind of setup here where I've said okay, I'm going to lock down these box if anyone who isn't an administrator, I me or they are breaking glass, they will be forced to not be able to remove Remove those box that's custom and done using this blog post. I'll try to
Yeah, if you could drop that link in the chat. That would be fantastic. We'll do that again, Timothy. But switch it to everyone. If it is, yeah, it default for us as hosts and panelists. It defaults just to us there we go. All right. There's so there's that code block code snippet. All right. Let's see another question from Paul. So when using styles, is there a way to offer a dark mode of the site for users to select is there any way this function can happen easily?
So I would say you could build a dark mode style theme. And with some custom code, you could probably have that dynamically adjust. I would say that's not a feature to my knowledge that you could do like in a couple of lines of code right now and WordPress, but that's very much a thing that is more easy to do now that we have global theme variations, and that API has been improved. So it would not surprise me to be a feature coming soon. I'm not aware of any specific ticket that saying like hey, let's do this now for WordPress 6.1. But we're definitely further closer. Further closer. were closer along to that today than we were with five that night.
Yeah, very cool. I think if you're heading that direction, Paul, you might look for some plug in that allows the user to switch registered themes. So if you build that theme yourself and maybe allow a user for their user to switch themes, I think something like that exists. I think I've seen a plugin that does that. Okay, Charlie has a question had to all these new block breakouts impact performance and the number of Dom's
I don't think there should really be any noticeable change. Like fundamentally what you're displaying in your site is what you want to display on your site. And having new blocks isn't going to change that. They're kind of built as much as possible. And in fact, this is one of the changes that has been in WordPress 6.0. That's a little bit of a breaking change of using theme that Jason is they've actually removed some unnecessary DOM elements in the featured image box, I believe in some other image box. So the Gutenberg team is very vigilant about making sure the markup is as clean as possible. And so just having new blocks available won't change things. And I would say, unless you're getting in the hundreds of 1000s of DOM element you're not going to see a problem. I wouldn't worry about it. Yeah, main thing that I would focus on for improving the performance of your site is things like, let's get images to the proper sizes. Let's make sure that we're not loading 25 Different fonts, reducing the number of add tracking services, things like that, that we'll see a much larger impact for your end users, then how many DOM elements you have because after all, if you want to have that content, your site you want to have that content in your site, and you shouldn't really be worrying about performance in that regard.
Interesting. Okay, next question. It regards the stack block, which is a new addition. Yeah, how is that different? than taking an individual blocks and grouping them?
So stack applies a Flex Layout. And so it kind of like makes it responsive. It's actually a variation of the group block. Oops, that's not just about group. So when you insert a group block, we have the variations to switch them between these different views and CC when we have a group, it's really just like, very broad controls for like layout content with things like that. But when I change these stacks and rows, they're either arranging blocks horizontally, or vertically and letting me apply these flex based layout controls to them. So there's something that I wouldn't necessarily be using day to day when you're writing content, but as a theme author, um, it might be something that is helpful to you. If you ever want to get flex if you've heard a Flexbox layout. That's how you do it with box instead. Of Gutenberg.
Excellent. Let's see a question here from SU. Let's see. She says the six Dotto release seems to be fairly weak on menus and navigation. Do you know what the plans are to improve that bit of the full site editing?
So I know it's something that people are thinking about a lot um, there has been for the past two years, a kind of work on a completely different menu editing experience screen that was an experiment and Gutenberg for a long time that's actually been removed as for the most recent release, I believe, for trying to pursue different directions. So it is something that glimmery developers I know are thinking about, but I don't have any concrete things to say as to whether there's new features that and 61 if that's something that's important to you, you can hop over into make that wordpress.org And there's usually like a call for tickets at the start of any cycle. So the 6.1 cycle has kind of already started. But if that's something that's important to you, make sure to comment on one of those posts on make that wordpress.org
Interesting. So a follow up on that cue has a question in the chat. Is stacking supposed to be the responsive layout view?
Yes, so stacks and rows are using Flexbox. And so they will automatically adapt based on screen size and they're gonna divide elements proportionally, and you have these like justification controls that are using align items and justify items depending on the direction that they're going. So like with a row, I'm dividing these items here evenly, I suppose like a common law firm is saying I want this to be 60% and 30%. So they're part of your layout controls. And again, as a user, I don't think you'd really be using them much but as a theme developer, they're available to you and they're kind of just like, responsive, built in, similar to how columns blocks automatically stack when you're in a mobile view.
Very cool. Alright, folks, we're down to our last two questions. So if you have a question that you haven't asked yet, pop up in the q&a box and type that question in we'll get it over to Timothy. Andrew would like to know, does the image column spacing get removed for tablet or mobile view?
I don't believe so. I mean, we can check. So let's insert in our gallery and we'll say let's set our block spacing 100 And we can go into preview and see mobile. And yeah, but you still have that space in there.
So how would one deal with that? Because clearly, that's not
Oh, if you wanted to reduce it, you would need to at this point, right custom CSS. So this is one of those features that Gutenberg doesn't have built in, which is supporting different attributes depending on the viewport mobile desktop tablet. And this is something that you can kind of do with Kadence and Kadence blocks is that you can say Okay, on this viewport, I want to have this settings and this viewport this settings and that's something that's built into WordPress Core yet at this moment, but if you are using Kadence box or other box, some of those have support for changing attributes based on the viewport. Yeah.
Cool. Okay, question from Ben. He says sometimes when I've used undo or Ctrl Z, the block crashes, should I try to avoid Ctrl Z or am I the only one who has seen this pre WordPress six?
Um, no, that shouldn't happen. If it does happen, it's definitely a bug. There are bugs around undo that do. Undo that. Do there are our bugs about around undo that do get fix. So there's like, what can sometimes happen is you get into like an undo trap where you undo a change and then the change ends up getting immediately applied. Like if that happens too much. It could cause a crash, I suppose. I know. There is a couple of those. I think that we're actually fixing WordPress 6.0. But yes, that is that would be a bug. You shouldn't try and avoid Ctrl C, it should absolutely be a feature that's available to you as user. If you do experience that I would definitely recommend going into GitHub, searching opening up a new issue. Fortunately, it's just those things that WordPress as an open source product. There is no telemetry that is built into the block editor when you're using WordPress. So if you're using a like third party SaaS service or something like that, they probably get recorded whenever there's a crash. WordPress as a project doesn't know about any crashes unless our users report them. So when you do get issues like that, I know it can be frustrating. It's really helpful to set back see, hey, when does this happen and try and record it either in the GitHub repository or on the wordpress.org forums, and so I can help you
there. Very good. All right. Looks like the final question today comes from sherry. So in that stacking block, what is the symbol at the left that looks like the blocks overlay each other? What does that do?
This, I'm guessing and that's what we mean. So these are all groupbox. They're just variations. And so these are applying particular layouts to them. But the group block itself doesn't really apply any layout to the blocks that are contained within it. It's just a group. And so that group lets you change things like so if we selected these two blocks, and we put them in a group block. We can do things like change the text color, across those and make those kinds of changes. But we're not actually affecting the layout. Whereas when I then navigate into a roadblock, it puts them into a layout for me. So it's really just a form of grouping. That kind of effects with spacing and size report and that way, it doesn't affect what's displayed inside of them in terms of layout structure, but does let you apply things like text changes, and typography changes if you wanted to change the sizes. Here we could.
Interesting. All right, we actually had one last question dropped in from Charlie. So the length that we talked about at GitHub, the github.com/wordpress/gutenberg Does that apply to just the Gutenberg plugin, or is it core block editor? What does that
so this is a kind of like shift that happened with the block editor. All of the development for block editor slash Gutenberg happens inside of that repository. And so whenever a new WordPress release comes out the latest asterisk changes from the Gutenberg repository get brought into WordPress Core. So my first place to report any issue with Gutenberg or the block editor would be the Gutenberg repository. Now that being said, the Gutenberg repository is ahead of where WordPress is. So there has been Gutenberg plugin releases that have been released that aren't in WordPress 6.0. So another great thing that you can do when you're going to record an issue is install the latest version of the plugin. And it will actually I believe, ask you to do this in your issue. Tempo say does this still happen with the latest Gutenberg plugin? And so you can check that first and if it does still happen, the latest Gutenberg plugin, Okay, file a bug report. If it doesn't, it means it's already been fixed. And we'll just have to wait for a new word press release for that fix to get out to us.
Yeah, great answer and it's something that we like to I try to emphasize fairly regularly here in different webinars. Usually the news roundup and we're talking about the Gutenberg update. So that in that is that the Gutenberg plugin is the place in which development for the block editor occurs. And block editor is what is actually in core WordPress. So every month in the news roundup, we cover two or three iterations of the Gutenberg plugin and talk about all these new features. And then like you said, from time to time, at every next major release of WordPress, all those changes are dropped into core WordPress. And so if you're joining us today, and you're not a regular iThemes Training attendee, I would encourage you to join us each month for the news roundup, and we cover the ongoing development of the block editor all these features at least once a month when we were we were doing the news roundup. So a lot of fun. Timothy, this has been great, man. A lot of good demo. Good q&a. Any any final thoughts as we're wrapping
up? I don't have much I just say, Yeah, this came out last week, I would before updating to any major release. Absolutely. Make sure you have a backup test on a staging site. I cannot recommend those processes enough. And then yeah, go ahead and upgrade.
Absolutely. And if you'd like to join us for the next news roundup, the link is there in the chat room. It's a free webinar. And we do that every month here on iThemes Training. We'll have the replay of this event as well as the chat log and the live transcript available at the link that I shared a moment ago. I'll pop that in in just a minute as well. In the chat, that'll be ready for in about an hour or so, after we wrap up here. And yeah, we really appreciate all of you being with us. It's been a great time looking at WordPress six. Timothy, thank you for your wisdom. My name is Nathan Ingram. From everybody here at iThemes. Hope you have a great rest of the evening. I'm back tomorrow for members for office hours at 1pm here on iThemes Training, where we go further together