Climbing the Gutenberg: The new WordPress block-editor

At WordCamp Cape Town 2018, I gave a workshop focused on getting WordPress users comfortable with the new editor that’s coming to WordPress 5.0 at the end of the month. We went through some of the basic features and some of the new options available through Gutenberg.

Gutenwho?

gutenberg.jpg
Johann Gensfleisch zur Laden zum Gutenberg, the coolest kid on the … block

Johann Gensfleisch zur Laden zum Gutenberg (which in English translates to “John to load goose meat on the good mountain”, I know, right) invented the printing press in the 15th Century. By doing that, he changed the world; people suddenly had a lot more access to reading and writing. Editing and publishing became faster and easier.

The Gutenberg project in WordPress wants to do something similar; change the way how editing and publishing is done on WordPress so it becomes faster and easier. Below is a short introduction into some of those changes.

Blocks, blocks, blocks

Gutenberg/WordPress 5.0 introduces a block editor. Every content element you introduce is a block. Just click on the + button and look for the block you want to insert. Here are some quick screenshares of me adding a heading element, a paragraph block, a cover image and a twitter block:

1- basic blocks A.gif
Adding a title, a heading and a paragraph
1- basic blocks B.gif
Adding a cover image with the Twenty Nineteen theme
1- basic blocks C.gif
Adding an embedded Twitter block

Next you can also easily move blocks around:

2- moving blocks.gif
Moving blocks around

Shortcuts and reusable content

Two of my favourite features of Gutenberg are the shortcuts and the reusable content. So let’s dive into those things a bit.

The new editor comes with a lot of shortcuts. On macOS, you can access them by typing ^⌥H. For other operating systems, you can use Shift + Alt + H. Or you can just access the list, but going to the top-right button and open the shortcuts there, as I show in the screencast below.

Of all shortcuts, the most important one to remember is that you can insert any block by starting to type /. Your most used blocks will show up first but you can just type the name of the block type and the editor will show those available.

3- shortcuts.gif
Shortcuts for even faster editing

Reusable content is one of those other amazing features. When you’ve created a block (or a group of block), you can convert them into a reusable block that will show up on all posts and pages as an option.

Some examples when this can be handy:

  • You want to have a call-to-action button on several sites and pages. (That’s the example in the screencast below.) If you update the call-to-action block, everywhere this block is positioned, it’ll be updated. This makes for a great tool for updating marketing campaigns with a few click.
  • You’re busy with a blog series on the chapters of a book you’re reading. And on each of those posts, you want to have a block with the cover image of the book and the author.
  • I use it regularly for prepping meeting agenda that have recurring items on them.
4- reusable block.gif
Reusable blocks: Creating a call-to-action and updating it everywhere on the site

Some helpful plugins

Gutenberg already has quite a few different types of blocks, but you can also install extra plugins for even more blocks. Have a look at these:

My slides

Here are my slides of the workshop: