Getting to Know Gutenberg

What is Gutenberg? Gutenberg is the new block-based editor that is being implemented within WordPress. Eventually, it will be integrated into the WordPress interface. The current release can be installed by either downloading it through plugins interface or clicking on the Install Gutenberg button that is displayed in new WordPress (version 4.9.8+) installations. The Gutenberg editor is used to create or edit posts or pages. Note this article was written using Gutenberg version 4.3.0.

Where is Gutenberg in WordPress?

Gutenberg is the editor that you use when editing or creating posts or pages in the WordPress Administrator Dashboard. To familiarize yourself with getting to the interface, check out the steps below. We’ll breakdown the parts of the editor in the next section.

  1. Login to your WordPress Administrator
  2. Editor interface

    Click on either Posts or Pages.

  3. Editor interface

    Click to edit an existing post or click on Add new to add a new post. The screen that you see next is the Gutenberg editor.

  4. demo of Gutenberg

    The new Gutenberg editor also creates a link in your menu that brings up a demonstration version of the editor. In the menu in the lefthand side of your Administrator dashboard, scroll down unti you find Gutenberg. Click on the link and you will see a post appear titled “Welcome to the Gutenberg Editor”.

Each time you create a new page or post, or edit a new page or post you will be placed into the Gutenberg Editor by default. At this time, since Gutenberg is still considered a plugin for WordPress, you will able to select Classic Editor if you wish to use the older editor instead of Gutenberg when working with a page or post.

What is Gutenberg?

Gutenberg is a block-based editor that allows you to quickly focus on creating content for your WordPress site. The advantage of using blocks is that you can quickly focus on creating content and reposition content by simply dragging and dropping. In order to breakdown the parts of the editor let’s first load up the Gutenberg demo.

  1. If you’re not already logged into your WordPress site, then please log in to your WordPress Administrator.
  2. Editor interface

    Once you’re in the dashboard, scroll down the leftside and then click on the Gutenberg link in the main menu. This will bring up the demo page that we will be using for this tutorial.

Top Bar of the Gutenberg Editor

Once you’re in the demo page you’ll see the following:

Gutenberg

In the top left-hand corner you will see the following options for Add a block, Undo/Redo an action, Content structure and Block navigation. In the top right corner the options represented by the links and buttons are: Save Draft, Preview, Publish, Show/hide settings, and Further tools and options. Here’s what they look like:

Image Option title Option description

Add block Adds a new block to your content

Undo/redo Removes an action or redoes and action

Content structure Gives you info on your post/page

Block navigation Gives you a way to move through the blocks in your post/page

Save Draft Saves a draft of your post/page

Preview Provides a preview for your post or page

Publish Publishes your Post or page so that it is live

Show/Hide settings Shows or hides settings column in the editor

Further Tools/options Shows further tools and options

The next section we are describing is the content portion of the editor. This is also the location where the blocks appear.

The Content Section – where the blocks appear in the Gutenberg Editor

When you create content in Gutenberg, it is placed in blocks. New content always starts with a title. Checkout the screenshot below to see how blocks appear in the demo:

blocks in Gutenberg

Each of the of the highlighted sections in the screen capture above shows a block. When you hover over each section, you will see options appear within the block like this:

Gutenberg block options

The Options Column

Also, notice the column at right when a block is slected. Each block that you highlight will correlate with the options shown in the column. The options column at right provides different details that you can change within the block. For example, if you have selected a paragraph block then you can change font size, color settings and other settings that affect the formatting of the block. The right column can be toggled to be displayed or not displayed by clicking on the gear icon in the top right corner.

blocks in Gutenberg

The Gutenberg editor was designed to make it easier for adding content to your WordPress sites. You no longer have add shortcodes and manipulating sections of your content is as simple as dragging block from one location to another. You should now be familiar with the interface of the Gutenberg editor and as you make use of it, you will begin to appreciate the editing power that it brings. Learn more about Gutenberg here.

Leave a Reply