Alright.
So, once again Hello everyone, thank you for joining today's online workshop.
Today we'll be doing an introduction to the nine design blocks of WordPress. I'm Ben Evans, and thank you for joining.
So I'm Ben and I live in Japan, I've lived him pretty much my entire life.
So, Yeah, without question.
Someone's mute come off.
I'll keep going.
So yeah, I've lived here. Pretty much all my life, I've been a WordPress user since 2014. So, that's a bit, bit of a years about eight years now.
So there are probably others who are more flow into WordPress and now a lot more of the ins and outs of WordPress but this online workshops where we can learn together.
So if there's a question, and I don't know the answer to other people can answer that, and we were here to share knowledge with each other.
All right.
So here we go.
Let's learn together, you can ask questions at any time you can unmute and ask over audio or you can ask questions in the chat as well. This session will be recorded and uploaded to wordpress.tv afterwards, so people who couldn't make this time can still
catch up on the content.
And we have other online workshops, every week, I think we have like five or six at least every week at the moment.
Plus we have video tutorials and other content, all on learn.wordpress.org so you're very welcome to go and check that out as well.
Okay.
So, how many, how familiar are everyone here with WordPress if you were to grab yourself from one to 10, one being a very, very big enough, and 10 is an absolute expert.
What number would you give yourself with your experience of WordPress, and you're going to type in the chat here.
And we have a seven or four
7.567 pre Gutenberg right.
I'm.
I'm going to give myself a seven as well.
Susan 45.
Yep.
So, it seems people today have a little bit of experience, no one looks like they're brand new.
So, hopefully you'll learn something new in what we talked about.
So, when first comes with a lot of blocks out of the box, so with WordPress 6.0 point one. There are 93 native blocks in WordPress. So, That is a lot of blocks.
And these blocks are grouped into different groups. And one of those groups is called design.
There are nine blocks in the design group.
And so today we're going to have a look at these non blogs and consider how we can use these blocks to design our site.
So here are some questions will be asking ourselves today. First of all, what are the nine design blocks of WordPress, what are they exactly how what what features so they give your site will also be having a quick look at how each block behaves, especially
on different screen sizes. So, and you may have heard of responsive design, and these design blocks do behave a bit differently on different screen sizes so be taking a look at that will be learning how to change the spacing between blocks, so when Gutenberg,
Gutenberg, the newest editor first came out, it was difficult to change the spacing between blocks you need to call it for that.
But they've made a lot of advancements so you can now pretty much, edit, a lot of the spacing there so we'll have a look at how to do that. And then finally, we'll experiment making different layouts with these blocks so if you have a site, and test site,
have that ready because throughout the session, you'll be able to try these different things on your site to see how they work out.
Alright. Any questions before we get started.
Doesn't look like it.
So let's jump right into nine design blocks of WordPress.
So the very first one is the buttons, lock
the buttons block contains multiple button blocks. So, there's a bit of a difference here there's an S on this one, and there's no s on this one so the buttons block is the container.
And then the button blocks are each of the individual buttons inside.
So, the buttons block has got it gotten a more powerful, and with each iteration of WordPress. Now, you can change the orientation of buttons.
We'll have a look at that a demo in a moment where the buttons wrap on to multiple lines, and how much spaces between buttons. So, let me, let me make a new page here, this is a just a blank installed WordPress.
I've gone through and added a few pages and media things.
But we're not using any plugins in the, in today's session. So this is just WordPress, no plugins.
We're looking at the native blocks. So, let's make a new page. And we're going to test buttons.
So, if you're not familiar, you can add blocks to a good to WordPress from the plus symbol up here.
Today, we're looking at the design group here. And for the moment we're going to add buttons.
So this is going to be my button, one.
And then if you click the plus, over here. You can add the second button.
Or if you add Enter on your keyboard that also creates another button.
So you got button. Three. Enter button for.
And what we want to look at today is the orientation of these buttons.
So, you can see I've turned on the block pick up on the left here the list you.
And we want to click on buttons top button at the top block here.
And here you'll see we have some layout options.
So at the moment the buttons are all sort of leading to the left of the page. You can send to the buttons or leave them to the right, or you can spread them out evenly so they feel the entire row.
And then allowed to rap to multiple lines. So, this comes to play when you look at mobile view of the page. So at the moment we're looking at the desktop preview here.
I think even preview you can change this to the mobile view.
And you'll notice here, what happened is we now have two buttons on each route so it goes one, two, and then the second row three four.
And this is because the buttons.
We've set it to allow to wrap to multiple lines.
So what the computer says it's trying to fit four buttons on the road, because the screens too narrow. It's moving the excess buttons to the second route there.
If you turn this off, it will actually try and squeeze all the buttons on the same girl, even on the narrow device.
So you can see the text doesn't look too good so generally you want to keep this on.
But if you're going for a specific design or layout, then you do not have to keep that on you can turn it off.
That's what we're going to talk about buttons for the moment, does anybody have any questions about the buttons block or anything they want me to show here on screen.
If you have questions you can keep typing them in the chat here.
But let's move on to the next one because next to actually the most interesting things we're looking at today.
Oh, so sorry here's one more slide before we move on with on in browsers. When a web browser displays a page. By default, it shows things from left to right.
So, you can see the pink arrows here it shows us things left to right. And then if it gets too full on that line, it jumps to the next one, left to right again and jumps to the next one.
So, on the, on the desktop or computer screen, because the screen is horizontal, you can fit more things onto the route, but you can you can see on the tablet and phone display here, because it's all narrow.
It has to change the wrong place items on the next row, a lot more frequently than it does on a desktop.
And so this is where design becomes interesting when you design the layout. You want to design it in a way that works as you intended, both on desktop, which is horizontal.
And on mobile, which is vertical.
So, just keep in mind this order of how the stack, and they'll make sense in a moment. Alright.
So, in chat here we have a question so not the layout grid today, the layout grid block is not part of our discussions today, that's not part of the design group so unfortunately we won't get to that.
But thanks for asking Jen.
And we also have another question could buttons include icons, such as a Facebook logo.
So let's have a look over here. So, I presume you mean inside the button here Can you can you put an image inside the button.
And the answer is yes. And the way to do that is by using what's called an inline image.
So what I've just done is I've clicked on the button. I've clicked on this arrow here, and then go to inline image. So I have a few demo images are here let me just randomly choose one.
And if you select that, you can put an image inside the button.
So for those. Does that answer your question.
Yes. Yep. Good. So that's how you would place an image inside the button.
Alright.
So next we're going to talk about the columns block.
Now, columns, lets you place items in vertical columns.
So, this is how you can start to make interesting layouts with your website. If you go back a slide.
Whoops. You'll notice things are generally placed across a page this is how a browser will place things by default. Whereas if you use the colon blog you can place things on top of each other in columns.
So with the columns vote you can edit the gap between columns.
And you can choose where the columns will be stacked on mobile, or not.
So, Let's have a quick look at that as well.
Let's see, sorry Kirsten has asked a question about abundance. Can we make the image inside the button smaller.
Yes.
So, thank you, Jen for answering.
If you click on the image, you're presented with with. So you can say make that 50 and change the size of the image like that.
All right person.
So we'll save that and we're going to make a new page.
And this time we'll try columns.
Oops.
This thing columns.
So another way to add blocks to your page is by typing a backslash there, you can type of backslash, and then start typing the name of your blog to add that block to the page.
So, for example, we've got three columns here, and I'm just going to add a cover block to each one.
So cover block.
You 123.
All right.
And now going back to the block become with the column columns, block.
For example, you can change the padding on let me see.
Oh, let me see. You can edit the gap between columns, let's let's go with that one. You can edit the gap between columns.
That's not the one block spacing, that the one. Here we go. Alright, so what I've done is I've come to dimensions. I've selected block spacing.
Here we go. Alright, so what I've done is I've come to dimensions. I've selected block spacing. And by changing this number here.
You can add extra spaces to the columns or remove that space completely. So that's something new that's come two columns book recently
with the columns block, you can for example, add two items inside the color.
So, For example, we can add an image.
And before jumping to the right here, we can add a second image inside this column.
Right.
So Colin, lets you put things sort of vertically vertically on top of each other.
And we're looking at the layout have different layouts happened with WordPress.
And you see here on the columns blog. There's a stack on mobile option.
So again taking this on and off doesn't change anything on the desktop view.
But if you go to mobile view.
You'll see what's happened is the columns have all stacked on top of each other. So we're on desktop view we had three columns side by side, but on mobile.
This is.
It's placing each column on top of each other.
And this is generally what you want to do, because if, for example, if we turn this off.
This is three columns on mobile. But you can see like this image here is now very small and hard to see and if that's like a button, you have to be really precise when you press that with your finger.
So on mobile it's generally good to stack things like this.
But, if, if you want a different design if you're going to have different layouts for a specific purpose with this. You can turn that off as well.
So that's the columns block.
And what is similar to the columns block is the roadblock.
So have a look at the example I've left in this slide here. This is the columns block you can see we have six columns next to each other here.
And then this is the Roadblock, and it's similar, you still have things stack next to each other. The biggest difference with these two is the columns block.
By default, will make each column the same width. So you can see, each of those columns are the same with bear with the Roadblock, by default, it changes the width of each row, well each item.
So, like this one has a lot more text and so that that item is a lot bigger was J K L is actually thinner. And so the roadblock will change the width of the different items in it.
But make sure they all still fit on one row.
Okay.
So, a roadblock, oops, a roadblock will always show items in a row, whether you're on desktop or mobile or tablet, a roadblock will always show items in a row.
So let's make another page for that.
And again, we have roadblock.
And let's see let's add, let's add some images again.
So that to add additional items to row. Your select the roadblock in the list view, and then click on this black plus symbol here that will let you add another item to the row here to that up to the row become a plus.
And one more image. And you'll now see we have three images in a row.
And if you change this to mobile view, they'll still be three in a row.
So on tablet, and desktop.
It always keeps the three images in a row.
You can change that you can change everything allowed to rap to multiple lines. But then, that defeats the purpose of the Roadblock, so the Roadblock, is to keep things in a row.
And it asked. So, I think three images in a row is different from a row with three columns.
That's a very good question, And the answer is yes. And so
the with the columns, the columns will always be the same width.
By default, so what it will do is it will squish, squish the images. So they fit in the columns. Where's with the Roadblock, it'll sort of change the size of the images, so you get them as the biggest possible without sort of breaking the layout.
Does that make sense.
Yep.
So, whether so columns give you even width, and the roadblock changes the week is probably an easy thing to remember.
All right, that's, that's been a lot of content already.
Ah, we, we have one more slide, and then just to give you a sneak peek we have Quiz time. Okay, so bear with me for one more slide and then we'll jump into quizzes.
So, we did columns block, which is equal columns Roadblock, which makes sure things are always in a row, even on desktop and on mobile.
And then we have two more which stack, in group. So step blog.
Make sure items are always adapt.
So,
from the few slides ago you'll remember browsers trying to put things next to each other then jump to the next line, but sometimes you always want things to be on top of each other.
And so the stack block, lets you do that.
So let me make a quick example of that as well.
So, testing stack. Whoops.
Stack block.
So we'll add in stack.
And again, we'll add three images, see one.
Come back here click on stack. Click on the plus in the bottom right to add another image
to
the image, three.
Okay, and you'll see already, even on the desktop preview. These images are stacking on top of each other before with the robot, they, they went side by side.
But with the stack block, there will always be on top of each other so you can change that to my worldview, and they're still on top of each other, and on desktop view they're still on top of each other.
So real keeps things in a broad stack keeps things stacked, and a nifty thing about this blog is you can change REL and stack in the block settings here.
If you click on stack and come to block settings. This one here says transformed to rub.
So by clicking that you can see the three images now in a single room.
Well, if you click on stack, they're stacked on top of each other.
Okay. And then the group blog.
Just groups things together, without specifying how they should be stacked, so it doesn't say they have to be around it doesn't say they have to be stacked on top of each other just grouping things together to help us manage your blocks a bit easier.
All right. So Susan has asked a question. So the roadblocks are responsive to the content insight and the column block is not correct.
So responsive, is the word they're responsive design is where a browser will look at the content and change the layout displayed in a way that best represents the information, so like if you have like five images in a row on mobile, they're going to be
too small to see so responsive design is when a browser looks at that and says, Let me put them on top of each other, make them larger so people can see them easier.
And so Susan what you say that is correct.
Let's see, Richard. Can you next blocks within blocks to create complex layouts.
Yes. And that is actually at the end of this session will have a practical exercise, so we'll get to that a bit later.
She said, when do we use stack block, I'm not so sure the advantages of using stack blog, rather than just adding several image box.
Good question. And again, we have an exercise at the end of this lesson we will talk about that so I haven't forgotten just pause that idea and we'll come back to a bit later.
Alright, so let's go to our quiz, let's go to our quiz here.
Christian.
See if you can tell which blocks in settings are being used in these examples. So what I've done is I've gone and made a test site. And I've made four questions here. so I'm going to show the questions.
and based on what we've learned so far.
I want you to guess which blocks I've used to make this layout.
Okay. So, so far we've done buttons columns group row in stack we've done five blocks, so which are we using in the past. So everyone get ready to type in the chat here, question number one.
What blocks are these images in right so you see three images, next to each other here.
And I'm going to do something well I'm going to do is I'm going to show you the mobile version as well. Okay, so this is the desktop version right now.
And what I'm going to do is on mobile, which to say iPhone 12.
Okay, so this is mobile view on mobile, the images look like this
right by them desktop. They look like this.
So what block. Did I use to get that layout.
Row, row, row with images.
Along the image as a roadblock the images are either blah blah.
Right.
Now, one thing about WordPress is there are multiple ways to get the same result. So, there are multiple ways you could probably achieve this as well.
But there are two things, in particular, I want you to notice you.
The first one is, when they changed it to mobile, mobile view they are stacked on top of each other.
So that gives me a hint that it's probably the columns block.
But the other thing that tells me it's definitely the column block is the width of these images, actually, all the same. So, it's a bit hard to say. But because there's one elongated one in the middle.
But the width of the images are all the same.
And on the robot they aren't the same. So, this, the answer is actually the columns block.
So you can open the page here. Have a look here, and you can see I've used the column spot for that one.
All right.
Okay, so let's look at question to collect these questions question to what block of these three images in.
OK, so again we have the same three images, next to each other. And if I change to mobile view.
That's how they look.
Okay, so we have Row, row, row.
and it says yes this time it's real.
Wow, okay but everybody so far I think that's real this time.
Kirsten says there's some it's a roadblock because the concept different with. Exactly. So you can see here the picture of the whale, and the sunset here are different widths.
So that's not column spot that's actually the Roadblock, placing things together. So
let's, let's have a look at those together. So, this is question one that's using the columns block.
And this is question two that's using the roadblock So, question along with the columns, they're all equal weeks in question to with the REL different widths.
Okay, so that's the column block and the robot.
Let's go to question three.
Question three.
What block, are these images here.
Okay, so you can see the 3d images like that. And let's take mobile view as well just to make sure.
If you go to mobile.
They look like that.
Okay.
Stack stack stack stack stack stack okay well the same stack this time and yes, the answer is deck.
So, in this case I've used the stack log on to make sure images are always stacked on top of each other in desktop and mobile.
Okay, let's go to the final question question for what combination of blocks in my using for this design. Okay.
So, we have four images this time.
Let me see if I can shrink that a bit so we can see it a bit better.
Let's see.
shrink shrink shrink. Here we go. So, this is desktop view sort of shrunk a bit.
What combinations of blocks and my using for this design.
Okay. And then let's have a look at the mobile views we have four images here.
And then let's look at the mobile view or mobile view they look like this so we still have the four images in a bit of a great sort of layout.
And the question gives a bit of a hint, what combination of blocks and my using. So it's not just one block here.
Fernando says group, Bruce has columns plus group. Susan says stack and row.
And it says column and stack stack the one with the background is stuck inside a column. So this is stuck inside of column.
Richards is columns stack button
here because we did talk about pretty images inside the button before as well so.
And once again, there are multiple ways to do it so people have come up with different combinations of answers here.
Well, let's have a look and see what I've done.
So, post.
Right.
And then, let me open the list here.
So what I've done is I've got a row with stacks inside.
OK, so the roadblock.
So, you seen the first two images here inside the first row.
And then the second images inside the second round.
And within the rose, I've added a stack, so that always stacked on top of each other.
And that's how I got the exact same layout, even on mobile. So if you use the columns block. The two columns on mobile, would get stacked on top of each other.
But I've tried to keep this for grid layout so I want these two columns next to each other, even on mobile.
So I've used the road.
And then, when the relegates, and then I've used the stack to make sure that the photos are still on top of each other. In the same way,
within the row.
Dan says, Wow, okay.
And they also did one tricky thing here. Whoops, I added the background color to this second stack.
So, if you go to stack, and then click on the block settings, you can actually set a background color to the stack. So that's how I got this orange eg background color behind the images here so if I wanted I could do that for the first deck as well.
They got the first deck, become background, maybe choose a red.
And you'll see that little bit of padding day which we'll talk about later but you can add a background color, two stacks, like that.
Jane says Ben What team are you using here.
I am using the 20.
December, one what what things are using, I was using.
But the 20 is at 2020 appearance themes.
2015 to 28 years old, so the default paint the default theme that comes with WordPress 2022.
Ok.
Okay, so we actually have four more blocks in the design blocks.
So let's have a quick look at those.
Next one is, the more block. So, the more blog and limits content shown on archive pages. So,
the WordPress editor also comes with a exit feature where you can add an excerpt of a post, which is
might be quicker just to show. So, let me show this let me close these out.
Whoops, I draw. There we go.
So let's see.
So if I go to.
So if I click on, click on the quiz questions here.
You'll see it shows a bit of a takes here.
And that is the excerpt of those posts.
So let's see question one.
So, inside the post setting, you can actually manually certain except so like, this is a excerpt. I wrote myself.
So update that.
And so, for the moment on question one, it's brought what blocks are these images in, so it's brought this text here to make the excerpt. And now that I've updated that when I refresh this page, it'll say, this is an excerpt I wrote myself.
So, the excerpt is a bit of text you can show on blog pages like this.
The mall block is a way of setting that so. So, for example, what are these images in. So if I did, delete the except on the right here.
This will go back to just showing the blog content.
And for example, I had more text here today is a sunny day.
I want to go outside.
Okay.
So now, if I update this page, you'll see that takes it also appeared here.
Which is fine but sometimes you don't want to put the whole post that you just want the first blank paragraph or something to show up on your blog page.
So what you can do is you can add the more block. And then what that does is it says, only show the content before the more block on these blog pages.
So everything under it hide. And people have to come to the actual post for them to see the rest of the content.
So what if we update this post like that.
And then come over here and update this, you'll see that's that paragraph about being a sunny day has disappeared because that's underneath a mole block.
So you have to click on the question before you can see that extra text.
Okay, so that's the mall block.
And
then we also have a page break block.
So the page break lock brakes the content inside of post or page into multiple pages.
This we're not actually going to use for our assignment.
Nick so I'll skip on that at the moment but if you have questions about the Patriot blog, do ask that in the questions and we can look at that in a moment.
I'll answer that later.
All right. And then the final to design blocks, a separate a block and space a block.
So, this is a example post here and say I want to spread these first two pieces of content the first heading in the second heading.
You can do that two ways. The first one is adding a separate a block, which, as this little line be in between the content.
You can also choose.so you can choose a wide line, but you can add, you can add a line between content to separate the content or the space of block was split the content by adding some blank space in between.
So if you want to add more space between two blocks, you can add the space a block and add a bit more space there.
So, this space of block helps you with a lot more design ideas you can add more spacing two items.
But one problem with the space of life, is it only adds vertical item spacing, you can't add it like like between two columns. This is Facebook doesn't add more horizontal space and all the ads vertical spacing.
And so, WordPress users were like, We want more spacing options we want to be able to add padding and margins and vertical spacing and horizontal spacing.
And so that's where the question comes up other other ways to change the space between blocks.
and the answer is yes.
So me personally, I don't really use the space of block can you more. When I design websites, I use the features I'm going to show next to add space into my site.
And these are called dimensions.
So different blocks have different dimension settings. These are generally pending margin and block city block spacing, and they're still updating the blocks so some blocks don't have any or sandbox don't have blocks facing, but hopefully in a future
version of WordPress, all the blocks will have all these different dimensions and so it's something that developers are still working.
So let me give you an example of what these dimensions can do.
So, let me make a new page here.
example.
Example dimensions.
Alright so I'm terrible with Mandy men shouldn't. There we go. I'm terrible at spelling but anyway.
So today we're talking about design. So let's say we have a few paragraphs of text.
My first
my first paragraph of takes Susan gave me the sign for dimensions. Thank you.
And then let's say my second paragraph of text, and to just make it a bit easier. I'm going to add a background color to these paragraph blocks. So, come to the block.
Click on background, I'll give this first one, a light blue background, and then give the second one, let's say, a yellow background.
Alright, so what you know this is first of all, there is a white gap between these paragraphs.
And this also shows on the front end of the pups. So by default WordPress adds a gap between every block, so it's a bit of spacing, just to make sure the page doesn't get too cramped, especially on mobile, if things are too cramped together like Social
engines will give you all like, put your lover in search results in there, they're looking at. Is it easy to click on buttons on mobile and think self spacing is important, but sometimes you don't need that much space like for your design you don't need
that much space. So what you can do is you can click on the dimensions.
Now, the paragraph block is one block that still doesn't have dimension city so I've, I've chosen the paragraph I'm looking at the block settings, and I don't see dimensions anywhere.
So what do you do in that situation is, you can group some blocks together. So what I've done is I've selected these two blocks.
Now click this to group them together.
And the group block does have dimension settings. So by now, I can edit the dimensions on the group blog, which are then apply those settings to all the blocks underneath it.
Okay, so I've clicked the group clicked on blog settings. Now if you come to dimensions and block spacing, let's make that zero.
And you can see here, we got rid of that wide gap between the two paragraphs blocks.
So you can drag.
Whoops, you can drag that you can drag that number up to give it more spacing, or less spacing. But this block spacing, lets you edit the space between blocks.
Something else you can do is add padding. So padding is like putting in your coat. It gives you a bit of space around sort of inside the group here.
So again, let me give you the example to see what that means. Well, I'm going to do is I'm going to give the group block a background car so let me, let me say pink.
Okay.
And you can see, If I change the padding. So with zero petting, there's no pink there, the paragraph box filled entire crew.
But you add padding.
You can see this pink appears so that's the padding of the group block. The group has a pink background.
So you can change the padding around it like that.
And then like if you add spacing.
For example, if you don't like 10, you can see we now have spacing between the two paragraph blocks. And that is all colored peak.
So, these dimensions settings also let you edit the space between blocks. And I personally find them more powerful than the space of block, because they give you more options and colors and you can even give things a border and things like that.
All right.
I've been talking a lot of his let's pause for questions. Does anybody have anything they want to ask before we move on to the last few slides.
Well, while people are thinking of questions. Here's my personal tip about when designing your site so we've talked about roadblocks and column blocks and lots of different design options here spacing and background colors.
And when you work on your site My suggestion is to first hand draw your design on paper first.
It could be a sketch in a drawing software, or something but my suggestion is don't jump into WordPress what right away. So you see an example of someone who's sort of drawn to schedule their website.
You don't have to write out all the texts or draw all the pictures but sort of how these blocks in place, and an ID is to have one version, the desktop.
And another version for mobile.
So have an idea of what your site wants what you want your site to look like on desktop.
And then what I actually suggest is to find your phone. Cut a piece of paper in the same size as your phone, and then draw the design on that as well.
Now give you an idea of like how big you want your buttons and things.
And then once you have these hand drawn designs, then consider. Okay. Does this should this go into roadblock and always be in the same row, or should it be in the corner spot so it changes position on mobile.
So this is my biggest tip for designing websites before jumping into WordPress, make sure you have an idea in like a map of what you want your site to look like.
All right.
Fair does is, I think, image to a button. Could the image Bissett rounded.
I don't think so.
Within like images you can't change the roundness of the image. So that's something you'll want to do in an image editing software before you upload the image to your site.
All right.
I'm
Bruce says can the button be rounded and then the image rounded. So buttons can be rounded.
So, let me, let me come back to this here. Let me add a buttons block.
Random button.
You can see on in the buttons settings over here.
Whoops.
So under the settings over here you'll see we have a border setting, and you can change the radius, and you'll see this made the button round.
Okay. So you came around the button. You can't round an image into Edit button.
Whoops.
All right.
So, we just have 10 minutes left now, and I want to do a quick experiment, if you have your own WordPress site open that up. And let's try and make a particular disease.
Right.
So, this is the design I thought.
So, on desktop. We want a big image on the left here with four blocks on the right, and then on mobile. com. We want these four blocks to flip to the bottom here under the blue square, but we still want the four blocks to be four blocks together like
that.
Okay.
There's, there's this, there's this picture give everyone an idea of the design everyone, so I've added this to my slides but usually I would hand write down a piece of paper first like this is the design I want for my website.
Let me show you an example.
So let's see.
Come over here.
experiment. Okay.
So, this is what we're talking about. On the left we have a big block.
And then on the right, this is actually for block so we have the top left heading.
We have a top right hitting.
Then we have a bottom left, this is a paragraph log in the bottom right paragraph block.
And if you change this to mobile view, you'll see that left block flips to the top.
But the full blogs are still in the same order underneath the left flop.
Okay so earlier. Somebody asked like how do you combine these different blocks can you mix them inside each other.
For this experiment, you will need to nest blocks. Okay, so let's, let's pause for a few minutes, you can either work on your WordPress site or even like hand you're like, just picture in your mind, which of the design blocks should be used to get this,
this complicated design.
All right, I'm going to be quiet for about two minutes to bless you all think, And if you have any questions, you can ask him the chance and I'll enter those.
Ben, I think there was a question in on I'm not sure if it was responded to.
But, when do we use the stock blog. I'm not so sure that advantages of using the stock broker than just eating several image blocks.
Alright. Alright, so let's see.
Let me, let me make a new page.
So let's see.
Stack was so let me try that so image.
One.
Two.
have three minutes stacked together.
So mobile, they still be stacked together.
tablets that.
Personally, I think you would want to use the stack blog.
When you might want to like change the, the gap between the blocks, like at the moment.
At the moment, there's a bit of a gap between these, but if you turn on all these into a stack blog. You then have the option of changing like the block spacing to get that smaller or an extra padding to all the blocks together, and it gives you a bit
more styling effects I think if they're inside the stack or the group block rather than just images on top of each other.
Does anybody else have any ideas like why would you.
Why would use the stack but rather than putting them on top of each other.
Chinese that,
I think, at the moment, the best answer I can come out of these dimension settings.
So, you can sort of change the gap between blocks a bit easier.
But, if anybody else has any other ideas. You're free to add that into the chat here.
And it says stack has more options in standing I guess that's the one in my mind as well. Yeah.
All right.
Um, it also says Ben, I'm always a fan of an idea when in their nesting where we can have one video inside left block. And on the right side we can have two horizontal side by side blocks and having vertical alignment haven't seen lots of website but
this alignment It looks great.
So that that seems a bit similar to the design we're trying to make here, not quite identical but you have like a video on the left, and then blocks, sort of, horizontally aligned to the video.
But yeah, with these with the row stack column group. We now have a lot more options to design our websites like until now you needed coding experience and like CSS code and things like that but with these, these design blocks.
Like today I didn't use a single piece of code and we could still make all these adjustments so WordPress is definitely the more powerful, Richard. Can you save a block and use it somewhere else, that would be a reason to use this type of just to organize
the content.
So with WordPress.
You can save blocks for example.
So at the moment, I've selected the stack block. And you can add to reusable blocks.
And by doing that on like another page or another post, you can go and add this entire stack block, and you'll add all the images inside it onto that page and post as well so Richard what you said is a good idea if you like adding the same three images
to every one of your post. Then rather than sort of adding three images each time you can say them as a stack block as reusable stack block and use that on other pages and posts as well so that's actually a really good idea.
Recently, with the site at a time, you're now able to edit the templates of your pages and parts that's another big story we won't go into today, but I guess with designing layouts and that as well stack and Rob would have a use in designing the templates
over there.
person says to Columbus to Colombo inside. Okay, so I think Kirsten here has given us an idea for how we design this layout. So we're coming to the end of the hour.
So let's have a look at how I did it. And again, because all these blocks are so powerful, there are more than one way you can make the same layout.
So, let's see it Kirsten if you came up with the same ideas I did, did it by the way did you work on that in your WordPress site or did you just think of that in your mind and came up with this combination of blocks.
Yeah. So
then, in that page.
So what I've done is festival I've got a column log. So we have two columns on mobile the column stack on top of each other, so you can probably see that he they stack on mobile.
And then inside each column on the left here I've just added a cover block for the moment.
On the right, I've used a roadblock.
And then in the Roadblock, I've used a stack block.
So, we have two roles in the right here.
First row, the second round, that's inside the second column. And then each of those have a using a stack block. So we have a hitting and then paragraph, and then hitting and paragraph.
But going back to that question Why would you use the stack block. I mean, I'm interested right now. What happens if we don't use the stack there, what, what happens there so let me duplicate that.
Let me see if I can quickly do this in the last few minutes we have here.
Well, I want to do is move these here.
Get rid of that stack block, and then move these here.
Now that doesn't work.
I've made a mess you
stack.
So we have two roads.
If we didn't use the stack in each of the box would just be right next to each other. And so you'd have heading text heading text. So in this case, we must use the stack block, because we want to stack the heading and text vertically like that to get
them inside the column here.
So this is an example where we must use the stack back to get it get this design.
I hope that answers your question. I think it was to say who asked that earlier in the session, but when would you use a stack block for some designs.
I think it, it becomes necessary just to get that designed the way you want.
All right, so that is the end of today's session.
Thank you so much everyone for attending. That was a lot of content. So again, I shared the slides earlier in the zoom chat. This recording is going up and WordPress TV in probably a day.
And then on that recording, you'll also find the slides.
So you can look at all this content again later. Hopefully today you've got a better understanding of the design blogs and the rows and columns of the stacks and the dimensions and how you can hopefully you have more tools now to design your site, even
better.
So thank you so much. If you have additional questions, you can find me in the WordPress slack or you can ask a question in the meetup group, and hopefully I'll see you all again in another online workshop soon, so thank you so much and have a good rest
of your day.
Bye.