Avoiding orphan Column Gutenberg blocks in full site editing

WordPress’s new full site editing (FSE) method of building websites has also created some interesting issues.

One of them involves stacking of the Columns block. Basically, you’re all good if you use an even number of Column blocks because they will stack evenly.

However, if you use a 3-col or an odd number of Column blocks, you’ll sometimes find that you get orphan blocks as you shrink the viewport’s width.

Demonstration

I’ve set these blocks up with a background colour so that you can identify the three columns in this example. The first block is the image, second is pink and third is yellow.

Here’s how they look on desktop. All fine and dandy.

At 768px viewport width, the three-Column example gets wrapped whereas the second example doesn’t.

In mobile view, everything is OK as all Column blocks are stacked.

I wanted to avoid orphan Column blocks. I wanted my pages to either stack them fully or leave them in the three column design.

So, how do we do that?

Columns in columns

In order to create the second example, what you need to do is to place a Columns block in a Column.

So the structure is as such:

So, there is one overarching Columns with 2 Column blocks.

Inside the first Column block is the image and button.

Then, there’s the second Column. Inside it is a new Columns, which has two Column blocks.

Now, there’s one more step.

If you want to ensure all blocks are equal in size, then you have to declare the size of the first Column.

In this case, since there’s 3 columns, the first Column should take up 33%.

Choose your first column, then go to the Inspector panel (on the right sidebar. Enter 33%. Ensure you are not using pixels by clicking on the “PX” unit button and choosing %.

Gutenberg Column blocks take up an equal amount of space, so that’s why you have to override the percentages of the first Column in order for this to work.