The continual changes within the WordPress interface occasionally lead to a major change that affects not only what you see but also how you use the WordPress application. One of the core modules of WordPress is the editor. It is a flavor of the venerable TinyMCE editor that includes all of the base functions for creating or editing your posts and pages in WordPress. The Gutenberg editor will eventually replace it in WordPress version 5.0. The goal is to bring more of the modern word processing functionality and ease-of-use to the online experience of WordPress. This article will step you through the installation process, provide an introduction to the Gutenberg editor interface,  give a quick description of its functions and show you how to quickly add content.

It is important to remember that Gutenberg is currently in development and not recommended for production environments/live sites. If you do intend to use it, remember the golden rule and make regular backups of your site so that you can recover your site if needed.

How to Install the Gutenberg editor

If you’re interested in helping to develop Gutenberg by being a tester or becoming more involved with the Gutenberg project, check out this link.

  1. Login to your WordPress Administrator Dashboard.
  2. Click on Add New.
  3. Search plugins, type in “Gutenberg”.
  4. Click on Install Now.
  5. Click on Activate in order to activate the plugin.

Once you have the plugin activated, the menu on the left will change and you will see Gutenberg appear towards to the bottom.

 

The Gutenberg Editor Interface

One of the design goals of the Gutenberg interface is to keep it as uncluttered as possible. This helps to provide that “distraction-free” writing environment. Please review the screenshots below to familiarize yourself with the different aspects of the new editor.

Gutenberg in the WordPress menu

Here you can see the Gutenberg in the WordPress menu. The options include:

  • Demo – provide a demonstration of the interface
  • Feedback – feedback form for any issues or comments that you wish to send
  • Documentation – Documentation provided by WordPress on the Gutenberg

 

Working with the Gutenberg Interface

The Gutenberg editor is made for creating posts and pages. When you create a new post you will see the interface starting with the title. There will also be a menu bar on the right and an interface at the top.

Starting from the top left you will see the option to add a new block. To the right of the plus sign (+), you will see the arrows for undo and redo actions. By default, the redo and the content structure button (the ‘i’ in the circle) is used for when you add content or when you need to work with existing content on the page.

In the far right corner is the indicator showing if the post/page has been saved.  The eyeball graphic is the button you click on to preview a post or page.  There is also a publish button, the gear icon for settings and 3 vertical dots for “more”.

The Publish option lets you determine the visibility options for the post/page as well as the option to schedule it for a later date if you don’t want to publish it immediately.

The gear icon lets you show the settings in the far right column.  You can show or hide the right column displaying the settings by simply clicking on the gear icon.

The vertical dots allows you to view the editor in Visual or Code editor views. It also controls the Toolbar behavior in the block. The toolbar option shows the pop-up menu in the block if it’s fixed to the block. If it’s not, then options appear in the top bar of page/post that you’re editing.  You can see the difference in the editor’s appearance per the screenshot below:

Code editor

Visual Editor

 

 

The Different Blocks Used in the Gutenberg Editor

 

Gutenberg’s visual interface works on a system of blocks. You can move the block up or down through your existing content. You can also edit the contents of the block. When you add a block you can select blocks based on the most recently selected, the entire block list, and content embeds from different popular social media websites.

The blocks you can select include three major types:

  • Common Blocks
  • Formatting Blocks
  • Layout Blocks

 

You can also add Widgets or select different types of embed options.  A few examples of the embed choices include:

  • Facebook
  • Twitter
  • Instagram
  • YouTube

After you have added your blocks and typed in text or added visual content, you can easily move them up and down using the arrows on the side of the block:

How to Use the Gutenberg Editor to add content

The new Gutenberg editor is designed to make adding and editing content an easy experience.  When you start to add content you start with a title and then start adding your content from there.  Here the basic steps to adding content in the Gutenberg Editor
  1. Login to your WordPress Administrator Dashboard.
  2. Go to Posts or Pages and click on  Add New.
  3. Where it says Add Title, type in a title for your content.
  4. Select a block for the content. You can find the add option by hovering over the bottom center point of the block.  You will see a plus sign in a circle.  In this example, we are selecting an image.
  5. After selecting the image block you will need to select an image.
  6. Once the image selection is complete you can continue to add other content until you are finished.  When the post/page is complete, click on Update or Publish in the top right corner.  Note: Although your content is autosaved, it would still be wise to occasionally save a draft of your work when you are working on lengthy post or page.

This is just a quick overview and introduction to the new Gutenberg editor.  The goal is for the editor to no longer just be a plugin but replace the current editor as part of the core modules in WordPress 5.0.  Though it is still in beta at this time, you can already see that the Gutenberg editor represents a major change in how you can add and edit your pages or posts.  The Gutenberg Project strives to provide a simple but complete interface that can handle all of the tasks of creating content for your WordPress site.  Whether you are a visual designer or prefer to work directly with the code, this is the WordPress editor you will be using in the near future.

Leave a Reply