Gutenberg for WordPress, a gentle introduction, part 1

If you have a website that uses WordPress — and your WordPress version is up to date — you might have noticed the big change in your content editor. We have now entered the era of Gutenberg. Without going to deep into it, there was a lot of debate about Guternberg and what it meant for the trajectory of the WordPress project. Whatever the pros and cons, Gutenberg is here and if your site runs on WordPress its important to get familiar with it.

Generally speaking, if you are using WordPress primarily to blog, Gutenberg may look and feel different than the Classic Editor, but its not. Just start typing. Add the title, like it says, then click in the area below where it says “Start typing.” Of course, it also suggests another option: add a block.

This is the part I want to explore a bit. With Blocks, Gutenberg allows for more flexible, creative posts. Let’s recreate this:

A combination of blocks can make your posts more dynamic and engaging.

As examples go, its ok. But going through it will demonstrate different block types and show you how to mix and match elements to bring your posts to the next level.

The first element after the title is just a paragraph block. You can get one of those when you “start typing,” as the post editor suggests. Once you have you content in place, its time to add another block. Make sure “Block” is selected on the right sidebar (as opposed to “Document”) and hover in the area below and click on the circled “+” sign to add a block.

Add a Gallery

We are going to add a Gallery. You should see “Gallery” when you create a new block, but if not, check “Common Blocks.” once you have selected it, it will give you the option of selecting images. You can select multiple images (hold down the Ctrl key and click on images) from your Media Library, and WordPress will take care of the work of spacing them and laying them out. I selected three images, a very common layout convention.

Fun with Columns

Being able to add columns easily and quickly inside your content editor provides a potentially powerful tool to WordPress. Generally speaking, column layouts have been restricted to either page-builder tools or to developers using code. Of course, to really get the most out of Columns, knowledge of CSS helps, but for simple use, the Columns block is great.

Click on the Add Block sign and scroll to Formatting. There you will find Columns. You can select the number of columns using the slider that appears on the right. once you have done that, you can either type directly into the columns, or use the “Add Block” again while hovering inside a column to add another element. In our example, I used “Block Quote” for the left column, and a regular paragraph block in the right.

Gutenberg is simple, fun, powerful

The debates about Gutenberg and the future of WordPress will continue to rage. I admit, I was hesitant at first, but I already see the benefits of the new block-centric editor and so do my clients.

In part 2, we will delve a little deeper and see how we can use Gutenberg for page layout. Stay tuned!

if you have a project you have questions about, contact me.