Getting Down to Work With Gutenberg

November 13, 2018

Blocks are the useful way of building website posts. 

Adding Blocks to Gutenberg

Gutenberg actually includes a ton of different blocks, divided into different sections:

Add Gutenberg Block
Adding Blocks to Gutenberg

At the top, you see a list of your Most Used blocks. But if you scroll down you’ll also see sections for Common Blocks, Formatting, Layout Elements, Widgets, and Embeds.

Gutenberg Block Categories
Block Category
  • Common Blocks: contains basic building blocks like images, paragraphs (regular text), headings, quotes, etc.
  • Formatting: let you add more formatted content like pull quotes, tables, or the classic WordPress text editor.
  • Layout Elements: let you split text into two columns, include buttons, separators, or the “More” tag.
  • Widgets: let you add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.
  • Embeds: help you embed content from external sources like Twitter, YouTube, Facebook, Instagram, and more.

Basic Layout with Gutenberg

We will build a basic blog post layout that includes:

  • Regular Text
  • An Image
  • A quote
  • An embedded YouTube Video

You will write your entire post in the editor, or you can now write in your favorite text editor. Gutenberg has a very good copy and paste functionality. Now that your content is split into blocks you can hover over the spot where you want to insert your first image and click the plus icon. That will create a break. Then, click the plus icon again to insert the image block:

This will allow you to insert an image block, from which you can upload or select images in a similar manner to the current WordPress editor:

Gutenberg Image

Gutenberg QuoteNext, hover over the spot where you want to insert the pull quote and use the same approach to insert another block. You can either search for “quote” or go to the Common Blocks section:

Then, you will see your new pull quote block. To create your quote all you need to do is click into the block and type. 

Column Creativity

Do you want even more layout design creativity? Gutenberg now includes an experimental columns feature that lets you quickly create multiple columns. All you need to do is add the Columns block from the Layout section. Then, you can insert other blocks inside it. All you need to do is click the Publish button.