Gutenberg WordPress Editor – The First Review

WordPress is the top-notch blogging and publishing platform for many of us. But the bigger problem is the technical know-how needed to run a WordPress site. Otherwise you need to spend lot of time and money to modify the basic things. Even the simple task of creating and publishing a post or page in WordPress is not so easy to have different layouts and columns. This leads to the growth of hundreds of companies and websites offering page builders services. Good examples include Visual Composer, SiteOrigin Page Builder, Beaver Page Builder, etc. These page builders became popular only due to the reason that WordPress by default have clumsy editor.

Classic WordPress Post Editor

The classic WordPress post editor looks dull and is a plain text based. You can tweak very minimal things like switching to ‘Text’ mode and add some inline HTML/CSS. It is not possible to add column layout or add blocks. For example, if you have a text box like product offering or free ebook download then you need to add the same content on all the pages manually. Otherwise you may need to modify the PHP files or write some custom code, which are not options for beginner level users.

Gutenberg – The Future Way

If you have noticed, WordPress shows a notification in version 4.9.8 to install and test Gutenberg editor. At this point you need to install Gutenberg as a plugin to change the editor. But soon from version 5.0, WordPress by default will have Gutenberg editor. If you have some problem with compatibility or still like to use the old editor then you need to install classic editor plugin to continue with the old editor.

Since the layout of the editor changes with Gutenberg, all the plugins and themes that uses metaboxes on the post / page editor should be redesigned to work with Gutenberg editor. Plugins like Yoast SEO already offers the compatible version and we believe all other developers should follow the suit with no other options left. Below is the popup message appears from WooCommerce for trying out with Gutenberg editor.

What is Gutenberg?

If you have ever worked on Bootstrap site builder or Weebly editor then you will be surprised. Yes, Gutenberg is a drag and drop site builder based on blocks concept. You can simply click the block to add on the page and start creating your content. This is similar to Bootstrap or Weebly editor

Using Gutenberg may look lengthy process for simple text posts / pages. But for those want have different layouts and reusable blocks on multiple pages then Gutenberg is the simple solution.

Blocks of Gutenberg

You can add the following blocks with Gutenberg editor:

• Common Blocks – paragraph, image, heading, gallery, list, quote, audio, cover image, subheading, video.
• Formatting Blocks – Code, classic, custom HTML, preformatted, pullquote, table, verse.
• Layout Elements – button, columns, more, page break, separator, spacer.
• Widgets – shortcode, archives, categories, latest comments, latest posts.
• Embeds – embed from almost any social networking site like Twitter, YouTube, Facebook, Instagram, etc.
• Most Used blocks section will list out the frequently accessed blocks for quick access.
• Reusable Blocks – As explained above, when you want the same content to be part of many pages then save it as a reusable block.

Understanding Layout of Gutenberg Editor

Below is how the Gutenberg editor will look like when you create a post.

1. The first element is always a title for your post. You can’t delete this element.
2. You have the content area where you can add blocks.
3. Click on the + button either inside the post editor or on the top left corner of the editor to start adding blocks.
4. Move cursor to left of any element to see up and down arrows. Click on the arrow to move the entire element up or down.
5. Hover the mouse over right side of the element to see three dots button offering more options. Click on that to edit the block as HTML or view it back visually. From here you can add the block to reusable list.
6. Click on the block element to see more inline options like formatting and alignment for text content.
7. The top bar contains high-level options like – undo, redo, preview, publish, save draft, show or hide the sidebar, settings to toggle visual and code editor and other few options.
8. The sidebar has two sections – one is for the post level as ‘Document’. It has options for adding featured image, category, tags, post format, author, etc.
9. The ‘Block’ tab contains specific options for the selected block element.

Adding Blocks in Post

Let us create a post with some elements to see how easy or difficult to use Gutenberg editor.

• Add a title in the default title space.
• Click to add custom HTML and add some content.
• Add a column layout element add text and quote inside two columns.

Currently, if you want to have a layout with columns you need custom shortcode from the theme or use separate plugin.

Metaboxes

As you can see on the layout, we have lot of metaboxes on the post editor due to the theme and plugins we have on the demo site. Now that there are some metaboxes still stick to the sidebar and some are moved below the post content. So ensure to test your theme and plugins before you start using Gutenberg editor. Otherwise you may need to install classic post editor plugin to have backward compatibility and inform your developer to update the theme / plugin.

Additional Features

• Click on the info icon on the top bar to check the statistics of the post content like number of words, sentences, headings, etc.
• You can get the tips to get familiar with the editor. Click on the three dots button on top right corner on the top bar and select the ‘Show Tips’ option.
• Click on the block element and go to ‘Block’ tab on the right sidebar. Under ‘Advanced’ section, you can add custom CSS classes that will affect only that element in the ‘Additional CSS Class’ text box. You need to define the CSS class in your main stylesheet or under ‘Appearance > Customize > Additional CSS’ section.

Improvements

WordPress released multiple improvements to the initial Gutenberg editor. Now, you can add links to button with nofollow, the table block is responsive showing horizontal bar on mobile devices, you can manage reusable blocks and disable unused blocks and meta boxes on the post editor. Version 5.8 also introduced full site editing feature that can change the complete landscape of website building with WordPress as a content management system. With all these things, it is a good idea to give it a try if you are still using classic editor.