Gutenberg Text Editor Tour

With Gutenberg, WordPress introduces a revolutionary text editor experience that is based on segmenting your content into blocks.

See a tour of Gutenberg tools and text editor basics that will familiarize you with the new layout and functions.

---

See more Gutenberg Posts!
What is Gutenberg and When Should You Adopt Using It?

---

Gutenberg Tab

Once Gutenberg is active on your site, you’ll see a new tab in your left admin sidebar for it.

The sub-menus contain links for a demo, support, feedback, and documentation.

Gutenberg Demo

The Demo link takes you to a sample post created with the Gutenberg text editor

It’s saved as a Draft and is a great way for you to poke around and become familiar with how the new text editor works with blocks.

Choice of Editors

In your post/pages list, you’ll see which ones were created with the Gutenberg text editor.

They will state “Gutenberg” at the end of the title.

When you hover over the title area, you will see links to Edit, which will open which ever text editor you used to create the post, either the Classic text editor, or Gutenberg.

For those created with Gutenberg, you will see an additional choice to use the Classic Editor instead.

I would not jump back and forth between editors, as it’s likely some coding or formatting could get confused.

You’ll want to stick to one editor or the other for each post.

To clarify, you can have a mix of posts/pages created with either editor throughout your site. You just want to ensure that individual posts/pages are created with one or the other, not both editors.

Gutenberg Editor Layout

To see the Gutenberg Text Editor,  create a new page/post, or go to the Gutenberg Demo.

The first time it is activated you’ll see this Welcome message:

Click the link for See next tip to take a tour of the Gutenberg editor. (We’ll also take a tour below.)

At the time of this writing, there are only 2-3 tips.

The New Editor Page

Instead of seeing the familiar TinyMCE editor, you are presented with a clean layout.

• Content area on the left.
• Sidebar with styling tools on the right.
• Tools across the top.

Here’s how the text editor looks on a previously published page.

Here’s how the text editor looks on a new page.
We’ll cover more on how to create a new post later.

Top Left Tools

1. Add a new block
2. Undo / redo
3. Content Analysis – when clicked, displays count of words, headings, paragraphs, and blocks

Top Right Tools – Published Post

Switch to Draft – this will unpublish the post and save it as a Draft.

Preview – opens a new tab and allows you to view the post as it will be seen by the public

Update – only available to click after you have made a change to the post

Gear – toggles the sidebar tools on/off

More (ellipsis dots) – expands when clicked to show more tools, including:

• Editor – to switch between visual editor and code editor (formerly Text view mode)
• Settings – lock the toolbar to the top of the editor, and turn on/off tips
• Tools – highlights all content for copy/paste

Sidebar Tools

The tools you see may vary by theme. That’s especially true on the post text editor.

If you’re using a premium theme, like Genesis, you likely won’t see options for Post Format, or Stick to Front page, or Pending Review, as shown in the screenshot below.

Here are the tools when editing a page.

And here are the tools when editing a post.

Status & Visibility – displays the status of the post including

• Visibility to the public – public, private, password protected
• Date published
• Move to Trash

Featured Image – click the down arrow to expand and select your image

Discussion – click the arrow to expand and turn on/off comments.

NOTE: This setting is globally controlled in WP Settings > Discussion, and in Genesis Theme Settings, if you are using that theme. This Discussion module allows you to override that global setting on a per post basis.

Page Attributes – click the arrow to expand. What you see may vary by theme.

NOTE: Most folks no longer user the Order attribute to control how links display in the navigation or for breadcrumb type nesting.

NOTE: No template attributes are listed here. This is one of the reasons it is advisable to wait until you have a fully Gutenberg compliant theme, as you may not be able to take full advantage of your current templates.

Categories and Tags – available only on the post text editor.

Excerpt – available only on the post text editor.

Blocks and Post Creation Tools

Everything about the new Gutenberg Text Editor runs on blocks.

They allow you to create all the different areas of your post into separate segments, or blocks.

While you can use a Paragraph block to create all of your content just as you do now, you’ll definitely want to consider learning how to segment your content to take advantage of blocks, as this will future-proof your site for even more website and internet changes coming down the pike.

Title

Hover over the Add title area and you’ll see the block highlighted.

Click your cursor in the box and type your title.

Permalink

When you click in the Title block, you can also see the permalink for the post.

The Edit button is on the right, so you can edit the slug portion of the permalink.

NOTE: I was shocked that the post title did not save as the permalink slug.

So, be sure that you edit that permalink!!!!!!!!!!!

I believe this will cause all manner of issues with:

• typos
• forgetting to use all lowercase
• using spaces between words instead of hyphens

Body Content Tools

1. Create a new block
2. Add image
3. Add heading
4. Add gallery

When you hover over the tools on the right, you will also see an ellipsis for More tools option.

Take time to explore these options, as this is where segmenting your content into blocks starts to become super handy.

