 Great. As I said, good day everyone and welcome to today's online workshop. The topic for today is nesting blocks and advanced block layouts. And the wonderful thing with the block editor and using blocks is that you can create really beautiful layouts using blocks and using them together, of course, grouping them together or nesting them together. So nested blocks make it easy to create advanced layouts. And when I use the word nested blocks, I literally mean adding them into each other, grouping them together. They are basically blocks inside other blocks. So one of the other things that it's important to remember is that we use container blocks to nest blocks. So a container block lets you gather several individual blocks into a parent container, which helps you create different sections of content. So when you have a parent block, you can add child blocks to it, of course. So some common blocks to group or nest other blocks are container blocks such as the columns block, the cover block, the row block or the group block. And we will mainly be using the columns block, the cover block and the group block today. And of course, I'm going to show you some examples and how I went about creating those. Okay, so here's an example that I wanted to look at first before I go to my demo website. So as you can see, I've got a container block. So you've got the list view open. The list view is really important when we are in the block editor because the list view allows you to see how everything is structured. So in this example, we've got a columns block, our parent block. And then I've opened up our left column. And within our left column, we've added our child blocks. So you will notice that's a heading, a heading block. And then we've got a paragraph block. And then we've added a separator block. And then a list block with three different things that we've listed. And then below that we've got a buttons block or call to action. And of course, this is a nice example of nesting blocks together. And in this example, of course, you'll notice that I've actually changed the colors. Well, this is a pattern that I've used from WordPress.org. But you will notice that the left column has got a different color than the middle and the right column. But of course, if I wanted to, I could have changed the background color of the entire columns block if I wanted to. Okay, so with that, let me go to my test website and then we can get going. Right, I actually have two test websites. So let me jump to the front end first and show you what I would like to create with you today. So here's the first example that I want to look at. Where I've actually used a columns block and a cover block. And here's the second example. And this is, of course, made possible with the columns block and some group blocks. And I've actually created some, well, some text text based blocks. So this is something you'll probably see. I'm going to call it a newspaper or magazine type of layout. As well as this one. And then I'm going to jump to my other test website because I wanted to show you how I created this as well where you almost have these like a staircase coming down. And where I've, I've actually created my own like offset grid of images. And I actually did not use the gallery block here. I played around with my settings. And this is a columns block as well. And then if we've got some time, I have two more examples up my sleeve. But let's start with my other test website and this one that I showed you here. All right, so let me just close my sidebar settings here. And what I'm going to do is I'm just going to create every example below my first example. All right, so let's go to the top here. So there's my columns block and let's say insert after. All right. So first things first to, to create this. I am going to say forward slash and I'm going to add a columns block to start nesting. And then I'm going to select two equal columns, a split. Now the one thing you'll notice here is that the width is not the way I want it. So and at the moment in the list view, you will see that my left column is actually selected. So I'm going to select my parent block first. And then I'm going to use my block toolbar and I'm going to say I want this to be wide width. And of course you can say full width as well. And then it goes across the entire page. So let's say wide width. Now a very important step is we are going to use duplicate to save ourselves a lot of time. So what I mean by that is we are going to create all of this first and then it's easy to just duplicate and change the background image and the content so that we don't have to recreate the entire layout. Okay, so let's just focus on the first column. And now we are going to add a cover block within our left column. Already we start nesting. And we are going to add an image to our cover block. And remember a cover block allows you to display text over an image or a video. Okay, so there's the image that I want. It's called cycling. Now you will first notice that this is also longer. So let's look at our first example. So I've looked at my first example and let's open our sidebar settings to see. Let's just open our settings. Okay, we'll notice that there's an overlay opacity of 70. So that's the first thing we want to do in this example. We are going to say we want an overlay opacity of 70. Okay. Oh, sorry, Victoria. I am using, I think in this test website. So let me just update this. Let me just duplicate here for a moment. I'm just using one of the default themes. So sorry, let me just go to appearance. And you will notice I'm using the 2022 theme today. Thank you for reminding me. Yeah, usually for these sessions, we use the default 2022 or 2023 theme. All right, let's jump back into year. All right, now we are going to add a stack block. So stack block is like a group block, of course, but you stack things below each other. So I'm going to add a stack block. And then within my stack block, I'm going to add my heading. All right, so I've got a heading. And the heading we said is like cycling. And I'm going to press enter. And then below that we are adding a paragraph. Let's say connect with nature. Then press enter again, forward slash buttons block. And this is where we're going to add our buttons block or call to action. And we are going to say capital letters explore. And we are going to change the background color and the text color of our buttons block. So let's make sure we go to styles. And let's say background, white, text, black. And then we are just going to change the radius of the buttons block. Let's say 10 pixels and just give it a bit more of a rounded effect. All right, let's select our stack block again in our list view. And we are going to change the justification. And you'll notice here below the settings, you've got an option for justification. And we are going to say we want this to be center. All right. Let's change the size here. But let's say what happens if we say large. There we go. Let's make this bold. All right. Let's see what happens if we go to our block toolbar. I don't know if this is going to work, but let's say toggle to full height and see what happens. So you will notice that it goes to the full height of the columns block. Now you could have done that, but let's say we're going to deselect that again. So make sure you select your parent block. I just want to check something. Okay. So if you go to styles, you will notice there's an option called minimum height of cover. And you can actually set the minimum height of your cover block, which is great. So you will notice if I look at this example that I've changed the minimum height of cover. Let's make sure we select our block and let's say 50. And now we can just start dragging it up. Sorry. So 60. Let's change it to percent. It's not really doing what I'm wanting it to do. Okay. So let's make it 690. Oops. 690. Now let's make it 600. There we go. So you can play around with the minimum height cover. I like that. And now I think we are ready to duplicate. So now we select this column, not the cover block. We're going to select the left column. And I'll go to our block toolbar, click on the three vertical dots and say duplicate. And then I will just click on here and press delete on my keyboard. And now I can modify the content. So I will replace and we just check. I will replace and select a new image. Select. And of course now we can just go ahead and change the content. So this was hiking. I think this is actually what I wanted is I wanted to say freedom on wheels. And this one was connect with nature. That's actually what I wanted. Great. And that's it. So now we can select our parent block, our columns block. And in our list view, you can see, all right, left column. We added a cover block. And within our cover block, we've added a stack block. We've justified it or we changed the justification to center. And we also, of course, changed the opacity of the cover block. And we changed the minimum height of the cover block. So that's our first example. Any question before I move on to my second example. And of course we duplicated. And we saved all that time by just duplicating the first column. OK. So Sean's question is about studio press themes, which do you use block editing? So yes. Sean, even with the classic themes, you use blocks, right? So I'm sure it will work. Yeah. OK. Let's move on to my next example. All right. And I'll show you how I created this. With the image, I just quickly changed the radius of the image. And yeah, I've added a bit of a border. And of course, I use duplicate again. So it looks like a lot of work, but technically we are just doing the first column and the rest is basically copying and pasting. OK. So let's move on to, I think it's this one. Nope. OK. Let's just close these in my list view to make some space. There we go. Let's select this one. Right. Now if you click on the three vertical dots, we'll say add after. And now we can start building. So our parent block is going to be a columns block, forward slash columns. And we are going to add three different columns. Again, I'm going to select the parent block in my list view and change it to wide width in this example. Again, as I said, we first going to focus on the first column. So let's click on the first column and say we want to add. An image block first image. And the one that I wanted to add was the seal. OK. So this is where I wanted to show you something. So if I open my styles for this image and I go to styles, we can change the we can change the border and radius of this image. But because I'm going to add another group block after this. I'm just going to wrap this image in a group block so that I've got two group blocks within my column. So if I click on the three vertical dots, I'm just going to say group. And I realize there's only one block within the group, but that's fine. So for now, we're going to say insert after this group. We're going to say add after. We're going to add another group block. And I'm just going to select a standard group. And then within this group, we're going to add a heading. We're going to add a heading. And let's say this is seals. I'll press enter. And I'm just going to use this text, right? We're not going to. We're just using some lorem epsom text. So I'm just going to copy this text. And of course, yeah, I want my content or my text. OK, now we are quickly going to modify our image. And we're going to play around with some padding and the border. OK, so let me show you how you can quickly change the display of an image. And also how you can add a border to a column or to a specific block. So let's select this group block. Remember, I wrapped this image in a group. So open our sidebar settings. And we are going to go to styles. And we're going to go to the bottom. I'm going to go to radius. And we are going to click on unlink radius. So if you click on unlink radius, you can change the radius of the top left, top right. Bottom left, bottom right individually. So we are going to say we want 100 pixels top right and 100 pixels top left. Now, as you can see, it's not working. The reason it's not working is because we've got to do it on the image itself, not the group. So let's change that. Open our little group. Select the image. Open styles. And now we're going to change it for our image itself. So unlink radius again. And we said top right, we're going to say 100. And bottom left, 100. And that gives it that rounded effect at the top right and bottom left. And of course, the corners will stay because we did not touch the radius of these two. So that one's done. The next thing we're going to do is we're going to select the group block with the heading and the text. And let's first add our border and then we can change the padding. So if you go again to styles and to the bottom above radius, you can change the border. Now, I'm just going to change the border to like two pixels. So I'm going to say two pixels or let's change it to one. Well, we can change it to two and then we can even change the color of your border. And we can say, oh, let's change it to this tertiary color or to gray. Well, now let's change it to the gray and actually make it one. There we go. But now, of course, you'll see the padding needs to be changed. We want some space around the content. Okay, so we can go to padding below dimensions and then we can drag this and say, all right, well, we want more space around our content. Let me just change that to two pixels. Now that I see it, I want it to be a bit wider. And now we are going to start duplicating. So let's select our main column. We're not duplicating our main column. We're duplicating the left column. So on the three vertical dots, we're going to say duplicate and duplicate again. And now I'm just going to click on those and press delete on my keyboard and they will disappear. And now I can start changing the content because all my styling is done. Select image, replace. And of course, let's say these are penguins and these are dolphins. All right, these are, of course, just examples. So now we can change all the content within your columns as well. But yeah, these two different examples. Of course, if you want to have a lighter one, we can just, again, let's select this group block, open our styles, go to border and say, oh, let's make it a bit lighter. And that's how you can change the look and feel. That's what I did in this example. And yeah, of course, I went a bit darker. So let me just get undo. So that is my second example done. I've used the columns block. And within my column, I've got an image that I've grouped and I've changed the radius of the image. And then I've added another group block. And within that group block, I've got my heading, my text, and I changed the border and I changed the padding. Right. Let's move on to the next one. But I see there's a question. So Paxton, and that is a great question. Paxton is asking, is this function of designing with blocks done with the elements of plugin, or is this something different? So this is just called WordPress. And I mean, yeah, people have the barrogate to use page builders. But I think the wonderful thing about WordPress Paxton at the moment is that it allows you to use the block editor. And what I'm doing here now is just using the block editor. I'm just using core WordPress. And you can build all these things with blocks provided by WordPress. So this is done without any plugin and just with a fresh install of WordPress. So yeah, thank you for that question. And I hope that clarifies it. Okay. So let's look at how I created this little magazine layout. So let's select this group. As you will notice, I've added everything within a group. So I'm going to click insert on the three dots, say insert after or add after. And the first thing I'm going to do here is I'm going to add a group block. I'm going to select a standard group. All right. So my parent block is there. I'm going to click on the insert. So I'm going to start adding or nesting within. And within my group block, I'm going to add a columns block. But this time I'm going to select a one column. You know, for that, for that heading, I'm going to add my heading in a one column columns block. Okay. So now I've added my single columns block and then within my single columns block, I'm going to add my heading, my heading block. And we said, let's just copy that. And now we can say a force to be reckoned with. So as you will notice, it has just saved the text. Now I wanted to show you something else. I know some people have done this. I just want to see if it's going to work. If I select this heading and I click on the three vertical dots and I say copy styles. I want to copy the styles of my heading. And now I'm going to select this heading that I've just added the words and click on the three vertical dots and say paste styles. Okay. It says they're unable to paste styles. This feature is only available on secure HTTPS sites in supporting browsers. Okay. That's probably why it's not working at the moment, but it doesn't really matter. We're going to sort out our heading now. Let's first press enter. So I'm going to say insert after. So insert after my column actually. So I'm going to select this one column and say, there we go. I'm going to say add after. And now we're going to add a separator block forward slash separator and we can open up our styles. And let's say we want a wide line, but for our group block, let's just change this to wide width as well. Okay. Let's see. So this column as well. Let's select the separator and say we want this to be wide width open my heading. So I've added my heading. I've added my separator. And then below that, we are going to add a columns block. And let's say two equal columns. Let's select this as well and say wide width. Now we're going to select this. We're going to just copy and paste some text. So in the left column, we've got some text. And in the right column, we've got some more text. So some extra, some more, yeah, some extra text. So paragraph. Okay. Now we can start playing around with the styles. Okay. So let's select our group block and open our sidebar settings styles. And we can change some of our padding. Let's make that six. Right. So we've added our padding. Now let's select our heading. And let's say we want the letter casing to be capital in styles. So let's make that uppercase. Let's look at the text size. Let's select a custom size. Let's say 50 pixels and appearance. Let's say we want this to be light. And we can also change this to align center middle. And now we can select our left column text. Now let's change the typography a bit. So if you click on typography and you go to font family, you'll notice it gets a tick. And we can change the font family year if we wanted to. And let's say for our file text, let's change this value to rim. And let's say 1.3. Let's change the font to source Serif Pro. And let's keep that as is there. Let's just make sure that is also source Serif Pro. Yeah. And of course, if you wanted to, I see I've changed my heading there. We can make that bold. Now at the moment, I don't want that to break up. So let's just change that. Let's make that 40 pixels. And there we go. And we can update. And then we can move on to our last text example. But yeah, before I move on, let me just go to the chat and see. Yeah, so Tracy said very true. I haven't used the page builder plugin since the block editor. Now full site editing were included in WordPress core. Yeah. Converting to just WordPress and blocks can often cut in half the number of plugins a site needs. Yeah. Fair point. Very good point. And yeah, I would also say the majority of things I do, I do in WordPress core. All right. I will come back to, I will come back to this one if we have time. I wanted to look at the other examples first. So let's jump to my other test website. And I said, I've got these two. And I thought, well, let's look at this one. Let's look at this one first. And then I will move to that one. Okay. So let me show you how I use the columns block to achieve this. So let's jump to my test website. So that was on the front end. Okay. So insert after. All right. So first things first, let's add a columns block and select three equal columns. Now we need to open up our list view, select our columns block and then change it to wide width. All right. So now that I've got my parent block, I'm going to change the background color. So let's change the background. There we go. And now I'm going to start building from the left. Okay. So we've got some images, images and in texts. So let's add our first image, love of a quarter. Okay. Let's press enter and add another image. We will change the images now for now. Let's just add all our images. And then in the middle, we're going to add some more images. There we go. That one. Press enter and one more. All right. So we've added our images and then in the right column, we're going to add our text. So you would have noticed we have a heading. So let's add a group block first. To group that together. And within our group block, we're going to add a heading. Let's say food factory, press enter. And let's just select that text to save some time. So you'll notice I'm first adding everything before I start styling. Okay. So that is done. So let me just close my list view for now. And what I've done here, the first thing is I've, you'll notice this one is my bigger image. So I'm going to keep this one larger. This one is a bit smaller. So I'm just going to select this one and use. I'm going to make it a bit smaller. There we go. And then my avo is slightly smaller than that one. And this one was even smaller. So cool. Now I've done that. Now I'm going to change the alignment of the images in my first column. And I'm going to say, let's select that and say we want it to align right. I also want this to align right. Okay. So now these two images align right. I'm going to leave these images as they are. And let me show you, well, I've already kind of shown you this. And I've just played around with the, the radius of these images. So for the first one, I said, okay, I'm going to change the radius. I'm going to unlink radius and just do the bottom right. Sorry, the top left and top right. And it's going to say a hundred and a hundred. Okay. So this, it almost looks like a bay window. And then for this one, I'm just going to do top left. So again, I select the images, go to styles, radius and say top left, a hundred. And then for this one, I'm going to do all of them. So I'll select radius, unlink and do all of them a hundred. Just for a bit of variety. And then I'm going to select the last one. And you'll notice I've only done top left and bottom right. Unlink sides, top left, bottom right. All right. So there's my off grid images. And now I'm going to go to my right, right column. Let's select this right column, select the group block. Oh no. So let's select our right column because we're going to change the alignment of our column. So when you go to your block toolbar, you can say change the vertical alignment for this column. And we want to send this to the middle. So we're going to align the content, our group block with the text to the middle. Right. And now we can start changing the fonts and stuff. So let's select food factory, open our sidebar settings. And for this website, I'm actually using the 2023 theme. So let's select font family. And I'm going to use this IBM Plex Mono. And I'm going to also change the text font family font, this IBM. Now you can also say, Cecil, very good question. And luckily I prepared for this. We're going to talk about if the blocks are responsive. So I did something else for this. But I'll show you now. I just want to look at the padding. If I wanted to change any padding, yeah. Let's just open our sidebar settings play around with some dimensions. So if I change the padding a bit, I'm also going to click on dimensions, block spacing. And let's say we want some more space between the blocks. There we go. All right. So update. So what I've done. So of course, in WordPress, most of the times, the blocks are responsive. So for example, let's look at, before I look at this, let me show you these things from the front. Okay. Let me just go to my test website. Let's say inspect. And yeah, I've just selected mobile. Let me just drag this down so you can see a bit better. All right. So one of the settings you'll see if I go here to this example, my first example, you will notice in the, in the sidebar settings, there's an option where it says stack on mobile. So usually when you have columns or images, it will stack on mobile. So if we look at the front India, you will see those things just because I've selected stack mobile, they stack on top of each other. And the same year with, with these images, still responsive, love the layout. So, but what I've done here, and which I'm going to do with the other one as well, are forced to be reckoned with. I've actually deselected stack on mobile. So let me just go down to my example here, this group block. Oh no. So for the, for this block, I selected inner blocks use content width. And now when you look at the front end, you will see that they, they stick together. These two columns don't stack on top of each other. Let me show you what happens if I deselect it. Okay, let me just close this. I hope it's going to work. Let's see. Okay, so let's deselect this inner blocks use content width. Let's update. Let's preview now previewing a new tab. I'm going to inspect. Okay, let's see what happens now. Maybe it was not that thing. Let me just double check. Columns block stack on mobile. Ah, sorry. My bad. It was the fact that I did, I deselected stack on mobile. So you will notice that these things on, on, on the front end. Okay, let's say stack on mobile. Sorry. So I've selected this column. With the two columns and I've said now stack on mobile update. Let's preview. Inspect. All right. So here you can see I've deselected stack on mobile. So now you've got these two columns. If you look at the text columns, you've got it on top of each other. And I actually didn't want that to happen. So therefore I said, I'm going to deselect stack on mobile. I don't want them to stack. I want them to be next to each other. I'm going to update. And let's see if it will happen again now. No, you first have to say preview, preview a new tab. Inspect. Oh yes. Okay. So let's select inner blocks as well. So was it that column deselect update? So yeah, sometimes you just have to play around and see what it looks like on a mobile. There we go. So now it displays as I want it to be. So let's look at the other example then. All right. Let's look at this example on the front end. So I've got two, this is my original example and this is my other example. So I actually wanted to just change this. Maybe we can say, oh, that's fine. You can still change this if you wanted to, but I lifted this one a bit larger. Okay. So let's see preview, preview a new tab and then inspect. Okay. So yeah, you will notice that I actually wanted all of the three columns to stick together and display like that. And I did that by deselecting the step on mobile. But for this one example that we just made, it was not the way I wanted it to be. So everything stacked, but that's not the way I wanted it to display. I could have probably sent this to the left and have kept it this way. But as I said, I selected my group block or my columns block and then I deselected stack on mobile. And that's how I got that to work. Was that helpful, Cecil? Okay. Great. All right. Let's look at our last example then. And this is where I've used spacer blocks. So we've got six minutes left, more than enough time. So let me show you what I did here. Insert after. I've added a columns block and I've selected three equal columns. It's open our list view and select wide width. Now, I got this hex code from the internet when I looked up colors that contrast while with black. I'm just going to copy this background hex code. So I'm just going to, oh, you just click on copy there. All right. Let's go to our new columns block. Go to background. You can click on customize and then here we can remove that and just paste our new hex code for our columns block. Or you can choose one of the, the female default colors. Okay. So let's start building our left side. So we have a heading and let's say when question mark enter. Let's add a separator enter and then one June 2023. Okay. So for my heading, I wanted this to be media. So I want that to be a bit smaller. And for appearance, I wanted to have extra bold, extra bold year under appearance. My separators in place. It's like my text. And let's say we give this a custom size. It's changing to the value to rim and it's a 1.4. All right. So I've done that. Now let's select this left column and let's change the, no, let's select our columns block and let's change the padding. Let's add some more space around. So let's change the padding to, to four. Okay. We can even, what I've done here is I changed the, I changed the font to source serve pro, but for this one, I'm just going to leave it as is. Now we are going to start duplicating our, our left column. All right. So we've got our left column. Now we're going to duplicate and duplicate again. And I'm just selecting these and deleting. And now how did I get the staircase? I used a spacer block. So let me show you, if you click here, you will notice I've add spacer blocks to push it down. So I'm going to click here and say enter. And above this, I'm going to add a spacer block. And I want this spacer block to be in my, in my sidebar settings. I want this to be 50 pixels. And I'm going to do the same on the right. I'm going to press enter. And then above that, add another spacer block, but I actually want this one to be 120. That's got to be a bit larger. And now I can start changing my content. So that is when this can be where let's say Cape Town Aquarium cost 300. 300 Rand per person. There you go. So you can actually use spacer blocks to achieve a layout or a design like this. And of course, as I said, you can play around with the fonts, et cetera. So yeah, that's the time we have for today and the examples I wanted to show you. I see there's a question. Is there a way to add space or space blocks between the columns? All right. So Tanya, that is where you use block spacing. So if you select your columns block and you open up your sidebar settings and you go to styles. And you go to dimensions and you click on the three vertical dots, you go to block spacing. If you select the block spacing, that is how you create space between columns. So let me show you. I've selected the block spacing. So there's a little technique to it. And now we can add, you can see if I'm adding more and more space. So yeah, block spacing is your answer. All right. Yeah. Thank you everyone for joining today. I appreciate your time. Thank you for the feedback. But yeah, you're welcome to ask any other question or for me to show you something else. Yeah. Thanks, Ron. And everyone else. Awesome. And thanks again, Tracy, for being available in the chat today. There was a question about replay. Yes. I will add the recording. Oh, there's a question, a very good question, John. I'll answer that now. But yes, I will make the recording available on the meetup group in the next day or two. So yes, the recording will be available on wordpress.tv. And I'll share the recording as soon as possible. And yes, of course, that's a very relevant question. John, can you make this whole thing a pattern? Of course. So if you select your block that you created and you click on the three vertical dots and you say create reusable block, you can say staircase and click save. Now you'll notice it suddenly looks a bit different from the back on the back end. But don't worry. It will look correct on the front end. But now you can update, press enter. And now forward slash reusable. And now you can add. Okay. Sorry. Let me just do that somewhere else. I rendered it in itself. So let me just update, save, go to pages. Let's add a new page. So of course, a reusable block is a way for you to save your own patterns. So now let's say forward slash reusable. And you'll see there's staircase now. But now, John, very important. If you make any updates here now, it will update everywhere else. This reusable block is used. So to start using it as a pattern for something new, you click on the three vertical dots and you say convert to regular blocks. And now it's there. And now you can modify it and change it. And it won't affect your original reusable block. All right. That's it. Thank you very much, everyone. See you all next time and have a blessed day. Cheers.