 Great stuff. Well, as I said, welcome everybody. Today's session is all about padding, margin and block spacing. And somebody else asked me about 6.0 or 6.1. I'm definitely looking at the 6.1 features. And of course, that's the beauty of WordPress. Things keep changing and improving. And there's more features that gets added to blocks, et cetera. So let's jump straight into it. I'm just going to move everyone's faces to my other screen. There we go. So various dimension controls are built into different blocks to help you achieve greater customization for your layout and design, especially when combined. And especially when using container blocks, such as group blocks, column blocks, road blocks, et cetera. And that's something we looked at when I ran the online workshops about re-creating block design. I put a lot of emphasis on container blocks. And of course, using those container blocks and the padding margin and block spacing features are also really important. All right. So padding, margin and block spacing are three important elements. And they essentially do the same thing. They create extra space or they create extra space or you remove space using those elements. But the question is, of course, where? So padding is what creates space inside a block around the content. Margin is what creates space around a block. And block spacing allows you to add or remove space between nested blocks. And I've got an illustration to help us out. So hopefully this visual depiction will really help you to understand these elements better. So if you have a block, so I've used these dotted lines to show my block. So here's my block. I've added my content, WordPress. And I've added, so that's my heading. And I've added some text. And I've also decided to add a border. Now, we're going to look at that today as well. But you are able to add borders. Now, most of the times blocks don't have borders, but most blocks you are able to add a border. And then the space that you add around the block or within the block around the text or the content is called padding. And then, of course, the space that you can add or remove outside the block is called margin. All right, there's just one or two more people that arrived. So yes, to recap. And we're going to look at this now when we open up one of our pages. But you can create space around the content within your block using padding. And then you can create space around your block or outside your block using margin. Now, you will also notice with a lot of blocks, you are only able to change the top and the bottom margin. And then with padding, usually you can change the bottom, the top, the left, and the right. Okay, so I hope this visual depiction helped everyone. So let's jump into my test website. Okay, not that one. There we go. All right, so I've opened up my test website. I've opened one of my pages. I'm using 6.1 and I am using a block theme. All right, so here we have a group block, right? So I've used the container block. I've used the group block and I've added a heading and I've added some text. So let's just show you all the features or the block spacing, and the margin features before we look at some examples. All right, M, as far as I know, yes, this is the 2023 theme. All right, so let me close my list view and just scroll down a bit. So I've added some other content here as well. All right, let's select my group block. So you will notice I've added a background color to my group block and to show you how the spacing or the padding and the margin looks, I'm going to use my sidebar settings. All right, so if you select your block, you can open up your sidebar settings and then you can scroll down to dimensions. Now, you will notice some dimensions won't show when you start fresh. So then you just click on the three vertical dots and you need to make sure that it's got a tick next to it. All right, so as you will notice, all three my dimension features are showing because I've already started playing around with it. All right, so let's change the padding of the group block to show you. Now, the wonderful thing is it actually shows you as I drag. You've got this option where you just have to drag and as you drag, you can actually see the space increasing or decreasing. Now, remember that padding creates the space around the content within the block. All right, so you can actually create that space around the content within the block using your padding feature. All right, so if you click on set custom size, you can actually use your own units of measurement and you can set a custom padding size or you can use the slider here or let's say, for example, city. But now the other cool feature is that when you click on unlink sides, you can actually change the padding only for the top or only for the right or only for the bottom or only for the left. So let's say I only wanted to add more space at the top then what you can do that then and now you will notice the space is only being added at the top. Or we can say we only want some space on the left. The other option you have, well, let's just take that back to city. All right, now the other option you have is and we just do that. All right, now we are back to the way it looked like. Okay, so now we can talk about margin. Now remember the margin is the space that you add around your block. So let's just use the slider again to visually see this. Okay, so Dave, you can use the slider. That's the wonderful thing you can use. You've got different options. So as you will see, now I'm sliding to the right and as I slide, space is being added outside my block at the top and at the bottom. Again, yeah, you have the same option. If you click on set custom size, you can add your custom size. So let's say 10 pixels or 15, whoops, not 156, 15 pixels. But now the other cool thing you actually don't even have to do that. If you click in, you can actually just drag up and down. That's another thing you can do and you can actually see how the pixels go up and that will give you a better understanding of pixels Dave so that you can gauge. So you can see, okay, 54 pixels is this much. So you can drag up, drag down. So I hope that will help you to see how much space is being added. And again, if you click on unlinked size, we can do it separately again. We can only do the top. I'll click in again and I'll just add some space at the top or use the slider and let's remove some space at the bottom. Okay, cool. I'm glad that helps. Right. So you will actually notice that I've added some space between my heading and my group. Yeah, by using my, by using my margin, my margin setting. Right. Now, let's also talk about block spacing. I'm going to look at my images. So I'll select my, my gallery block. So in that is a good question. So before, before I look at my gallery block and you will notice many blocks only have the option. At this stage to, let's just go down to, to margin again. A lot of the container blocks and other blocks only have the option to change the bottom and the bottom and the top margin. So you will notice for this group block, we were only able to, to add some space at the top and at the bottom. But if you look at this, let's change this. I thought this was a heading. So let's change this to a heading. Now, I've selected my, my heading block. And if you scroll down now, you will notice it says dimensions and then a plus. There's nothing there. So let's just click on dimensions and you will notice you can change the padding for the heading block. And you can change the margin for the heading block. So let's go ahead and select padding and margin. And now they're both at the ticks. And if you click on unlinked sides, you will notice for the heading block, you can actually change the top, the right, the bottom and the left margin. And if you link it again, you can actually now see, let's drag it. And you can actually see the space being added. Top, bottom, left and right. So it seems like the paragraph block and the heading block, you are able to change the, and all, all the sites. So, you know, the answer is no, and many other blocks also have the padding and the margin as I just showed you with the heading block. So yeah, most blocks have those. And those features built into it. And that's also the, the beauty of 6.1 now more blocks have that capability. Right now, let's click on the gallery block. Yeah. And let's open my gallery block. We'll see we have two images. Now, if you scroll down, you will see block spacing. Now remember we said block spacing is allows you to create space between these two blocks. Now, if you look at these two images in my gallery block, I can actually when I add it, this is the way it was added by default with the space but now you can when you play around with your spacer. You can actually remove that space in between, or you can add some some more space and using your block spacing. And again, if I click on use size preset, I can then say zero again. So usually when you, when you click zero, add zero, there's no space in between. So I'll show you something else. So let's say for example, let's select the group block. And let's say insert after. And I'm going to say, I want to add an image. Okay, let's just add this WordPress image. Now there's actually a few ways that you can remove the space between these two blocks. So let's select the group block. Let's go to margin and click on unlinked size. And let's remove the space at the bottom and say we want zero, zero. Now let's select the image. Now you will notice that you don't have the option for padding and margin when you select an image. Okay, so let's select the group block again. We've made sure it's zero, so that won't work. But now what we can do, this is where block spacing is going to help you. We have changed the margin to zero, but they're still that space. But we can actually remove that space if we wanted to. So let's select these two and let's stack them. And once you've stacked them, you will notice now you have the dimensions. And now we can say, let's change the block spacing to zero. We've changed it to zero. And now you can actually bring those two blocks together. All right, M says, is there a way to remove all the margins so that the two blocks of text are essentially one? Yeah, so this is what I've just shown you. And if you stack them, you can remove the block spacing. Dave says, is there a way to have those dimensions drop down, show for all the blocks without having to click on the plus sign every time I want to change the dimensions for a block? I don't know if somebody else is able to answer that question. As far as I know, if I'm just using it this way, you will probably have to do it every time you create something from the start. But once you've started working on a block, you will notice that they are there and they will stay there. All right, so yeah, that is M. Okay, so I think it's probably also that some people don't want the sidebar settings to be too full and too busy. All right, so now we had a bit of introduction to using these dimensions. Let's go and create some examples to see how you can use them better. Okay, so I'm going to update. All right, yeah, Andrew, that's true. Andrew says you could create a pattern and use the pattern wherever you want that behavior. That's true. Very good idea. Okay, I've got another page that I've created. I said dimensions continued. All right, so let's look at my first example. So what I've done here, let's open up. Sorry, just want to quickly write something down here as a reminder for myself. Right, so I've got this, I think this is a group block. Sorry, columns block. All right, let me show you what I've done here. All right, so I've added a columns block and I've added, of course, two columns equal size. And then I've added a heading and I've added some text and a call to action button and then some more text and an image. All right, so I wanted to show you when I select the columns block and then scroll down. You will notice padding. So padding always shows up. It's usually, you usually have to click on the three vertical dots to see margin or block spacing. Okay, so I wanted to talk about border. I mentioned when we create space inside a block around the content, it's padding. When we create space outside a block, it's margin. So let's select this columns block and go to border and say for the pixels for our border, we want it to be one. Now, of course, if you say 10, the border around your, around your block will be much thicker and wider. But let's say we want it to be to be five or maybe three pixels. Yeah, maybe three. And now we'll also see we can change the padding. And so we actually want the space around my content to be more. So of course I can do that. Now, I really like the slider. But if you just want to do it custom, using the custom option, you can do that as well. 40, let's even add a bit more, let's say 80. And now we've added that, that space around the content inside my block. And if we click on margin, it's like margin. And let's say we wanted to create more space around the block. We can do that as well. And for the columns block, you will see we are only adding space at the top and at the bottom. Yeah, it's interesting. I like how the custom option gets rid of the slider. And yeah, I think that's why there's so many different options because I like the slider and it sounds like you, you prefer the slider to be gone. So here's actually an option to add the custom and slide. So I think it's really user friendly. All right, so my second example that I have here. I can improve, you said I wrote, you can see I wrote there improve. Now, if I look at my second example, you will notice the text is at the top and there's not a lot of space at the top. So I would like to change that. And I'm going to use my padding to do that. And you might like this design where you've got all through your columns really nested closely to each other. And they are flashed at the bottom. They flash against the bottom of the block. So let's see, I've added a group block. And then inside my group block, I have a columns block here at the top. And I've got a columns block here at the bottom. So first things first, I thought I can improve this by adding some padding around my content. So let's go for the custom and say 40 pixels. Now we've added some space around my content. Also at the bottom, so we have removed. I'm just going to undo to show you how it's changed. Sorry. So remember it was no space there and no space there. So again, padding and let's say 50 pixels. And now we've added some space around that. And now I'm going to select these columns. So let's open our list view and make sure that I've selected the columns block. And I'm selecting the parent column as you can see the parent column, because within this parent column, there are three separate columns. Right now we're going to slide down and I am actually going to use block spacing here because you've got three columns. So let's see what happens if I add some more space. There you go. Now we've added some some more space between my columns by using block spacing. Let's just close that. Let's close that. And there we go. Of course you didn't have to have the background color, but I just added that to also help us see how the space is being added. Okay, M says asks, does the padding in margin settings affect how it appears on mobile? No, I don't. I don't think it changes how things are appear on mobile. Of course it will just improve the layout. But that's something you can definitely play around with and see what it will look like on mobile. Yes, we can definitely preview some of this. So at the end, when I've looked at some example, let's see what it will look like on mobile. Okay, so let's scroll down to my next example. So here's an example where I've used a cover block and I've actually used some some some group blocks from yes, Laura, I will I will change the room as well. Right, so let's see how how you can create this. So let's say insert cover block. Here we go. I'm going to select my image. And then I'm going to select my cover block and I'm going to say I want it to be full height. Okay, and now we're going to add a group block within my group block. So before I do that, let's change the background color of my group block to white. And then we're going to add our heading. And our heading is follow us, follow us. And I'm going to hit enter. And for this case, I'm just going to copy this to save some time. Let's copy that content. Here we go. We can change the alignment to to center year as well. And I'm also going to add a buttons block. And it says read more. And let's change the background to black and the text to white. And let's also change the. Oops, let's make sure we select about this block. Or should I select that one? A line. There we go. And if you go down to radius, you can change the border radius of your block. We can slide it a bit to the right. Let's say to 15. Or you can slide it all the way to 100. Now I wanted to show this as well. Of course. You can add padding to your, your buttons block as well. So as you will know, that's when it's zero. Now let's change. Let's go to custom. And then change it to are we in ring. And now again, you can just click and you can drag up or you can drag down. So let's drag it up. And let's say we wanted to. There we go. So we've added some, some padding around the content in our, in our buttons block as well. And if you didn't like that changes, remember, whenever you click on the three vertical dots, makes a dimensions, you can say reset all. All right, so I've. I've added the top part, but now you will notice. Let's just make this bold. Let's say that the, the content is very close to the heading. So now again, we can select our heading. Click on dimension. Click on padding. Let's click rim. And now we can drag up a bit to create a bit more space around the block. And of course, if you didn't want that, it's a reset all select margin. You only wanted to add some space below. So again, click on unlink sides. Go to the bottom. And then you can just add a bit of space at the bottom or click on use size preset. And I like this option where I can just click and drag up a bit and then I can actually see. I just wanted to add some space. At the bottom of my block. All right, so I've added that bit. Now I'm going to select this group block. And I will say insert after. And I'm going to add another group block. Now I want to use this color. So I'm going to be, I'm going to steal the air. It's just to let this group block. I've shown you many of you have been in my sessions have seen me do this. I'm selecting that. I'm going to click on the background color. Then you click on custom. And there's an option to actually just copy the hex code. So you can copy that color. So I've copied that color. Now we're going to select this, this group block again. Change the background color. Again, click on custom. And now here at the bottom, you can remove the, the Xcode and I'm going to paste. The hex code from my other block here. Right. So the next thing we want to add is getting touch and then also some social links. So let's add it in touch. Let's take that to the center. Make that bold. And let's change the size. You can change the size. Everyone's check what the sizes of this one. Let's say ring. What was this? So 2.32. So now we can go here and say 2.3. 2.32. And then below that, we're going to add a, the social links, the social icons block. And yes, John, I could just copy and paste your right, but I thought it was always good to see how I create something or how I went about creating something. But yes, of course. And the beauty of this is you could just copy other blocks and paste it. So let's add. Yeah, all good. All right. So now I'm going to add my social icons. So I've got Facebook, Twitter and Instagram. So let's select Facebook. Make sure you select Twitter. Always make sure you select your parent block. And Instagram. All right. Now the proper color will appear when you add your link to your social media platform. So let's just do that and say that's our URL. Again, let's select the parent block and we can change the alignment to center. Now you would have noticed. Let's just select this social icons to show you. I've used black for the icon color and I've used this color again for. So let's just copy that Xcode again. Let's go back to my social icon. I said the icon color to black. I mean the icon color and the icon background. I will add my Xcode again. And I think you'll agree. We probably want to change the size. So if we click on size, let's say large. All right. But now maybe you don't want as much space between your social icons. So I've selected my social icons button and now you can scroll down to block spacing. And I will actually say zero and that brought it a bit closer together. Another option is maybe you don't want as much space between getting touch. Again, we can click on margin. Let's unlink and let's say we want to add less space below that. So at the bottom. Okay, so it's already it's already zero. So another option I have here, let's select getting touch and the social icons. Let's select that. It's stack it. Change the alignment to center or the justification to center again. And now that I've stacked it, I've got the block spacing option. And when you change the block spacing to zero there, you can see we've we've removed some space between them. Right. So now I just want to see what I've selected. Yeah. Okay. So let's just close this side. So I want to select my cover block and open my sidebar settings, scroll down. And you will notice padding here as well. So you can add some more padding. But what I wanted to do. So I just wanted to add some, some padding on the right and left, but not at the top and bottom. So let's unlink this. And say at the top, you want it to be zero and at the bottom zero. Well, that's interesting. I'm trying to remember what I did. Yeah. So another question, that's a really good question. Can you enter a negative number for less spacing? And the answer is no, I've tried that. Unfortunately not. And then another question, please tell us where you define REM as, as unit for font size to be default. Okay, I will get to that now. So you put the image in the background at full height. Ah, maybe that was the problem. Let's remove full height. Ah, okay. I've removed full height. Now let's see if I add some more space. There we go. Now I can just add that again. Thank you, Mary Ann. There's too many things going on in my head. All right. I've removed the toggle to full height. And now, of course, you can actually see how you can create more space. So let's link them again and just add a bit more space around that. Thanks, Mary Ann. All right. The question was about REM. So of course, when you, let's just add some, some text here, content, right? Now if you select the content, and if you go to size, and you click on pixels, you can choose a different unit of measurement. Right. Now the same year when you're working with a block, it's in my group block. And you are talking about padding or let's say margin, and you go to custom. You can choose a unit of measurement. Now the question from, from one of the attendees was please tell us where you define REM as unit for font size. So I hope that shows you. So here you can choose REM. And now you can define it and, and, or you saying, so no, the default is not always, always pixel. No, sometimes the default is REM. I'm actually unsure. Let me see. Let me go to one of my other example websites. Sorry. Let me just go here and see. Let's add a group block here. And it's a heading. This is a heading. This is content. Okay. So let's open that group. Let's open our sidebar settings. Let's open the custom size. So there it is pixels. But it's interesting sometimes maybe it's because I have, I've used it that so many times, but, but I do remember sometimes when I. When I started a new, a new site that it has been in REM. So, yeah, you, you just need to check your own website. Okay, I've got a few more examples to show Dave. I'm unsure if you will do that at, at the global styles level. All right. So there was a question, would you demo again, sitting left and right margins for paragraphs and header blocks. When I change the values, the left and right margins seem to stay at zero when displayed. All right. So are you using six points? Maybe I'm just double-check. Are you using 6.1 and are you, are you using a block theme? So maybe just that's one thing you want to check. So yeah, let me, let me just stay here then. Maybe I must just change this to be a bit bigger. Okay. So I've got my heading here, right? And in my sidebar settings, I can now click on dimensions. And I can say I want to see the padding and I want to see the margin. All right. Let's click on custom. Now let's add some space around the content. And as you will notice, there it goes at the top, bottom, left and right. Okay. And if I go to margin, let's use a different one. Let's just change that to ring. And now I can just drag up and down and you can add some space. Now, of course, you are able to do these things in global styles. So maybe I was just update that and remind you. So if you go to appearance and editor, and if you go to global styles, you can customize the appearance of specific blocks for the whole site. So of course, you can, let's say, heading. You can play around with, just want to see topography, colors, layout. So you can actually see your padding in margin in global styles for every time you add a heading block, right? And that's the same for other blocks on your site. Then you can customize your blocks in global styles. And then if you've done it once, it's done. Okay. I want to show you this cool option as well when you use a cover block. So if you were in my session the other day, you will remember my website was about bikes, but I just wanted to show you this. So I've added a cover block with a featured image and some content. And then I've added another cover block with a different featured image and some content. Now, what I wanted to create here was that parallax effect, but also two images actually jalling together. So you will notice the two bikes are positioned the same way. So I want this bike to kind of flow into the other bike so that it kind of looks like it is transforming. So the first thing I'm going to do is I'm going to select the cover block and I'm going to say I want to fix background that creates that parallax effect. All right. Now the same for this one. I'm going to say fix background. And now it creates that parallax effect. Now you can already see, I hope you can see this. As you scroll down, see the wheels kind of meet there and it flows into the other image. And we can even improve this by selecting both of these cover blocks. Or maybe let's see if I can do it by changing the margin. It looks like the margin is already zero. So I'm going to select the two cover blocks and I'm going to stack them. All right. And now that I've stacked them, I can change the block spacing to zero. So now I've removed the space between the two cover blocks. And now you get that effect scrolling into each other. All right. All right. So a question about global styles again. But yeah, I just wanted to show you that I hope you enjoyed that feature. So let's jump back to this one. So M's asking, can you sit or change the default padding and margin sizes for the block type at global level? And I think that's something Dave also asked. So let's just go to global styles. If you click on layout, you can change the padding. Let's see. So this is the layout for your site. So you can change the padding for your site. But then of course, as I said, you can customize the padding and the margin for specific blocks in global styles. Okay. So is this what you're referring to Andre? So if you go here and you select, let's say your group block. You can go to layout. And yeah, you can state custom padding margin and block spacing settings for the group block. Yeah. All right. I've got four more minutes. I just wanted to show you this, this one quickly. Okay. So let's jump back. Yeah. Okay. I wanted to show you this example. Where I've actually played around with the, with the border. Okay. So what I've done here, I've added, is it this one? No. Example three columns. There we go. So I've added three columns and then in each column, I've added a group block. Right. And in each group block, I've got some text here. This is kind of like, meet my team. So I've added a group block. And then yes, some text about that person. And, or maybe something that person said. And that's the person who said it and the role. Now, if I open up my sidebar settings, I'm just going to play, I'm just going to, I'm just going to reset all for the, that's for the, for the group group. And I will reset all just to show you. Okay. So this is really a cool feature. So I'm going to go to my left column. All right. I'm going to select the group because I've grouped them together. And now I'm going to say, I actually want a little border for my, for my group. So again, I'm just going to say I want it to be one pixel. I want a light border. Now, as you can see, when I've done that, it's just the square. There's nothing special about it. But you can now play around with the radius of your border. So let me show you this. So again, I've selected that group. I'll open up my sidebar settings. I'll scroll down. I've set my border to one. And now I'm going to play with the radius. So if you click on unlink radius, you will be able to change the border radius. So I'm going to say I want the top left to be zero. So that will stay the same. I want the top right to be a hundred. So now you can see it creates that, that rounded effect top right. Now I want the rounded effect years well at the bottom left. So I'm going to say I want that to be a hundred. And I want bottom right to still be zero. So now if you close it. You will see I've created that, that cool effect by adding a border and changing the radius. And now let's do it with the middle one. It's at a border radius of one. And I'll unlink the radius. But now this time I want, I want to kind of be symmetrical, like a butterfly. If you fold it, it will, it will meet each other in the same spot. So now we're going to say top left a hundred, top right zero, bottom left zero, bottom right a hundred. And as you can see on the right side, I've used the same settings as on the left. And now I can update. Now if I select my group block, you will notice I've also added some padding. So if I remove the padding, it doesn't look that great. But if I add some padding, it looks better. And I've also added some, some space between my columns. I think it looks a bit better with some more space. And now I can update. There we go. All right, so that brings us to the end of today. I think it's wonderful that we have so much control over our, let me just bring everyone over to the side. I think it's wonderful that we've got so much control over our padding, block spacing and margin. And as we said, as WordPress is growing and being improved, more blocks will have more features. Yes, you can add color to your border. That is right. Well, thank you very much for your time. And thank you for being with me today. I appreciate everyone's input in there some really solid questions today. And I hope you have, have fun and success in using padding and margin and block spacing. Cool. Thank you. And I will see you next time. I'll bring this to a close in for us today. Bye.