WordPress Gutenberg Blocks: Layout vs. Columns

While many users already fully proficient with the new Gutemberd WordPress Editor, some details are still obscure. Like the difference between the Column block and the Layout block.

WordPress new Gutenberg editor is becoming more popular every day. Gone are the day where learning HTML was the only way to achieve certain visual results. With Gutemberg our options are almost limitless. Skeptical user are complaining about Gutenberg inconsistency and bug. Yes, the new editor needs a lot of bugs, but it’s a huge step forward compared to the old WordPress classic editor.

The Gutenberg Editor

If you are already familiar with the Gutenberg approach 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. Users should have access to a palette of predefined blocks to implement the most common functional area of a typical web page. Instead of writing some obscure HTML code, we can now ad blocks like Paragraph, Heading, List, Image, YouTube Video, and so on. There are dozens of different blocks, 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 placeholder for our content. We can add the content without having to worry about the underline HTML. That’s 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

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

Creating a Column Block

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 is a young product. It’s going through a series of frequent 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. 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 there two important Gutenberg please share it by leaving a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s