Sometime in the next few months, the way that you create content with WordPress is going to radically change. The current text editor that you’ve been using for years will go away, replaced by the brand new WordPress Gutenberg Editor.

A big change like this is probably ringing some alarm bells in your head…

Will your workflows be interrupted? Are your current plugins and themes going to keep functioning? How can you keep creating great content with this new editor?

In this post, you’re going to learn the answers to those questions plus a whole lot more.

This is the ultimate WordPress Gutenberg Editor guide for anyone and everyone who creates content with WordPress.

You’ll learn:

1. What the WordPress Gutenberg Editor is, why/when it’s coming, and the answers to some basic FAQs.
2. How you can mimic the current editor functionality and create a basic blog post with Gutenberg.
3. Some under-the-radar tips for working more productively with Gutenberg (based on my hands-on experience from using it on a live site).
4. How to harness the new features in Gutenberg to benefit from content and layout functionality that you never had access to before.

This new editor is coming no matter what, so take some time to familiarize yourself with the WordPress Gutenberg Editor so that you’re ready to hit the ground running as soon as it’s released!

What The Gutenberg Editor Is, Plus Why You Should Care

The Gutenberg Editor is a complete reimagination of the current WordPress text editor that you use to create posts or pages with WordPress.

I say reimagination rather than redesign because it’s truly rebuilding the editing experience from the ground up.

Once development is complete, Gutenberg will replace the current WordPress text editor and you will use the Gutenberg Editor to create content going forward (though you will have options if you want to stick to the current experience – more on that later).

So what makes the Gutenberg Editor a “complete reimagination”?

First, let’s start with a refresh of what I mean by the “WordPress editor”. If you’re not quite sure what I’ve been talking about, here’s what the current WordPress TinyMCE editor looks like:

If you’ve been using Wordable to publish WordPress posts straight from Google Docs, you might not spend a lot of time there! But I’m betting there’s still a good chance you’re well acquainted with how the editor works.

The Gutenberg Editor Introduces Something Called “Blocks”

The current WordPress text editor is kind of like one long Microsoft Word document. Gutenberg changes that dynamic with something called blocks.

Rather than a single editing field, each “thing” in Gutenberg is its own “block”. If you’ve ever written a post with Medium – it’s the same idea.

For example:

• Each paragraph of text is its own separate block.
• An image is its own block.
• A YouTube video is its own block.
• …you get the idea.

You then assemble your content using a series of blocks. For example, here’s what the same content from above looks like in Gutenberg. It has four different blocks:

• Three separate paragraph blocks
• One image block

The importance of this block-based approach is it unlocks more advanced capabilities for content and layout.

For example, you’ll be able to introduce columns, insert and style buttons, and perform lots of other actions that you either can’t do with the current editor, or that would require HTML/CSS with the current editor.

Later on, I’ll cover blocks in a lot more detail. But if you want to get your feet wet right now, you can play around with a live demo of the Gutenberg Editor by heading here – no need to install anything.

Here’s Why The WordPress Core Team Is Making This Change

For most of its life, WordPress has used the same basic editor (TinyMCE). While the design might’ve changed here and there, the core functionality never wavered.

So why the change now? If it worked for the last ~15 years, why can’t it keep working for the next 15 years?

There are a few reasons.

First off, the current editor is just too limiting for casual users in this day and age. While WordPress makes it possible to create anything you can imagine, it only does that if you know some HTML/CSS.

Combine that with competition from visual website builders like Squarespace and Wix (who have both ~doubled their usage over the past year), and you can understand why the WordPress core team felt that WordPress needed a more flexible editing experience to keep its edge.

Second, Gutenberg provides the capability to unify the many disparate interfaces that busy WordPress users have. I don’t want to get too technical here. But if you’re using third-party plugins, you probably have various shortcodes, meta boxes, and settings areas that are a part of your WordPress workflows.

Gutenberg can unify all those different interfaces into the block system.

