 Thank you. Yes, I'm Isabelle if you're on github at all and looking at core repos You might know me as tell the machines because that's my username over there and on WordPress slack and I am here to talk to you about layout and Layout I mean layout is a super generic term so More specifically I am here to talk to you about layout in the context of the WordPress block editor What is a layout in the context of the block editor you might ask? It is a block feature That can be added to any block that has in a block so any block that's a container for other blocks can potentially have layout and In order to add layout to a block you would go into the Lock.g.json file and you would add this Experimental layout inside the supports object and you can set a default Layout type in there also so that would be the default for default layer for that lock and This sounds amazing because you know in the context of site editor editing we Layouts are a very necessary thing but before you get too excited about it. I want to add a couple of disclaimers Nothing is perfect, right? So disclaimer number one is that Some layout types only work with block themes or hybrid themes that a little a little bit of explanation about the terminology block themes are themes that are geared to work with the site editor and they're generally composed of HTML templates and A theme.json file which will give you all the style information for that theme our hybrid themes are Essentially, they're classic themes so themes that are built in like as WordPress themes have always been built But you chuck a theme.json file in there So that you can make use of some of the extra styling functionality That that comes with block themes So the essential point here is that both these types of themes have a theme.json file And that's the reason that some layout types Only work with those themes because they depend on certain settings in that theme.json file and Disclaimer number two is that Layout only works with blocks that render their inner blocks with the use inner block props hook So if you you're trying to add layout to a custom block and it doesn't work The chances are especially if it's a really old block because most blocks now they use this hook What it looks like in the code is something like this so in your block edit function You'll be adding the use inner blocks props hook to the container of those inner blocks If Your block edit function is not structured in in this way then the layout functionality won't work Cool. So what does this layout thing actually do? You might be asking at this point and this is where I jump into the demo and That's actually okay, so let's look at the block editor And I don't need me clicker now And we have here a group block Right and the group block by default Comes with a layout type now This is okay, so a couple of things that I should add before we jump fully into the demo the What I'm demoing here is the beta 2 for the next WordPress release So that's the 6.2 release which should be ready sometime in March So what we're going to be looking at is the very Latest features that are going into the next WordPress release so the most up-to-date stuff possible and The other thing is that the theme being used here is the 2023 default theme and that is a block theme so if if you By any chance are more used to classic themes There may be parts of the interface that are not familiar to you, but I'm hopefully I'm going to explain everything as we go along cool So this is a group block and group blocks by default come with a layout type that we called constraint and that the constraint is because they're inner blocks have a specific content width and They will not go outside of that content width unless they are actually set So I have an image block here and in the alignment settings of the image block I could set it to wide width and it goes a bit wider Notice that it's now wider than the actual text inside the block or I could even set it to full width and These are settings that in the block theme universe are only possible when the parent of that block has a Constrained layout type that sets a content width because you can only have a wide or a full width in relation to a content width that's not wide or full that's like narrower and that's that's the logic and If we look in here inside the sidebar We have a layout section and there's a little toggle here that says inner blocks use content width And it's set on which means that the inner blocks are using content with now I can set this toggle to off and what happens is suddenly There's no content width and these Blocks inside the group are just taking up whatever width they have if if that text Was bigger than it would just go right to the end of the page So there would be no limitation at all. So this essentially behaves like vanilla html pretty much the only thing that makes this layout type different from vanilla html is that It sets a spacing between Each block so there there'll be a top margin applied to every block Except for the very first one the first one doesn't have any margin as you might be able to see and that's top margin Comes from the spacing value that can be set in the theme.json Just as the content width is set in the theme.json and that is why neither of these layout types will work without a theme.json Some more controls that we have if we are using content width is these two fields Which may seem weird like maybe at first glance when you look at those you might think I need to fill these in with some value You don't need to if you don't fill them in if you leave them blank Then whatever the theme.json sets as the content width will be used However, you can fill them in and then you can have like I don't know content width of 300 and it's set a wide width of 600 and then The blocks inside will respect that For instance But if you clear it the theme always sets a default so and Then lastly we have these justification controls by default when there is a content width all the blocks are aligned to the center But you can align them left or right Now this justification in the text universe is usually used a bit differently It means that your whole text block is either aligned to one side or another in this case We're aligning the blocks themselves. So if you have Text so you can see that that paragraph block up top isn't actually the text isn't aligned to the right Because it's only the block that's being aligned not the content of the block cool, so this is Pretty much all we can say about these two types of layout The group block is interesting because group is the only core block that has or can take any of all the types of layout that we have So with those controls up there in the top Right hand corner we can transform What was a group lock into a row and that means that suddenly all its children are side by side and No matter how many children there are Unless I'll show you the controls. So here in the sidebar. We have a completely different set of controls now One of these controls allows us to wrap the contents to multiple lines so the contents will just take up whatever natural space they would occupy as blocks and If if there's no more space in the horizontal then whatever other blocks are there will just wrap underneath But if you set it to not wrap then potentially that they'll just squeeze into a Small as they can go and always keep on the same line So that's interesting, but most of the time we probably don't want to do that and now I have to Okay, cool, let me just get rid of that What settings do we have for roblox then you might ask we can set so we can Kind of toggle the justification But if there is a really big block inside here and it's taking up all of the space Then that's not really going to work if this image was smaller for instance We might be able to deal with this So yeah, so you see we can change the justification We can make it go all to the right or all to the left or we can add space in between the blocks The other thing we can do is change the orientation and when we do that It actually becomes a stack block, which is sort of another. Well, basically the name of a group block with this kind of vertical Orientation and how is that different from those other layout types that we saw at the start? It's because these stack blocks can also be Can also be set in different ways so we can change Vertical alignment in the stack block doesn't do anything much unless it has a height But the justification does so we can align them we can Make them Stretch which kind of is only visible if I set say a background color. So you see how If the stack isn't stretched by default, it's just going to be aligned to the left But if you stretch it it'll occupy all the space But these while some of these controls maybe don't make a lot of sense unless we're actually looking at full layout So let us go and look in the site editor and see what what Practical applications these actually have in the context of templates So this is a site editor This is the list view that sort of shows us all the blocks that we have in the site editor And I'm going to open the settings tab so we can see our layout settings You'll notice that there's this middle section, which is a group block. It has a content width All its blocks are actually wide aligned and so That's why we see it a bit wider than we were seeing that group block in the block editor But the more interesting thing in the site editor here is the row the use of the row block in the header So Header is wrapped up in several little blocks There's a first layer of group block that gives it the wide content width to match the main content area and then we have a row block and this has a Justification set to space between so we have one item at one end of the row and another item at the other end We could change it but Basically, this is how 2023 comes by default now supposing I wanted to add a slight logo in here because you know You want to have your logo at the top of the page And I kind of these buttons buttons do not look good Okay, so let's say I want my logo here at the top left hand corner of my header But then I have the site title it because with the row block we've spaced the items to have space between The site title is suddenly in the middle, which doesn't really look good. I want it to be sitting next to the logo So there's a bit of new functionality coming out in 6.2 which allows us to set a Relative size for children of row and stack blocks And that means that we can use it to position those blocks inside the row or the stack So if I go in here So these are the settings for the site title block and I'm going to go into styles That starts to have these these two tab system in the sidebar is also a new thing It's coming out in 6.2 because they were starting to be a lot of controls for each block And so they were now split into settings and styles. Hopefully to make things a bit tidier Now if we go here under dimensions, I hope all is that even visible? That's at the very bottom of the screen Okay, maybe you'll just have to believe in me There is a dimensions panel at the very bottom right-hand side of the screen Maybe you can see it there. Yeah, you might be able to see it on that screen. I can try to zoom in a bit if that helps Yep, and in the dimensions you'll see that we have a width dimension and if we open that Oh bugger, how do I get out of this now? Yes, if we open that we have a toggle with three values the default values fit and then we have a fill value and The fill value magically stretches that item to fill all the available space all the remaining space of that Container block that's not being used by other blocks And that means that I can now push out the site title to sit next to the logo Which I think is kind of cool There's another thing that we can do with this toggle which is set it to fixed and in that case we can specify a fixed width So I wanted it to be like 500 pixels that could also work if I wanted to sort of you know position it We can use other values than pixels here. There's percent M rem viewport width and viewport height Which can come in pretty handy Yep, so that's essentially what I wanted to show with a head arm. What other things can we do? Yes There's another pretty neat application for these new tools, which I will show you in a different template Which is The let's look at the 404 template So the 404 template has a bit of a problem Which is I might have to zoom out. Did I zoom in I might have to do math again In its natural state the 404 template doesn't have a lot of content It just has this search bar and that means that when we have a footer The footer just sort of floats awkwardly in the middle of the screen. It doesn't stick to the bottom of the page designers do not like that sort of thing and So they're constantly trying to come up with ways of this not happening And now I am pleased to tell you that in 6.2. It will be possible to Not do this and I can show you how So List view again We have three elements on this page A header so basically three sort of template parts a header a main content area and a footer And what I'm going to do is I'm going to select the three of them and I am going to wrap them in a group And you'll see why I'm going to wrap them in a group and I'm going to turn that group into a stack block Okay, now something weird happens with the layer because the stack block by default compresses all the items to the left-hand side and that header is now looking extremely weird But we can change that in the stack block settings by setting the justification to stretch And that means that all of the blocks will now occupy the full extent of the screen and it looks decent again But the the thing that we want to do is make the footer stick to the bottom Okay, so how are we going to do this the stack block in its styles? And this is another feature that I'm pretty sure is a six point Two feature. Yes, it is which is minimum height We can add minimum height to a block that's under dimensions in the in the sidebar and The minimum height can be set in relative units such as viewport height Now what viewport height for those of you who might not know It pertains to the height of the actual viewport So the values would go from one to a hundred and a hundred is a hundred percent of the height of the viewport But if we set this to a hundred percent Because there are always headers and sidebars and things like that. We're going to get a scroll bar We don't really want that because it would be a bit silly to have a page with no content in it and the scroll bar So we never set it to a hundred, but if we say set it to about 90 then that will make it look pretty decent and And Footer the foot is still floating up there the way that that didn't work So there's one further thing that we need to do which is now we grab the main content area Which is a child of a stack block and so it has those sizing controls that allow us to to Arrange it proportionally to its parent and we go into styles again dimensions. Where are we? Dimensions are here and now we have a height control and the height control appears because what we Control as a child of a stack group. We're interested in controlling the height If it were a row group as we saw earlier, it will be the width, but we get the same set of controls which is Fit which is the default and then fill and then fixed and now hopefully if we set it to fill Yes, our footer has been pushed to the bottom of the page So that works now. I think it works pretty well. What else do we have? Ah, ah, there's another really neat feature that I want to show you Should we save this? Yes, let's save this. This looks a lot much better than it did Cool, let's go back to the home page because this feature that I'm going to show you will only work In the opposite scenario, which is we have a lot of content to scroll through So how many of you have ever wanted to implement a sticky header on a website? And it's never really been possible to do that before the site editor, but now it is Again, I'm going to I need I always need the list view to navigate the site. There's so many blocks But this view is super helpful because it gives you an index of all the blocks and their children and So yeah, I this is a total life saver for me So what we can do if you want to make a header sticky what we have to do and this this may seem very unintuitive But the first thing we have to do is wrap our header in a group And this is because the header is a template part block type It's kind of a it's a templatey thing It's not really a blocky thing and so it doesn't really have styling controls. It doesn't have any controls at all So we have to wrap it in a group block because the group block is the one that has the controls now the group Block by default will apply a content width and so we have to turn that content width off We actually Hang on where was I yes group block no content width But now we have a group block we can go into this See that sidebar panel that now appears which is called position It has a little drop down and the only possible values right now are default and sticky But that sticky is the one that we want so let's make it sticky and now if we scroll Hopefully if we why can't I scroll? Yes if we scroll our header is now sticking to the top of the page But it looks like crap because the background is transparent So the other thing that we have to do is give it a nice background color could be white could be Grayish off-white whatever. I mean it could be green if you want. It's probably not great as per the Colors talk immediately before mine. Yeah, so let's make it great. Okay, so we have a sticky header With not a great deal of work. Yeah, and I Think that's pretty much it for the demo. How am I doing for time? What Eight more minutes. Ah, that's pretty good. Yeah, cool. That'll be enough. Let's go back to our slides and Slide show and now I need my clicker again. So the demo has been done What's next you may ask because layout is a feature that is being continuously worked on so layout is still actually an experimental feature and The next step are well in my agenda at least if I'm allowed to continue working on it is Stabilizing the API now. What do I mean by the API? It's what allows us to set the layout support in a particular block and Currently you can add layout in into a block as we saw in a previous slide But it's still Experimental layout and what we want to do is take that experimental off it and make it called only layout Now the major step that still to do there's been a lot of continuous improvement Consolidation making them Of the internals work more seamlessly making them work with different types of block structure, which is kind of a challenge There's been a lot of optimization of the styles that are put by layout There there are lots of there can be conflicts, especially with all the themes that have style sheets with CSS in them So the idea is that the layout styles should have the minimum specificity possible But they still need to be specific enough that they actually work So that's that's been a bit of a challenge But the major step I was saying that still to go is to allow Enabling and disabling it at a block level in the theme.json file So when you're a theme.json file, I think I have a code. Yes, so when you see theme.json file On the settings you can have a block section and you can for each individual block like core block type You can set or unset Certain features and the goal is that currently if you try to do that You might see the squiggle the squiggle means that it's looked at the schema and it doesn't recognize that property So that basically doesn't exist. So if you try to do that, nothing will happen the idea is that That so there's a little bit of work to be done in the back end to wire it up But the idea is that once it's done anyone would be able to go into their theme.json and either enable or disable layout for any block. I mean Only use it for blocks that have in the box if you try using it on blocks that don't have in the blocks Then nothing will happen because layout really only applies to containers So if your block isn't a container then, you know, there's nothing you can do Cool, what else this one's exciting this one's actually really cool Which is exploring a grid layout type. Now grid as in CSS grid, if you know CSS is a really cool way of making layouts responsive and making actually potentially really complex layouts with several columns and different types of widths and in core what this might look like Initially is a layout type that can be applied to blocks. I actually optimistically created an issue recently and the thing is this has been talked about forever But every time that this issue gets brought up It's usually designers get super excited and they go all like there's been a couple of issues like this opened by designers And they're all yes, let's create this grid system where each template has like a 12 column grid And then you can snap the blocks to it and and it's perfect It's like that that sort of design system vision that designers have and it's great and I love that idea It's awesome, but it's also going to be really complicated to implement and so I'm rather hoping that we can like start with baby steps and Create a layout type and start playing with it So that's still to come sort of in the Near to medium term future That's another issue about grids grids grids are excellent grids are great The next thing the very probably one of the very next things for the next release is going to be another type of position So you saw sticky which is really cool The other type of position that we might have pretty soon is a fixed Position type and actually some of the code to wire it up is already there. It just hasn't been done yet because Sticky was sort of the first position type. It's kind of the easiest to implement in a way so it was like Experiment with this and then see if it works and fix which is a bit more complex. It will require controls to actually Determine where we want the block to be fixed like in what position on the screen but that should be coming up fairly soon and Next so this this this seems so small but it's adding a layout adding so adding a layout support to the cover block and You think the cover box already have it like people have been asking for this for ages It's especially a problem for folks who build hybrid themes because that's them When they add a theme dot json to the theme it to the to the theme. It suddenly forgets that the classic theme defined content with and So it can it can throw off the whole layout for the theme So now yeah Cool and this has actually been pretty complicated because the cover block has a completely different markup structure from most other container blocks So that required a lot of rethinking of how layout actually worked Which is why it hasn't been done yet, but there is a poor request open on Github and We're working towards it So if this is one of the features that you've been expecting to see Expect it soon in the next version of the plug-in. Sadly not for 6.2, but coming. How can you help? Last but not least if you want to get involved go over to The Gutenberg repo on Github and if you can code help out with code If you can't code help out with testing test the latest versions of the plug-in open issues If you find anything wrong complain to us, please. We love complaints. We love feedback Negative politely worded negative feedback is great. It is super helpful to us So yeah, please do get involved. There's a layout um Label in the repo which can be helpful to find issues related to this specific feature And that's it. This is my cat Charlie and thank you for listening to me