Block: Columns – Gutenberg Primer

With WordPress version 5.3, the column block received the necessary functions to be able to work with it in a meaningful way. Different column layouts can be selected and subsequently adapted.

The block toolbar

By default, the column block takes the width that your normal content needs. You can also choose in the column block whether you want to use the wide width or the full width, if your theme supports this.

We explain the settings in the advanced menu behind the three dots at the end on the overview page of the blocks under The block toolbar.

Since WordPress 5.3 there has been the option to select different column layouts, as you can see in the screenshot above. Columns with different widths are now also possible.

For the example I have chosen a simple, 3-column layout. After the layout has been selected, the first column is preselected. What is new in WordPress 5.5 is that a selected column (not the entire block) can be moved to the left and right using the arrows.

Since WordPress 5.3, the setting for the vertical alignment of a column is available in the block toolbar. The content can be aligned vertically at the top, in the middle or at the bottom. This applies either to a single column, but can also be set on the column block itself.

The settings in the sidebar

Since WordPress 5.5 you can select the text color and the background color or a gradient for the entire column block and all subordinate columns for the column block.

You can also add up to six columns in a column block.

Under Advanced you can define an HTML anchor (since WordPress 5.5) and additional CSS classes.

In the settings, you can now specify how wide it should be for a single column. The information is given in percent. If you change the width of a column, the other columns are automatically adjusted.

Convert to other blocks

You cannot convert a column block into other blocks. The conversion into a group causes the column block to be moved to a group block.