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:

Exploring the Interface of the WordPress Block Editor

What you need to know: The interface of the WordPress Block Editor is comprised of five main segments: a Top Toolbar, a Sidebar, a Main Content Area, a Contextual Toolbar, and a Status Bar. Your content is displayed in the Main Content Area and you use the other...

What’s New in WordPress 5.8 Tatum?

What you need to know: WordPress 5.8 “Tatum” introduces several noteworthy features such as new block-based widgets, support for WebP images, a new Template Editor, and a theme.json file. In addition, the second major update for 2021 brings improvements to the...

How to Enter the WordPress Admin Panel

If you are reading this tutorial, you are probably on your way to creating your first website. In the previous tutorial, we showed you step-by-step how to install WordPress on your domain using Zacky Installer. Now you probably want to enter the WordPress admin panel...

How to Install WordPress using the Zacky Installer

WordPress is a simple and flexible content management system that allows you to create and manage the content of your website. The first thing to mention is that you don't need any programming skills or technical knowledge to use WordPress. All you have to do is read...

WordPress Basics – Part 2

After learning the basics of WordPress, we're here to explore the CMS with you a little deeper. In the previous article, we already talked about posts, pages, categories, plugins, themes, etc. In this article, we will introduce you to some other elements of the CMS....

Ready to Create Your Website?