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.
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).
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.
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:
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
Leave a Reply