Gutenberg for Writers: How to Configure the Editor for Fewer Distractions

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:

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:

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

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.

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.

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:

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.

30 Comments


  1. Thanks for this article. I think it is very helpful for many users like my sister who uses WordPress primarily for writing.

    Report


  2. What’s up with this constant obsession about “distraction-free writing” in WP? The problem with Gutenberg is not that there are distractions but that everything is hidden and one has to click or hover to find out all the options that before were in plain sight.

    Report


    1. It’s hardly an “obsession” but rather a necessity for some people’s process. I did most of my writing outside of WP over years because a proper DFW editor makes me more productive, simple as that.

      And yes, UI discovery is clearly a problem in Gutenberg too. The two are not mutually exclusive. The goal of DFW is not to obscure the UI, it is to provide, in some way, a writing experience refined to essentials and step away from irrelevant parts for a bit.

      Report


    2. Couldnt agree more. It looks sleek but is in no way helpfull. But i guess that is the mantra of the whole Gutenberg adventure.

      When using gutenberg, the thing that is distracting me the most ist the constant opening and closing of floating menubars…

      Report


      1. I agree so I dock those toolbars at the top of the page.

        Click on the vertical ellipses in the top right corner and choose “Top Toolbar.” I think you’ll like that a lot more.

        Report


      2. I agree. Setting the toolbar to display at the top (in a fixed location) will help with that.

        Report


    3. Totally agree that the biggest distraction is the hidden structure. Since this is a block editor I expect to see something defining where blocks start and end. I do totally understand this is an area where there are strong preferences. Maybe someone will come up with a few different editor skin choices.

      Report


  3. I already knew and have tried ALL of these tips. Not bad.

    Anyway, I only use Gutenberg in a local development site. I still keep my BAD opinion on Gutenberg.

    Note that the rating on the Gutenberg page is going down (now is 2.1) there are hundreds of new 1-star comments, even dough many 1-star comments are being deleted every single day.

    Report


  4. Is there a way to hide the majority of the blocks from the main page, like with the old “more…” function?

    Report


  5. Unfortunately Gutenberg is still in the way…

    Report


  6. Thank you for this post. I finally broke down and installed Gute on a site I managed yesterday. At first I thought it might be ok. Then I started to write a new post. To say the least, it was the most convoluted, poorly designed experience I’ve ever had since I started messing with websites starting with Front Page way back.

    I had figured out a couple of the suggestions you mentioned and will implement the others. Even so, this is a step backwards in my opinion. It took me three times as long to “write” a simple post. Some of it due to the stuff @bastian commented on, but also trying to figure out how to change text within a paragraph and how to get a caption to align the way I want under an image.

    Keep the tips and tricks coming. I’m going to need them!

    Report


  7. Although it may not be immediately evident

    This phrase succintly describes the whole of Gutenberg: why it exists, how it works and why it was forced into core.

    Report


  8. Many thanks for the fix the toolbar to the top thing. Why anyone would want it jumping around is difficult to understand.

    I too don’t really understand the obsession with “distraction free writing”.

    My problems with Gutenberg include not being able to select and manipulate multiple paragraphs and the fact that copy and paste from Word is broken for me, with random spaces being omitted from text.

    Oh, that, and not being able to explain it to anyone who isn’t a geek…

    WordPress has become suddenly and incomprehensibly harder to use than it used to be for a lot of the people I try to help with online publishing). (Yes, ever installing a plugin to reverse the changes is a challenge for many users whose starting place is “what’s a plugin”.

    I keep getting asked what is a good CMS to use “now that WordPress got so hard to use”.

    Report


    1. Your CMS alternative reply can be: ClassicPress. It’s the original WordPress basically. I blocked Gutenberg from installing onto my server. When ClassicPress was ready, I migrated. My migration was seameless and I did it myself with no issues AND, my old WordPress install is multisite. Everything still works like golden times 😊. Dare I say not bad, for a non-techie such as myself.

      You don’t have to be stuck with that cumbersome nightmare they call an editor/pagebuilder, and you don’t have to install a ridiculous plugin to replace something that shouldn’t be in core in the first place! The irony is that GB doesn’t facilitate building anything, it gets in the way of that process, and very effectively. I’m just SO glad someone forked WordPress, otherwise I would have had to return to Joomla (which I’m not a fan of).

      Report


      1. Your gladness gladdens me – +1 for open-source software.

        Report


    2. Rule #1: NEVER EVER copy/paste from Microsoft Word.

      Report


      1. Well, yes. but it used to work fine in the old editor and that got broken in Gutenberg.

        They shipped a broken thing.

        Report


  9. I noticed that you can’t upload ZIP files when using the block editor, but it works when using the Classic editor. Is this a known bug?

    Report


  10. I guess it’s to do with what you’re used to, but my first experience with Gutenberg wasn’t particularly satisfactory and I’ve gone back to classic for now. But in general I prefer to do my writing in MSWord and than copy it across to WP when it’s ready for publication. No, it’s not the most efficient method but then neither writing nor blogging fit easily into “time and motion” systems anyway.

    Report


  11. Do any of these tips help the issue where Gutenberg grinds to a halt if your post is longer than a postcard?

    That any editor should need a “Top Toolbar” mode is ridiculous. This and Fullscreen Mode seem to have been crammed in last minute to pacify critics. The WordPress Philosophy guidelines clearly state that WordPress development should be guided by “decisions, not options.”

    But then again, the guidelines also state “the average WordPress user simply wants to be able to write without problems or interruption,” and “we want to make WordPress easier to use with every single release.” A lot of WordPress Philosophy has evidently been thrown out the window with Gutenberg.

    Gutenberg is a disaster. It makes WordPress less accessible, user-friendly, and goes against WordPress’s own philosophy of simplicity and designing for the majority. It should be removed from core.

    Report


  12. I compose in Word, then copy and plain-text paste into WordPress. From that point of view, it doesn’t matter which editor I use.

    But… can anyone else think of a block editor-style writing package? The only thing Glutenberg reminds me of is PowerPoint, which isn’t a compliment.

    Report


    1. wix, squarespace and all those drag n drop.

      using MS Word should be a crime, when you copy/paste it, it takes on the MS Word formatting. Use Notepad.

      Report


  13. I have never needed a distraction free writing plugin/theme/utility/etc…I have been writing for 20 years and I don’t get distracted easily.

    I find it easier with Gutenberg. I embed a lot of tweets, instas and youtube videos. Instead of getting the embed code from twitte/instgram/youtube….I use paste the URL in the block. Voila.

    Report


  14. I’ve been using Gutenberg and have managed to navigate farily well, until I add links. Most frustrating experience. There will need to be a lot work done to make Gutenberg a writer’s dream, IMO.

    Report


  15. I’ve blocked Gutenberg as well, and will continue to do so. Breaking a post into individual blocks means that it takes more time to do anything.

    It also means that I can’t simply cut and paste with HTML code already in place. I have to cut and paste the plain text, then go block by block and input the bolds, italics, and links.

    Before, I can compose in Word and cut and paste. Zip, bash, done. Just add art.

    As a compromise, go back to the Classic Editor for the blog and use Gutenberg everywhere else. I can see its usefulness there. But not for a simple blog.

    Report


  16. The best tip I have for writing content with Gutenberg is to write in Google Docs and then paste it in (and then enjoy the lag because you had the audacity to write long-form content).

    Report


  17. I like the new editor, a lot. But the first thing I do whenever I accidentally enable any of these things is to figure out what I just did to not do it again.

    The ability to hide the sidebars should be removed or made impossible to activate by mistake. These break the editor and make it unusable for me. The top toolbar and hiding the right sidebar are the worst features. If I could prevent that, I would.

    Report


  18. On a small screen, I have around 6 scrollbars for all the elements inside the editor. They are native scrollbars, so they are pretty wide and clunky.

    Report


  19. Putting the toolbar back at the top is my favorite advice from this article followed by “Spotlight mode”.

    The toolbar kept visually interfering with the block I just read. Moving it to the top helps my experience.

    Report


  20. Thanks for the article. I found it useful.

    I write for a living and use a couple of websites to publicise and sell. In the pre-4.9.9 WP I would write in Word, Google Docs or whatever and copy/paste the result. I’ve not changed that process. I run a website for a small club, and that’s now all Gutenberg.

    I’ve used Elementor for some time on my own sites and ran with the beta on localhost, so I suppose it has prepared me for the change, but as a professional writer, the website software is just a tool to use. 5.0.2 is convenient once one gets used to it.

    My major criticism is the lack of WYSIWYG, but even that is wearing off, and that’s after just a few days. I’ve been creating and running websites since 1998 and in that time every bit of software I have used, starting with Front Page and ending with Xara, has changed. Moving from one to another was always a bit of a test. Gutenberg has, in comparison, been a breeze. Also, WP is free, unlike the other bits of software I’ve used.

    I might even move from Elementor to all Gutenberg, not through any failure of, or dissatisfaction with, Elementor – far from it, it’s brilliant – but because Gutenberg does all I want and, as I say, it is just a tool, a route to what I need.

    Thanks for the blog. It’s appreciated.

    Report

Comments are closed.