Layouts are a fundamental part of how block themes work: Layout allows us to define the width of our post content, and arrange blocks horizontally or vertically, right or left aligned, inside container blocks. In terms of block styling, Layout is a complex feature because it affects child blocks in ways that go beyond CSS inheritance.
In this show, Isabel Brison, Andrew Serong and Justin Tadlock discussed the opportunities and challenges of the Layout features for site builders, and answered questions from the audience. The transcript is posted below the shared resources.
Isabel Brison’s demo starts a 11:00 timestamp.
A walk-through of layout classes in WordPress 6.1
Resources to learn more
- Fixed position header issue in GitHub:
- The PR that implemented sticky position support:
- Issue for sticky position follow-up tasks:
- Screengrab of wrapping a header in a sticky group block:
- [Feature Layout] label (all issues in the Gutenberg repo in GitHub that are currently flagged as being to do with the layout block support):
- Tracking issue for layout follow-ups (updated intermittently as there’s progress to share): https://github.com/WordPress/gutenberg/issues/44720
Transcript
Birgit Pauli-Haack: I know that people are coming in here already. We have a few participants here. Hi there, welcome to our 33rd Gutenberg Times Live Q&A. My name is Birgit Pauli-Haack and I’m your host, curator of the Gutenberg Times and developer advocate for WordPress. It’s wonderful to have you all here. Happy New Year, welcome, and today’s show, we will discuss the opportunities and challenges of the layout features for site builders with the experts, the parents, so to speak, mom and dad of the layout features. And I’m extremely honored to have Isabel Brison, designer, developer, JavaScript engineer and core contributor on the show. Also Andrew Serong, also full-time developer, contributor to the Gutenberg Project, goes by the title Block Mechanic, and also sponsored by Automattic on the Open Source Project. And last but not least, Justin Tadlock, developer advocate, theme and plugin developer, member of the core team and former writer of the WP Tavern, now working for Automattic and prolific educator on the developer blog and Hallway Hangouts.
We’ll do some proper introduction in just less than a minute. Just a few housekeeping notes. For those of you watching this on the YouTube livestream, use the chat box next to the video player to post your questions. And you can test it by letting us know where you’re watching from. The same goes for the Zoom place, but there are two places. One is the chat bubble for all your comments and your greetings and thoughts, and then the Q&A section bubbles for your questions that we then answer in a bit. And please be kind, even if you disagree. This is a family-friendly endeavor. So, what’s the show about? Layout is a fundamental part of block themes. Layout features allow you to define the widths of your post content and the range blocks horizontally, vertically, right, left, and all sides in container blocks.
And in terms of block styling, layout is a complex feature because it affects child blocks in ways that go beyond the CSS, cascading style sheets inheritance. It’s probably part of the complexity that leaves some users a bit confused on how to deal with the various layout features and how to combine sections to a good page layout, and how this all fits into the block theme building process on template parts and the theme JSON. Before we answer your question, what is a container block, and more, allow me to introduce our expert. Then Isabel will give us a demonstration of the various layout features. And by that time, we probably have an array of questions that we can then tackle here as a panel. Isabel, you have been working for Gutenberg Project for a few years now. Lately, you worked together with Andrew on the layout features. What other parts of Gutenberg did you work on before that, and how long have you been at Automattic?
Isabel Brison: Oh, yeah. Before this, I think the major thing that I worked on before layouts was the navigation block. That was over a year ago now. And a feature that actually didn’t make it, which was a navigation screen that was meant to replace the classic menu screen. And yeah, that unfortunately got canned. And before that, we had this whole push to try and get bits of block editing in place for classic themes. We also did the Block Widgets Editor, that was another one I worked on. And yeah, I sort of float around and try to tackle accessibility issues when I have a bit of time between the major projects too. That’s sort of a passion of mine, and there’s a lot to do in that regard, always.
Birgit Pauli-Haack: Yeah, always. Yeah, that’s true. Yeah. Well, where you’re located and what do you do when you’re not working?
Isabel Brison: I am in Sydney, Australia. And oh, I don’t think I answered the bit of the question about how long I’ve been at Automattic. I’ve been at Automattic for, it’s going to be four years this year. I joined mid-2019. It has been a while, but it feels like it has gone really quickly.
Birgit Pauli-Haack: Well, but in Gutenberg years, it’s kind of three quarters. No, 80% of the Gutenberg development time, you have been part of it.
Isabel Brison: Yeah, it feels weird to think I joined kind of at the start of the thing, when it was already in core, but it hadn’t been in core for very long and so I’ve seen it grow and yeah, it kind of feels like my baby now. Like, oh.
Birgit Pauli-Haack: Yeah. What do you do for fun when you’re not working on a computer, or how you get away from the computer?
Isabel Brison: Oh, all sorts of things. I get away art, gardening. I like to go outside. No actually, you shut the computer down and go outside and get fresh air. I do a lot of gardening. I like growing herbs and veggies. I like going for walks, healthy stuff. And yeah, no, I do a bit of artwork on the side too, those, all sorts of things.
Birgit Pauli-Haack: Awesome. Yeah. Well, I’m so glad you’re here. Andrew, what have you been working on in Gutenberg and before you worked on the layout features, and what made you select the title of Block Mechanic?
Andrew Serong: Ah, that’s a good question. Yes, I think I started contributing to Gutenberg more actively surrounding how to interact with patterns and block patterns. That kind of quickly led on to contributing to design tools, because to have really great patterns, you need to have a lot of flexibility in design tools. And then I naively picked up what I thought was going to be a really easy issue to implement, of adding gaps between child blocks. And I thought, “Oh, that won’t take too long.” And like a lot of things, the first prototype only took a couple of weeks or whatever to put up, but then very quickly when you start digging into it, it then turns out there’s a whole load of complexity to wrangle, and that was both exciting and also a really big challenge. And so I figured, “Oh look, I’ll just put up my hand and give this a shot.”
And so then quickly found that there’s a difference between setting gaps on flex blocks versus things that have flown, and having vertical margins and things. Hopefully, we’ll get into that on the call, but it sort of led to picking the name Block Mechanic. My job title is officially JavaScript engineer, but engineering often sort of sounds a bit highfalutin or whatever, like you’re going to do big systems design and everything. But I think a lot of our job really is fixing the nuts and bolts and taking something apart and putting it back together. And so I don’t really consider myself an expert. I’m really more a generalist that is very keen to jump in and see if I can help move things forward. I kind of like a pragmatic title like that, personally.
Birgit Pauli-Haack: Excellent, yeah. And where are you located?
Andrew Serong: I’m also in Australia. Up until a couple of weeks ago, I lived in Melbourne, so Melbourne, Victoria, the second biggest city in Australia, but I just recently moved to the country about an hour and a half away. So, getting adjusted to a different quality of life, but it does make me very much appreciate working remotely because pretty much my whole life has changed, but work is exactly the same, which is really, really very nice.
Birgit Pauli-Haack: Oh, I appreciate that. Yeah. Yeah. Good. Justin, and you have been in the same space for almost as long as WordPress has been in existence. Recently, you switched from writing for WP Tavern to working for Automattic as a full-time contributor. And recently, you wrote a few tutorials on the official WordPress developer blog, and just today, we published your post about the layouts. Yeah, do you want to briefly talk about what you are doing and where you’re from and what you do?
Justin Tadlock: Yes. I’m a developer advocate with Automattic since last May. Now, I don’t know how to define what I do sometimes. I kind of bounce around, but mostly my goal is to teach, to carry other people along this WordPress journey as best I can. And I’m glad we have the developer blog up and running, even though it’s still in beta. I’m hoping to be a big contributor there and write about layouts and everything else WordPress related. I’m from Alabama, in the United States, that’s the Southeast region. And I live not in the city, but a little bit outside of the capital of my state.
Birgit Pauli-Haack: All right. Are you going to Wordcamp in Birmingham?
Justin Tadlock: Somebody just asked me that today. Not as of right now, but I could be convinced to still go.
Birgit Pauli-Haack: Okay. Yeah. Yeah, let’s start at the beginning. I’m thrilled you all three all agreed to come here and be part of this Q&A. I’m really sorry, listener and watchers or viewers, yes, I saw that the chat is disabled, but somehow I tried every little button there and I can’t enable it without probably going into the settings of the webinar and stop it. Yeah, feel free to just put your chat in the Q&A and we kind of sort it out. Sorry about that. All right, so container blocks are group blocks to answer that question, column blocks, button blocks, social link blocks, cover block. Yeah. And now as promised, Isabel, are you ready to start us off with a demo?
Isabel Brison: Yeah. I’ll share my screen.
Birgit Pauli-Haack: Excellent, yes.
Isabel Brison: Share screens.
Birgit Pauli-Haack: Share the screen and I’ll try to figure things out with the chat thing.
Isabel Brison: Okay. Can you see my screen?
Birgit Pauli-Haack: Yes.
Isabel Brison: There should be a cat picture on it.
Birgit Pauli-Haack: There is. That’s a cute cat.
Isabel Brison: Yeah, okay, that’s the correct screen. Right, so layouts are a feature that came in with site editing pretty much because in classic themes, you used to just the theme also used to just figure out the layout themselves, writing CSS to space blocks and create columns and things like that. But with site editing, we have to provide mechanisms, that is the block editor has to provide mechanisms that allow people to do that layout work themselves. This is what the feature is meant to do and I’m going to showcase it. If you see my screen, I have actually the post editor open because all of these features that can be used in the site editor can also be used in the post editor. And if you’re showcasing single blocks, I feel like it’s easier to showcase them in the post editor because it’s a simpler interface.
Here we have a group block and you can see the outline here. This group, it has got a few blocks inside it. And if you go into the block settings, that’s actually not selected. So now I’ve selected my group block, and if you go into the sidebar where the block settings are, you’ll see that there is a tab called layout. And this has a bunch of controls. In the group block, you basically have two states where you can have the state. This most basic state of layout is it doesn’t do anything except provide a bit of spacing between each block. So, there’ll be a bit of a margin between each of the blocks inside the group. And then the further to that, the other, so it’s actually a different type of layout that you get when you toggle this toggle on is the same, a few spacing between the blocks, but you get content with two.
If your theme defines a content width, that content width will be applied and the blocks will go no further than that particular width. Here, this is the theme. The theme, this is 2023, I should have said, that I’m doing the demo on, and the content with … You can see it in the site editor, if you go into the styles tab and into layout. This is global styles and in layout, here we can see that the default content width for this theme is 650 pixels. That’s the width that these blocks should be respecting when that content width inside the layout is toggled on. But these, the sort of vanilla and the content width aren’t the only kinds of layout that we have. And the group block is pretty handy to showcase different types because it actually works with all different types of layout.
You might not realize that at first sight, but group block, roadblock and stack block are essentially all the same block. And you can actually toggle, so if you have a group in this up here at the top in the sidebar, you can actually toggle between the different types of block that group can be, so row, stack and group, and they all have slight differences. So group, as we’ve seen, deals with the content width, roadblock has a flex layout. And what this means is that all of the elements inside the block will be side by side as long as there’s space to contain them. You can actually force them to always be side by side even if there’s not a lot of space. So, you can get the blocks go really, really small and narrow, and all try to fit on the same line. And that is also a layout setting.
If we select the row here and we go and look at the layout tab once more in the sidebar, we’ll see that these controls are completely different from the group controls. And because it’s a flex block, we have a bunch of different options where we can justify here. You actually, let me close this. Okay, now we have a bit more space and we can see what these justification options do. With the row, you can justify all the content to the left or to the right or center, or you can add space between the blocks. And if you change the orientation, it becomes a stack block, essentially, because stack blocks are also flex layout blocks, but instead of being laid out horizontally, they’re laid out vertically. Now the only other control, going back to the row that I haven’t actually showed, is this toggle that tells you that you can wrap to multiple lines. And what happens if you toggle that on? Actually, do we have the row blocks selected? If we toggle that on, it should do something it’s not doing.
Andrew Serong: You might need some more content on that line.
Isabel Brison: Yeah, that’s what I was thinking. Yes. If you have enough content or there is not enough space, that toggle will enable the content of that row to break into multiple lines, but you don’t have to do that. If the toggle is turned off by default, and that means that everything in that row is going to sit on the same line forever and there’s no changing that, even on a phone. Okay, but what can we do with these layouts? It’s all fine to look at blocks and add random content in them. Let’s go into the site editor and actually see, in terms of laying out your website, what are the practical effects of these controls? Okay, so here we have, here in the site editor, the list view is super handy for navigating because you tend to have a lot of wrappers. In order to create an elaborate layout, you almost always have to nest groups and rows and stacks inside each other.
And that means that the layout and selecting the blocks can get pretty complicated. So, I do recommend that you use the list view to navigate through all your blocks in the site editor. And it’s also the most accessible way of block navigation currently. Here we have a header, it has a group in a row, and you have the body which also is wrapped in a group. And actually, let’s go into the settings because we were in the global site tab. This group block that wraps the whole content has a content with the way layout. And let me just zoom out for a bit, and let’s make this small so that we actually see, so now this is tiny and you can actually see that there’s this block of, this is the group block and all its contents is sitting sort of inside in the middle, and it’s respecting that content width. And what I want to do, maybe I should zoom back in a little bit.
I wanted to show these justification controls that you can see when you have this group layout and you can choose to justify. By default, your quantity is going to be centered if it has a content width, but using these controls you can push it right to the right or to the left. And what that does is just reposition the whole block of content to one side or the other. And that’s kind of different from the similar controls that we have in the flex layout because this just repositions the whole block. It’s not looking at individual child items inside it. And it definitely is not justifying your text, in case you might wonder. If you have a block of content that has text in it and you decide to justify it right or left with these controls, your text is going to stay in exactly the same place, as you can see here. It’s only the block that’s going to be moved, the whole block of content.
Okay, what else can we look at here in the header? Let’s go in and see some flex blocks in action. In the header, we have a group that is basically the only thing that this group is doing here is allowing the content width to be defined on its children. In this case, it has a single child, which is a row block. And the row block, what it’s doing is positioning. It’s allowing us to position the site title and the navigation on opposite sides of the block. So what we have in the row, we have a space between justification selected. That’s what it does. It just pushes all the elements inside the row in a way that they will have exactly the same space between them. So, we can see if we add another block in here inside our row, I’m going to add a site logo because that’s something that you might also want in the header.
And I’m actually going to push it, these text buttons, so the horizontal move aren’t doing too well. We need to fix that. Okay, now I’ve pushed the site logo to the far left, and now I have the site title sort of in the middle and the navigation at the end. But what I really want is for the site logo and the title to be side by side. Now we actually, as of last month, in the plugin, we have a way to do that. And so what we added was the ability to manipulate the size of the children of flex containers. In this case, the row is our flex container and the site title is a direct child of that container. And so in the site title settings, I hope this is not too small to see. If you go in here under dimensions, you have a width control, which may or may not be visible.
You might have to go into the dimensions menu and actually select it if it’s not visible. And this width control, I’ll zoom back in because this is practically invisible. This width control has three options. Fit is the default, it basically does nothing. But if you select fill, then that block is now going to occupy the maximum space it can in its container. And as you might see, that has in fact pushed the site title to sit next to the logo because now it takes up all the remaining space. So, you have that nice space between site title and logo and navigation, which is what we wanted. There’s also another option in here that you can play with is the fixed width, which allows you to set a fixed width. I don’t know, I could go 800 pixels, and suddenly this is really big and it doesn’t fit in a single line, but we don’t want to do that, do we?
Okay, what else do we have? Oh, there’s a really, really exciting feature that has just, just been merged. I don’t think I mentioned this, but what you’re seeing now, this demo, is the latest Trunk. If you go into the Gutenberg repo and check out Trunk and build a local development environment, this is what you’re going to see. And only yesterday, a very exciting piece of work was merged that allows us to position blocks. And currently, the only way that we can position them is sticky. But that is actually super useful if you want to create a sticky header. And I’m going to show how you can do it.
Now, due to the way that sticky position works in CSS, we have to make sure that the element that we want to make sticky is inside a container that’s scrollable. And because of how our template parts work, you’re not really able to add stars to template parts themselves. If we want to make our header sticky, we actually have to wrap it in a group block. Fortunately, that’s pretty easy to do because in the header controls, you can just click group and that will wrap our header in a group block, as you can see. And now with the group block, if we scroll straight down … Oh, wait a minute, I don’t see the position. Let me reload my site. Is it possible that I’m not on the latest version of Trunk?
Andrew Serong: Quite possibly. It was just merged yesterday.
Isabel Brison: Quite possibly. Yes, it was just merged yesterday, but I was pretty sure that I had built it and I was on the latest version of Trunk, but oops. Oops. Where has my demo gone? Yes. Okay, let’s check that again. I’ve just reloaded, I need to redo the header. Come on, group and position. Indeed, I had not reloaded the page since I rebuilt Trunk.
Andrew Serong: There it is, saved.
Isabel Brison: Okay, now the position control has a dropdown, which currently only allows us to select one option apart from default. And that option is sticky. If we select sticky, hopefully now we scroll and as we are scrolling, we see that that header is sticking to the top. Now, this is not super visible because the header’s background is actually transparent. So, this feels a bit confusing. Let’s add a bit of background. Let’s say let’s just add a little gray background color, and now we can see. Now, that’s a lot more visible.
Okay, this is the new thing that we can do, which is super exciting. Of course, we can position any kind of block, but currently the control only works with group blocks, or groups, rows or stacks, which are essentially all a group block. And we have enabled that in the group block because it’s a new feature. To start with, this is the most obvious block to do it in. That doesn’t mean that it might not later be applied to other types of blocks, so that depends on the usage, that depends on the feedback that comes in. It depends on a lot of basically, how are people going to use it? How useful is it going to be? I think it’s going to be pretty useful.
Andrew Serong: Yeah, me too. Probably an interesting thing to mention about position support as well was that when we started working on it, we were thinking of it as just another part of layout. Because we’re laying out a website, you kind of think, “Oh, these are all layout tools.” But through the discussion, we determined that one of the unique things about layout is that it applies to container blocks, so a block that can contain other blocks. And so a lot of the controls are surrounding how do you arrange children of a container? Whereas with position, within, I think one of the designers mentioned, wouldn’t it be cool to be able to move an image block, like just have it moved to the left slightly or have some sort of asymmetrical layouts? And so that then made us think, “Oh, well maybe position is actually its own block support, so it has its own panel.” And so we borrowed a lot of the code from layout and it sort of sits adjacent to the layout. It’s technically separate from the layout block support, but it still shares a lot of the same code.
Isabel Brison: Yeah. Yeah, that is true. I think we’re pretty much done. I just wanted to show another thing, another little gotcha. Particularly with the recent ability of adding spacing or adding sizing to child blocks of flex, so we saw that in row, in a row block, if you want to create spacing between, if you want to push a block to one place … Say if I want this block to be next to the first one, and if I want there to be more space here, then I can go in into the dimensions and fiddle with the width of that block. But in stack, which is the vertical equivalent of the flex layout, that won’t actually work because stack has as its height, it always takes up the content height. Again, this is a reflection of how height works in CSS, whereas usually the maximum width of something is the width of the screen, the height is the height of the content.
And that’s something that can actually be pretty confusing, especially if you don’t know CSS. In the stack block, you couldn’t just go in and select this block in the middle and give it, if you make it fill the available space. Well, the available space is just the space that those blocks occupy, so you can’t actually push it down. I guess you could give it a fixed height and then that would work. But if you wanted it to just fill the remaining space, your container block would need to have a fixed height. And now, we have that possibility because we can add to container blocks under dimensions, we can add a minimum height to them. And so I could say I want this whole stack block to be 900 pixels, and now I have a bit of extra space and I can choose to maybe make or maybe create a space between the first paragraph of text and the photograph, for instance.
We can play around a bit more, but remember that for stack blocks, if we want to have a bit of extra space in them, then we actually have to give them a defined height. And that is pretty much everything that I wanted to show. So, questions?
Birgit Pauli-Haack: All right, well, wonderful. The privilege of a panelist is that you can have the first questions to demos. So Andrew or Justin, you have a comment or a note or a question for Isabel, go right ahead before we take the audience questions.
Justin Tadlock: Yeah, actually, are we going to see grid layouts at some point, like we have with flex?
Isabel Brison: That is a great question. Yes, definitely. And that is something that I would very much like to see done, and will probably be working on sometime this year. Grid is interesting. It is super useful because although pretty much at the moment we are using flex to create two dimensional layouts, and that’s not quite the right way to use flex. In my mind, flex should be used more for the detail, for small elements and not for whole layouts, because it becomes quite difficult to manipulate it with precision in larger, full-page layouts. And that’s why we see bits, you have flex in your header, you might not have … You won’t have the whole page wrapped in a flex block, but grid is super useful for creating full page layout. The difficulty with grid, the challenge is going to be because grid in CSS, the CSS grid spec is super complex, and there’s millions of things that you can do with it. So how can this be best translated into a UI?
And that’s, I think, and that is one of the biggest challenges in creating design tools for Gutenberg, is exactly that problem of translation of essentially the underlying implementation is CSS, and what is the most useful, what are the most useful controls that we can provide that reflect the abilities and the plasticity of CSS but are a usable and are intuitive to understand? You don’t want to just grab the whole CSS spec and translate it into UI, because that would be chaos. I mean it would be fun and interesting, but it probably wouldn’t be very usable. So yeah, that’s going to be a very interesting challenge to tackle in the coming year.
Justin Tadlock: Yeah, I figured I’d just throw the hardest question out to start with.
Birgit Pauli-Haack: Yeah. Well, let me go through the questions and Glenn Martin has been waiting for quite a while to answer his question, and it’s hopefully an easy one to answer. “In the site editor, is there a way to create a menu with the images instead of text?”
Isabel Brison: With images, a menu? Oh, I see. Oh that, interesting. I think, am I still screen sharing? I’m still screen sharing.
Birgit Pauli-Haack: Yeah, you’re screen sharing.
Isabel Brison: Let me try something.
Birgit Pauli-Haack: On the fly.
Isabel Brison: In the navigation block we have links. I’m assuming that what you want to do is to, instead of having the text, have an image link. Because this is rich text, we should be able to add inline images. If I want to add…
Andrew Serong: As an aside, I love your image gallery. More cats.
Birgit Pauli-Haack: More cats, yeah.
Isabel Brison: Yeah, technically you could do that. This is a page list. With the page list, actually, it just gives you a list of all the pages that you have. You can tell this is a test site because the only page I have is a sample page, but we can actually make the page list editable, and that converts it into a bunch of links. And so technically, because this is now a link, we could actually go and do the same and add an inline image. Now, no guarantees how accessible this is going to be because the inline image is fairly limited. You would be able to add a label, a description title.
Yeah, if I were to do this, I would give it a run through a screen reader just to double-check that your text content in the links is actually being read at, and do add text content because otherwise, screen reader user goes in there and clicks on the image or focuses on the image. And the only thing that’s read out is the image, either the file name or the URL. So, that will be very confusing. But yeah, I mean technically it is possible to do that now.
Birgit Pauli-Haack: Yeah. Well, that’s interesting. I have found that the inline menu, even for the paragraph, has a lot of great surprises for me. I was interested to see the inline image available for the block. Now Dana Rogers has this question, so group is just an understanding. “Group is a block element in row and stack are flex elements?”
Isabel Brison: Mm-hmm. Yeah, essentially. Yeah.
Birgit Pauli-Haack: That was an easy question then.
Justin Tadlock: Yeah, I was going to say the group block uses the default flow layout of the web, if you want to describe it like that.
Isabel Brison: Yeah. Yeah, I was taking block to mean as in display block, which yes, that’s correct. The group displays is block. But yeah, it is a flow layout. It’s as close to vanilla HTML as you can get in its default state.
Birgit Pauli-Haack: Yeah and … Go ahead.
Andrew Serong: I was just going to say the one thing that’s in addition to vanilla HTML is that it sets a margin top on everything except for the first child. And that’s how the gap is controlled between the spacing of each element within that group block. So, it’s a little bit opinionated.
Birgit Pauli-Haack: Okay, yeah. Peter Goodsword, I hope I didn’t butcher too much your last name, “Is this a preview version? I don’t have a header in my list view, neither do I see settings, styles or options in my top right bar, even though everything is selected in my preferences.” There might be. Did you enable, Isabel, some experiments on that?
Isabel Brison: I have a setting enabled, which has actually been in there for quite a while. If you go to the top right button and you get a menu and way down, you click preferences, you have this toggle which says show button text labels. The default state of the site editor, you have icons for all the buttons.
Birgit Pauli-Haack: Yeah, no. I think the question was more about in the list view, you have a header item. Yeah. And that should be actually in WordPress, or is that recently in the … I’m not quite sure if you don’t have it. Yeah, this is definitely in the Gutenberg plugin, Peter.
Isabel Brison: I think so.
Andrew Serong: My main question would be, are they in the site editor instead of the post editor?
Isabel Brison: Oh, this. Oh.
Birgit Pauli-Haack: That could be, yeah. Yeah. There is the list view.
Isabel Brison: I mean in here, we do have list view in the post editor. And we do have-
Birgit Pauli-Haack: But not the header section?
Isabel Brison: Well, there’s list view and outline. I mean, what do we mean by header section?
Birgit Pauli-Haack: The header, the header template part that you see, the list view. Yeah.
Isabel Brison: Oh, the header template part. Yeah. Oh yeah, no. Template parts. I think template parts are specific to the site editor. Let me see. Can I actually…
Birgit Pauli-Haack: It’s to the site editor. Yeah, yeah, yeah. It’s not. Yeah.
Isabel Brison: No, no, you can’t actually add a template part in the post editor.
Birgit Pauli-Haack: Yeah. Peter, does it make sense to you that it’s the difference between being in the post editor and site editor to what you see in the list here? Okay, so yeah, that answers that question. Thank you, Peter. It’s always important to figure out which, yeah, editor we’re actually looking at. Now M has a question. “How can you make a header sticky but not take up the entire screen when zoomed in?” I’m not quite sure I understand that. Maybe Isabel and Andrew or Justin understand it?
Isabel Brison: You mean…
Andrew Serong: I’ll let you go.
Isabel Brison: Not take up as in if we zoom in. Okay, if we zoom in past some point. Okay. Yeah. How not to have this happen if you have a big header and you’ll zoom way in? We do not have a…
Birgit Pauli-Haack: If you had a fixed dimension of 900 pixels, how would that work on mobile?
Andrew Serong: One of the things that might be useful is when you’re adjusting settings, if you’re using minimum height or something like that, when you’re selecting the unit, you can switch to using viewport relative units. There’s a VH option. You can set something to be proportional to the height of the viewport. If you’re setting the height of your header area, that’s one way to do it. But another thing is if you’re setting an element to be sticky, it is kind of being mindful of how many blocks you’re putting into it. When Isabel was zooming in just then, you could see that in the navigation block, it was switching over to using the hamburger menu. That’s kind of nice so that way, when it goes to those small viewports, it shrinks like that. But at the moment in the initial implementation, we don’t really have any settings that are doing things differently in desktop versus mobile, or based on the screen width. It’s sort of up to how much content you are putting into your header to make sure that it plays nicely at different viewport sizes, I think.
Birgit Pauli-Haack: All right. There were a few more questions. Darren Davis has the question, “Can you have more than one sticky position group on a page?”
Andrew Serong: Yes, you can. Interestingly, because we chose to go with sticky first as opposed to fixed, what sticky does is on the block that you’ve put, you’ve set it to be sticky, it will then scroll to the next container up, so just its direct parent. In Isabel’s example, it’s at the very root of the document where we’ve set sticky, so that’s the entire page. But if you were to go a little bit further within your nesting and set it into quite a nested group area, it would only stick to that particular area that you’re scrolling past, and it would then scroll off the page. It means that you can have as many sticky elements as you want. Probably a good example would be some websites that might have a glossary that have the alphabet, and as you scroll past each letter, then that letter sticks to the top of the screen before it then scrolls off the page.
Birgit Pauli-Haack: Oh, that’s pretty cool. Yeah, you can do all kinds of little things. Yeah, yeah, excellent.
Andrew Serong: But also, it’s a new feature. One of the things we’ll be keen to see with feedback, like when we’re developing things, I think one of the challenges working in Gutenberg is trying to … The initial issue might be this really great idea, really fleshed out and then we go, “Well, what’s the smallest version of that we can implement and code and get it into the plugin and then get some feedback and see what people can build with it?” If you are playing with it and have some ideas, feel free to open up GitHub issues and discuss what do you think we should do next.
Birgit Pauli-Haack: Yeah. And from YouTube we have a question about are you working on … Oh, we already answered that. “What happens to my custom additional CSS if moving to the new WordPress block themes?” And she was just getting used to the recent customizer things.
Justin Tadlock: Yeah, there’s actually a ticket. There’s some of the feedback I left as that we need to … The additional custom CSS needs to be ported over no matter where you originally set it in the customizer or in the global style section. Yeah, I don’t think it works like that yet, but I’m pushing for it. I hope. Yeah, we don’t want to lose that.
Birgit Pauli-Haack: Yeah, good, good. That answers the question there. And then I think Don Fisher has the next question and it’s, “Will there be any breakpoint-specific layout adjustments coming for any of the blocks?” I think that goes back to that question about intrinsic design versus media query-based design. Andrew, is that a question for you?
Andrew Serong: Oh yeah, I’m happy to talk about it. Yeah, there has been a lot of discussion across a number of different issues about people wanting to put in breakpoints and have that level of control, ’cause they see it in a lot of page builders. But I think probably one of the areas of caution in Gutenberg is that once things wind up in core, we then have to support it in perpetuity. And it’s very easy for managing breakpoints to become really complex and not quite work properly in patterns. Let’s say we had something that was having a different layout on mobile versus desktop, but then you put that pattern into a really nested area and then it doesn’t quite work properly. The idea with intrinsic design is instead of using breakpoints, if we can use viewport-relative units or if we can use calculations or things like that. The recent fluid typography is probably a good example of a feature that doesn’t use breakpoints, but is kind of relative to the viewport.
And I think probably, ’cause I’m not a designer, I sort of focus on what are the areas of consensus that we currently have in the GitHub repo, and how can we build to those things while giving designers a little bit more room to explore all the options before we try and commit that in code?
Birgit Pauli-Haack: Excellent. Yeah, thank you. M has another question. “For any image icon in the nav menu, do you ensure that there’s alt text?”
Isabel Brison: As in what I was showing earlier?
Birgit Pauli-Haack: All text as in your image context.
Isabel Brison: Yeah, your inline images, and please, someone correct me if I’m wrong, which I don’t believe that we have a way of adding alt text to inline images. And this is why I was saying, I mean technically it’s possible to create a navigation with just images, but I would run that through a screen reader first to ensure it’s accessible because I’m not 100% sure. If you add a link title, I’m guessing that that would be the best option to add meaningful text to the image as a link. But yeah, I would definitely double-check that and make sure it’s accessible because it’s not guaranteed. I mean, it wasn’t meant to be used in this way. So, I guess that what I was showcasing is more of a hack because the inline images are more … The main use case for inline images would be if you wanted to add an icon at the beginning of the text. It wouldn’t be to replace the text with an image.
That is something that we could look into doing. It would be an interesting experiment, to enable a way of creating a navigation with images that was fully accessible. But I think we would need to do a bit of work on that to make sure it is fully accessible.
Justin Tadlock: I will just say when you’re actually in the media library, you can add the alt text in the modal overlay that’s popped up, and it will get inserted into the block editor.
Isabel Brison: Oh, if you add the alt text in the media library, you can actually have it pop up in the inline image?
Justin Tadlock: Yeah, yeah. I was just running a test on it real quick.
Isabel Brison: Nice, okay, then that works, yes.
Birgit Pauli-Haack: On image, yeah, nice. Yeah.
Isabel Brison: Thank you.
Birgit Pauli-Haack: All right. Corner Shop Creative person has a question or two, actually. The first one is, “Will negative margins be added to Gutenberg? Right now, you don’t have the ability to add a negative margin to any element, but they are highly useful for achieving some layouts.” You chuckled there, Andrew.
Andrew Serong: That’s a really good question. I think that I’ve seen a couple of PRs that have attempted to implement it before, and I think the main issue is that it then makes it really hard to select the blocks in the block editor. It’d be very easy to accidentally slip a block underneath another block and then be unable to select it. I think it’s absolutely a great feature, but I don’t think the UI part of it has been figured out to how do you do that without losing the blocks altogether?
Birgit Pauli-Haack: Yeah, list view comes really handy in that one. Yeah. And then the second question was, “Will absolute or relative positioning ever come to Gutenberg?”
Andrew Serong: Yes, that’s the hope. One of the reasons why sticky position took quite a while to figure out, the issue for it I think was open in 2021, and there were a few different experiments last year, was really figuring out the direction with designers to make sure that the way we’ve set it up allows us to explore future experiments where we might set a block to relative, and then a block beneath it to absolute, and then be able to move things around in an intuitive way. I think it’d be a really fun area to experiment with. And we’ve got sort of the initial foundation in place, so we can probably start doing some experiments this year and see if it’s one of those easy things or if it’s one of those gigantic rabbit hole, takes a long time things, which I suspect it might be.
Birgit Pauli-Haack: Does it answer your question? Corner Shop Creative? Yes. Good, good, good. And then Stefan Mandel has a question and he writes, “The header and footer are also a kind of container block, so shouldn’t they have most of the controls of the group block? Is it kind of unintuitive to have that you first have to put the header within a group and then get the sticky functionality?”
Andrew Serong: Yeah, that’s one of the things we were discussing before we landed on that initial approach. One of the challenges, that the way that template parts work in the site editor is that they’re kind of a placeholder for another chunk of post content, of a bunch of blocks. And because it’s that sort of placeholder, there’s currently no ability to add styling directly to it. There’s a few technical reasons why that’s the case. The interventions we need to work out are how do we get the document to control how position works and then make it intuitive in the UI. I think sticky will probably always still need to be set either on the direct parent or the direct child, that it’s probably a UI problem to solve as to how to make that intuitive.
Birgit Pauli-Haack: Okay. There were a few questions in the chat that didn’t come over to the Q&A. One was, “Will we in the future way to edit the names of the items in the list view?” There was a PR, but I don’t think it got merged or had any additional work on. So, we don’t know. And thank you for Corners Shop Creative to answer that question in the chat. And then the other question was just by Dale again, “Do all the settings in Gutenberg eventually resolve to CSS?”
Andrew Serong: Oh, that’s an interesting one.
Isabel Brison: I mean, in all the design settings, all the settings that allow you to manipulate the appearance of your content do eventually resolve to CSS because that’s the language of visual presentation in web browsers. So yes, I think. Yeah.
Andrew Serong: Probably one of the interesting things is where we have a one-to-one relationship between setting and CSS, and where we sort of deviate a bit. Things like marginal padding, the direct to CSS properties of margin and padding are applied, but something like block gap or block spacing, that’s sort of a concept in WordPress land. And then depending on the layout type, we then interpret that as that’s either a margin top, or if it’s a flex block, then that’s CSS gap.
Birgit Pauli-Haack: Is it possible that we ran out of questions? Max Zeable on YouTube has a comment that, “That is an interesting point, meaning the intrinsic design approach, this should be communicated much more specifically to the page builder people,” because, so that he wrote, and I totally agree with him. There is not a whole lot of information out there, and I know there is a post in the works about that, but we definitely can use any additional help with that. The, I think, intrinsic design was only come out 2019 or something like that.
Andrew Serong: Yeah, it seems to be quite a recent trend. And I think with a lot of the new newer CSS functions like minmax and calc and things like that, and also the promise of container queries and that sort of thing. But yeah, I think there is a fairly old issue, I’m not sure where it is right now, maybe someone can find it on discussing intrinsic web design with a bunch of the designers. For anyone interested in that, it might be useful to have a dive in to the Gutenberg repo and join the discussion.
Birgit Pauli-Haack: Yeah, I’m going to share it in the chat window. Hang on.
Andrew Serong: Sure.
Birgit Pauli-Haack: I think that’s the issue. It’s called Responsive Blocks Versus Intrinsic Web Design. It seems to be in the title there. And I also saw recently a YouTube video where the person says, “Okay, it’s the browser and the media queries can’t actually cover all the different sizes anymore because there’s so many different sizes on devices that you always hit the wrong parts.” So, you could end up with not three viewports, but with 12. And I saw a plugin actually that had six different viewports for which you can create different designs. And I think that is a little bit too much cognitive load for my brain to tackle when I want to build a website. Some people can probably do that, but it’s definitely not for a user who wants to just publish content and do that. Yeah.
Andrew Serong: And it’s probably a good point that part of the beauty of plugins is that they can really go in some sort of wild directions and try that out in a way that we probably wouldn’t really want to do in core.
Birgit Pauli-Haack: Yeah, yeah.
Justin Tadlock: I would say as a designer, it takes a little bit of getting used to, but I’ve kind of embraced intrinsic design over the last couple of years. I can’t remember the last time I’ve written a media query. Even outside of block-themed development, I want to use fluid values for font sizes, spacing, everything. I think it simplifies how we build for the web. And I also think most of our users, everyday users are going to be on mobile devices. So these really complex layouts where we have horizontal layouts and things are not how most people view the web. It’s mostly just top-down. And so I think intrinsic design is going to be the direction that’s best. It takes a little change of mindset and just if you haven’t moved beyond media queries, definitely try it out.
Isabel Brison: One of the useful things, one of … Sorry.
Birgit Pauli-Haack: Sorry.
Isabel Brison: I was going to say one of the useful tools for that is CSS Grid because it has a bunch of auto placement features that will just resize and reflow the content depending on the screen size. And it’s great but yes, I agree with Justin, it does require a change of mindset because essentially what you’re doing is giving up control. You don’t get to decide whether your layout has two columns or three. It will be decided based on the size of the content and the size of the screen.
Birgit Pauli-Haack: Yeah. And I can see that media queries are important when you want to hide content. Yeah, that’s not just stacking, but then you say, okay, if it’s just on mobile, I don’t want to have these additional columns just go on the bottom of it. I just want to hide them. And I think that functionality is more with the visibility, comes with the visibility of blocks and in core there is no feature right now for controlling visibility of blocks. I think there’s a great plugin out there that covers quite a bit of the visibility ideas, but it’s not yet in core. I always hope that it will come into core, but who knows? Corner Creative has one more question, “Will block guides be added to the Gutenberg block and core example? It’s hard to know when one block ends and another one begins without borders around the block.” Any comments on that?
Isabel Brison: Yeah, there has been a lot of design thought on how to best present the block editor. And the thing with the borders is that at some point, it sort of becomes very noisy and the UI can become harder to understand if you have borders around all the blocks. The hope currently is that the list view will do the heavy listing in terms of being able to understand the structure of the page and navigate it more easily. But yeah, that’s another point where … I mean yeah, there’s always going to be discussion around that and I think always going to be striving to sort of an ideal place. But it is a very complex interface and the more features there are and the more things you can do with it, the harder it is to find a UI that’s easy and intuitive to understand because you have to pack a whole lot of stuff into it. Yeah, that’s an interesting problem that I don’t think is going to be ever fully solved to everyone’s satisfaction.
Birgit Pauli-Haack: No.
Isabel Brison: Definitely something to keep working on.
Justin Tadlock: Yeah, and there are plenty of plugins that handle just borders around blocks if you want to search those out. There may even be a browser extension I’ve seen at one point. Yeah.
Birgit Pauli-Haack: Yeah, and I think the list view has come a long way that when you click on a block in the list view, you get the borders around the block in the canvas or on the, yeah. I think that has come a way. And if it’s about teaching clients on how to use that, I think that would be the route that I would go. Say, “Okay, here is your friend, list view is your friend. And you have trouble, go to the list view.” It’s kind of that mantra that I would probably implement there to figure out, yeah, teach that, which are the blocks. All right, well we are coming … We are a little bit over, so I’m sorry about that, but we covered a lot of ground. Can you briefly, Andrew and Isabel talk about what’s next in layouts?
Andrew Serong: Oh, great question. I think since we’ve gotten a lot of foundational work, the main thing is jumping into a lot of these experiments. So like Isabel was saying before, trying out how might a grid layout work, or some of those other ideas for position support. I think probably there’s a lot of experimenting before we get to things that seem stable enough to put into the plugin. I think probably be diving into a lot of that after 6.2 comes out.
Isabel Brison: Yeah, yeah, stabilizing the layout feature also so that extenders can use it. And that will be my number one priority at the moment. And adding layout to a few blocks that don’t have it yet, such as cover. And then there’s the bigger features such as grid, for instance, layout, maybe other types of layouts. We’ll see.
Justin Tadlock: Yeah, I just look forward to teaching all the stuff that y’all are working on. Teaching other people. Birgit, you’re muted.
Birgit Pauli-Haack: On mute. Last thing I wanted to share with a group is also the post that Justin just published on the developer blog, and it’s a walkthrough on the layout classes that came with WordPress 6.1. I think it’s a really a good post to slow walk you through all the things that you can do. Well, one last question, sorry about that. “Will it be possible to limit the use of some blocks based on user role?” Yes, is the short answer.
Justin Tadlock: Most likely plugin territory, right? Yeah.
Birgit Pauli-Haack: Yeah. And there are some capabilities where you, for instance, the custom CSS, you actually need to have the file editing privileges on your website to actually use that, before that too. So, not every user is able to do custom CSS, for instance, and then the block-locking features there can be attributed to in any role on the site. I think that’s…
Justin Tadlock: Yeah, there’s great documentation on just locking down things per role in the … It’s a document on Curating the Editor and the Block Editor Handbook. I don’t know the link offhand, but I think there should be an actual user role or something related to permissions setting.
Birgit Pauli-Haack: And I just shared the link in the chat, and I will also share that in the show notes.
Justin Tadlock: Okay.
Birgit Pauli-Haack: All right, I think we’re … Yeah, it’s all right. Okay. Well, this was a great show and thank you very much for being here. It was very interesting and I learned so much from you all. Thank you. If people want to get in contact with you, just let us know how that would be possible for Andrew, Isabel and Justin. Andrew, do you want to start?
Andrew Serong: Oh yeah, I’ll probably say, yeah, open up an issue on the GitHub repo and feel free to ping any of us. There’s also the label feature layout, which is a good way to make sure that anything related to layout is seen by any of us, so it’s probably a good way to do it.
Birgit Pauli-Haack: Yeah, excellent.
Isabel Brison: Yeah, GitHub is a good place. I am Tell The Machines on GitHub. I don’t use my real name, but you can also find me in the make core Slack.
Birgit Pauli-Haack: Okay, cool. Cool. Justin?
Justin Tadlock: Yeah, Twitter, just JustinTadlock, or GitHub too, or Green Shady on WP Slack.
Birgit Pauli-Haack: Excellent. And if you have more questions, those who are in attendance today will get an email tomorrow with a link to a survey. Tell us how you found it and what other topics you would like to see. And well, I want to just say thank you all for coming and have these great questions. It has been a privilege to have the panelists and the audience here, and we will have two more live Q&As to come. One is about the design system that comes from Figma, bridge to the theme Jason automatically created out of our design system. And the other one is using Gutenberg as a framework to create plugins that are not using the block editor, but using the block editor components and the scripts to build their own app in WordPress and outside. All right, that is it. Thank you all for coming and be well. Talk to you later.
Andrew Serong: Thank you.
Isabel Brison: Thank you, bye-bye.
Birgit Pauli-Haack: Bye-bye.
Justin Tadlock: Bye.
Birgit Pauli-Haack: Bye.
