Common Blocks

The best way to understand how a block looks is to see for yourself. So I’ve included some screenshots of the most commonly used blocks on this page. However! when I wrote this post, I was using the classic editor on this site, so to see some live examples of the block editor in use, …

The best way to understand how a block looks is to see for yourself. So I’ve included some screenshots of the most commonly used blocks on this page.

However! when I wrote this post, I was using the classic editor on this site, so to see some live examples of the block editor in use, see one of my other sites…

Live Site Using WordPress 5 And Gutenberg Blocks

This is a screenshot of a Cover block

Screenshot of a Cover Image block in Gutenberg

Cover block width settings

The cover block can be set to…

Full browser width
Wide width
Align centre

If your theme does not support full browser width, the block will not span from edge. Even if you select the full width option.

Only a few blocks have a width option

Most blocks only have the align centre option. Luckily you can use your own common sense to work out if a block will have the full width option.

Ask yourself, would this block look better if it spanned the whole browser window?

This is a screenshot of a pullquote. The styling depends on your theme.

For instance…

Would a paragraph look better if it spanned the whole browser window?
No it would be difficult to read.

And no, paragraph blocks do not have the full width option.

Most of the time, using common sense, you can guess if wider width options are available.

This is a quote. Not a pull quote. Normal quotes do not have a width option.

This is a screenshot of an image gallery

The layout of a gallery block will change depending on the number of images in the gallery and the size of the device used to view the page.

This is a three column layout

You can put headline, paragraph, image, button and list blocks inside each column.

Screenshot of a three column layout taken from a Gutenberg enabled page.

Media and text

The media and text block is a simple way to place an image to the left and text to the right on a single row. You can place the image on the right if you wish. You can also set the image to stack on mobiles. I can’t do that here, because I built this page using the classic editor.

More options in WordPress 5

The blocks I’ve demonstrated on this page are the most commonly used blocks. However, there are several other blocks built into WordPress 5.

And more blocks can be added

Blocks are a new addition to WordPress. But already theme and plugin developers are adding their own blocks to their new creations. For instance, the Atomic Blocks plugin adds several useful blocks to WordPress. Including a call to action block and a post grid block.

WordPress 5 and the new block editor is a new beginning for WordPress. And I’m exited to see where this takes us.

Where to find more blocks

The WordPress plugin repository is a great place to start looking for more blocks to add more power to your WordPress editor. One of my favorite block plugins is Atomic Blocks.

And don’t forget, you can see some live examples of pages I built using the block editor here.