Gutenberg Layout blocks

Today we’re looking at the Layout blocks in the new editor for WordPress 5.0 and beyond, nicknamed Gutenberg. You can watch or scroll down to read and see samples.

The new Layout blocks

Button

The Button block allows you to add buttons to your page without editing HTML or fiddling with CSS classes. You’ve got a few customization options in the Block sidebar to control color and styling. 

Here’s an example:

Columns

The Columns block allows you to easily add separate columns to add additional blocks.

The options and interface aren’t anywhere as good as dedicated page builders, but you can at least split a section of your page or post into individual columns.

Media & Text

The Media & Text block allows you to add an image or other media with text to the side.

It’s an interesting block in that it combines features from the Column, Image and Paragraph blocks into one block.  You can also add a limited number of Common blocks.

Spacer

The Spacer block adds adjustable white space between two blocks. 

Like this.

Other Layout blocks

More

The More block marks the end of the excerpt of your page or post’s content. Many themes automatically show an excerpt on archive page, but sometimes that’s not the case. Anything before this block will be shown in your archives, unless you put in a manual excerpt.

Page Break

The Page Break block allows you to break up a page or post into multiple pages. This is handy if you have a very long article and don’t want readers to have to scroll forever, giving an user experience similar to eBooks where readers flip from one page to another.

Separator

The Separator adds a separator between two blocks, nothing more. There are some styling options in the sidebar.


Got questions?

Got questions about WordPress and the new editor? Let me know in the comments below.