The post and page editor that ships with WordPress has been around for a long time now, so maybe it is time for an upgrade?
One set of developers and a legion of contributors think so and have begun work to update the WordPress post writing experience. Their ambitious project is called Gutenberg project. It aims to fully replace the default editor in the near future and is being tried and tested as a plugin before making its way into WordPress core.
Table of Contents
What is Gutenberg?
In short, Gutenberg is an new post and page editor for WordPress. The project is named after Johannes Gutenberg, who introduced the mechinical printer to Europe, starting the printing revolution. His work made knowledge and information accessible to the masses and set in motion significant social revolution. Similarly, the developers want to make advanced layouts accessible to the average WordPress user.
The focus of Gutenberg is expressing all content as blocks and defining post layouts directly in the editor. The current WordPress post editor is free-flowing like any word processor software, and content layout is defined in template files using HTML and CSS.
With Gutenberg you no longer need to know HTML or CSS to get two blocks of content side-by-side, making complex layouts a lot more accessible to the average user. You can simply click Align Left on one block and Align Right on the other, or you can insert a pre-made block with up to 4 side-by-side columns. You can also easily move blocks up and down the document.
The developers also want to replace the use of shortcodes when adding rich content to posts and pages. This means that embedding external content is easier, with specific options for adding YouTube videos, Reddit posts, Tweets, Spotify links, and a lot more. This simplifies the process that would normally require a plugin or generating specific embed code on the website you’re embedding. Currently 34 websites are supported.
They also want to expose what they call “mystery meat” in WordPress, which means features that are hidden from the user. They cite that WordPress actually supports embedding for over 30 websites, and if you look at the default editor, you’ll notice there are no buttons for these embeds. The only way to find these embeds is to experiment. But Gutenberg already supports 34 embeds. And all of them are easily available. All you have to do is enter the URL you want to embed and Gutenberg does the rest.
Gutenberg is currently still beta software and as a result, has numerous issues. It even comes with a warning that it is not ready for live websites. It does, however, ship with 15 different translations (including English), making it very accessible if you choose to adopt it early and help hunt bugs.
The current version is 1.1.0 and requires WordPress 4.8+. I am testing with version 4.8.1.
After installing and activating Gutenberg, I clicked Add New in the Posts section of the admin control panel and was greeted with the same old editor. It took a moment to realise the new editor has its own link in the admin menu. This is because Gutenberg is still in early development, and the WordPress developers don’t want to replace the current editor until Gutenberg is ready, all bugs are fixed, and it has been extensively tested by a large user base.
The Gutenberg developers recently revised their timeline for switching from plugin to default editor. The next major release of the plugin is set for November to coincide with the release of WordPress update 4.9. Before becoming part of WordPress’ core, the developers will issue a proposal for merging in December 2017 where the editor will be scrutinised even further. The final switchover is expected to be a part of the WordPress 5.0 update, potentially in 2018.
At the bottom of the admin control panel navigation, there’s a new Gutenberg menu with two sub-links. The first link is New Post. The second link is named Demo which generates an entire post in the new editor complete with every feature available to you – text, pictures, tables, various examples of block alignment and some embedded content too.
Later I realised that Gutenberg ads new button under each post and page.
One thing to note is that if you edit a post or page that was created with the normal editor, all your content will appear in blocks, but the blocks do not appear to be assigned the correct roles. Clicking on my text shows the gray border around it indicating it’s a block, but the sidebar doesn’t give me any of the paragraph options, and instead the full TinyMCE style editor appears above the block.
Interestingly there is no link to create a new page, but you can edit existing pages. Looking at the plugin’s Github project page shows they are not working on adding a link to create a page at the moment but it is planned for future releases.
There is no settings panel or preferences page to set any defaults for new posts. If your default behaviour for new posts is to submit them for review before publishing, the user has to click Pending review before submitting any post which can be easy to forget.
The New Editor
Visually, the new editor is very clean and a little confusing at first as everything is hidden until you actually need it. There is no TinyMCE toolbar in Gutenberg and the actual content of the post takes up more of the screen. This cleaner view gives a much better preview of the final post than the default editor does. All content in the editor window is centered with plenty of whitespace either side. The content looks almost identical in the editor and once published.
On the right-hand sidebar, there is a tab named Block that lists all the possible options for the currently selected block. The options for a paragraph block include dropped capitals, a font size field where you can type any number (current editor only has a dropdown choice), background colour for the paragraph block (which applies HTML styling to the p tags automatically), font colour, and block alignment.
When using the default WordPress editor on a small display, all the document settings such as post visibility and category selection are pushed below the work area, requiring a lot of scrolling in some cases.
In the Gutenberg editor, the meta and block settings (sidebar on the right) are initially hidden and can be displayed on top of the work area by clicking the settings button. After using the new editor for a while, the context based toolbars grow on you.
Adding New Blocks
To add a new block or to embed content, there is a + icon below all the existing blocks. There is also an insert button at the top of the page. The top bar is glued to the top of the editor, so the insert button is always visible. Hovering your mouse over the + symbol shows quick insert options for paragraph and image, which will be the most commonly used blocks.
The new menu has tabbed navigation that’s split into pages for Recent, Blocks and Embeds. There is also a search box in this menu that is always visible. The developers efforts to improve workflow are clearly visible in the context based menus.
- Recent – when you click the + symbol or the insert button, a list of the 8 most recently used blocks and embeds appears first.
- Blocks – a list of blocks split in to four headings:
- Common Blocks – heading, paragraph, image, etc.
- Formatting – table, preformatted text, code, etc.
- Layout – seperators, buttons, etc.
- Widgets – latest posts, categories, shortcodes.
- Embeds – you can Embed content from a long list of popular websites such as Reddit, YouTube, Instagram, and there’s a generic Embed button where you simply enter a valid URL and the editor does the rest. It seems to work as an auto-detect feature.
Moving & Aligning Blocks
To move blocks up and down the document, arrows are placed to the left of each block when mousing over them.
To align blocks left, center and right, the option is at the bottom of the sidebar when the Block tab is selected. As you can see in the screenshot below, the alignment doesn’t work as well as creating your own HTML and CSS. If the text in one block is longer than the other, it tends to wrap in odd ways.
Visual Editor vs Text Editor
As with the default editor, you have the option to choose between Visual and Text based editing using a link at the top left of the editor. The visual editor makes use of streamlined toolbars that show only the features that are relevant to the current block. Switching to the text editor reveals the coding style used to create the effects.
Each block created by Gutenberg is made up of HTML comments, typically using opening and closing tags using syntax created by the developers of Gutenberg. This is fairly straight forward and is easy to learn if you still prefer using the text editor and just want the benefits of Gutenberg’s layout functions.
Gutenberg’s Extra Features
Gutenberg adds a number of new features for your posts, including whole new blocks and extra options for existing WordPress features.
Table of Contents
Gutenberg detects all the heading blocks (<h1><h2> etc) in your post, and displays a table of contents in the sidebar listing them all. This acts as a document tree, helping visualise the written flow of your posts.
You can click each heading to jump to that section of the document and quickly begin editing them. This is especially useful for mobile users and larger articles as it removes the need for extensive scrolling.
Anchor tags allow you to link to a specific part of a document. Just like how you can use the table of contents in the editor, you could create a list of your headings, give each heading an anchor, and let users move to that section of the post.
When a heading block is selected, the block options page has a HTML Anchor section with a text box below it. Typing a name for the link brings up a copy link button that you can paste into any link box.
This is the equivalent of giving any HTML element an ID, and linking to it by adding #name-of-id to the URL.
Additional CSS Styles
Most blocks have an option to add an additional CSS style to the block.
This allows you to assign classes that are defined in your theme’s stylesheet.css file.
Using this you can override or enhance any default styling of Gutenbergs blocks, such as buttons where the option to change font colour is not present in the editor.
You can easily add groups of images as a responsive gallery in your posts and place them around other blocks. Adding a Gallery block gives you links to upload images or select images from the WordPress Media Library.
The options for this block let you set how many columns to display, depending on how many images you added to the gallery. The images automatically resize as you adjust the column count.
An odd number of columns makes the last few images larger than the rest, giving them prominence.
There’s also a ‘crop images’ switch in the block options for Gallery that tries to make every images thumbnail the same size. What you see in the editor isn’t quite what you get in a real post, so you’ll have to make images the same dimensions before uploading them.
Cover Image / Hero Image
Cover images (sometimes called hero images) are large headers, often with text overlaid on them.
Gutenberg adds cover images with a text box centred horizontally and vertically, simplifying an otherwise difficult task.
The block options allow you to dim the image making text easier to read, and also to force the image as fixed, meaning when a user scrolls the page, the image does not move.
As with the gallery, the image you get in a post displays slightly differently to what you see in the editor. This is due to the responsive nature of the blocks – they are sometimes some different widths in the editor and a live page.
Pull Quotes & Block Quotes
A pull quote is an excerpt of text from the article. It is used to highlight important passages of text or spoken quotes and is usually displayed before the text appears in the article.
You often see them in newspaper and magazine articles, with abbreviated passages of juicy text that entice the reader to continue reading.
Block quotes now have extra options for style and text alignment. You can quickly switch between two different visual styles by clicking the buttons on the toolbar.
Once you’ve chosen a style, you can also choose how the quoted text is aligned.
The custom HTML block allows you to add any HTML that you would normally write in the Text editor or in template files, directly in the visual editor.
The main advantage of this block is that the HTML is contained within the block itself, allowing you to easily move the entire HTML code around like any other block.
This block also has a preview tab that renders any changes you make without having to submit the post or click the WordPress preview button.
These changes significantly improve workflow for advanced users and give almost the same level of layout control you have when editing templates.
The classic text block mimics the default editor and shows the full TinyMCE toolbar instead of any Gutenberg buttons. The only option beyond TinyMCE is ‘Additional CSS Class’ on the block options menu.
Classic Text exists as a generic block that is assigned when Gutenberg can’t figure out a block type automatically (when pasting text into the editor), and to help bridge the transition between old and new editor.
The block can still be moved and deleted using the Gutenberg controls. When switching to the text editor, this block appears as pure HTML and is not enclosed in HTML comments like every other block.
Verse blocks are intended for poetry or literary passages and primarily is used to strictly define line breaks and character spacing. There is also a small indent on the left of the text.
When you hit return in a paragraph block, the editor adds a new paragraph. In a verse block, the cursor simply moves down one line.
In the editor, the block appears as white and aside from the indent, looks similar to a paragraph. The editing options for text are restricted to bold, italics and strikethrough.
In an actual post, the text in a verse block appears with a gray background and a different font to the paragraphs. Hopefully, these will be reflected in the editor in a future update.
Text columns lets you add any number of inline text blocks. These would otherwise have to be written in HTML and CSS using the text editor or HTML block.
You can easily increase or reduce the number of visible columns using a slider on the Block options menu. The slider goes up to 4, but you can enter any number in the text box next to it.
The formatting options are limited to bold, italics, strikethrough and link.
You can quickly add stylish buttons that link to other pages and have centred text labels. You can change the label to bold, italic or strikethrough text. You can also align the button left, right, or centre.
The block options for button allow you to define a background colour using a list of common colours or using a colour picker that also has text entry for HEX, RGB, or HSL codes. The colour picker automatically converts your value to hex and doesn’t support opacity.
Currently, you can’t change the text colour from white, however, there is the ‘Additional CSS Class’ text box in the block options so you can make a simple CSS style which defines the colour.
The block list also contains 3 very useful widgets to display a list of latest posts, all your categories, and custom shortcodes that otherwise don’t work in Gutenberg’s blocks.
The latest posts widget has a number of options to customise the display of the list.
You can switch between a standard list and a grid layout. With the grid layout, you can set the number of columns to split posts into.
You can also set the number of posts to show, and choose whether the publishing date is shown with each title.
Categories can be displayed as a list or as a dropdown.
You can also choose to enabled post counts for each category name, and the hierarchy – categories that have parents are shown under their parent.
This block supports alignment, so you can float it left, centre or right.
This is very useful for plugins that provide extra shortcodes. You simply enter the shortcode as normal, and when previewing or viewing the published the post it will display the result. There are no options for this block.
Testing Gutenberg Performance
When using the editor normally, it is very responsive and snappy. There’s no noticeable delay when typing or adding new blocks, even complex ones such as a gallery of images. Some blocks let you set the number of columns to display – this is also instantly reflected in the work area.
Although the new editor does not have a word processing style flow, you can still copy and paste text from a Word document and Gutenberg does a decent job of detecting where content should split. I tested the default editor and Gutenberg by pasting text from a Microsoft Word 2016 document, and both detected each section the same and applied formatting the same way. There were a few differences in how the paste was handled:
- In both editors, text marked ‘Heading 1’ in Word was placed as a paragraph instead, ‘Heading 2’ was correctly placed as a heading 2 block.
- With Gutenberg, the font colour was correctly applied in both headings and paragraphs whereas the default editor did not detect it at all.
- One section was marked as an ‘Intense Quote’ in Word, and this was given a paragraph block in both editors. Changing this to ‘Quote’ still didn’t convert it to a blockquote.
- The default editor added line breaks that weren’t in the original document and Gutenberg did not.
I also tried the reverse and copied text from WordPress to paste in Word. In Gutenberg, the highlighting behaves poorly. Highlighting more than one block caused the top bar to highlight too, though it was not pasted to Word. The page became less responsive and there was noticeable delay when clicking options or scrolling the page.
Occasionally, switching block types would duplicate the block in the same place and I had to delete one of them.
I also tested usability and performance on an Android phone. Though the developers don’t intend for Gutenberg to be mobile focused, this is where it really shines.
Firstly, the performance is excellent and every button responds instantly. I selected the demo post that Gutenberg creates as it has a lengthy word count (881 words), plus numerous images, embeds and blocks. The content loaded instantly, whereas the default editor has a noticable freeze when you first load the edit post screen. I was able to scroll up and down with no delay, passing by YouTube embeds and Tweets on the way.
As the display is small, the sidebar is automatically hidden to give you a fullscreen editing experience. As the toolbars are also context based, they only appear when you select a block, making it easy to proofread lengthy posts.
To move blocks up and down the document, you first tap on the block, then tapping the toolbar’s ‘extra options’ button will bring up the up and down arrows. All blocks moved instantly. This is a significant improvement over the default editor where you must highlight your content, cut it, scroll to the new place, tap until the cursor is where you want it, and finally paste.
Switching to the block options menu for a paragraph, you can change the font colour and background colour instantly, however there is no preview as the options menu takes up the whole screen. This is a bit slower than the default editor if you are experimenting with highlights and colours.
Changing font size using the slider had a significant delay and was very innacurate as a result. The input to enter a custom number also had this delay when typing as the slider moved to whatever position corresponded to your entry. Again, you can’t preview the new size and have to close the menu to find out if your selection is appropriate.
Removing blocks was instant, just like moving them up and down, and caused no issues with the layout at all.
So far, Gutenberg has received mixed reviews and sits at a modest 2.4/5 stars on WordPress.org. There are 74 one star reviews as of writing, and a lot of them express the same concerns. The main concern is not everyone wants blocks. The current WordPress editor is extremely flexible and allows many different styles of website, which fits the ethos of WordPress perfectly.
Conclusion, Pros and Cons
|Streamlines the writing process||Beta software / not ready for live website|
|Helps visualise content as blocks||Poor reviews|
|Allows you to build complex layouts with little knowledge||Consistent bugs|
|Clean design only shows relevant tools when you can use them|
|Allows quick embedding from many websites|
Gutenberg is an interesting take on WordPress writing and editing, and the decision to adopt it early comes down to what kind of content you will be writing and where most of your work is done. As the focus of the project is rich content, it may be worth checking out when you need to embed a lot of content or create galleries within posts.
The default editor has quirks of its own that are removed when text is contained in a block. For instance, when writing headings with paragraphs on the line directly under them, the default editor will incorrectly define where the heading ends and the paragraph begins, forcing you to switch to the Text based editor to correct the placement of HTML tags. Having the heading in one block and the paragraph in another block removes the confusion.
If you’re used to using web based site builders you may also enjoy working with Gutenberg over the default editor.
If you are working primary from a phone or tablet, then I would recommend using Gutenberg or at least following its development. The issues mentioned should be ironed out eventually by the developers, who are giving themselves plenty of time to make this project work.