Note the Duplicate tool. If you use a certain block of content or block type over and over, this tool could really speed up content creation.

Also note the Convert to Shared Block feature. This is a fantastic way for you to create your own custom block and use it again anywhere on your site. A CTA (Call To Action) is a good candidate for a custom block.

To begin adding content, first click on the + on the left and select your block type from the drop-down.

Default Blocks

At launch, Gutenberg comes with just about all the default blocks you could want.

However, theme and plugin developers are creating new blocks every day for specialized needs.

Block Module

The Add a Block module is divided into several sections to make it easy for you to find what you need.

Search – unless you already know the name of the block you are looking for, this doesn’t actually work very well yet.

Most used – this one is expanded by default and will renew its list based on your use.

Common Blocks – the blocks that WP thinks most site owners will use.

Formatting – you’ll find the Code and Classic editors here as well

Layout Elements – buttons, the More tag, page break, and more

Widgets – the shortcode block will come in handy for folks using themes and plugins that provide this feature.

Embeds – many of the most popular oEmbed platforms that are natively supported by WP, however, this is not an exhaustive list.

Image Block

Tip: If you generally place an image at the top of your post, you can click the Add Image tool on the right instead of clicking Add Block > Image.

Once you click the Add Image tool, or insert an Image block, you’ll see a dialogue box to Upload a new image, or use one from your Media Library.

NOTE: In the top left of the dialogue box are the usual image tools for alignment and editing.

Image Block Editor

The Gutenberg image editor is very similar to the classic media editor.

But, you can now resize the image right in the editor (that’s what the blue dots are on the right and bottom).

And you can add a caption just below the image preview.

In the right sidebar are all the usual image tools that are familiar.

The Alt text field is now called Textual Alternative

Scroll down to see the Link Settings, as well as the Advanced settings.

NOTE: There is no longer a Title attribute anywhere. The Advanced tab in the classic editor allowed you to input an image title that could be indexed by Google. I believe this is a huge SEO mistake by WP to omit that option.

Tip: To close the block editor, click on any blank spot in the content editor window, or click the Document tab at the top of the right sidebar.

To select the block again for further editing, simply hover over the region of it until you see a highlight box and then click once. Note that you are in the Block tab on the right sidebar.

Paragraph Block

This is the block you’ll be using the most to create your text content.

Tip: You can either click the + at the top of the editor page or simply hover over the tool area below your last block to see a new + Add Block tool.

You can add as much content to the Paragraph Block as you like.

However, each block can have more styling added to it, for elements like the fonts, background color, text color, and anything else that your theme supports.

So, breaking up your text content into multiple paragraph blocks allows you to easily change styles for that content and/or easily move it around to a different area of the post.

Tip: Lay off the styling! While this may seem like a fun thing to do, it makes your posts look like a circus. They are hard to read and all of that inline styling makes them slow to load too. Let your them handle the styling.

Paragraph Block Inline Tools

When you hover over the Paragraph block, you’ll see two sets of tools.

The typical formatting tools on the left will appear on hover.

The extra tools on the right will appear when you click the More ellipsis.

Paragraph Block Sidebar Tools

When you have the Paragraph block highlighted, you’ll be in the Block tab on the right sidebar.

The editing/styling options you see may vary by theme.

Each block type has its own set of tools too, as you will see when you start using more block types.

Identifying and Moving Blocks

Once you have a few blocks created, you may want to move them around or see which block type you are using.

Hover over a block and the up/down arrows will appear on the left, which you can use to move its location.

A block identification will appear on the right.

Slash Complete

Gutenberg has a new /slash autocomplete feature that will make it easy for you to use keyboard strokes to create your content, instead of so many mouse clicks to create and select new blocks.

For a Heading, add a new Paragraph block and type /hea and that will be enough for the feature to search and know that you want to add a Heading.

Click Heading and it will bring up the Heading insert tools for you to select the one you want to use.

Tip: H is Heading 1 size (H1).

You’ll also see the Block tab in the right sidebar change to Heading settings for you to edit, if needed.

Saving as Draft and Publishing

You no longer need to click a button to save your post as a Draft.

Gutenberg automatically saves as a Draft for you.

And it will appear differently in your pages/post list too.

It will show Draft, but that it was also created with the Gutenberg editor.

To confirm that it is saved, ensure there is a check and Saved message in the tools in the top right of the editor window.

To publish your post, click the blue Publish button in the top right tools.

You’ll be presented with a dialogue asking if you are ready to publish.

You’ll see drop-downs for Visibility and Publish date choices.

Click the arrow to expand the Publish date options.

You’ll see a nice calendar to select a date and time for scheduling your post for future publishing.

What Do You Think of Gutenberg?

I hope you’ve enjoyed this tour of important Gutenberg features.

Be sure to see the other posts in this series for more details on using Gutenberg.