catoon visualisation of Gutenberg interface

Customising the Gutenberg Editor Interface

The Page Builder

Released in 2018, Gutenberg is the name of the default content editor in WordPress. It is a fantastic tool you can use to create web pages and engage your target audience.

If you have worked through our introduction to the editor’s interface, you will already be comfortable with the different areas of the interface: the content editor; the toolbar at the top of the screen; and the settings panel in the sidebar. Perhaps you have also read our summary of the text blocks available when you first install WordPress. This guide is for anyone who wants to explore the potential changes you can make to the Gutenberg interface to improve your workflow.

Assuming you have opened a new post or you are in the middle of editing an old one, let’s get started with modifying the workspace.

The View Panel

You can find the button to access the panel at the end of the main toolbar. Click the vertical ellipsis icon, better known as the kebab menu, to open “View”.

the Gutenberg Editor View icon

The Block Toolbar

The block toolbar is the one that appears while you are editing a block, providing quick access to the most common modifications. It can be incredibly useful, but also frustrating because it might obstruct your view of something important on the screen or prevent you from clicking an adjacent block.

You can dock the toolbar to the top of the screen by ticking this option and free the space around the editing canvas.

Spotlight Mode

Spotlight mode enables you to focus on the particular block you are editing by fading out the other elements on the screen. It can also you help to distinguish one block from another when the design is quite complex with blocks nested inside other blocks.

Full Screen Mode

This is the default option when you first open the editor. Unticking full screen mode will reveal the main WordPress navigation menu and toolbar. Keep it off to continue working without distraction, or switch modes if you want quick access to another part of the WordPress infrastructure.

screenshot of the view panel in Gutenberg
The View Panel

Gutenberg Editor Preferences

At the bottom of “View” panel, you will see the “Preferences” link which has more options to modify the workspace. Clicking it will open the following pop up window:

screenshot of the preferences window in Gutenberg
Preferences Window

Reduce the Interface

If you would a less cluttered interface, you can hide most of the options in the toolbar by clicking this toggle switch to the on position. Only a few buttons will remain visible:

a cleaner Gutenberg toolbar
The Reduced Interface

You can still access the other links by moving your cursor over the toolbar to display the icons.

This option also removes the Block Breadcrumbs from the bottom of the screen.

Display Block Breadcrumbs

The block breadcrumbs let you know which block you are editing and how it is nested inside other blocks. The example below is from the default pattern containing three columns with images and text. You can see where spacer block is positioned in relation to the group.

screenshot of the breadcrumbs in Gutenberg
Example of Block Breadcrumbs

It can be challenging to modify a particular block when the design is so complex. Clicking one of breadcrumbs will select that element so you can make the changes.

However, you can hide the block breadcrumbs by toggling the switch.

Block Interactions

The first toggle switch customises how you interact with blocks in the block library. Normally when you click the Block Inserter Icon blue plus icon wordpress in the toolbar, it will open a default list of blocks to select. This option in the “Preferences” window changes this list so your “most used” blocks appear first – a great way to speed up your workflow.

If you use a screen reader to navigate around the blocks, the second toggle switch will improve keyboard controls and announcements.

Panels

The “Post” view in the “Settings” panel comes with a list of sections to modify your document settings. However, there are some values you may never need to adjust. You can choose which sections are displayed by toggling the relevant switches on or off.

In this example, we have removed all sections except “Permalink” and “Featured Image”.

screenshot a reduced sidebar in Gutenberg

Final Thoughts

Some of these changes might have a positive impact on the way you interact with the Gutenberg Editor. They might help you write great content and produce visually appealing web pages by enabling you to focus your attention on what’s important. They could speed up your work rate. Or, if you are teaching a group of students how to use WordPress, reducing the amount of icons on the screen might it easier for them to engage with the interface. Make the changes and make Gutenberg your own.

Further Reading

Thanks for reading!