WordPress Block Editor: The Ultimate Gutenberg Guide (2019)

Here’s the deal:

If you’re new to the WordPress block editor, or if you’re
looking for an easy-to-read resource you can reference as needed,
you’ve come to the right place.

In this post, we’re going to walk you through the ins and outs
of the block editor (aka “Gutenberg”) — what it is, how it
differs from the classic editor, and how to use it.

Let’s jump in.

WordPress Block Editor: The Ultimate Gutenberg Guide (2019)

WordPress Block Editor (Gutenberg) Overview What
is the Gutenberg Editor?

When WordPress 5.0 was released in December 2018, the world was
introduced to the Gutenberg editor — now known as the WordPress
block editor.

Gone was the classic, TinyMCE WordPress editor. In its place was
a modern, drag-and-drop block editor offering an entirely new
content creation experience.

wordpress block editor drag and drop

Drag and drop in action

In short, Gutenberg is a total revamp of the WordPress
editor.

Using “blocks”, users of all experience levels can build
custom posts and pages — without having to use third-party tools
and plugins, and without having to know how to code.

What is a Content Block in WordPress?

Blocks are the vessels for your content.

With blocks, you can insert, rearrange, and style content in
WordPress. What types of content? Here’s a small sampling
(we’ll go over all of them later):

  • Tables
  • Images
  • Videos
  • Paragraphs
  • Quotes
  • Shortcodes
  • Social media (YouTube, Facebook, etc.) embeds
  • Widgets

Basically, anything you can reasonably imagine adding to a blog
post or article can be added using blocks.

And you can add them faster and easier.

How is the WordPress Block Editor Different than the Classic
Editor?

Here’s a quick side-by-side comparison.

First, the classic TinyMCE content editor:

001 wordpress block editor classic editor

Next, the new “Gutenberg” block editor:

002 wordpress block editor gutenberg editor

The classic editor is reminiscent of Microsoft Word. There’s a
place to write your text, and there’s a formatting toolbar to
style your content (bold, italics, etc.).

The new editor uses a block system for content creation. Besides
looking more polished and modern, the WordPress block editor allows
you to:

  • Add tables (again, without knowing code or
    having to install plugins);
  • Arrange, rearrange, and mingle text and media
    by simply dragging and dropping elements from here to there;
  • Create content columns with ease;
  • Change the background colors and font sizes in
    each block;
  • Reuse blocks you use over and over (to save
    yourself time).

And that’s just the tip of the iceberg.

In other words, the two editors are different.

Very different.

How do I Use the Block Editor in WordPress?

With the background information out of the way, it’s time to
walk you through the new block editor.

We’ll start with how to navigate it:

Block Navigation

003 wordpress block editor block navigation
  1. Add a new block
  2. Undo and Redo buttons
  3. Content structure (word count, headings, paragraphs,
    blocks)
  4. Block navigation (a drop-down displaying all the block types
    used in the post)

Sidebar Navigation

004 wordpress block editor sidebar navigation
  1. Preview and Publish the post
  2. This is the classic WordPress sidebar: categories, tags,
    permalink, and publishing options
  3. Block settings: when you click on a block in the editor, you
    get its unique set of options in the sidebar
  4. Hide sidebar
  5. More editor settings

How to Add a Block

In your WordPress dashboard, create a new post as you would
normally. (Or, open an existing post so you can edit it.)

Click on the plus (+) sign in the top-left corner of the
editor.

Select the category and the type of block you want to
insert:

005 wordpress block editor add block

Each block can be edited, deleted, saved as reusable, and moved
up or down with drag-and-drop options.

Once you’re done with a block, you can insert more blocks. You
can also duplicate a block or edit it in HTML:

006 wordpress block editor edit block

Types of WordPress Blocks (and
How to Use Them)

Here are each of the types of blocks (broken down by category)
offered by Gutenberg:

Common Blocks

This category of blocks contains the basic (“common”)
elements people typically use in their blog posts. Most bloggers
and writers will use these blocks more than others.

Paragraph Block

The Paragraph
Block is simply a box for writing
your text.

It comes with the standard formatting options — text
alignment, font size, background and text color, drop cap, and
more.

007 wordpress block editor paragraph block

Image Block

With an Image Block, you can
easily insert an image by uploading it from your computer, picking
it from WordPress media library, or copying its URL.

