Designing with row and stack blocks

Using the Group block is one of the cornerstones of mastering the block editor. When you select a Group block, you have the variations of the Group block, the standard group, rows and stacks. In this video tutorial, we will look at how you can use rows and stacks to achieve various designs.

Learning outcomes

1. Using the Row and Stack blocks more effectively.
2. Combining rows and stacks.
3. Altering the additional settings of Row and Stack blocks to achieve various layouts.

Comprehension questions

1. What is the difference between a Row and a Stack block?
2. Which additional settings of the Row and Stack blocks give you more control over design and layout?

Transcript

Hi, and welcome to Learn WordPress. Let’s dig a bit deeper into how we can use the Row and Stack blocks more effectively. Using the Group block is one of the cornerstones of mastering the block editor. When you select a Group block, you have the variations of the Group block, the standard Group block, which gathers blocks in a container, the Row block, which arranges blocks horizontally and the Stack block, which arranges blocks vertically.

To start, let’s look at some common examples of where the Row block will come in handy. Firstly, I want to show you how you can create this top section of my example with the help of a Row block. So if we scroll down, we will see it’s currently empty. So let’s go ahead and type in forward slash row and then add a Row block. Firstly, we will add a heading and name it The Green House. Then I’ll press enter, and of course, the text will now be on the right of the heading. Let’s go and copy the text from our example: ‘Make your home a sanctuary”, and then paste it. Next, we will open up our list view, select the Heading and the Paragraph block and then group them using my block toolbar.

Now that the text is below my heading, I would like to remove the space between the blocks. I’ll open up my sidebar settings, make my way to styles and below dimensions ensure that the block spacing is set to zero. Now that the heading and the text are closer to each other, I think it looks great. I will close my sidebar settings and select the Row block in my list view. Click on the Inserter and add a Buttons block. Let’s say: ‘Explore’ and open our sidebar settings and select the outline style. Next, I would like to move the Buttons block to the right. This is where the power of the Row block comes into play. So let’s select the Row block in our sidebar settings and make our way to justification in our block toolbar, and then select Space between items. Once we select that, we will notice that the Buttons block pushes to the right.

Lastly, I would like to align the Buttons block to the bottom. So let’s select Change vertical alignment in our block toolbar and click on Align bottom. So as you can see, there are many design possibilities when using the spacing and alignment options of the Row block.

Secondly, the Row block works very effectively for headers. So to add a header, let’s make our way to Appearance and then click on the Editor. This will take you to your Site Editor, where you can manage templates and add headers and footers. Make your way to template parts and then click on the plus icon to add a new header template part. Select ‘Header’, name it appropriately and then click on Create.

Now we can build our header by first adding a Row block. Next, I will add my site logo, which I’ve already added to my Media Library and then enlarge it. Once I’ve done that, I will press enter, and next to my site logo, I will add my Site Tagline block, ‘Better beans, better coffee’. Then I’ll open up my list view, select the Site Logo and the Site Tagline block and then wrap them in a Stack block. Now I would like to remove the space between the two blocks, so I’ll make sure I’ve selected my Stack block, open up styles in my sidebar settings and ensure that the block spacing is zero. Then in my block toolbar, I will also change the justification to the centre.

Next, I’ll select my Row block, the container block, make my way to styles and change the background colour to salmon. Then I’ll click on the Inserter and add my Navigation block. Now we will see a list of all the pages that I’ve added to my site, but I’ll click on the three vertical dots and select a navigation menu that I’ve already created. Then I will ensure that I select my Row block again. Below ‘Layout’ in our sidebar settings, I will click on Space between items to ensure the navigation menu moves to the right. Now our header is done.

Let’s end off by taking a closer look at the Stack block. In this example, we have three columns. As you will notice, there is less text or content in the left column. I would like the background colour and the Buttons block to push down and align with the columns in the middle and the right. So to do that, we will select the Group block of the left column, open our sidebar settings and transform this block to a Stack block. Then I will select the Heading and the Paragraph block in my list view and group them.

Thereafter, I will select my Stack block, open my sidebar settings, open styles and make my way to Dimensions. Click on the three vertical dots. Below Tools, we have the option to select Minimum height. Let’s go ahead and do that. We will change the value to percentage and then to 100%. As we did that, you would have noticed that the background colour expanded and now aligns with the other columns.

Next, we will ensure that the Buttons block on the left aligns with the other Buttons blocks. Make sure you select your Stack block, click on Change vertical alignment in the block toolbar and then select Space between. Now all the Buttons blocks align.

In the last example, I wanted to show you how the Row and Stack block can work as a team. In this example, I’ve added a Row block with an image and then a Stack block with four Paragraph blocks. It is also important to note that I’ve changed the vertical alignment of the Row block to stretch and fill the entire Row block. The first thing I’m going to do is to select the top three Paragraph blocks in my list view and stack them in a Stack block. To remove the space between the blocks, I’ll open up my sidebar settings and, below Dimensions, change the block spacing to 1. The last step is to move the $75 to the bottom of the Row block. So to do that, let’s select the main Stack block and then click on Change vertical alignment in our block toolbar and then select Space between. That completes our design. In this example, I’ve added a few more customizations.

These blocks may appear basic on the surface, but as you have seen, you can do a lot with them once you apply additional settings like Space between and Minimum height. I hope this has been helpful, and visit Learn WordPress for more tutorials and training material.