Home » WordPress Tutorials » Customization » Customizing the Gutenberg Interface in WordPress

Customizing the Gutenberg Interface in WordPress

What you need to know:

The Gutenberg interface can be customized to a small degree via the three-dot button in the upper-right corner of the page. The most notable customizations include choosing which interface elements and panels to show, toggling between the Visual and Code editors, managing the Block Library, and more.

WordPress has always been a content management system that is very powerful and flexible and yet it remains easy to use. Gutenberg, the WordPress Block Editor, continues this tradition by being intuitive and straightforward while also offering a few ways to customize its interface and behavior. In this article, we’ll go over the various customizations that you can perform in Gutenberg.

Table of Contents:

 

What Is the Gutenberg Editor in WordPress?

Gutenberg, also known as the WordPress Block Editor, is the successor to the classic WYSIWYG post editor. Released with WordPress 5.0, Gutenberg uses blocks to contain your various types of content. There are paragraph blocks, image blocks, quote blocks, and so on. Having your content separated like that makes it easier to modify one piece of content without negatively affecting the rest.

The WordPress Block Editor is fully integrated into WordPress and it appears automatically whenever you are creating a new post, page, or widget. If you have not used Block Editor in the past, we have a separate tutorial where you can learn the Gutenberg basics.

Tip:

Do you want to try Gutenberg for yourself, but you don’t have a website yet? Get one of our premium WordPress hosting plans or even our free hosting package and you’ll have access to the WordPress Block Editor in no time!

 

Configuring the Gutenberg Editor Preferences

The WordPress Block Editor comes with its own preference pane. You can access it by clicking on the three-dot button at the end of the Top Toolbar and then choosing the last option called Preferences from the dropdown menu.

The preference pane in Gutenberg is accessed via the three-dot button in the Top Toolbar.

The preference pane in Gutenberg is accessed via the three-dot button in the Top Toolbar.

In the next few sections, we’ll explore what you can do in the Gutenberg Preferences pane.

 

General

When you open the Preferences pane, you will be taken to the General tab.

The General tab is the first tab in Gutenberg’s Preference pane.

The General tab is the first tab in Gutenberg’s Preference pane.

The first option that you’ll come across is called Include pre-publish checklist. This pre-publish checklist is a bunch of recommendations that Gutenberg offers as you are about to publish your content in WordPress. You can enable or disable this functionality from here

The next set of toggles control various visual elements on the screen. When you enable Reduce the interface, you will notice that the Status Bar will be removed and most buttons will disappear from the Top Toolbar. That said, you can easily reveal the hidden buttons by hovering your mouse cursor over the Top Toolbar.

Hovering your mouse cursor over the Top Toolbar will reveal its hidden buttons when the Reduce the interface option is enabled.

Hovering your mouse cursor over the Top Toolbar will reveal its hidden buttons when the Reduce the interface option is enabled.

Next, you’ll notice a toggle called Spotlight mode. When enabled, this option will help you focus on your currently selected block by slightly fading the rest.

Spotlight mode helps you focus on your content by fading neighboring blocks.

Spotlight mode helps you focus on your content by fading neighboring blocks.

Lastly, the Display block breadcrumbs toggle can be used to show or hide the Status Bar. Note that this toggle will be hidden if you have enabled Reduce the interface.

 

Appearance

The second tab in Gutenberg’s Preferences is called Appearance. It holds two options that change the looks of the WordPress Block Editor.

The Appearance tab can change how Gutenberg looks.

The Appearance tab can change how Gutenberg looks.

When you enable the first toggle called Display button labels, the glyphs on all buttons will be replaced with text.

You can replace all button glyphs with text labels using the Display button labels option.

You can replace all button glyphs with text labels using the Display button labels option.

The second toggle, called Use theme styles, controls whether Gutenberg applies styling from your current theme or not. If you disable this option, the WordPress Block Editor will look the same regardless of the theme you are currently using.

By allowing Gutenberg to use your theme styling, you can get a better idea of how your content will look once published.

By allowing Gutenberg to use your theme styling, you can get a better idea of how your content will look once published.

 

Blocks

The third tab in Gutenberg’s Preferences is called Blocks and contains two options: Show most used blocks and Contain text cursor inside block.

The Blocks tab in the Gutenberg Preferences contains two block-related options.

The Blocks tab in the Gutenberg Preferences contains two block-related options.

When you enable the first toggle, you will see a new Most Used section in the Block Library. The second option, on the other hand, is an accessibility feature for people using screen readers to interact with the WordPress Block Editor.

 

Panels

The last tab in the Preferences window is called Panels.

