What is Gutenberg?

What is Gutenberg - Hero Image

What is Gutenberg? Gutenberg is the new block-based editor that has been implemented and integrated into the WordPress interface.

Included in all WordPress versions 5.0 and higher, Gutenberg changes the way you create and edit your pages and posts by providing an easy to use block editor.

Continue reading to learn:

Don’t have time to read our full article? Watch our walk-through video.

What is Gutenberg?

Gutenberg is a block-based editor that allows you to quickly create content for your WordPress site. The advantage of using blocks is that you can focus on creating content and reposition content by simply dragging and dropping.

Let’s learn how to navigate to Gutenberg in your WordPress dashboard.

  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 
     

Each time you create or edit a new page or post, you will be placed into the Gutenberg Editor by default.

Once you’re in the dashboard, scroll down the left side 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 editor in wordpress

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. Check out the screenshot below to see how blocks appear:

content blocks in Gutenberg editor

Each 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 on the right when a block is selected. Each block that you highlight will correlate with the options shown in the column. The options column on the 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.

using the block options in the gutenberg editor

The Gutenberg editor was designed to make it easier for adding content to your WordPress sites. You no longer have to add shortcodes and manipulating sections of your content is as simple as dragging a 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.

For more WordPress tips and tricks, check out our WordPress Education Channel!

Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our helpful Gutenberg tutorials.

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

2 thoughts on “What is Gutenberg?

  1. WHY???????????????????????????????????

    why do we need blocks they always always ALWAYS screw up my content

Was this article helpful? Join the conversation!

Server Madness Sale
Score Big with Savings up to 99% Off

X