InMotion Hosting Support Center

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:


ImageOption titleOption description
Add blockAdds a new block to your content
Undo/redoRemoves an action or redoes and action
Content structureGives you info on your post/page
Block navigationGives you a way to move through the blocks in your post/page
Save DraftSaves a draft of your post/page
PreviewProvides a preview for your post or page
PublishPublishes your Post or page so that it is live
Show/Hide settingsShows or hides settings column in the editor
Further Tools/optionsShows 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.

Was this article helpful?
Continued Education in Course Gutenberg
You are viewing Section 3: Getting to Know Gutenberg
Section 2: Learn How to Install Gutenberg

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!