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.
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.
In the next few sections, we’ll explore what you can do in the Gutenberg Preferences pane.
When you open the Preferences pane, you will be taken to the General tab.
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.
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.
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.
The second tab in Gutenberg’s Preferences is called Appearance. It holds two options that change the looks of the WordPress Block Editor.
When you enable the first toggle called Display button labels, the glyphs on all buttons will be replaced with text.
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.
The third tab in Gutenberg’s Preferences is called Blocks and contains two options: Show most used blocks and Contain text cursor inside block.
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.
The last tab in the Preferences window is called Panels.
It simply lists various Sidebar panels that you can toggle on and off.
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.
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:
And when you turn Fullscreen mode off, a portion of the page will be taken up by the WordPress admin panel.
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.
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.
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 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.
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.