In WordPress Community

The new Gutenberg WordPress Editor!

July 6, 2017

By Yorgos Fountis

Share
The New Gutenberg WordPress Editor

The Gutenberg editor is the new experimental WordPress editor that allows beginner users as well as more advanced ones to produce and edit content more efficiently. It is currently in beta stage, and not fit for production, but it is available as a plugin for testing.

How to install the Gutenberg editor

Installing it is quite straightforward. Simply go to Plugins > Add new  and enter Gutenberg editor in the Keyword search forum.

Before installing it make sure that your WordPress site is upgraded to the latest “Evans” 4.8 release. If it is, you will see the checkmark at the bottom-right corner.

Press the Install Now button at the top-right corner. Finally, when the blue Activate button appears, press it.

Using the new Gutenberg Editor

After you successfully install the plugin, you can access it via two ways:

1. Select Posts > All Posts, and click Gutenberg instead of the Edit link. Note that the old Edit link is still available.

Gutenberg editor

2.  Select Gutenberg > New Post on your Dashboard.

Gutenberg new post

 

Whichever you choose you will be transported to the main editor area. The first thing one notices is its Medium.com style of design. Post metadata configuration is accessible as tabs in the right column. You can hide or show the latter by clicking on Post Settings.

 

Gutenberg WordPress editor

 

Adding, formatting, and moving text around is very efficient. You begin by writing the title and the main story. If you want to add another paragraph, just click on + > Text.

The new Gutenberg Editor uses something called blocks to organise text. When you finish writing a paragraph, you can change its order in the text, using the arrow keys located next to it. You can also delete it, using the Trash Can icon on the right.

 

If you wish for example to add a heading between these two paragraphs, you’ll need to add it via the + button, and then move it upwards by using the arrow icon. Although this makes manual formatting a bit less intuitive, it does help things remain tidier in the long run. No more deleting extra empty line breaks all the time! The block format of the editor forces all the content you add to be lined up correctly. If there is an empty line it is considered an empty block, so identifying it and deleting it is really easy!

Highlights

One of the main highlights of the Gutenberg Editor is its support for rich content and multimedia.  Embedding is really easy and straightforward. For example, to embed a Meetup.com URL: Just click on + > Embeds > Search meetup > Click on Meetup.com. Finish by pasting the Meetup.com URL into the form. And you’re done!

Athens WordPress meetup embed Gutenberg

The available embed services run from DailyMotion, Twitter, Facebook, Instagram, YouTube, Kickstarter and Spotify, TED, Slideshare, and Tumblr. Just select the source, enter the corresponding URL and you’re ready!

Besides the usual blocks of image, heading, cover image, quote, list etc, the Gutenberg editor provides a lot more, including layout blocks such as the separator and the button.

 

Pull Quotes

Additionally to the block quotes, we’ve all known and used, Gutenberg introduces a different form of quotes called “Pull Quotes”. These are magazine-style quotes that are “pulled” from a text and placed within another text. You can also align it wide or full, besides the usual ways of right, left or centre.

 

Table block

This is quite possibly the most useful addition to the editor. However, to our disappointment, only 2×2 tables are supported for now, without allowing any option of configuring the table in any way; not even the most rudimentary. You can’t add columns or rows either, as the table block is a fixed 2×2. Despite that, we do believe that it’s a move towards the right direction. Especially because currently, you can’t have tables in WordPress without using a third party plugin.  So we remain optimistic.

Gutenberg editor table block

Custom HTML

You can add live HTML blocks that you can easily switch between the HTML source and the preview. It’s handy when you work on something and you need to quickly change between visual and text mode.

Gutenberg Editor Custom HTML block

 

Summary

The Gutenberg editor seems very promising. The user experience feels very modern, due to the Medium.com design style, and the writing process is much more disciplined. The Text blocks may seem awkward in the beginning, but they actually keep the formatting, the text, and the overall structure much more concise. They also help editing and moving text around, and spare you the effort of hunting down empty space lines and carriage returns. Its social media options for embedding content is next to none. Although it’s not ready for production yet, the Yoast SEO plugin doesn’t work, the tables are not really usable and it is unpolished in a few places, it does offer a glimpse of what the WordPress editor could become in the future!

Did you like this article?

Subscribe to our blog and get awesome WordPress content straight to your inbox.

SUBSCRIBE
Share

OUR READERS ALSO VIEWED: