WordPress Tutorial #8, Updated

In this article we’ll walk through the basics of how to add a post to WordPress if you’re using the Gutenberg Editor.

This is an updated version of Tutorial #8, which walked through the process using the Classic Editor.

Gutenberg was introduced as the default editor in WordPress core in December, 2018. It was a big change, and a lot of WordPress users are still trying to figure it out.

While it looks vastly different, it’s really not hard to master. As always, you start at the WordPress Dashboard.

#1. Select Posts/Add New

Notice the Posts item on the left-hand side of the dashboard. Underneath you’ll see All PostsAdd NewCategories and Tags.

How to add a post to WordPress using the Gutenberg editor

Click Add New and you’ll see a screen that looks like this.

The screen you see when you click Add New to add a post using the Gutenberg editor.

It doesn’t look like much, does it?

Adding the post is very simple — add a title, and create some content, then save it and publish it.

But if you’re used to the Classic Editor, seeing this screen can be a little overwhelming at first.

Let’s take a closer look.

Context Sensitive Menus

One of the big ways the Gutenberg editor differs from the Classic Editor is that the menus are context sensitive. That means, they change depending on what you’re doing at that moment.

When you add or highlight a paragraph, your menu looks like this:

But when you’re working on an image, here’s what the menu looks like:

#2. Add Blocks

In the old Classic Editor, you worked with a single block that used text, headings, images, etc. In Gutenberg, each of those things is a separate block.

Now, if you’re simply typing paragraph after paragraph, you don’t have to do anything special. But if you want to add a heading, an image, a table, or any other type of block (and there are a lot of them!), you need to specify the type of block you’re adding.

You do that by clicking on the + sign, then selecting the type of block you want to add. As you’ll see in the screenshot below, your quick choices are T (for heading), an image, or a list. (These choices will also change contextually, depending on what blocks you use most frequently.)

Here’s a list of all the available blocks, as of this writing, broken down into categories:

Common Blocks

  • Paragraph
  • Image
  • Heading
  • Quote
  • List
  • Gallery
  • Audio
  • Cover
  • File
  • Video

Formatting Blocks

  • Custom HTML
  • Table
  • Classic
  • Code
  • Preformatted
  • Pullquote
  • Verse

Layout Elements

  • Separator
  • Button
  • Columns
  • Media and Text
  • More
  • Page Break
  • Spacer

Widgets

Yes, you can now put widgets anywhere on a post or a page using the Widgets block!

  • Shortcode
  • Archives
  • Categories
  • Latest Comments
  • Latest Posts

Embeds

This is the type of block you use for video and audio files, for example. It includes:

  • YouTube
  • Vimeo
  • Embed
  • Twitter
  • Facebook
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Animoto
  • Cloudup
  • CollegeHumor
  • Crowdsignal
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Reddit
  • Reverbnation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • SpeakerDeck
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv

WooCommerce

There’s a section of blocks specific to WooCommerce, where you can display products on your page or post, in a variety of ways:

  • By category
  • Handpicked
  • Best selling
  • Newest
  • Sale
  • Top rated
  • Featured
  • By attribute

Yoast Structured Data Blocks

  • How-to
  • FAQ

Reusable Blocks

You can make any block, from any page or post, reusable. The uses for this are endless. Once you’ve created a reusable block, it will be available to you in the blocks menu.

#3. Save and Publish

To the right of your editing window, you’ll see another set of menus, with two tabs.

The first, Document, stays constant. This is one menu that is not context sensitive!

The second, Block, contains information about the block that’s currently highlighted.

Click the Document tab to see your document’s current status (published, draft, etc.), or move it to the trash.

This is also where you’ll view and edit the permalink, select categories and tags, set your featured image, write your excerpt, and specify whether you’ll allow comments.

Once you’re satisfied with your new post or page, you can publish it immediately by clicking the big blue Publish button at the top of the page, or schedule publication within the Document menu.

When you click the Publish button, you’ll have another opportunity to schedule publication for a later time. You’ll also see a reminder to add tags if you’ve omitted that step.

So there you have it — adding a new WordPress post using the Gutenberg editor in three easy steps.

Would you be interested in a course to help you master Gutenberg? Send me an email.

Other Articles You’ll Enjoy