WordPress Gutenberg Editor: The Definitive Guide

by

This is your guide to the new WordPress Gutenberg editor, the replacement for the current text editor that you use to write your posts and pages.

What is Gutenberg? When does it arrive? What difference and change will it make to your workflow? All your Gutenberg questions are answered in this guide.

Let’s have a look at this new era of WordPress publishing.


WordPress Gutenberg Editor: The Definitive Guide

What is the Gutenberg editor?

Gutenberg editor is the all new way that you can write content in WordPress. It replaces the old WYSIWYG editor and completely changes the experience of creating content with WordPress.

Gutenberg brings new innovation too and is meant to future proof WordPress and make it more competitive with other blog sites such as Medium, Wix, Weebly and Squarespace.

It gives you as a content creator more flexibility and control in an interface that looks like the front end and is more intuitive.

In words of WordPress “get ready to make your words, pictures, and layout look as good on screen as they do in your imagination, without any code”.

Gutenberg editor is named after Johannes Gutenberg, who introduced mechanical movable type printing to Europe and started the printing revolution in the 15th century.

Gutenberg is “WordPress’ next big thing”

WordPress has big plans and dreams for Gutenberg.

According to Matt Mullenweg, founder and CEO of Automattic, Gutenberg is “WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world”.

Here is a sample post created by Gutenberg that showcases the different opportunities in the creation of amazing and beautifully designed blog posts.

Matt continues:

Gutenberg opens up WordPress to an entirely new set of people for whom WordPress was too complex and hard to set up before. Fewer people will abandon their sites because it was too hard to make things look the way they wanted. Users will finally be able to build the sites they see in their imaginations. They’ll be able to do things on mobile they’ve never been able to before. They’ll never have to see a shortcode again. Text pasted from Word will get cleaned up and converted to blocks automatically and instantly.

In the long-term, the idea with Gutenberg is not just to overhaul the way we create posts and pages, but also to unify and encompass everything about the site building process including themes and plugins.

Here’s what Matt said in the Gutenberg announcement post in January 2017:

The customizer will help out the editor at first, then shift to bring those fundamental building blocks into something that could allow customization “outside of the box” of post_content, including sidebars and possibly even an entire theme.

When is Gutenberg arriving and can I test it?

Gutenberg will officially become a part of the WordPress experience with the next major release called WordPress 5.0. It is set to be released by the end of the year 2018. It is still very much in the development stages with no set release date.

According to Matt Mullenweg: “Gutenberg will ship with WordPress 5.0, but the release will come out when Gutenberg is ready, not vice versa”.

At his keynote at WordCamp Europe in June 2018, he put the 5.0 release in August roadmap. Gutenberg is about to arrive.

WordPress Gutenberg demo plugin is already here

You can install and use the beta version of the Gutenberg editor right now by using this plugin. Here’s how:

  • In your WordPress admin click on “Plugins” and choose “Add New”
  • Search for “Gutenberg” in the search field
  • Click the “Install Now” button
  • Click the “Activate” button
  • You’re now using the Gutenberg editor as your default editor for posts and pages
  • You don’t have to manually convert your old posts to the new blocks, simply click on the “Convert to blocks” in the “More options” menu next to the Classic block.

There’s the live in-browser Gutenberg test

Don’t want to test Gutenberg on a live site with a plugin? Use this live in-browser Gutenberg test as your playground to explore the latest version of the new editor.

Gutenberg is a very different experience and we all will need to relearn how to create our content in WordPress.

I recommend you either use the in-browser demo or install the demo plugin to get some real-life experience with Gutenberg in order to get to know it better and be prepared for it when it becomes the default WordPress editor.

If you do have any feedback on the new editor make sure to submit it using this form or the official Github.

WordPress Gutenberg tutorial: How to use the new editor

The Gutenberg editor really is a beautiful editor. The typography is great, there’s lots of space and it provides a clear and consistent experience.

It’s distraction-free and content-first user interface that works great on all devices. It’s a blank canvas for creators. Your full focus is on the content itself in a clean writing environment.

Note that this is still a work-in-progress editor as WordPress Gutenberg development is still ongoing so we may still see some big changes before it actually becomes the default editor.

Here’s how the first screen looks like:

Gutenberg post editor

A large writing field for you to add your blog post title and start writing your story.

Majority of the buttons, menus and options have been moved and hidden by default in the new WordPress editor. They instead appear dynamically as you’re working with the relevant content.

Not much feels different as you actually start to type. You type, you press enter for a new paragraph and so on. It all functions the same way as it has always been.

Gutenberg editor top menu

Gutenberg editor has a menu on top of the screen.

The first button on the left-hand side is the button that allows you to “add block“. I will go into more details on Gutenberg blocks further down this guide.

