Introduction to Gutenberg WordPress editor

WordPress community a long time ago has started a project called Gutenberg. The aim of this project is to enrich the user experience during the content editing process. Gutenberg WordPress editor is a page builder. WordPress gives you the option to install this feature in 4.9 version as a plugin. From version 5.0 and after Gutenberg will be embedded into the core of WordPress.

During all WordPress versions the user was edit the content by using a simple editor. This editor was similar to Microsoft Word so that to be familiar to the user. In this simple editor we could add text, images, links and so to enrich the page content and the user experience. However, some times the user had to learn how to insert short pieces of code in order to add some extra functionality. As an example is the embedded YouTube code that the user had to insert into the editor, some WordPress versions before. In addition the content structure depends on the theme structure and therefore, the content sometimes was not properly positioned.

Having under consideration all these issues, WordPress community has developed the Gutenberg WordPress editor. This project is still under development. The aim of this feature is to provide to the user the ability to build content only by using visual components, without restrictions.

What about in 4.9.8 version

In version 4.9.8 WordPress give an option to install the Gutenberg plugin in order to test it. If we login and look in Dashboard we can see the following image.

gutenberg-editor-dashboard

In this screen we can install the Gutenberg editor plugin, by clicking the Install Gutenberg button.

If we want to use the classic editor, then we can click the Install the Classic Editor button. In this case we can open the Writing Settings and choose the option we want about the editor.

gutenberg-editor-writting-settings

The Gutenberg Editor's blocks

gutenberg-editor-blocks

The basic structure component of the Gutenberg WordPress editor is called block. The user is able to insert and position unlimited number of blocks in any order. Blocks are re-arranged by drag and drop. Every block has a specific functionality. For example we can insert a text block and underneath of it we can insert an image block.

Every block component has the following characteristics:

  • Block manipulation options such as movement, delete or convert the spesific block functionality to a similar one.
  • Options to manipulate the specific block functionality such as text options, image options, e.t.c.

The Gutenberg editor's environment

When we start a new post/page we can see the following image.

The editor enviroment consists of three basic parts:

  1. Editor bar. Is the top horizontal bar consists of document functionalities such as the publish option.
  2. Content area. Is the main editing area that occupies the maximum space of the document. In this area we add content.
  3. Settings bar. It is the vertical bar on the right side. In this bar we can see options corresponding the block we have click on.

When we start a new document there is a block by default. This is the block in which we can insert the document’s title and edit the link of this.

Editor Bar

Choosing the Add Block button (+ sign) we can see the following grouped block’s options.

gutenberg-editor-add-block

In the following option, Content Structure, we can see document statistics like the headings number, the block’s number, e.t.c.

gutenberg-editor-content-structure

The Block Navigation options opens drop down menu. Using this menu we can see existing blocks in the document in the order we have place them. By clicking on a block the screen jumps and stop at the selected block on the document.

gutenberg-editor-block-navigation

In this part we can see the buttons PreviewPublish/Update. These buttons operates in the same way as in the simple WordPress editor. Note also this about the Settings gear icon. This icon hides/shows the properties bar on the right side of the screen.

gutenberg-editor-publish-buttons

The last choice is called More and is indicated by 3 vertical dots on the right of the gear icon.

gutenberg-editor-more-options

Let’s see 3 od them:

  • Unified Toolbar: Shows/hides a horizontal bar at the top of the editor. This bar consists of few editing choices of the selected block.
  • Spotlight Mode: Fades out to a gray color all the content of the document, except this one that we are editing on.
  • Fullscreen mode: Hides/shows the top and the side bars so that only the content area be visible.

Content Area

The content area is the main editing area of the Gutenberg WordPress editor. In this area we add content that looks like the same as the online page of the site. This means that the content is shown in high accuracy.

Moving the mouse pointer on the area of a block, we can see a thin border around of it. In addition we can see the block’s type at the top-right corner of the block, i.e. paragraph.

gutenberg-editor-content-area-focus

If we click into the block area a small toolbar is enabled at the top of the widget called quick toolbar. This toolbar consists of block operation choices as well as content choices in some cases.

gutenberg-editor-content-area-focus2

Block administration choices

Let’s see some choices of the quick toolbar mentioned previously. We can click on the more button of the quick toolbar that is indicated by three vertical dots on the right side of it.

These options are:

  • Hide block settings: hides/shows the settings bar on the right side of the screen.
  • Duplicate: Creates a copy of the selected block underneath.
  • Insert Before: Inserts a blank block before the selected one.
  • Insert After: Inserts a blank block after the selected one.
  • Edit as HTML: Opens the code editor of the selected block
  • Add to reusable blocks: Add the current block into an area called reusable blocks so that to reuse it again.
  • Remove Block: Removes the current block completely.

On the left side of the quick bar there is an option called Change Block Type:

Using this option we can convert the type of the current block into something that uses a similar functionality.

gutenberg-editor-content-area-transform-block

On the left side of the block there are three buttons with which we can move the block vertically. These buttons appears also on hovering the mouse pointer on any other block except the selected one.

These choices are:

  • Move Up: Moves the block one position up.
  • We move the block by drag and drop as many positions we want.
  • Move Down: Moves the block one position up

How to insert a block

To insert a block we hover the mouse pointer on a block. We can see a little cross (+) at the center of the top border of the block. We click on the Insert Block sign.

This action adds a new block blank position at the top side. At the new blank block position we can see a cross sign at the top-right corner.

If we click the cross sign (+) a menu of block type choices opens. Blocks are groups into categories. We click on the category and then block we want to add in the blank block area. Afterwards, we can add the content into the block. We can use the same functionality, add block, at the top-right corner of the Editor bar.

Settings Bar

This bar is located on the right side of the WordPress Gutenberg editor.

If we click outside a selected block, then on the settings bar we can see the document’s properties. These properties depends on the page post type that is post, page, etc. These properties are the same as those one on screen options in the classic editor mode. If we click on any block we can see the block’s properties depending on the block type. For any block we can see the basic block properties.

Ending with Gutenberg WordPress Editor

You can try the new Gutenberg editing experience at the official site.  Please visit also the following couple of sites in order to get informed about:

Leave a Reply

Your email address will not be published. Required fields are marked *