Third, Gutenberg introduces modern technologies to WordPress. Specifically, React. This not only helps the editor itself, but it also allows third-party developers to work with those modern technologies.

Finally, content editing is just the start of this process. While right now, Gutenberg is just going to change how you create posts and pages, the eventual goal is to have Gutenberg move into full visual website design.

The Pros And Cons Of Moving To The New Gutenberg Editor

So…is Gutenberg going to be a good thing for you?

Well, it’s actually been a pretty divisive issue in the WordPress community, with passionate arguments on both sides.

On one side, you have people touting the benefits of Gutenberg:

• More possibilities for content – Gutenberg adds pre-built blocks for buttons, pull quotes, etc. This gives you more control over your content without the need for custom CSS. Additionally, third-party plugins can add their own content blocks, which gives you even more flexibility.
• More possibilities for layout – beyond new content possibilities, you also get new layout options, like the ability to include columns or separators without needing any custom code.
• Unified experience – rather than needing to use shortcodes to insert content from third-party plugins, those plugins will be able to create their own blocks, which creates a simpler, more unified editing experience.
• Mobile-friendly – Gutenberg works great on mobile by default, which lets you create or edit content from any device.

But on the other side, you have people pointing out some big issues with a project that’s this ambitious:

• Backward compatibility – ~32% of the entire Internet is using the current WordPress editor, which makes it very difficult to transition to a completely new editing experience. Basically, there are so many edge cases with all that old content that it’s hard to ensure a seamless transition.
• Tough for developers – theme and plugin developers will need to build Gutenberg compatibility into their plugins and themes, and older extensions might not always work perfectly. There are tens of thousands of older plugins that might experience compatibility issues.
• User education – while new users might like Gutenberg, old users will need to learn new workflows, which is especially tough for developers who’ve built sites for non-technical clients.

So is the WordPress Gutenberg Editor a good thing or a bad thing?

Well, I’m kind of interjecting some personal opinion here, but I think that Gutenberg will be a positive change in the long term. You’ll have more control over how your content looks and functions without the need for external solutions or custom code solutions.

With that being said, there’s definitely the possibility for short-term growing pains when it comes to compatibility with existing plugins that you might use. And it will be tough to force WordPress’ huge user base to learn a new interface.

When Is The Gutenberg Editor Going To Be Released?

The short answer is – we don’t know the exact date. Gutenberg will be released as part of WordPress 5.0, but there’s no official word on the exact WordPress 5.0 release date yet.

We now do have a rough idea, though. According to the recent WordPress 5.0 kickoff meeting, the projected dates are as early as November 19, 2018, or as late as January 22, 2019.

Here’s the longer answer:

Right now, the Gutenberg Editor exists as a plugin during its beta status. If you wanted to, you could actually install the plugin and start using it on your site today (it’s in beta, though, so I wouldn’t recommend it).

Once the beta and testing finishes, the WordPress team will merge the Gutenberg Editor into the core WordPress software in WordPress 5.0. Then, once you update your WordPress site to WordPress 5.0, the Gutenberg Editor will automatically replace the current TinyMCE editor.

What Will Happen To Your Existing Content Once The Gutenberg Editor Is Released?

Because Gutenberg is replacing the current editor, you’re probably wondering what’s going to happen with all your existing content.

Don’t worry – Gutenberg is built to be backward compatible.

As it stands now, Gutenberg puts all of your old content into a single Classic block. For example, here’s what the TinyMCE example from above looks like when I install Gutenberg:

If you want, you can continue working inside that single Classic block, though the experience is a bit awkward. Or, you’ll be able to click the three dots icon to convert your old content into Gutenberg blocks:

Once you convert your old content into blocks, it will work just like any other Gutenberg Editor post.

Because the Gutenberg Editor uses this single Classic block approach for old content, you shouldn’t experience any transition issues. But it’s possible that you might experience issues with third-party plugins, so you should still maintain vigilance and check your old content.

Will The Gutenberg Editor Work With All WordPress Themes?

Yes! Again, because Gutenberg is going to be the default editor, it naturally needs to work with any WordPress theme.