Gutenberg content structure

On the right of it, you have the undo and redo icons and the “content structure” icon.

Content structure is very interesting and a nice improvement to the current WordPress editor. It lets you see the word count, and the number of headings, paragraphs and blocks in your blog post draft.

The best part of the “content structure” is the Document Outline which shows you the table of contents of your post including the title and all the headings.

You simply click on the heading to edit the individual block in question.

On the right hand of the Gutenberg top menu, you have the “save draft” button. On the right of it is the “preview” button which you know very well from the existing WordPress.

Next to it is the “publish” button which adds a last-minute check up to make sure you actually meant to publish the post and didn’t misclick it.

It simply asks you “Are you ready to publish?” and is a nice and user-friendly move. You don’t want to make public the drafts you are working on.

On the right of the “publish” button is the “settings” cog which opens the settings menu. I will go into more details on the settings menu below.

Besides the settings cog on the top menu is the three dot icon for the “more” menu:

  • Editor: Here you can switch between the visual editor and the HTML code editor. The code editor you can use to insert certain HTML codes or to simply write and edit your content using HTML
  • Settings: Fix the toolbar of the individual blocks to the top menu rather than have it within the block itself. You can also enable tips about Gutenberg to be shown
  • Tools: Option to copy all the content HTML code with one click

Gutenberg document and block settings

There are some simple settings on the right-side of the post writing field. There are two tabs in the settings menu. The first one is the “Document” tab which includes the traditional WordPress settings that you are used to. There is nothing new there:

  • Status & Visibility: Option to schedule or publish the post, make it sticky or set it to be reviewed
  • Categories & Tags: The ability to add categories and tags
  • Featured Image: The way to upload a featured image
  • Excerpt: Adding the excerpt for the post
  • Discussion: Option to disable comments and trackbacks

The second tab is called the “Block” tab and it is more interesting. Let’s look at what Gutenberg blocks are.

What is a Gutenberg block?

Gutenberg is introducing a block-based approach to content creation. The single post editing field is being replaced by a variety of individual blocks.

Blocks are pre-made modules that you use to arrange, compose and style your content. You can beautifully customize your content without using or knowing anything about coding.

Every piece of content you add to your posts is a block. It can feature regular text or an image or a video, a button, a table, a widget and so much more.

You add a text block when you want to add a paragraph of text. You add an image block when you want to insert an image. And so on.

Every block is stand-alone and features unique settings and properties. Each individual block can be completely customized independently of the other blocks. The blocks can be moved and rearranged easily by drag and drop.

They can be reused in different posts or different sections of your site. You will be able to create your own unique blocks too and developers would be able to do the same and offer them as third-party plugins.

Blocks will be replacing all the current WordPress formatting elements such as widgets, embeds, post formats, custom post types, shortcodes and theme settings.

All the blocks currently available in the Gutenberg editor

If you click on the “add block” button on the left side of the top menu in the Gutenberg editor you get a long list of all the blocks currently available.

You can search for a block to quickly find the one you need.

Or you can use the top section which includes the “Most Used” blocks and changes according to your usage by displaying the blocks you use most frequently.

In this area, you can also see the blocks you have saved yourself under “Shared“.

The other blocks categories are the “Common Blocks“, “Formatting“, “Layout Elements“, “Widgets“, and “Embeds“.

Block tab in Gutenberg editor settings

So the “Block” tab in your Gutenberg editor settings is where the settings of the individual blocks are placed.

For the “Paragraph” block, which is the way to add basic text to your post, you have the settings to:

  • Text Settings: Change the font size or add the drop cap (the large initial letter)
  • Background Color: Change the background color
  • Text Color: Change the text color
  • Advanced: You can add additional CSS classes

This is a great move compared to the old way of doing things and will make it so much easier for newbie bloggers to do fonts and colors the way they want to.

And no need to add CSS code in your theme files either to have a nice content box. Just add the background color instead.

Options in the “Block” tab will change depending on which block you are working with and the options available for that type of block.

You can click on the “close” button or the “settings” cog icon to hide the settings menu and be left with a distraction-free screen.

Gutenberg block tooltip

As you’re working with the individual blocks you will see that they all have individual tooltips with different options and settings.

Here’s how the paragraph text block tooltip looks like. You can sticky it to the top menu or just let it stay on top of the block. If you’ve used Medium, you will be familiar with this tooltip style. It works great.

Everything you expect from the current WordPress editor is in there. It just shows up when it is relevant and doesn’t clutter your screen unless you actually have the need to use it.

Here’s how the image block tooltip looks like. This one is a big improvement to the current WordPress editor. It makes it easy to create image galleries but also to play with the way you display an image.

Align left, right or center we already know but you can now include the image in wide width or even in the full screen.

