What is WordPress Gutenberg? How Will It Affect You?

The new WordPress Gutenberg editor is expected to be introduced during 2018, with the release of WordPress 5.

Currently only available as a plugin, Gutenberg is set to replace the WordPress TinyMCE editor we know today.

The current WordPress editor hasn’t changed much over the years. While for many this is an advantage because, after all, we like what we’re used to, others think it’s the time for a change.

As expected, the coming change is the cause of debates as to whether this will be a good move. Take a look at the Gutenberg reviews and you will see the concerns of developers and users.

There are some that hate it, others that love it and the majority of WordPress users that probably don’t know anything about it.

Some of the most common remarks are to keep it as a plugin, make it optional, not to include it in the WordPress core and there are worries about backward compatibility.

It looks like Gutenberg is inevitable, so in this post, we’ll look at some of the new features and show you how you can use the new editor to build your content.

Why Gutenberg?

The editor is named after Johannes Gutenberg a German blacksmith who invented a printing press with removable type.

The printing press transformed many things, allowing books and ultimately newspapers to be published which helped bring about greater democracy. The Gutenberg editor will transform WordPress, making it easier for users to build the websites they imagine.

You can read more about why it’s called Gutenberg and the reasons for the change is this post by Matt Mullenweg – “We Called it Gutenberg for a Reason”

Why Do They Want To Change The Editor?

The idea behind changing the WordPress editor is to make it easier to create rich posts and attractive layouts. This is possible now but the argument is to get things looking exactly how you want, you need to know some HTML and CSS or use shortcodes.

That’s the official reason but there might also be a financial reason. Automattic, the company behind WordPress, owns WordPress.com which can be a free or paid platform.

Perhaps they’re fed up losing customers to other online site builders. With Gutenberg, they hope to attract more users to their .com platform and so increase profits.

What is WordPress Gutenberg? 

Put very simply Gutenberg will be the replacement for the current WordPress editor.

With Gutenberg, you will be able to use WordPress to its full potential without having to know anything about coding.

This is how Matt Mullenweg, the co-founder of WordPress explains it:

The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Gutenberg is planned to release in 3 stages. The first stage, included in Wordpress 5.0, will focus on the editing experience and the use of blocks.

More than an updated editor

Gutenberg isn’t just an updated editor it changes everything. Every item you add to a page or post will be a block whether it’s a heading, an image, a paragraph, a list or a video. And each block has its own settings.

The editor will enable you to create content rich pages without a 3rd party plugin or page builder.

Editing your pages will be similar to using some of the website builders like Wix or Weebly or page builders like Divi or Thrive Architect, where you use blocks or elements to build your page.

You can check out the official example page here.

The video below walks you through some of the basic features.

When Will Gutenberg Be Released?

Gutenberg will be released with WordPress 5.0. There is no actual date set yet but it’s expected sometime in 2018.

You may think it’s a little strange not to have a date set but it’s a good thing. They want to get it right before releasing and won’t rush out a new editor with lots of problems just to keep to a deadline.

How To Install Gutenberg?

At the moment Gutenberg is available as a plugin. To date, the plugin has more than 5000 installs and more than 86000 downloads. Its overall rating is 2.7 out of 5 stars.

You can either download the plugin from the Wordpress repository or from your dashboard by navigating to Plugins -> Add New then search for the Gutenberg plugin.

It’s recommended to install and test the plugin on a test site or on a local installation as it’s still in beta.

By doing this you can both satisfy your curiosity, learn how to use the new editor and provide feedback to the developers for any bugs you find or any suggestions you have to improve Gutenberg.

WordPress is also looking for people to help with usability testing. Your chance to be involved in the development of WordPress!

If you haven’t a test site but would like to try Gutenberg, check out Frontenberg. You can edit a demo post without having to install the Gutenberg editor.

Related: How To Start A WordPress Blog the Right Way

Gutenberg Installed!

Once you have installed the plugin you will see a new, Gutenberg, menu item on your dashboard.

If you click on this there is a submenu – Demo, Feedback, Documentation.

• Demo lets you edit the demo post that WordPress has published
• Feedback allows you to give your feedback on the plugin or ask a question to get help from support
• Documentation – after a brief introduction most of the documentation is not for the average user of WordPress but there is a collection of Gifs that you might find useful

To edit a post you have the choice of using the new editor or the classic editor.

Some Of  The Features

The main feature of the Gutenberg editor is it provides blocks you arrange to customize your page to achieve advanced layouts without needing any coding.

You combine different blocks (or content blocks) to compose your content. A block can represent any visual element in your post: a heading, a paragraph, an image, an image gallery, a table, a quote, a list, a form, an audio file, a video…

Below you can see how the new editor looks. You will notice the TinyMCE toolbar with bold, italics etc is no longer visible.

There is more space to write and this space can be made even bigger by hiding the column on the right by clicking the gear icon (settings). This is very useful if you are working on a small screen.

In the settings section on the right, there are 2 tabs:

• Document – allows you to select the visibility, the publish status, format, categories, and tags, featured image, excerpt, discussion and table of contents. This is similar to what we are used to now with some slight changes.
• Block – when you select a block the editor brings up settings and customizations that can be made for that type of block

Choosing a block

You choose the block you want to add to your post by clicking on the (+) button either at the top of the editor or in the content where you want the block to appear.

The position of a block can be easily changed, moving it up or down by clicking the arrows on the left side of the block.

You may need a lot of clicks to move blocks at the moment but they are working on a drag and drop feature.

You get a choice of blocks you can add.

• Recent – the blocks you use most often
• Blocks
  • Common Blocks  – audio, cover image, gallery, heading, image, list, paragraph, quote, subhead, video
  • Formatting – code, classic (the toolbar you’re used to is displayed at the top of the block), custom HTML, preformatted, pull quote, table, verse
  • Layout blocks – button, separator, read more, text columns
  • Widgets – categories, latest posts, shortcode
• Embed – gives you the option to embed various elements from a number of platforms such as YouTube, Instagram, Vimeo, Slideshare, VideoPress and many more.
• Saved – blocks you have saved by clicking “Convert to reusable block”

Editing a block

When you select a block to edit, a menu appears above the block with the different editing options.

Below is the menu for a text block. It probably looks familiar as it’s powered by the TinyMCE editing engine that’s used in the current editor.

A Few Of The New Additions  

These are a few of the new blocks that I found are particularly cool. Worth trying yourself to see what you think!

The Table Block

Adding a simple table is now easy from directly in the editor. No need for a plugin or coding with HTML.

If you do need to add some HTML code this can be done very easily. You don’t have to change from the visual editor to the code editor. You can edit the HTML directly in each block by clicking “More Options” (the 3 dots to the right of each block).

New Text Options

It is possible to change the font size, turn it into a drop cap, add a background color or change text color with the new color palette.

Classic Text Block

This block shows the TinyMCE toolbar from the default editor. You can move the block up or down in your post or delete it.

The classic block may be used when pasting text into the editor. For those who don’t like the new Gutenberg editor, this block can be used, at least during the transition period, to edit your posts.

Add A Gallery

You can easily add images as a gallery in your posts. When you add a gallery block you have the choice of uploading images directly or adding them from your media library.

You can drag an image directly from your computer into the editor without leaving the page. The new image will be automatically added to your media library.

The settings for this block allow you to set the number of columns you want. The images resize automatically as you adjust the number of columns.

Table Of Contents

The editor detects the headings (H2, H3, H4) in your post and displays a table of contents. This is accessible from the sidebar or at the top of the editor.

Each heading is clickable to take you directly to that section of the post to start editing. Particularly useful for people working on mobile devices or for long posts to avoid lots of scrolling.

Word, Headings, Paragraph and Block Count

Currently, you see the total word count at the bottom of the current editor. In Gutenberg, they have added this as a pop-up.

Button

The Gutenberg editor allows you to add a simple button. A very useful feature for many bloggers. This will save you from using a plugin, shortcode or coding the button in HTML.

Custom HTML

You can insert your HTML code and then see a preview from within the block. No need to change from text to visual editor.

Cover Image

A cover image is a large image that you can overlay with text. Adding a cover image with a text box in Gutenberg is simple. The text box is centered vertically but can be moved to the left or right.

The block options in the right-hand menu allow you to make the image darker to make the text easier to read. It’s also possible to fix the image, meaning when you scroll the image doesn’t move.

Creating Columns

To create columns you just need to select the text column block. You can choose the number of columns you want by using the text column block options. By default it’s set to 2 columns, click on the slider to add more.

Summing up

Like most people, I like the WordPress editor as it is today and I went into testing the Gutenberg editor wondering if this would really be an improvement.

However, I found the Gutenberg editor easy to use and was impressed by some of the new features which will probably be improved further and added to as updates are made.

There is still work to be done before the new editor is released and a release date hasn’t been set.

Matt Mullenweg, the WordPress founder, hopes to have 100,000 active installs to thoroughly test the new editor. And you are encouraged to leave feedback on your experience.

When Gutenberg is ready in be incorporated into WordPress core, it would be a good idea to advertise the plugin to all Wordpress users. Encourage them to install the plugin, test it and give feedback. Also, provide documentation and tutorials.  This will help to prepare the WordPress community before the editor is updated.

Although I found Gutenberg intuitive and very easy to use, for users who have only used the current editor, the new editor might be quite challenging.

For the majority WordPress users having a more visual and friendlier editing experience built into the editor will be a good thing. But at the same time, WordPress will want to keep longtime users happy. If they can keep everyone happy they should continue to increase their share of the market.

Try Gutenberg

The default publishing experience in WordPress is going to change and get better. Make sure you’re ready for this change by downloading the Gutenberg plugin to a test site. Then play around with it, test it, see what it can do and give your feedback. I’m sure you’ll love the experience!

Have you tried the Gutenberg editor? What do you think? Do you like it or do you still prefer the current editor? Let me know in the comments below!