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 Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?