Another interesting block that I like is the “columns” block.

You insert the column block, choose how many columns you want, choose the width of the columns (full width is available too) and then you can add any other block into each of the columns.

It is such an easy way of creating beautiful content without any coding. Anyone can do it right now intuitively.

Couple of other interesting blocks to note are “Code” which allows you to showcase HTML code in your posts and “Custom HTML” which lets you edit your post in HTML. This works so much better than the old way, your HTML never gets lost and there’s no need to switch between the editors anymore.

Each block has the “more options” icon on the top right side of the block. This allows you to:

  • Show Block Settings which opens the individual block setting menu which we already discussed
  • Edit as HTML which allows you to edit the individual block in HTML only and not the whole document
  • Duplicate to make a new copy of the block with a click
  • Convert to Shared Block which basically saves your block so you can reuse it anywhere on your blog and not only in this post you’re currently editing

Each block can be removed as simply as clicking on the trashcan icon that’s just underneath the “more options” icon.

I am looking forward to exploring upcoming columns that developers in the community come up with. There are limitless opportunities.

Gutenberg controversy and those who hate the new editor

There has been plenty of vocal concerns about Gutenberg and how it may affect existing themes, plugins, sites and clients.

WordPress is used by millions of people daily and it’s got a very loyal and dedicated following.

Every time you embark on such a major journey you are bound to make people fear the big change coming. People find it hard to accept big change. They need time.

Just look at the ratings and reviews of the Gutenberg beta plugin. As I’m writing this it’s got a rating of 2.7 out of 5 stars with more than 200 people giving it 1 star.

Reading the reviews, most of these haven’t even given Gutenberg a chance. They are just against the idea of such a big change to the experience that they love, know and are used to.

It’s natural to be a bit vary of such as big change. After playing a bit with Gutenberg, even I understand that I may need to spend some time working with it in order to learn it but I see the opportunities with it too.

Many developers are also concerned about how this will affect their current sites and sites of their clients. There is a solution for all those concerned.

Use the Classic Editor plugin to disable Gutenberg

In the spirit of WordPress, there is a plugin which will make sure that you keep the classic editor as the default even when the Gutenberg one arrives.

If you’re afraid that Gutenberg will break something or just don’t want a big change now and the learning process that comes with it, you can activate this plugin and everything will continue going on as you’re used to. Here’s the classic editor plugin.

You can also use the “classic” block in the Gutenberg editor. It is basically the same as the current WordPress editor but in the block form.

How will Gutenberg affect the page builders and premium themes?

WordPress enters the area of page builders such as Elementor and Beaver Builder with the Gutenberg release.

The page builder business (and the premium theme industry) will need to adapt when Gutenberg arrives as the default in the WordPress product.

The signs from the WordPress team point at Gutenberg being a major release that they plan to build their future around in order to better compete with Squarespace and others.

And the idea is to expand Gutenberg from posts and pages into the sidebar and the rest of the site design too.

This means that the technical question of who’s best may not mean much because as usual the majority of users just use the default version they’re presented with.

By being the default choice, Gutenberg will get support from the open-source community through the creation of plugins and themes that are specifically built for it.

Gutenberg covers the needs of the majority of bloggers

Most of the newbie bloggers would not have a need to go and look further than Gutenberg.

It will cover all their needs in terms of creation of more unique looking blog content and the need to go install another page builder (and even a premium theme) will be pretty much eliminated for them.

So the acquisition of new users at the current scale will become a problem for page builders and premium themes.

The third-party page builders, despite making this format successful, may turn into more of an advanced niche product that enhances and extends Gutenberg.

This would then be for more advanced bloggers who have a specific need that Gutenberg may not cover at the time such as access to a wide variety of great looking templates or some specific extension for edge cases.

The writing is on the wall

The industry will get tougher in terms of competition, some teams that are adaptable will thrive but some may not survive.

It might not happen on day 1 after the release of Gutenberg, but the writing is on the wall for those that don’t adapt as Gutenberg matures and improves.

Beaver Builder team seems excited and supportive of WordPress Gutenberg editor so they are ready to fight. StudioPress is ready to “serve as an example for how Gutenberg can work brilliantly”.

But I would say all in all the WordPress 5.0 and the Gutenberg editor introduction will be great for all the bloggers and the whole WordPress ecosystem.

It will make it so much easier and faster to build amazing content without the need of any design experience or tech know-how.

And it will expand the WordPress ecosystem and bring new opportunities to developers and entrepreneurs who embrace it. And an even better way to get started with WordPress for new creators.

So do explore the current Gutenberg editor demo a bit to get a feel for it, keep up to date with the news on the WordPress 5.0 release date and be ready for the future of WordPress publishing.