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
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?
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.
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.