The Panels section in Gutenberg Preferences allows you to show and hide most Sidebar panels.

The Panels section in Gutenberg Preferences allows you to show and hide most Sidebar panels.

It simply lists various Sidebar panels that you can toggle on and off.

You can choose to hide the Sidebar panels that you do not use.

You can choose to hide the Sidebar panels that you do not use.

 

Learning Gutenberg’s View Options

The Gutenberg Preference pane does not hold all of the interface options that the WordPress Block Editor has to offer. Some settings are also placed in the dropdown menu that is activated by the three-dot button at the end of the Top Toolbar. In this section, we will explore the first three options that appear there.

You can find additional Gutenberg options by clicking on the three-dot icon at the end of the Top Toolbar.

You can find additional Gutenberg options by clicking on the three-dot icon at the end of the Top Toolbar.

The first setting, called the Top toolbar, can be used to anchor the Contextual Toolbar so it always appears below the Top Toolbar.

The Top toolbar option takes the Contextual Toolbar out of the Main Content Area and places it below the Top Toolbar.

The Top toolbar option takes the Contextual Toolbar out of the Main Content Area and places it below the Top Toolbar.

Next, you’ll find Spotlight mode. This is actually the same toggle we encountered while exploring the General tab in Gutenberg’s Preferences.

Finally, you’ll also see the option for Fullscreen mode. This toggle shows and hides the WordPress sidebar and top toolbar. When Fullscreen mode is turned on, your entire page will be taken up by the WordPress Block Editor:

The Gutenberg interface with Fullscreen turned on.

The Gutenberg interface with Fullscreen turned on.

And when you turn Fullscreen mode off, a portion of the page will be taken up by the WordPress admin panel.

The Gutenberg interface with Fullscreen turned off.

The Gutenberg interface with Fullscreen turned off.

 

Learning Gutenberg’s Editor Options

Gutenberg offers two options when it comes to its editor. You can use either the Visual Editor or the Code Editor. You can switch between them using the two buttons in the three-dot dropdown menu.

Gutenberg allows you to use either the Visual Editor or the Code Editor when creating content.

Gutenberg allows you to use either the Visual Editor or the Code Editor when creating content.

The Visual Editor uses blocks to represent your various types of content. The Code Editor, on the other hand, presents you with the HTML code that makes up your content. Switching to the Code Editor will significantly change the appearance of the Gutenberg interface.

The Code Editor significantly changes the appearance of the WordPress Block Editor.

The Code Editor significantly changes the appearance of the WordPress Block Editor.

Tip:

It is possible to switch between the Visual and Code editors while working on the same document!

 

Gutenberg Block Management

The last set of Gutenberg options that we’ll look at consists of the Block Manager and Manage Reusable blocks buttons.

The WordPress Block Editor also has some block-specific options that you can adjust.

The WordPress Block Editor also has some block-specific options that you can adjust.

The Block Manager lets you choose which blocks are available in the Block Library while the Manage Reusable blocks button will take you to the reusable blocks section in WordPress where you can manage your reusable blocks.

 

Next Steps

Thanks to the various settings and customizations outlined in this article, you should be able to set up Gutenberg in a way that best suits the way you work. And if you want to become even more proficient with the WordPress Block Editor, we recommend learning its keyboard shortcuts, how to work with blocks, and which are the best Gutenberg plugins.

Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Format Text in WordPress

When you create a post in WordPress, typing down the words is only a part of the job. Once written, you should format the text – separate paragraphs, include subheadings where needed, bold words and phrases, underline others, and include numbering and bullet points at...

How to Fix Error 505 Version Not Supported in WordPress

Error 505 Version Not supported might appear in various situations when working on your WordPress website. This kind of error can be very confusing and can show when least expected. However, the good news is that there are various fixes you can apply right away to get...

How to Fix Error 504 Gateway Timeout in WordPress

Error 504 Gateway Timeout in WordPress can really be annoying for you and your website visitors. The good news is that as with any other 5xx status code errors such as HTTP Error 500, Error 501 Not Implemented, and Error 503 Service Unavailable, the Gateway Timeout...

How to Fix Error 502 Bad Gateway in WordPress

502 Bad Gateway is quite a common error message in WordPress and although it looks like something very serious and technically demanding to fix, there are some quick steps you can undertake to deal with the issue. Just like Error 500 and 501 Not Implemented, Bad...

How to fix Error 501 Not Implemented in WordPress

When working on your WordPress website, you will eventually stumble upon various error codes such as 404 Not Found, Service Unavailable, and Error 500. Your web browser displays such error messages when there’s some issue between the web server and an Internet...

Ready to Create Your Website?