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
- Add a new block
- Undo / redo
- 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
- Create a new block
- Add image
- Add heading
- 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.
I was playing around with it yesterday and so far, I can’t complain. I had to look up a few things when I couldn’t figure it out. I guess I will always be a classic poster. But for those who don’t want to use html to make ex: buttons, it will be great for them.
It certainly is a different content creation experience. But once you get used it, is easy.
For those of us who use Genesis and other premium frameworks, I’m anxious to dig into how it deals with things like button creation, and if it will pull up the theme’s styling or now automatically for all the new block types. Plus, curious about spacing between elements and how it deals with column layout and such. So, lots more testing ahead!!
I despise change. And I have to actually do something to understand it. I am already in a fog. I see me needing a week or vtwo just ro get this the way I want and then an audit to clean up my leftovers! LOL.
I’m already running deeper tests with Genesis and throwing the kitchen sink at it. So definitely hold up on switching over until we all have a better idea of what this thing can do or not do.
With hundreds of websites out there that we’ve built for clients … and more than a few of our own that are too big to rebuild … Gutenberg scares me and I’ll be installing a plugin to disable Gutenberg on those sites but …
For new sites I can’t wait to try Gutenberg and, at first glance, it appears easier to use than some of the other page builders that we’ve played with.
I feel much the same way you do Stuart.
But, as soon as Gutenberg matures enough, and the plugins I use are fully compatible with it, I can see making the switch, or at least trying it in a sandbox version. I expect that will be in about a year or so.
Doesn’t look any different than the Elementor Page builder I hope this is not going to conflict with the new page builders which already have a bit of a learning curve already based on the block system
I believe this will end most all page and theme builders when it fully matures in a couple of years.
I didn’t want to be the first one to say it but it sure is appearing that way. Personally, I am really digging the possibilities as now I can finally do what I need certain pages and posts to do
Wow! Looks like there are going to be some neat features, but like Marilyn I sort of dread the change over. I’m glad I’ve got you MaAnna to lead the way when the time is ready :)
They did a good job of making Gute useful before the first full release. But yes, it is a big change!!
Thanks for the tour MaAnna. It sort of reminds me of the page builder that came with my theme. Shared x 4 ♥
That’s the way the whole thing is going, Dee, even the theme at some point.
This paragraph made my day despite the fact that end users will not obey:
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.
I agree with you that it will be the death of page builders. Thing is — regular WP sites will have an easier time moving to Gutenberg than those proprietary page builders ones will. Sounds like a good time to nix old page builders now (not later).
Totally agree Paula. Many current page builders have a hard time with most any change, like HTTPS and such too. They are definitely an amateur’s dream. Not a single money making client of mine would touch them.