WordPress Gutenberg Blocks: Layout vs. Columns

WordPress new Gutenberg Editor, aka WordPress Block Editor, is becoming more popular every day. Gone are the day where learning HTML, or PHP, was the only way to achieve certain visual results. With Gutenberg our options are almost limitless. Skeptical user are complaining about Gutenberg inconsistency and bug. Yes, the new editor still has a lot of bugs (October 2020), but it’s improving by the day and it’s without any doubt a huge step forward compared to the old WordPress classic editor.

What is the Gutenberg Editor?

If you are already familiar with the Gutenberg approach skip this section. WordPress has been If you are already familiar with the Gutenberg approach you can skip this section. WordPress has been working on a new Editor, called Gutenberg, for quite some time. The idea behind Gutenberg is to use a Lego approach in the construction of a web page (and for the entire website in the future). Users have access to a palette of predefined blocks that implement the most common functional area of a typical web page. Instead of writing some obscure HTML code or proprietary WordPress shortcuts, we can now add to our page blocks like Paragraph, Heading, List, Image, YouTube Video, and so on. There are dozens of different blocks out of the box, and we can also create our own blocks. Blocks are like object: they have a position (that we can change moving them up or down the page), they have a set of properties we can use to customize them according to our website style, and they have placeholders for our content. We can now add all sorts of new content to our page without having to worry about the underline HTML. That’s big, very big, specially for WordPress users.

The Layout vs Columns Gutenberg Dilemma

Let’s explore one challenging difference: the difference between the Layout block and the Columns block. Both can be used to create a section of your page divided into 2 or more columns. For the basic use the two block are equivalent, but as we start to enjoy using them we discover some important difference.

Comparing WordPress Columns Block with Layout Block

Columns BlockLayout Block
Background ColorNoYes
Min Number of Columns21
Max Number of Columns64
Individual Column PaddingNoYes
End Gutters ControlNoYes
Width Granularity1%1/12
Nestability for Columns BlockYesYes
Nestability for Layout BlockYesYes
Main differences between Columns Block and Layout Block

Creating a Layout Block

Here is a simple visual sequence of actions (clicks) to create a Layout Block in WordPress.

Layout Block creation Dialog box
Layout Block with 4 columns, the maximum allowed.
A final rendering of a Layout Block

Creating a Column Block

Here is a simple visual sequence of actions (clicks) to create a Column Block in WordPress.

Columns Block creation Dialog box
Columns Block with 6 columns, the maximum allowed.
The final rendering of a Columns Block.

Which one to Choose?

My experience with WordPress is suggesting that the Columns Block is more mature and therefore more reliable and easier to configure. The Layout Block has been designed to be much more powerful and flexible, but still need a few more releases to improve its usability and to become more reliable. The Gutenberg Editor still a very young product. It’s going through a series of frequent and significant releases and, at this stage, each release can makes a huge difference compared with the previous one. I’m confident that in a few months or a year the layout block will a complete replacement for the columns block. Very few people are going to miss the old way of building WordPress pages.
At the moment one of the major issues with the Layout Block are the conflicts with existing (not yet updated) themes and possibly with our own custom CSS.

Conclusion

If you had a different experience with these two important Gutenberg blocks, please share it me and all the readers by leaving a comment.