Foto mostrando bloques de madera apilados

When you create and edit pages with the WordPress block editor, you’ve probably been frustrated more than once trying to change the layout or styles of some blocks without touching code. Particularly when you resort to creating columns to create layouts for which columns are not intended.

In this post we will see that we have more suitable alternatives for some page part layouts. With a couple of examples, you will see some of the possibilities offered by the group, row, and stack blocks that solve some of the problems we may otherwise encounter with columns.

For the examples shown in this post I have used WordPress version 6.0.1 and the Twenty Twenty-Two theme.

Examples Using Columns

Let’s see, for example, two simple layouts of the first section content that we would like to show on the page of a tourism agency.

First example of first block
First example of the first section to display on a web page of a tourism agency.
Second example of first block
Second example of the first section to display on a web page of a tourism agency.

To reproduce the first example in the block editor, one option is to first add a cover block with the selected image and then add a couple of columns of different sizes. The right column takes up a third and contains the content (i.e. title, paragraph, and two buttons).

Creation of the first block with a background type image and two columns
Creation of the first section with a cover block and two columns.

When viewed at full size, the layout looks nice. But if we reduce the size of the window, the browser keeps the display in the form of columns and shows the buttons one on top of the other.

Viewing the first example in a smaller size window
Display of the first example in a smaller size window.

You can see that with this solution we have not only added an empty column but it is not exactly the display we would be looking for on smaller devices.

Similarly, for the second example we also add a cover block first, then a couple of columns, and finally the content. The content now contains an envelope icon followed by an email address. We can’t use a media and text block because the minimum size of the block image exceeds the size of what we want to display… so, again, we use two columns: one for the icon, the other for the text:

Creating the second example with a background image and columns
Creating the second example with a cover and column blocks.

As before, in addition to having added empty columns, by reducing the size of the window, the result that is shown on the screen is not exactly what we would like.

Display of the second example in a smaller size window.
Display of the second example in a smaller size window.

As you can see in the previous image, apart from all the text being very grouped on the left, the combination of the image of the envelope with the email address does not look good. The proportions are lost and the text of the mail is broken.

Let’s see how we can solve the above problems if we use the group, raw, and stack blocks instead of columns.

The Group Block

The group block, as you surely know, is a block that is used to group a set of blocks within a container. It’s like a parent block with children.

It’s most commonly used to group a set of columns or paragraphs and then tweak the whole group by, for example, setting a background color or defining unique spacing and margin props to those used by other elements in the page.

Group block properties
Group block properties.

You can also indicate a maximum size for all its content and add a border with a certain style and color.

Nelio Unlocker

Switch to WordPress safely while keeping your design and content

Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.

The Row and Stack Blocks

The row block and stack block are a type of blocks that allow you to insert multiple blocks in a row (or column, with the stack block) and space them evenly. You can use the row or stack block to create dividers or add multiple items on the same line as if they were included in columns.

The properties that you can specify in both blocks are very similar to those of the group, except that you cannot specify the maximum size of its content. And in this case, you can add the justification of the entire block relative to its container.

Let’s see how we can create the previous two examples using these types of blocks instead of columns, and the advantages they provide us.

Examples with Group, Row, and Stack Blocks

To create the first section of the first example without using columns, we first create the cover block with the image as before. Next, inside the cover block we add a group block. One of the characteristics of the group block is that its alignment is always full-width and it is centered in its container. Therefore, by adding the title, paragraph, and the two blocks and center-aligning each of these blocks, the result is the following.

Example of a first block created with a background block and a group block
Example of a first block created with a cover block and a group block.

This is not what we wanted initially, since the group block shows us all the information in the center instead of to the right of the cover block.

Example 1 created with a group block
Example 1 created with a group block.

But it has the advantage that we can indicate a maximum width to it so that the displayed text does not occupy the entire width of the cover block. And unlike the column, no matter how much we reduce the size of the window, the buttons are always aligned side by side.

Example 1 created with a group block limiting the width of the block
Example 1 created with a group block limiting the width of the block.

How do we get the group displayed on the right side of the image? This is where the stack group gives us the solution we were looking for.

After creating the cover block, add a stack block and set right justification. Next add the group block limiting its size and add the content.

Example 1 created with stack and group blocks
Example 1 created with the stack and group blocks.

Now, we don’t have any empty blocks and when viewing the page whatever the page size, the content is displayed with the buttons aligned side by side at all times.

Visualization in a smaller window of the created example
Display of the created example in a smaller window.

The second example is very similar, but how do we solve the problem of the icon and the email address? Well, create a row type block with an image block and a paragraph:

Example 2 created with stack, group and row blocks
Example 2 created with stack, group and row blocks.

Now, when we reduce the size of the window, the display of the first section of the page still looks great, keeping the image and email address aligned and without breaking the text.

Preview of the second example created with the stack, row and group blocks
Preview of the second example created with the stack, row and group blocks in a reduced size window.

Conclusion

With these two examples we have been able to see that some of the layout issues we ran into with columns can now be solved with group, stack, and row blocks. With these blocks you gain flexibility regarding columns by being able to justify content and tweak margins. In addition, you are not forced to to use empty columns that don’t make any sense. So forget about creating pages with empty columns!

Featured image of La-Rel Easter on Unsplash.

One response to “Why and When to Use WordPress Group, Row, and Stack Blocks”

  1. christian Bueno Avatar
    christian Bueno

    Thanks Ruth, very useful information.

Leave a Reply

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.