 All right, welcome everybody. My name is Nick Diego, and I'm a developer advocate at WP Engine. And today we are going to be talking about designing with columns, blocks, rows and stacks within WordPress. And to just make sure that we're all in the right place, I'm gonna share my screen here. So this is the event that you've signed up to attend today. And I've done this presentation before. There's an old version of this up on WordPress TV. And, but that was a while ago. I think that was back in like May or June, right before WordPress 6.0 came out. So now that WordPress 6.1 came out, I thought it would be an awesome time to kind of re-look at this topic, this very broad topic of how to build with these different block types. The conversation today is gonna be a bit meandering. I'm gonna walk through a bunch of different examples. We're gonna check out a bunch of different things. If you're very new to blocks, and I'm going too fast, just I shout it out in the chat if you have questions and I can slow down. I'm gonna kind of assume kind of a general knowledge of the block editor. Otherwise we would be here for three hours, which I'm happy to do, but, you know, we only have an hour and kind of get into a, not advanced, but a bit more into block manipulation. And we're also gonna talk about the site editor today. We're gonna explore the site editor. But again, if you have questions, feel free to use the chat. I'm not gonna be keeping it in the chat the whole time, but I'll stop at different intervals to review the chat and answer your questions. So is audio not working for anybody? Okay, so I'm seeing some people saying, yes, it is working. Okay. Okay, so I think we have one person that can't hear audio. Hopefully the chat can point you in the right direction there. You do need to enable audio in your Zoom. Okay, so let's hop in. So I'm gonna, before I start, I always like to give a brief overview of the tools that I'm using or the theme and the WordPress version and everything else that I'm using so that you can follow along at home. So we're gonna be using the 2023 theme. This is the theme that just came out with 6.1. I am using the, what am I using? I'm using the electric, I think, block variation. So this is the block variation that came with 2023. So if you just install 2023, it doesn't look the same. I'm using the electric style variation. I don't know, just for personal preference. And I am using the Gutenberg plugin today. Last workshop, if you attended that one, we didn't use Gutenberg, we just used stock WordPress 6.1. We are gonna use Gutenberg today because it's actually some really cool functionality. Recently came out with Gutenberg that I wanted to showcase. We use Gutenberg because this is where all the latest and greatest functionality for the editors being developed and this will be in WordPress eventually. A lot of what we see, there's things that we see today, which I'll point out that aren't in WordPress 6.1, they'll be in 6.2. So because we're as an educational channel and we always want to stay in tune with the latest and greatest, this kind of WordPress, I like to use Gutenberg. So let's hop in. So I'm gonna come on over to this page here and I have some examples. And what I wanna talk about first is columns. So everybody's familiar with the general concept of a column. We're gonna ignore this example right now and I'm just gonna throw in a spacer to give us a bit of space. Generally, we think of columns, it could be a lot of things, a column of text, a column of images. It's a little testimonials where you have three testimonials and they're each in their own column. Columns are ubiquitous on the internet. You see them everywhere, right? And so just for the sake of it, let's just add a columns block. There we go. And what I'm gonna do is I'm just gonna add some dummy text in there just so if anybody has not inserted a columns block, this is how it works. Now, there's a couple key little pieces that I wanna show you, even if you've used a columns block a lot, that might speed up your workflow. So here I'm scaffolding out a three column layout and instead of copying this text over to each one, what I'm gonna do is I'm gonna add a heading here because I want a heading, we'll just say header, we'll make this large, maybe we'll clean this up a little bit and then let's just add a button. So I've basically scaffolded it out a single column, instead of doing that for each one, we can click on our column and we can duplicate and we can duplicate again and then we can delete the extra ones. And there we go. We've scaffolded it out a lot quicker than if we just went to each column and added our content. But we can also take it a step further, especially when it comes to styling. So pretend that I wanted these individual columns, maybe background color, consistent background color, maybe some padding, really dive into some of the blocks of course, the design tools that we have in the sidebar. Instead of changing one and duplicating or changing each one individually, you can do something kind of cool. So we can go over here to the list view, make sure we're selecting them all. Once they're all selected, you can see that this sidebar is telling me that I have three blocks selected and it's giving me some settings. So I could, for example, let's make the background, I don't know, light blue. We could come down here, we could add some padding. So you can see these, when you multi-select, which is now being expanded across more and more blocks, these design tools carry across them. And then you can, you know, edit all your columns at once, you know, all your paragraphs at once, whatever it might be. Use this tool a lot because, or try using this tool quite a bit because it really speeds things up and allows you to iterate quicker in the editor. So here you can see now we have some light blue columns with text, which in the past I would have filled out a column, gone to the next one and all the settings again, gone to the next one and all the settings again. So this is much quicker. So that's a very basic example of how to use the columns block. But what I want to focus on today is ways that we can use the columns block in, I wouldn't say ways you wouldn't expect, but maybe just a bit more in advanced way. And the reason why I like the columns block, the group block, the row block and the stacks block is that these blocks have some of the most controls of all blocks in WordPress. So when we click on this columns block, again, columns is the container and inside of that are the individual columns, look at all these controls that we have. And for example, dimensions, we can click on dimensions and we can even, there's even more, there's block spacing, there's margin, block spacing is what controls the distance between each column. So we could do something like this and make it wider. Cool thing about columns with block spacing specifically, we now have vertical and horizontal controls. So in mobile, when those columns stack, we can set a different space between them. So for example, if we wanted vertical to be, let's say vertical on a large horizontal small, now when we go to mobile, you can see that this distance is larger than that small size. So these blocks have a ton of different controls and a lot of different settings. And because of that, it makes them really powerful to do interesting layouts. So what we're gonna do is I wanna take a look at the median text block because I think it's a good, this block has been in WordPress for a really long time. And it's a good example of a block that's does exactly what it says it does. It gives you media and it gives you text and other content. And it's great for beginners because you hop right in here, you add your median text. Let's just add a blank one and you can see what it looks like. You add a median text that says, insert your media over here, add your content. It's great because it really is, makes it a very simple way of editing. However, because it's kind of done for you, it lacks some of the kind of controls that you'd want to kind of really solidify design. Or if you really wanna be like pixel perfect about things, it's kind of hard to do with the median text block without using custom CSS. All right, so before I dive into this, let me take a quick look at chat because I see a bunch of questions in chat. Is this the latest Gutenberg feature for multi-edit? Nope, you can multi-edit in WordPress 6.1. It's as blocks expanded, as support controls expand, it will be more universally supported. But no, you can do just what I did with columns in 6.1. Let's see, I'm not sure why it seems to be able to get median text block to work. Yeah, so median text block is tricky. Like it seems simple and we're gonna solve that with columns. Okay, so I think that's the bulk of the questions. Again, feel free to keep adding them, I will periodically check. So the biggest thing, the biggest gripe for me about the median text block, despite that it's pretty easy to use and it has some fun functionality. For example, the big one is stack on mobile. So if I take a peek at our mobile view, you can see that the image up here is on top of the text. And this is pretty useful. You see this a lot with different layouts on the web as we go to mobile, you wanna rearrange your content. So stacking on mobile is helpful. And the cool thing about the median text block is that regardless of if you put your image on the right or left, it's still gonna make sure that on mobile that image is on the top, right? However, let's start to look at this layout. You know, the spacing on the sides, the bottom's a little wonky. And again, this can be very theme specific. So you could have a theme that really tries to dial in the median text block and add some custom CSS to really make it great. But this 2023 is stock. 2023 doesn't even have a style sheet. So this is basically right out of the box what you get. And it leaves a little bit to be desired. So what I'm talking about here is really about control. The median text gives you a lot of options but you lack some of that control. Now let's take a look at the same design but in the columns block. So here we are and I've scaffolded this a bit differently. It's a lot more complicated, right? Because here we have median text, we open it up and we have heading button and we have our content. I come down here to my columns block which is generally the same layout. And I have two columns, so more blocks to work with. And I have my content. And then on the right, I have a cover block. I'm gonna rebuild this while we talk here and then talk through all the different things that I did with this very simple layout and why I chose it this way and what elements of control building it with the columns gave me over something like median text. So we're gonna start, we're just gonna do a columns block with two columns, 50, 50. I'm gonna align this wide, click on my columns, the external one and go to wide. Then what I'm gonna do is I'm going to just, for simplicity, we're not here to learn about heading and paragraph and button. So I'm just gonna copy this and we'll paste it right inside of my column and then we'll do the same thing for cover. Now you might ask, why did I use a cover instead of an image? Well, cover are pretty handy because they allow you to do things like minimum height. So if I was to add an image here and I can do that, let's just do an image. So notice I'm making a lot of choices. I'm making a lot of design choices as I'm building out this columns block. This might not be, this leads to some criticism that building with blocks is challenging for new users and everything that I'm doing here, all the little nuances that I'm modifying and changing and why am I picking a cover over an image? That is hard for new users. But the one thing I wanna stress though is that when we're done with this, for those familiar with patterns, I could serve this entire design as a pattern to a new user. So that's kind of the idea. We're here in this presentation to learn how to build this stuff. But if you're serving it to a new user, you can accomplish a lot of that easy onboarding by serving the design as a pattern, all pre-done for the user. So they can just come here, change their text, change their image, change their text, so on and so forth. But we're learning here how to actually design the content. So now I have my image. The problem with an image though, is that you can't set an image as a background, it's just the image itself. You can change the size and whatnot. But the nice thing about a cover is that it can expand to have a minimum height, which will allow you to kind of adjust the content and adjust the image. And if we, for example, set this to, I don't know, 500, you can see that the image is set as the background, so it kind of adjusts to that size. So I like using covers quite a bit. Maybe in the future, we'll have more controls over just the image block itself that will allow us to do some of this stuff. But cover is really my go-to whenever I wanna do some interesting image layouts. So we're gonna turn this into a cover block. And it's pretty handy, right? Because now we can take an image, insert an image and then turn it into a cover block very easily. I'm just gonna reduce that opacity because we don't care about that. We'll set a minimum height to maybe 400. And now let's go back to look at our media and text. Let me, we wanna make this the same. So we're gonna move our columns over like this. Now, the big thing about the media and text is I have no control over the distance between the image and the text itself. But with the columns block, I do. So the first thing I'm gonna do is I'm gonna use that block spacing to control the space between each column. And I'm actually gonna set that to zero. Now, the space around the content, I'm gonna go into my column or back to dimensions and add some padding. So now I've added some padding inside of this container. I'm gonna make sure that my widths are 50%. Now, there is a trick I'm using here, which I don't wanna distract us at the moment, but I need to confess something once we get a little further in the presentation and we talk about custom CSS. But I'm setting my widths there, so it's 50, 50. And then what I'm also gonna do now is I'm going to set the alignment. So now my text is aligned middle with the image that's on the left. And then what we can do is we can go to background, can set that to blue. When you insert a background depending on your theme by default, it's gonna add some default padding. We can remove that with dimensions. We can just set padding to zero. So now we're back to zero. Go to text, set that to white and there we go. Now we have a very similar example to what we have with our media and text. But now I have some really fine-tuned control over the spacing between all my content. And then let's look at the preview for mobile. And here we are. So this is our media and text and this is our column. Now what we can do now is we can change the alignment. So one of the things that was really nice about our media and text block is the fact that if I put the image on the right, when I go to that mobile, it's gonna switch it and put the image on the top. We are not gonna get that with our column. It's not how the columns work. So what we're gonna need to do is we're gonna need to add some custom CSS to make this workforce. Now you might think, well, geez, we have a media and text block. It does almost everything we need. And here you're presenting the columns block and we need to do some custom CSS. I really wanna stress that custom CSS, even though in a block-based world, we wanna try and get away from it as much as possible. We wanna be using all the settings that are available on the blocks themselves. There are definitely instances when you're gonna need some custom CSS. And I'm gonna show you how I like to implement custom CSS on blocks. And I do this all the time. Whenever you need a bit more advanced functionality, don't be afraid to add custom CSS. I think that's very handy. But the way I like to do it is via CSS classes. So in every block in WordPress, you can go to the advanced section and add an additional CSS class. Now, I'm not gonna talk about block styles today. Block styles are, let's see here. So block styles are like what you see here where you have a button and it has fill and outline. If I click on outline, well, it's not gonna work. The way I change the color and background is not gonna work. But these block styles allow you to really, all block styles do is they add classes. So if I do outline and I come down here, you can see it says is style outline. This is the hand fancy user interface buttons to add classes. I don't love adding block styles in many situations where you need very niche functionality. And I would consider changing the direction of columns to be fairly niche. Ideally in the future, what I'd love to see on columns, see where it says stack on mobile. It'd be nice if there's a little toggle switch there that said reverse column direction on mobile, something like that. Maybe in the future that will be added. Maybe I should add that myself. But right now we don't have that. So the cleanest way to add this functionality is with a simple CSS class that if in the future WordPress does add this functionality, you can just remove that class and then you can use the native functionality. So what we're gonna do is we're gonna head on over to the 2023 theme folder and we're gonna start adding some of this custom CSS. And when I say adding custom CSS, it's like two lines. So it's very simple. So what we're gonna do is we're gonna head on over to the files for 2023. And this is where I need to make my confession. 2023 is kind of a unique theme and that it shipped without any custom styles at all, none. So this style sheet normally is empty, which was the first time that it had ever been done in WordPress. Now, by doing that, you kind of have some, you have to make some compromises and because of that, 2022 is very simple. One of the things that I love adding back to themes is this little reset for setting everything box sizing to border box. I'm not gonna get too into it, but it basically means that when you do dimensions, for example, padding, padding gets included in the dimension. So this is needed. If you wanted to do something like I have here, where I have padding on the column itself, but then I want the column only to be 50% of the columns block area. If I don't have this, the padding on the column itself won't be included in the calculation and it won't be exactly 50%. So if you ever run into this problem where you're building your own custom theme, ideally, I would love to see this maybe somehow fixed in WordPress itself, but I love adding this little reset. It just makes everything kind of behave a bit more as you would expect. Now, to do add custom styles, again, we're kind of working with 2023, which is kind of a unique case because it doesn't have style sheet traditionally. You need to actually enqueue that style sheet. So if you're using any other theme, like the 2022 theme is a good example. The 2022 theme is a block theme, sorry, similar to 2023, but it actually has a style sheet that actually has a functions.php file. So if you wanna kind of replicate what I'm doing here, just go look at 2022, copy their implementation and you're good to go. Again, we're using 2023, so we need to kind of add this back ourselves. Again, 2023 is kind of a unique case. So in order to have styles, style sheet, you need to enqueue that style sheet and I'm doing that here in my functions.php file. I'll add this as a gist and add a link to it. Put a link in the comments of the meetup group after this workshop. So you can reference this directly. This is exactly what you would see in the 2022 theme. It just loads our style sheet in WordPress. Confessions aside, let's move on to the utility class that we're gonna add. So here I am in my style sheet for the theme. I've copied this over here. What I wanna do is I'm just gonna copy this over and explain what it does. I wanna do a class. And here I have a class called mobile reverse column direction. You can call it whatever you want. And come back over here and I'm gonna add that to my, oops, not there. I'm gonna add that to the columns block. So the main columns block. Now the columns block is a flexbox container. That's how it's laid out. And with that, you can apply flex direction column reverse and that will reverse the direction of the columns. Now, we only wanna do that on mobile. So we're gonna use a media query here and you'll know if you played around with WordPress enough there the break point for mobile. That's when the columns collapse is 782 pixels. So here we're saying when we're up to 782 pixels, reverse the direction of this column. So we're gonna save this now and update fresh. So now when I go to preview, assuming everything worked, now you can see that that image is on top. Let's remove the class. Now we go to preview mobile, the image is in the bottom. Let's just do that right here. Add it, remove it and it's flipped around. And we can take a quick peek at that on the front end. Here we are again, this is our media and text. And now when we collapse it on mobile, it looks like this. So yes, we had to add a custom CSS class, but I think that that's an important, I don't have a taboo to dispel. Like it's okay to add custom CSS classes and custom CSS to blocks, especially when there's very specific functionality that the editor can't currently handle. But I'd love to do it in this way where we're just doing it very targeted. We have a class that's applying the functionality that we want, we can add it directly, adds the functionality if ever in the future, there is that toggle that allows us to reverse the direction on mobile, which I think would be pretty handy. We can just come in here and remove the class and we're good to go. It's a very lightweight customization that you can make when working with block themes. Now, the cool thing about this is because it's so targeted, imagine that you have this layout. Let me just remove the second one here. Imagine you have, you probably have seen this quite a bit. It's a pretty common layout on sites where you have this kind of staggered effect. Maybe it's a feature list and you have, you know, they stagger them all the way down. You, what we would do is you would use the class on the first one because we want that image to shift. The second column does not need it because the images are, the image is already on the left. And then maybe we duplicate this one more time and we update this. And then when we go to mobile, we get what we want, right? We want all the images to be on the top, just like that. So pretty simple. It's actually a very simple design, right? But the way that we're utilizing columns and to create these different designs because it gives us all this control. It gives us the control of the spacing around it. It gives us very, you know, all this fine grain control around borders and radius. And I didn't even talk about some of this other functionality that the median text block, which while provides this kind of like all inclusive option, doesn't, all that doesn't provide us additional options. Okay, so quick question, let's move on to the chat here. Let's see here, someone's asking for the code again. So while I answer these questions, here's the code. So if a pattern is created from the columns, will it capture the custom CSS Cliffs too? Yes. So imagine a scenario where you've created a site for a client and you've created a bunch of these like utility classes that do some niche functionality. You can then create patterns that utilize that those utility classes that the user or the client can then just insert and they'll be done the wiser because they'll insert the pattern. It already has the classes that you've assigned to those blocks and they're good to go. So it's a really elegant way to like kind of serve custom functionality without the client having to mess with things themselves. Now, if there's something that you're using all the time. So a good example being, you know, those buttons, right? Then it might make sense to have a designated block style that the user can just go in there and manually, you know, change things. Maybe your user is always needing to reverse the direction of columns. Well, then maybe it might make sense to create a block style that outside of the scope of this discussion to explain how to create a block style, but create that UI so the user can come in here and just configure that. It's really up to you and you kind of your implementation. But yeah, so if I, for example, if I look at the, let me just clear out the top here so we can clearly see it. If I look at the block code for this, you can see here that the class name attribute has our custom class. So yeah, any custom class add will be contained within the block code, which then you can put into a pattern and then serve that. Good to know that it's not bad practice to use custom CSS. Yeah, I say that with the caveat that if the functionality is in the editor, I really strongly encourage you to use that functionality when delivering patterns, when designing. But if it's not, especially in this case, then a simple class can take care of that for you. The trouble you run into is when you try to do, you know, you're trying to target blocks directly with CSS and try to manipulate how blocks work, then you can really kind of get into trouble. So trying to work within the system as much as possible. And then for those very unique cases, we're gonna see a few more later in the presentation, those few cases where you need some niche functionality, a great opportunity to do some custom classes. Is the unwrap a new block in Gutenberg? That's a great question. We can test that out. So what Laura is asking is that if I have a group block, actually, Laura, I'm gonna answer your question in one second, because let's leave columns there. We're gonna talk about columns again towards the end. But let me transition to talking about groups and rows and stacks. And we'll talk about the unwrap functionality and we'll figure it out if it's in Gutenberg or for the 6.1. Okay, so let's clear this out and we're gonna talk about groups. So groups are probably the most, I don't know, aside from like paragraphs and things and maybe buttons, they're probably the most, though the block that you're gonna use the most when you're designing layouts. Under the hood, a group is just a div and then you can apply all sorts of different styling to that group. Groups are unbelievably handy and being comfortable using groups is, I would say, is like a cornerstone of mastering the block editor. So adding a group is pretty simple. Again, just adding the group. This, what we're seeing here, this little interface, this is new to Gutenberg. Normally you just get a container and you could add content within the container. It's just a little bit of a UI improvement to make adding different types of group a little bit easier. Now, the title of this presentation is groups, rows, and stacks. Well, actually rows and stacks are variations of the group block itself. So we're actually talking about the group block and the group block has standard group, rows, and stacks. It's really all one. And when the improvement in Gutenberg was to try to make that a little bit more clear. So when you add a group, you can add, my Zoom is getting a little funky here. You can create a standard group where you're just gathering the blocks in a container. You can do a row where you're arranging the blocks horizontally, or you can do a stack, which is arranging blocks vertically. Now, for those familiar with Flexbox, rows and stacks are Flexbox containers where a group is just a simple div. We're gonna talk about stacks at the very end because they're private. They're not the most complicated, but they're missing, the stacks are missing some features in the editor. We'll get to there in a second. But let's start with the humble group. Create a group, you get this container. So if we weren't using Gutenberg, this is what you'd see. You just see cook group and you get this little inserter and then you can add your content. So let's just cheat and add some content. And then you can add another piece of content. You know, maybe a heading with this, again, cheat, copy some content here. I'll make this a heading. Now it doesn't look like anything's happening, but if we look at our list of you, you can see they're all contained within the group. Now groups have all this functionality. Now, the last workshop I did was about layout and alignment and all that sort of stuff. I'm gonna talk briefly about that here, but if you want some deeper dive into a layout and alignment, you can go check out WordPress TV and there's some information there for you. Group blocks are incredibly powerful. In your theme.json file. So if you come over here to 2023, there's a file called theme.json and there is a section called layout. Layout is what determines the width that the standard content with and then the wide size in your WordPress theme. So for example, we have the standard content with a 650 and the wide width is 1200 pixels. These values are coming from your theme.json file. Now, as we add content, so as we type content here, it's constrained within that 650 pixels. Groups allow you to pass those layout settings down to the blocks inside of them. And once you start using, and we'll move to the site editor, you'll see this more clearly, groups are used everywhere because they have this unique ability that allows you to pass those layout settings from that theme.json file into the group itself and then those layout settings are applied to all the blocks within it. So let me show you what I mean. So if I just make this group full width, the group is full width, let's give it a background so we can kind of see what's going on here. The group is full width, but the content inside of it is constrained to that 650 pixels. That's because this setting is enabled. This says interblocks use content width. If I was to disable this, the content goes all the way to the edge of the group. There's no layout setting being applied. But the cool thing about layout settings is you can actually customize them at the group level. So for example, instead of 650 pixels, maybe I want my content width to be 400. Now it's 400. Maybe I want the wide size to be 800. So if I go to my heading here, I can see that instead of 650 and 1200, my max is 400, sorry, my none is 400 and my wide is 800 because I set that at the group level. So this whole layout topic is kind of a whole workshop in and of itself, but I wanted to quickly show that here because we are gonna be playing around with a little bit. So groups are unique because they have this layout setting that are a couple other blocks that also support layout, namely the individual column block, post content. I think that there's one I'm forgetting, but it's a fairly powerful and unique functionality that you really only mainly use in groups. Let's reset this and look at some of the other functionality of a group. We have our standard stuff. We have color, we have typography, we have padding, we have block spacing. When you're dealing with a block theme, block spacing, we saw a little bit with columns. We could change the distance between columns. Block spacing is one of those things that you run into a lot. It's the distance between blocks, the space between blocks. The cool thing about groups and some other blocks that we'll see by columns is that you can adjust the block spacing. And what this allows us to do is to really change the way the blocks interact with one another inside of the group. So for example, if I wanna do block spacing large or small, I'm adjusting the spacing between all the blocks inside of the group. Blocks outside of that group are not affected. We have blocks inside of the group. We got our padding. We got margin. And this one's really cool. And we're gonna talk about this in context in a minute. This is Nguyen-Gudenberg min height. Min height is kind of a bit of a weird dimension, but it's incredibly useful. And I'm gonna show you some ways that you can use it. But know that the group block has all sorts of controls. And if you are not familiar with this three little dots UI indicator, lots of stuff are hidden in them. So for typography, we have font family, we have appearance, line night, all of this kind of stuff. And then for dimensions, we have a lot of additional functionality too. And more and more is gonna keep getting added, namely min height, which I'll show you in a second. But so much cool stuff is here and it allows you to contain content, allows you to do different interesting things. And really it's really as creative as you wanna be when it comes to groups. But groups are pretty simple. It's just a container and then you can apply some settings to it. I wanna talk next about rows because rows are probably, well, my joke is that they're my favorite block in WordPress. I think that's still the case, I haven't checked. But rows can do some really cool things. So group block, standard group block, just a container, just a div and you can apply a bunch of settings to it. The row block is a horizontal box box container. And what that allows us to do is it allows us to align content horizontally. Now you might say, well, that's very similar to a column. It is, but rows can do something, can do a bit more interesting things than columns can. Everything has its use. Sometimes you need a columns block, sometimes you need a row, but both have great applications. So let's take a look at this little design here. This is like a little banner, the heading and it's gonna display our latest posts. Take a peek at the layout. First, we have a group, right? We have this big group. Why do we have a group? Because we wanna apply a background color. And we want the background color to span the whole width of the page. So let's update this and take a look at the front end. And this is what we have in the front end. We have this nice banner that's displaying full width with our background color. And we achieve that by creating a group, setting it full width. You can see that here. And we have applied that content settings into the content inside of our group. And our row, we've set the row to be a line wide. And we've also set our query loop lock to also be a line wide. And by doing that, we ensure that our heading is aligned wide as well. So we have, it's a little hard to see, but we have everything kind of lined up nicely. Those layout settings are getting passed into our group. Now I wanna display kind of this header where I have the title of my content, a little description. And then I wanna have a link over here. It's maybe a link to the whole blog. People can view the whole blog as opposed to just these three little articles. So we're gonna use a row for this. And I'm gonna build the same thing above it so we can kind of walk through the steps. So what I'm gonna do is I'm gonna start with a row and you can add a row directly or you can do a group. Now, with the new Gutenberg, you can click a group or you can click the row icon and then you have a row. One of the cool things too about groups is over here, it's a little bit strange that it's over here, but it's there. You can switch between, you can toggle between a group, a row and a stack with this little option as well. Lots of ways to change between the two. I'm gonna start by adding a paragraph. We're gonna save some time. Gonna copy this over, make this a heading. Now I wanna add another piece of content or add that description. And you can see as I add this, it's adding things to the right. Let's make this a row wide. And finally, we wanna add our view all, our view all link, okay? So this is like a default row. It's just taking every block that you add and it's adding it to the right. Now there's a lot of settings with rows. You can do things like align them tops and top and bottom. You can justify content in different ways. And what we wanna do here is you wanna do justify space between items. And what this will do is it will take the first item, put it on the left, take the last item, put it on the right, and then space in each individual item within that row, space even. So you can see that we have even space between the title and the view all. Let's set this back to middle. But what I wanna do here is I want my description to be underneath the title. And the way to solve this, and this is where you need to start thinking about how to use all in groups and columns, how to use everything together. Here I know because the row is taking individual blocks and spacing them evenly, I don't want three blocks, I want two. I want one on the left, one on the right. So what I can do now is I can take the description and the title and I can group those. Now that I've grouped them, I only have two blocks technically within the row, well two at the first tier in the row. So it's taking that group, it's putting on the left, taking the content, putting on the right. Now I want that the link here, I want that to be at the bottom. I want that, you can see here, it's at the bottom. So we're gonna align this to the bottom. So now I have my link in the bottom. We're almost there. The last thing is within this group, I want the space between the description and the title to be smaller. I can do that very easily by changing the block spacing. There we go. Now to take it one step further, just for those that are interested, you could of course change using dimensions. You could have changed the margin on the paragraph or on the heading. But it's much easier, I find. If it works for you to just control it at the container level. And here you can see we've set the block spacing to zero. Now those are kind of mushed up against each other. So now we have this nice little row, but we've used a lot of the different settings. We've aligned things to the bottom, we've justified things space between and we've also used a group. So composing all these different blocks together is kind of the key piece I wanted to get through today. Now this layout right here, and this is why I wanted to highlight that min height briefly. Let's take a peek at the front end. I don't love this, right? Let's take a look at what we have in our query loop. In our query loop, we have a group. Inside of that group, we have a featured image. And then we have another group in the post title. I designed this a few weeks ago. And this was before the min height thing was actually available. And so what I have here is I have a group just kind of containing everything. Then I have my featured image, then I have another group. And the reason I have this other group is this is where I'm setting the background color. I'm gonna change it here. So this is where I'm setting that background color. And then I've set, let's see what I got going on here. And then I got some padding on the post title. And it works okay, but whenever there isn't a image, you get this kind of funky layout like this. Similarly, if you were to have an image, but the text was too long, so let's just quickly remove this. Now you can see that we have the same thing here where we have the text is too long and things don't line up very well. In the past, you could easily fix this with some custom CSS. But again, we wanna try to use as little custom CSS as possible. And now that we have min height, we can do some cool things. I mean, back that up so we have our featured image back. On the container group, what I can do is I can do min height 100%. Let's give this a background so we can see the difference. And now you can see that background color is expanding, min height of 100% to the entire height of that row. And what's cool about that is I can update this, change this, I think this went away. Sometimes you get caught by the cache. Now you can see that if this was white, I'd now have, I mean, it's still a little funny because I don't have a featured image there, but at least my, each individual column looks consistent, not with pink, of course. You change this back over to white, but now that we have a bit of consistency. Of course, the design isn't 100% perfect, but it looks a little bit better than that, like bouncing up and down. But there's lots of different ways that you can use this min height functionality and min height is getting added to a lot of different blocks. And we're gonna see that in a second. Since we only have 15 minutes, I'm gonna hop over to my big consolidated example that we're gonna use. We're gonna talk about stacks, we're gonna talk about columns, we're gonna talk about everything. But min height is really powerful. And as we continue to expand functionality with the WordPress, more of this functionality will become available. So download install Gutenberg. It's not currently a 6.1, but install Gutenberg, check out min height, think about different ways that you can use it. Maybe custom CSS that you can ever move because there's min height. But I kind of just started playing with this recently and it can do some interesting things that you couldn't do before. Okay, so let's hop on over to, I wanna talk about the site editor. I often do not jump into the site editor and that's a shame. We should do more work in the site editor. So what I'm gonna do now is I'm gonna hop on over to this article or post. And you can see here that I have this sidebar and we're gonna build this all, but I have this sidebar and what I wanna do is I wanna create a brand new post template. So let me actually, let me go back. This is what a normal post looks like inside of 2023. Everything's centered, it's got this header image. We wanna add a sidebar. So let's assume that you've downloaded 2023 or another block theme and you wanna create a new page template that sports the sidebar. So what I'm gonna do is you're gonna come over to the site editor, we're gonna go over to templates. Now I've already created the sidebar demo, but I'm gonna create a second one. I always like to have the code available as a backup in case things fail. So we're gonna do add new and I'm gonna come down to custom template and we're gonna call this sidebar column demo. And thank you, Brian, for adding some context about the site editor there. So the site editor is where in a full site editing theme where a site theme that supports site editing, this is where you're gonna control the templates for different posts, the headers, the footers, all that sort of thing. So the same tools and experience you'd use in the block editor, you take those skills and apply them to the site editor, which we're gonna do here. So what I've done is I've added my sidebar column demo template. And I am going to come on over here and we're gonna edit this post. And I'm gonna show you now that when I go to template, I will now see sidebar column demo. And this is the one that I'm working on right now. So we're gonna switch this over and when I go back to preview, it looks the same. And the reason it looks the same is because we haven't made any changes. When you create a new template, it's just gonna give you the default template and then you can start customizing it as you like. So whenever I'm working in the editor, I always like to use my list for you, keep that open to see what I'm doing. Now, inside of this group here, I have a group for the featured image and the post title and then one for post content and then my comments. So what I'm gonna do here is above that, I'm gonna add a columns block. Now, I did notice when I was working on this earlier, this kind of overlay thing, which is not something funky that's going on there, but what I'm gonna do is I'm gonna do a columns and we're gonna, I think it has something to do with the dimensions here. So we're just gonna clear out these dimensions. There we go. Okay. So now we have our columns block and we want this columns block to be wide and we want it to be, we'll start with set it to wide, go. Okay. So we want, I'm gonna make some a judgment call and we want our sidebar column to be 25% wide and we want the content area to be 70%. So what I'm gonna do is I'm just gonna move some things around. I'm gonna move the post featured image and the post title into the content area and we'll also move the post content over there as well and we'll move some stuff around. I'm gonna remove this group. We don't need that anymore. And now we've, let's move the post title to the top. Oops, not there. Now we'll save. Now we come on over to our post that's using this custom template and we refresh now. Now we can see that we started to make some changes. We have our title at the top, we have our featured image and then we have our content below. Now this has nothing to do with columns blocks and whatnot, but I wanna point this out. Our column right now is if we look here, our column is, oh, I don't know, probably, it is 882 pixels wide. The post content block itself has that layout functionality. So it's passing those layout controls that are coming from theme.json and passing them into the content inside of it. Now we've discussed that the content layout is 650 pixels wide. Because of that, our column is wider than the content that's in it, which is why this content is centered. And the reason it's centered is because the post content block has this justification here and it's aligning it to the center. You can easily change that by just aligning it to the left. Now the content is still constrained to 650, but when we save now and we refresh, our content is over on the left. All right, so now let's start working with our side model. And again, another kind of obvious but more advanced implementation of the columns block. The first thing I wanna do is I wanna give some more space between the column, the sidebar and my content. So we're gonna come down here to block spacing, maybe bump that up to maybe three, get a little bit more space. Now on the sidebar here, I'm gonna start adding some content. And because we're short on time, I'm just gonna copy that content from the other template that I created. Again, this is not related per se to what we're doing. It's just some standard content. I'm just gonna copy these. We'll go back to the one we're working on. And I'm gonna, okay. So I have this little call to action and I have some little section here to learn. I'm gonna save this now, come back over here. And now we have our post, we have our featured image, we have all of our content. And on the side here, we have this little call to action somewhere more. You can get creative, maybe you have a list of categories, maybe you have a table of contents, whatever you want. It's a sidebar. And then if you wanted to do something like you wanted to put it on the other side, simple as that. Save that back over here. And now we have a sidebar on the right. All well and good. But this is where I wanna start talking about stacks and as well as a little bit more custom functionality. So we haven't talked about stacks yet. Stacks is a vertical flex box where the content is displayed vertically. Without any customization, the stacks block doesn't do a lot. It doesn't look a lot different than a generic group block. But with a little bit of customization and hopefully in the future it will be included in WordPress itself, you can do some really cool things with stacks. So let's take a look at our list view again and here we have our column. And inside of our column, we have our cover and our group. Before we do anything further, we need to contain this content together. So what I wanna do here is I wanna put it into a stack. So instead of just grouping it, I wanna stack them. The reason I wanna stack them is because I want to justify the content inside of that much like we did with the row where we did the space between which sent the first block to the left, second block to the right. I wanna do the same thing with the stack but I wanna send the first block to the top and the second block to the bottom. So what I'm gonna do here is there's no ability to do that. I don't have that justification space between currently on the stack block. There are some conversations in the Gutenberg developers repo about adding this functionality. So it might actually come quite soon but right now we don't have it. One of the things that we do have is we have that min height, which is super, super important because if I was to do justify space between, and again it sends content to the top and bottom or right and left, it only extends the content to the width or the height of the container that it's in. And my stack block right now, even if it had that setting wouldn't do anything because the stack's only as high as the content that it sends in, min height allows us to change that. So now my min height, I'm gonna set it to 100% of the column. So now my stack, and let's give it a background so we can see this a little clearer. Now my stack is expanding to the 100% of the height of the column. So let's save this, so it'll make sense in a second. Refresh, so now you can see that the stack is expanding all the way to the bottom of the column. We're gonna come back here and we were to remove this just to hammer home the point, now it's to refresh. Now you can see that my stack is not, it's only expanding to the width, the height of the content. So this min height is really useful, allows us to get away with less custom CSS that we need because we can just do percentage and 100. Now what I wanna do is I want this call to action to always be visible to the user. Imagine it's an advertisement that you wanna serve on your site and you always want that to be visible to the visitor. This learn more content, I wanna be at the bottom of the post. So the person's reading up through the post and they get to the bottom and I get this little call to action that says, hey, do you wanna learn more? So I want two things. I want the call to action to always be visible and I want the learn more to be at the bottom. So what we need to do is we're gonna start by separating the content. So the call to action and the learn more in sticking the learn more to the bottom. And we can do that by adding the justification space between to the stack block and we need a custom class for that. So we're gonna hop back on over to our style sheet. I pull my utility and I'm gonna copy this class over. Now this class is content justification space between. This is actually a class that's used by WordPress. It's used by WordPress for the row block. I reason I chose it here is because in the future if WordPress adds that same functionality to stack blocks then we're already using the same class and we can just remove it safely whenever that functionality is added. So that's why I chose the naming of this. But now what I can do is I can come over here, copy my class, let's go over here. We'll give it a little refresh. So that class is now active. We're gonna come over here to our stack. I'm down here to advanced, paste that in. It should be working. Let's double check. Okay, something's up here. Justification space between, let's make sure our style sheet is saved. There we go. Okay, my side, my didn't save my style sheet. So now you can see that we did the justification space between again, it puts the first block on the top, last block on the bottom. And as we scroll down now at the bottom we have this nice little learn more call to action. Now we wanna take it one step further and make this content area sticky, this, you know, this call to action sticky so that as users scrolling down the page that call to action is always sitting there. This does not really have anything to do with columns and whatnot, columns block or block or groups or rows or whatever. It's just some kind of cool functionality that you can do with a little bit of targeted custom CSS. So I'm gonna come over to my utility functions and I'm gonna copy this over. Oops, not there. So this is a very simple little class and it's using the position sticky functionality. I'm gonna talk about margin bottom in a second and I just named this whatever you could name or whatever you want. So I'm gonna come over here to my call to action and I'm gonna add this custom class to the call to action itself. We're gonna save now and we're gonna come over here to our front end. Everything looks the same but as this not saving in have a trouble saving my style sheets. Everything looks the same, but come on. Let's make sure that we save this. All the actions, sticky content, saving, refresh. Not working. Let's double check here. Sticky content, position, sticky. Why is it? I'm not sure why this is not working. All right, okay, if this did work, let me switch on over to my other template. Let's see here. Live demos would be the curse of everybody. So we have our flow, we have our sticky content. Oh, maybe that is it. Let's see here. Okay, thank you very much, Marco. That was, I had forgotten to add this in my custom CSS. Okay, so let me back up and explain why that didn't work. So what you need to do when you do sticky is you need to define the top spacing. So you could do top zero. One of the things I like to do is add a little bit more spacing like top 60 pixels, 30 pixels, whatever. So that's what was missing here. So we needed top 30 pixels. Let's do 60 just to get a little more space. Chat to the rescue, thank you very much. So we'll refresh now. So now when I scroll my content area, my call to action is always visible. Now, one of the things that it doesn't do is it overrides the content at the bottom. You can change that with an additional CSS, but that's really up to you. We are over time, I apologize for getting a little cluster there with my sticky sidebar, but I wanted to show you that this is, let's just take a quick look. I know we're a little bit over time, but I want to take a quick look at this layout here because we use a lot of the different tools. We have a group that's containing all of our content. We have columns that's giving our sidebar inside of the columns. We have a column that has a stack and the stack has some custom CSS that's justifying things to the top and bottom. Inside of that, we have a cut, we have a group and a group is containing our little call to action. And this group, I think has some CSS and custom block spacing. So we're combining all these different blocks together to create pretty sophisticated layouts. And now that we have more and more design tools within WordPress itself, like MinHeight and all sorts of things, you can really do a lot with very little custom CSS. So we didn't add much, we added a few little things. Each thing probably could be, you know, sticky content is very niche, that's very specific. That probably will never be fully in WordPress, probably more shoulded, it's probably very specific to your theme. But some of this other stuff, I could see that being in WordPress core in the future. So I'm going to leave it there and answer any quick questions that we have, but hopefully you got something out of that. Hopefully this wasn't too rambly, but I wanted to kind of showcase a bunch of different ways that you can use these blocks to really build interesting layouts in WordPress. Really without the need for much custom CSS, but when you need it, you can use it. All right, let's see here, any questions? A lot of praise, thank you very much. And let me close it out officially so we can end the recording, I'll stay around for some additional questions. Again, my name is Nick Diego, I'm a developer advocate at WP Engine. These workshops are on behalf of the training team at WordPress and more of them are available on the Meetup page for Learn WordPress. I encourage you to check them out. My personal next event will be next Thursday, we're going to be talking about Theme.json, which I briefly talked about today. We'll be diving into that pretty deep. Lots of other great talks, for example, on Monday, let's see who this is. Wes is going to be talking about navigation block, whether we're challenging blocks and WordPress. Great to check that one out. But again, check out more online workshops. Thank you so much for coming and I hope to see you on the next one. Okay, recording.