With that being said, there are some things that developers can do to add special capability for Gutenberg, so you’re going to start seeing “Gutenberg-compatible” show up on many themes’ marketing materials pretty soon.

Here’s what makes a theme compatible with Gutenberg:

• Special block styling – themes can add special styling for the core Gutenberg blocks. This ensures that all of Gutenberg’s blocks match your theme’s design perfectly.
• Full-width alignment – Gutenberg lets you create full-width images that stretch across the entire screen, but only if theme developers specifically enable it.
• Editor styling – theme developers can also add their own styling to the back-end Gutenberg editing interface. This creates more of a visual design approach. You can see an example here.

Do You Have To Use The Gutenberg Editor Once WordPress 5.0 Is Released?

No! While Gutenberg will be the default editor in WordPress 5.0, you don’t actually have to use it.

If you’d like to continue using the current WordPress editor, there’s an official Classic Editor plugin that hides all traces of Gutenberg and restores the current editing experience.

Alternatively, this plugin can also let you use both editors and switch between them on a post-by-post basis.

WordPress Gutenberg Tutorial – How You’ll Use The New Editor

Ok, now that you’ve finished your Gutenberg 101 crash course, let’s go hands-on with the Gutenberg Editor.

The goal of this section is to get you acquainted with the Gutenberg Editor so that you’ll be able to hit the ground running once it’s released.

To get started, here’s a graphic to help you understand the core elements of the Gutenberg Editor interface:

1. This is the body of the editor. It’s where you’ll work with content
2. These buttons let you add new blocks. If you want to add an image, video, or any other block content, you’ll use them.
3. This is where you add the title of your post.
4. These options let you save drafts, view previews, and eventually publish your post.
5. When you don’t have a block selected, this sidebar lets you manage overall options for your post, like categories and your featured image. When you do have a block selected, it gives you options for that specific block.

Then, when you go to add a new block, you’ll see this popup window with a list of all the available blocks. You can either:

1. Use the accordion tabs to browse all the available blocks
2. Search directly for the block that you want

How To Create A Simple Blog Post With The Gutenberg Editor

In this section, you’ll learn how you can perform the same type of actions that you already can perform in the current WordPress editor.

Basically, you’re going to learn how to adapt your existing workflow to the Gutenberg Editor. Then, in the next section, I’ll show you how to take advantage of the Gutenberg Editor’s new functionality.

Adding Or Formatting Basic Text Content

Basic paragraph text content is simple – you just click and type. The only immediate difference is that whenever you hit Enter to create a new line, Gutenberg will automatically create a new block for your next paragraph:

When you click into a block, you’ll see a formatting toolbar appear where you can:

• Change alignment
• Add bold and italics
• Insert links
• Etc.

Basically, this acts a lot like the toolbar in the current editor:

Later on, I’ll show you a neat alternative to this default approach.

Beyond the formatting options in the toolbar, you also get some options in the right-hand sidebar which let you:

• Control text size and color
• Add a drop cap

Simple enough so far, right?

Creating A Heading (H1, H2, etc.)

You have a few different options for creating a heading.

First, you can use the + icon to insert a new Heading block:

Once you insert the Heading block, you can type to add your text and use the sidebar or toolbar to control what heading to use (e.g. H2 vs H3):

Alternatively, you can also:

