By the time you read this, I hope you have installed Gutenberg (WordPress 5+) and tried it out at least a little. It’s really quite easy to use. I was afraid it might not be before I tried it myself. My fears were unsubstantiated.
In this article, I’ll take my first look at using the Column Block. We’ll take a look at it together, so to speak.
How To Add a Block of Columns
To this point in the article, I obviously haven’t been using multiple columns. Technically, I’ve been using a single column made of several paragraphs (discussed more here) and subheadings.
Probably the easiest way to switch from a single column to multiple columns is to start a new paragraph by hitting the Enter key, but before you type any new text, click the plus sign at the left to pick the Columns Block icon from the popup.
I did just that, so now I’m typing in the left hand column of a two-column layout, which is what Gutenberg gives you by default.
After I type a little more here in the second paragraph of the left column, I’m going to click in the right hand column (where it currently says, “Start writing or type / to choose a block”).
I stopped typing in the left hand column and am now writing in the right hand column. I know this is kind of silly and self-explanatory text, but it serves the purpose for now. I’ll try to think of something more intelligent to say down below when I’m done “filling up” the column on this side of the post. Close enough…I’ll stop now.
If you hover over one of the paragraphs within the Column Block, you’ll see something like this.
Instead of just the Paragraph designation, Gutenberg tells you that this particular paragraph is part of the column layout that you chose. I can imagine times when that wouldn’t be immediately obvious, so it’s nice that Gutenberg gives you that clue.
Adding More Than 2 Columns
As I mentioned above, the Columns Block gives you 2 columns by default. The little columns icon itself shows 3 columns, so there must be a way to get more, right?
Right.
After you add a 2-column block, move your cursor to the left and click the two rows of three dots that will appear between the arrows.
That activates (I guess you could say) the settings for columns over in the right hand column of your editor.
You can see in the screenshot above that it’s still set to 2 columns, since that was the default.
Now, you don’t want to get crazy with this, but I can imagine times when you’d like 3 columns or possibly 4. Any more than that is probably too many. Remember, this is supposed to look good on mobile devices too.
So let’s see what 3 columns looks like.
This is text in column one which, by default is a third of the available space.
Here is some more obvious text in column two.
And finally we have column three way over here on the right.
You noticed that I played around a little and centered the text in the center column and right justified the text in the right column. It doesn’t look like that automatically!
Final Column Block Notes
As far as I can tell, you can’t resize a column. If you really need that option, there’s probably another plugin out there that will do it for you already. But be careful with such things and consider whether it’s really worth adding such a feature compared to how many times you’re really going to use it.
Maybe the WordPress folks will add more features to this block in the future. For the vast majority of us though, I think it already has all we need.
Can you think of anything else you’d like it to do? Contact me with your ideas.