The standard WordPress options for images are included: you can
add a caption, adjust the image size, add alt text, and more.

008 wordpress block editor image block

List Block

With a List Block, you can create a list of
items ordered by bullets (unordered list) or numbers (numbered
list).

You can also add sub-items for each main item in the list,
insert anchor links, and format the text.

009 wordpress block editor list block

Quote Block

The Quote Block lets you add
your favorite quotes in a beautiful, elegant style.

Write the text and its author, then format it just as you would
in a Paragraph Block. You can use the default font size or a larger
size.

010 wordpress block editor quote block

Heading Block

With a Heading Block, you can
start a new section inside your post.

You can choose from six heading sizes. The first three are
available inside the block, while the smaller ones can be found in
the sidebar to the right of the editor.

011 wordpress block editor heading block
Editor’s Note: Even though it’s available
in the sidebar, don’t use the H1 heading. It’s (typically)
reserved for the headline of your post. Instead, start with H2.

If you’d like to learn more about them, here’s a post we
wrote about common subhead
blunders
.

File Block

With File Blocks, you can add all sorts of
files for your visitors to download: images, archives, docs,
PDFs… you name it.

From the sidebar, you can choose to display a download button,
open the file in a new tab, and link to either a media file or an
attachment.

012 wordpress block editor file block

Gallery Block

A Gallery Block is for when you want to add
more than one image. It has the same features as the Image Block,
but you can upload multiple images within the same block.

The gallery displays a nice grid layout. In the right sidebar,
you can choose the number of columns in the gallery and each
image’s destination page.

Captions are also allowed.

013 wordpress block editor gallery block

Audio Block

Planning to feature music or a podcast interview on your site?
You can use the Audio
Block to upload and play audio
files.

The block will display a minimalist audio player. You can choose
to play it automatically and/or in a loop.

014 wordpress block editor audio block

Video Block

Using the Video
Block, you are able to upload
videos.

You have the option to autoplay and/or mute them. An awesome
feature is you can upload a poster image for the thumbnail (in case
you don’t want to display the featured capture it fetches by
default).

015 wordpress block editor video block

Cover Block

Using a Cover Block, you can create an image or
video with text overlay. You can use it as a featured image for a
post or as a header.

You can also adjust the background color and opacity.

016 wordpress block editor cover block

Formatting Blocks

This category groups blocks that focus on formatting content,
such as pull quotes, tables, and verses.

Let’s go over each of them:

Code Block

Use the Code
Block if you want to show your
readers examples of code snippets.

The code won’t be executed; instead, it will display in a
distinct style so it stands out to your readers.

017 wordpress block editor code block

Classic Block

With a Classic Block, you can add a block
resembling the classic editor and its classic formatting options.
It’s a miniature TinyMCE editor inside a block.

018 wordpress block editor classic block

Table Block

A Table Block lets you easily insert a table in
WordPress without plugins or having to know HTML code.

Write the number of rows and columns you need, pick the layout
(default or stripes), and you’re set. Afterward, you can add rows
and columns at the beginning or end of the table with one
click.

019 wordpress block editor table block

Verse Block

With Verse Blocks, you can add song lyrics or
poetry verses.

When you press enter, you won’t be directed to a new block
like in the Paragraph Block; instead, it will jump to a new row.
You can write as many verses as you wish while remaining in the
same block.

020 wordpress block editor verse block

Custom HTML Block

With Custom HTML Blocks, you’re able to write
HTML code and quickly preview the changes.

You enter your code in HTML mode:

021 wordpress block editor custom html block

And you preview it in Preview mode:

022 wordpress block editor custom html preview

Pull Quote Block

When you want to emphasize an excerpt of your article, you can
turn it into its own block with a Pull Quote
Block
.

What distinguishes a Pull Quote Block from a Quote Block is its
formatting. A Pull Quote Block has colored borders.

023 wordpress block editor pull quote

Preformatted Block

Similar to the preformatted text option in the classic TinyMCE
editor, a Preformatted Block lets you display the
text on the front-end exactly as you type it.

The preformatted text uses a monospaced font, which means all
characters have the same width.

024 wordpress block editor preformatted

Here’s a preview of the preformatted text:

025 wordpress block editor preformatted preview

Source: FS – _Marketing
WordPress Block Editor: The Ultimate Gutenberg Guide (2019)