An introduction to Gutenberg blocks

A quick look at what blocks are in the box when it comes to the new Gutenberg editor in WordPress 5.0.

So unless you’ve been living under a rock the last few months, you’ve probably heard about the new editor for WordPress 5.x, nicknamed Gutenberg.

Some folks love it. Some hate it. But I don’t care about that, I just want to show you how it works and why you don’t need to worry so much about it. 

I’ve been using Gutenberg for the last six months on my website since it was in beta testing and I like it. Sure, it’s got some quirks, but once you get the hang of it, you’ll discover that it does many things better than the previous editor and gives you more creative control with the blocks that come shipped with it. 

So here’s a breakdown of the different blocks that come with the new WordPress editor.

Common Blocks

Common blocks are the bulk of what you’ll be using in the new editor. You’ve got paragraph blocks, heading blocks, list blocks, etc.

Back in the previous editor, the bulk of your content was in one giant block, whereas now, the content is broken up into separate blocks. If you’ve got a heading, that’s one block. A subheading is another block. Each individual paragraph is a separate block and so forth.

If you’ve ever edited articles on Medium, Facebook or LinkedIn, this user interface will seem a bit familiar. Likely, if you’re just writing articles, most of what you create will consist of common blocks.

However, there’s other types of blocks.

Formatting

Formatting blocks are blocks of content that need to be formatted differently, such as HTML code, taels, pull quotes and more.

There’s even a Classic block in here that preserves everything just like in earlier versions of WordPress. If you’ve got a post or page that was created using the Classic Editor, you’ll likely see it contained within a giant Classic block.

Layout Elements

Layout elements are blocks that define the layout of a page, such as columns, page breaks and separators. There’s also some unique blocks such as the Button block and Media & Text block.

Widgets

Widgets allow you to display shortcodes and dynamic data such as your site’s archives or latest posts.

Inline Elements

There’s only one block in this category and that’s for adding inline images.

Embeds

These blocks are all about embedding content from other websites, such as YouTube, Facebook, Twitter and more.

Other types of blocks

Depending upon which plugins you have installed, you may see additional blocks. For example, I have Jetpack and Yoast SEO running on some websites and have noticed some extra categories for blocks.

Got Gutenberg questions?

Let me know in the comments below. Next week I plan to take a closer look at the Common Blocks in the new Editor for WordPress 5.