• Transform a regular paragraph block into a heading block by using the Change block type button.
• Use markdown to create your heading (for example “## This is a heading 2”)

Here’s a GIF to illustrate those two methods:

Inserting Images, Videos, Or Other Media Content

Ok, so now you can create and format both basic text and headings. That’ll get you most of the way there!

But what about inserting media content?

To insert any media content, you can use that same + icon to insert a block.

To insert media content below your existing content, use the + icon in the top-left corner.

Alternatively, you can also insert a new block between your existing content by hovering over the spot where you want to insert your content. Then, you’d use the Add block button to the left of the new block:

Once you open the Insert Block popup, you can choose from:

• Image – insert an image from the WordPress media library or an external URL.
• Video – embed a video from the WordPress media library or an external URL.
• Embeds – separate blocks to help you embed content from YouTube, Vimeo, Spotify, SoundCloud, Instagram, and tons of other sources.

For example, here’s what it looks like to insert an image from the WordPress media library:

And here’s how you could embed a YouTube video:

Inserting Shortcodes From Other Plugins

If you’re like most WordPress users, you probably have some plugins that you include in your post or page content using shortcodes.

Eventually, the goal is for those types of plugins to create their own Gutenberg blocks that you can directly use (more on this later). But until then, you can still include shortcodes in your Gutenberg content by using the Shortcode block:

Rearranging Content (You Have Two Options)

Ok, easy enough so far…but what if you want to change the order of your blocks?

To do that, you have two options.

First, if you hover your mouse to the left of a block*, you can use drag and drop to move blocks around:

 Second, you can also use the up or down arrows to shift blocks up or down one position:

*To activate drag and drop, hold your mouse over the 6 dots between the up and down arrows.

Working With Behind-The-Scenes Information (Categories, URL Slug, Etc.)

Ok, so the above should cover how to add basic blog content. But what about all the other behind-the-scenes parts of preparing a post for publication?

For most actions, you can use the Document tab of the sidebar. This is where you’ll:

• Choose a publish date/schedule posts in advance
• Select the author
• Add categories and tags
• Select your featured image
• Enter your excerpt

Additionally, you can use the buttons above that sidebar to:

• Preview your post
• Save drafts (Gutenberg automatically saves your draft, so you won’t usually need to do this manually)
• Publish your post

The only tricky thing is setting your post or page’s URL slug. To edit that, click on the title. Then, you’ll be able to edit the slug:

What About Plugins Like Yoast SEO? How Will They Work?

There’s a good chance that you have some other backend plugins that you need to configure for each piece of content.

There are two ways that you’ll interact with these plugins.

First off, many developers are already working on direct Gutenberg compatibility. For example, Yoast SEO already supports Gutenberg, and you’ll configure your Yoast SEO settings right from that same Document sidebar:

For legacy plugins that don’t have Gutenberg support yet, you’ll still be able to use meta boxes like you would with the TinyMCE editor:

Six Tips For Working More Productively With Gutenberg

When you first start working with the Gutenberg Editor, it might feel a little sluggish. These tips can help speed up the process and make it easier to quickly insert and customize the blocks that you need.

1. Quick Insert Blocks By Typing “/” To Save A Ton Of Time

The method for inserting blocks that I showed you above is helpful when you’re just getting started with Gutenberg because it lets you see all the available blocks.

But once you become familiar with which blocks you need, you can insert them a lot faster by using the quick insert feature.

Rather than clicking the + icon, just:

• Hit enter to create a new block
• Type a “/”
• Start typing the name of the block

As you type, Gutenberg will autosuggest blocks that match. Then, just hit Enter to insert the block that you want.

Here it is in action:

That’s a lot faster, right?

2. Learn The Keyboard Shortcuts For Quicker Editing

Gutenberg comes packed with keyboard shortcuts that can speed up how you work.

You can bring up a full list of these shortcuts by clicking CTRL + Alt + H (Windows) or CMD + Alt + H (Mac):

You should read through the full list, but here are some of the most helpful:

• Ctrl + S – save your draft.
• Ctrl + Z – undo or Ctrl + Y – redo.
• Ctrl + Alt + Backspace – delete the selected block (really handy).
• Ctrl + Shift + D – duplicate the selected block.
• Ctrl + Alt + T – insert a new block before the selected block.
• Ctrl + Alt + Y – insert a new block after the selected block.

You can also use most of the global shortcuts, like Ctrl + B for bold or Ctrl + V to paste.

3. Drag Images From Your Desktop Into Your Gutenberg Content

If you need to include a lot of images, this is another neat trick.

Rather than needing to manually create a new image block for each image, you can just drag an image straight from a folder on your desktop right to the spot where you can to include it in your post.

WordPress will then automatically upload it to your media library and insert it right there. There’s only one thing to pay attention to – make sure you see the blue line when you drag the image, otherwise it won’t work:

4. Add A Fixed Editing Toolbar

One thing some people find difficult with Gutenberg is that the editing toolbar constantly blinks in and out of existence as you click between different paragraph blocks.

If you don’t like that, you can turn on the Unified Toolbar option to get an always-present toolbar at the top of the Gutenberg interface:

5. Use Markdown Syntax For Headings, Lists, Etc.

If you like using markdown, you’ll be able to incorporate some markdown syntax in Gutenberg.

For example:

• ## – creates an H2 (you already saw this – it transforms into a heading block).
• * – starts an unordered list.
• 1. – starts an ordered list.
• > – creates a block quote (transforms into a quote block).

You can’t use all markdown syntax. But the examples above are already pretty helpful for quicker formatting:

6. Edit HTML Directly If Needed

If you do hit a situation where you want to edit HTML directly, you can access the code editor by clicking on the three dots in the top right-hand corner or using the Ctrl + Shift + Alt + M shortcut:

Taking Advantage Of Gutenberg’s New Functionality – Columns, Buttons, And More!

Alright, we’ve covered:

• How to use Gutenberg to create a basic blog post.
• Some tips to speed up how you work with Gutenberg.

Now, let’s get into some of the cool new stuff you can do with Gutenberg. These are the exciting features that should help explain why the WordPress team decided to move forward with Gutenberg.

Insert Buttons – No HTML Required

With the old editor, the only way to create buttons was to manually add a CSS class or use a third-party plugin.

With Gutenberg, you just add the Button block. To edit the button text, you just click and type. And to change up colors, you can use the sidebar:

Create Multi-Column Layouts

With the old editor, there was no way to create multi-column layouts without your own custom HTML or a third-party plugin.

With Gutenberg, you just add the Columns block. Then, you can add other blocks inside the different columns:

Create Full-Width Stretched Images

If your theme supports it, you’ll get a new full-width alignment option that lets you stretch images across the entire screen, which opens up some interesting content layouts:

Create Reusable Block Templates

If you find yourself regularly using the same combination of blocks, you can save time by creating a reusable block group.

First, you can click and drag to select all the blocks that you want to include. Then, you can use the three dots to Add to Reusable Blocks:

You’ll give it a name. Then, you’ll be able to insert that entire template just like you would any other block:

You Can Add More Blocks And Functionality With Third-Party Plugins

Here’s where Gutenberg starts getting even cooler:

Third-party plugins can add their own blocks that you can use in your Gutenberg designs.

There are two ways that this can benefit you:

• The plugins that you already use will create their own Gutenberg blocks. For example, if you use an event calendar plugin, you’ll be able to insert events just by using your plugin’s event block.
• Developers are making dedicated Gutenberg plugins that add tons of generic new content blocks that give you more control over your designs.

For example, check out the free Stackable plugin. Once you install and activate it, you’ll get a whole new set of Stackable blocks in Gutenberg:

And then you can use those blocks to do some pretty cool things, like inserting a pricing table or a testimonial:

This Is Just The Beginning For The WordPress Gutenberg Editor

And that’s it! If you made it this far, you should be a Gutenberg guru who’s ready to hit the ground running as soon as WordPress 5.0 is released.

While learning a new workflow isn’t on most people’s lists of “fun ways to spend a weekend”, mastering the ins and outs of Gutenberg will be essential for anyone who uses WordPress.

Not only is Gutenberg going to affect the way that you create content right now, it’s also going to play a major role in WordPress going forward.

Everything you saw above is just phase one of Gutenberg. In phase two, Gutenberg will move into page templates, and phase three will morph Gutenberg into a tool for full website customization.

So…become good friends with Gutenberg, because you’re going to be seeing a lot of it over the next few years!

Colin Newcomer

https://www.cnewcomer.com/