writing Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips
photo credit: Green Chameleon

For a long time I could not compose posts with the Gutenberg editor. I tested each release of the plugin throughout its journey into WordPress 5.0, but found it too distracting for my basic needs. It seemed better suited for building a brochure website, not for someone who uses WordPress primarily for writing.

This is the first thing you see on a vanilla install of WordPress when you go to the “Add New” post page:

Screen-Shot-2018-12-17-at-10.14.35-AM Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips

Although it may not be immediately evident, the new editor actually has some built-in controls for improving the writing experience. They are tucked away behind the vertical ellipsis menu at the top of the screen. Here’s how to configure Gutenberg for writing:

Step 1: Hide the Settings Sidebar

The first step towards a more distraction-free writing experience is to hide the settings. Click the X at the top right of the screen. If you’re trying to stay in the flow of writing, it’s not necessary to keep the block and document settings in view at all times. You can always toggle them on later when you’re finished getting your thoughts onto the screen.

Step 2: Turn on “Fullscreen Mode”

Many new and experienced WordPress users are not aware of Gutenberg’s “Fullscreen mode” that places the writing area in the center of the page and hides WordPress’ admin menu sidebar. This setting is a must for keeping distractions at bay. You can find it at the top right corner in the vertical ellipsis menu:

Screen-Shot-2018-12-17-at-3.36.06-PM Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips

Once Fullscreen Mode is enabled, the writing area is greatly improved, with distractions removed from both sides of the content area.

gutenberg-fullscreen Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips

Step 3: Fix the Toolbar to the Top (optional)

The block toolbar popping in and out of view was the bane of my Gutenberg experience until they developed the “Top Toolbar” setting. By default, the block-level toolbar obscures part of the content above it (as seen in the image below) and an obtrusive blue outline follows your mouse as you move over the paragraphs you have already written.

Screen-Shot-2018-12-17-at-6.37.00-PM Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips

The psychological affect of all these boxes popping in and out of view may be more taxing for some writers, so this step is optional. The “Top Toolbar” setting to hide the block-level toolbar, as well as the blue block outlines, is also inside the vertical ellipsis menu at the top. The best way to see the difference in the experience is to experiment with turning it on and off.

Spotlight mode takes it one step further and greys out all the content except the current block, allowing writers to focus on one block at a time. When it is enabled, the blocks that are not being edited will partially fade away and no block outlines will be visible.

Screen-Shot-2018-12-17-at-8.09.41-PM Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips
Spotlight mode

Gutenberg still has a way to go before it can provide a truly distraction-free editing experience. None of the modes highlighted above will hide the metaboxes at the bottom or the menu bar at the top. They do, however, allow you to compose in an area without the block-level toolbar and sidebars getting in the way.

My thoughts don’t always come out in full sentences and paragraphs. Sometimes they are scattered throughout a document in half sentences, single words, quotes, and fragments of quotes that I’m not certain I will use. How do I reconcile this with Gutenberg? Sometimes the Classic Block is a good option for a first draft that looks more like a pile of messy notes than a document of well-formed thoughts. Here’s what that looks like if you have never used it:

Screen-Shot-2018-12-17-at-8.29.09-PM Gutenberg for Writers: How to Configure the Editor for Fewer Distractions design tips
Classic Block

Even with these settings available, some writers may still prefer to use a dedicated writing app instead of the WordPress editor. Fortunately, Gutenberg has very good support for copying and pasting from other applications.

Top Toolbar, Spotlight, and Fullscreen modes are not the easiest features to discover but they can make a significant impact on your experience writing in the new editor. WordPress core may never provide a truly distraction-free writing experience, but that’s where the beauty of the plugin system comes into play. It gives developers the opportunity to create new and interesting approaches towards a better default writing experience. I hope to see some of those popping up in the directory as more users adopt Gutenberg.