WTF are Gutenberg blocks?

In December 2018, WordPress released version 5.0 of the open-source blogging tool. With this major update, they introduced the Gutenberg editor + Gutenberg blocks. Instead of treating pages + posts like traditional Word documents, WordPress now lets site owners add components to each page with a more visual approach.

First things first. If you don’t see blocks on your new page or post, make sure you aren’t using the Classic Editor plugin. This plugin was created for website owners that didn’t want to use Gutenberg OR had issues with their site functioning on the latest version of WordPress.

When you create a new page or post in WordPress 5, you’ll see something like this:

Gutenberg Block new page example // tiny blue orange

The gray text that says “start writing or type…” defaults you do a paragraph text style block. But when you mouse over that phrase, you’ll get more options — a plus icon to search all available block types or icons for three commonly/recently used blocks.

What are these blocks?

These blocks are pre-built elements you want to add to your page or post. Almost like a way to style your content more quickly.

Take quotes for example. In earlier versions of WordPress, you needed to type out the quote + then apply the blockquote style to your text. Hopefully your WordPress theme has settings for blockquotes. If not, you applied a style with no changes to the words.

But now, you can add a quote block anywhere on a page or post you’d like. There are 2 default quote blocks to pick from — a traditional quote or a pull quote, which is like taking text directly from the content you’ve written to feature.

Blogging with Gutenberg blocks

The nice thing about these pre-built elements is that it doesn’t take a lot of work to get started with them. On that new page or post you’re working on, simply typing underneath the title will give you a paragraph block.

Hitting the return (or enter) key on your keyboard will bring you to a fresh new block. Keep hitting return as needed until you’re done writing.

Once all of your text is typed out (or pasted into place), you can change the paragraph block to another type by hovering over it. The very first icon that appears is one that allows you to swap the styling for a totally different block type.

But if you want to add content that isn’t text, you’ll use the plus icon (+) to search for the specific block you’re looking for. Whether it’s an image, a gallery, or a video to embed, you have lots of options from WordPress.

There are 27 core Gutenberg blocks. Your unique theme + plugins may add additional blocks to your list.

You can search for the block you want by name or by sorting through the available categories. The “Most Used” category will change as you spend time using the Gutenberg Editor.

Commonly used blocks

Aside from the default paragraph block, the most common blocks that I see in use are:

  1. Headings
  2. Lists (like this one)
  3. Columns (which can be used for images)
  4. HTML (for embedding opt-in / tracking code)
  5. Images

That changes from site to site, of course. I use Gravity Forms a lot for this site + client sites, so I use the Gravity Form Block on many pages + posts. Another block common to my clients is the Shortcode Block since they all get custom shortcodes with their themes.

Ready to learn more about Gutenberg + make the most of it on your own site? Sign up for the free Learn how to use Gutenberg blocks ecourse. You’ll get a handful of emails that walk you through the basics and beyond.

on your keyboard hit enter to search or esc to close