How to Add a Post to Your Website Using the Gutenberg Editor
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 Posts, Add New, Categories and Tags.
Click Add New and you’ll see a screen that looks like this.
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
- Shortcode
- Archives
- Categories
- Latest Comments
- Latest Posts
Yes, you can now put widgets anywhere on a post or a page using the Widgets block!
Embeds
This is the type of block you use for video and audio files, for example. It includes:
- YouTube
- Vimeo
- Embed
- WordPress
- SoundCloud
- Spotify
- Flickr
- Animoto
- Cloudup
- CollegeHumor
- Crowdsignal
- Dailymotion
- Funny or Die
- Hulu
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixcloud
- Photobucket
- 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? Let me know in the comments below, or send me an email.
Originally published at https://wpbuildingblocks.com on March 5, 2019.
