Gutenberg Contributors Considering a “Focus Mode” for Writing

After overwhelming feedback from testers indicating that Gutenberg is not well suited for simply writing posts, the project’s contributors are considering a few options for improving the writing flow. These proposals are spread across several tickets on GitHub.

Two weeks ago, Gutenberg technical lead Matias Ventura submitted a PR exploring the possibility of introducing a “Focus Mode” to the editor. This mode would highlight the current selected block with all other blocks faded while the “fix toolbar to header” option is enabled. The video below shows an example of what that might look like:

“The aim is to provide a writing experience that can satisfy those that would prefer an environment with the least amount of distractions at the expense of tool clarity,” Ventura said. “I’ve been testing this and personally find it a very enjoyable mode to toggle when I just want to write for a bit. Paired with a robust set of keyboard shortcuts it could be quite nice to use. In this sense, it’d be important to provide an easy keyboard shortcut to toggle the mode on and off.”

Automattic designer Kjell Reigstad opened another ticket that proposes transforming the “Fix Toolbar to Top” setting into a “Focus Mode.”

“A key feedback point we hear is that Gutenberg’s interface can be a little overwhelming,” Reigstad said. “This often comes from users who more commonly focus on ‘writing’ versus ‘building’ their posts. They find the contextual block controls and block hover states to be distracting: When they’re focused on writing, they don’t necessarily want to think about blocks — they just want to write.”

Reigstad said this same subset of users also misses having the formatting toolbar at the top of the page, as it is in other applications like Google Docs, MS Word, and WordPress’ classic editor. He proposed a solution that addresses these concerns by combining the “Fix Toolbar to Top” option with the following UI changes that would provide a more complete “Focus Mode:”

  • The block toolbar would be pinned to the top of the screen.
  • The editor would be full screen.
  • Block outlines would be removed for both hover and selected states.
  • The block label would appear on a delay, and be toned down visually.
  • Block mover + block options would also appear on a delay.

Reigstad also created a video demo of this concept:

This new “focus Mode” concept is also compatible with Ventura’s proposal for highlighting the current selected block and fading out the others. It could either be present in both modes or available as an add-on feature.

A couple of well-written reviews on the Gutenberg plugin describe how the concept of blocks complicates the writing experience and how Gutenberg’s current writing environment is visually distracting and disruptive. This has been a major concern since the plugin was first released for testing, as there are many users who depend on WordPress for its writing features more than the page building aspects.

The Gutenberg team’s new ideas go a long way towards decluttering the interface for writers. This is especially important for those who want to do their long-form writing inside WordPress, instead of beginning their work in an application that is dedicated to providing a distraction-free writing experience. Introducing a “focus mode” or “writing mode” will solve one of the most critical issues with the new editor and we’re looking forward to seeing how this develops.

40 Comments


    1. Videos don’t play on Firefox 61

      Same problem on Chromium Version 68.0.3440.106

      Report

      Reply

    2. I have Firefox Quantum 61.0.2

      It plays for me.

      Report

      Reply

    1. Wow, that’s clean. I don’t know how you’d get any more distraction-free than that! :D

      Report

      Reply

    2. That’s a lot of empy white space left and right, why don’t you use a wider writing area?

      Report

      Reply

      1. @Alfonso & @Paul,

        The theme on my personal blog is very close to stock Twenty Seventeen. It uses roughly a 60-70 character width for content which is often referenced as being optimal for online reading.

        I expect Gutenberg has been adapted to fit the theme’s margins since they’re closely related.

        Report


      2. Themes can specify the width of the editor so the front end and back end are the same.

        Report


      3. How exactly can themes specify the width of the editor in back end with Gutenberg?

        Report


      4. WordPress uses a variable $content_width since ages, which is also used to generate correct embed size/ratios etc.

        https://codex.wordpress.org/Content_Width
        https://developer.wordpress.com/themes/content-width/

        Gutenberg does not seem to support this, so every theme needs to be updated especially for Gutenberg?

        And thanks for your link, @Glenn Martin, question: Will these classnames remain like this also in Gutenberg final release? There are mixed answers of developers about the part “gutenberg” in code and classes.

        Report


  1. I suppose this at least shows that some GB developers at last recognize it has serious shortcomings. Pinning the toolbar to the top is something some of us have been asking for for well over a year now.

    But this also shows that they still don’t really understand. Seriously: text is not a distraction! Writers need to be able to see what they have already written. And I can’t imagine many things more distracting than having paragraphs go bright and dim as I move my cursor over them.

    The distractions are the controls, and the fact that the interface is so jumpy it’s like a dog with fleas.

    Report

    Reply

  2. Watching the video, I noticed the part about the “fixed toolbar” at the top. Hmmm…. similar to my proposal HERE that was shot down by the dev team.

    Report

    Reply

    1. I don’t think Otto is on the “Gutenberg team.” And the fixed toolbar option has been available in Gutenberg for quite a long time. They started testing having it at the top last year.

      Report

      Reply

      1. Didn’t realize that the fixed option was there until I went digging for it after reading your reply.

        However, my suggestion was not just for a fixed top option, but the layout to easily access the blocks better as well. Based on the fact the fixed option is there already, it’s halfway there.

        Report


      2. Also, I think this is an awful idea. Why does everybody making an editor think that distraction is an actual problem?

        Fading things out is an awful idea, and I hate it. This is terrible and should never be implemented. That’s my view. Put more useful info on the screen, in more useful places. Don’t blank the thing out and burn my eyes with a white useless screen.

        Distraction free writing is, and has always been, a really silly idea.

        Report


      3. @Otto,

        We frequently disagree. But, on this issue, I agree with you 100%.

        Report


      4. 100% agree with what Otto said. This idea of fading everything out is terrible. Page elements fading in and out will only make them more distracting. I’ve never even heard of one person who actually uses the existing ‘Distraction Free’ mode.

        What’s distracting at the moment is that every single paragraph ends up as a new block. That’s what makes the current writing/editing experience in Gutenberg horrible. It should be up to the end user to decide when they want to add a new block. Not something that’s forced upon us, just because we want to create a new paragraph. Having to copy content from two dozen different blocks is considerably more time consuming and annoying than copying/pasting content within the same block.

        I would love to see the Paragraph block either accept multiple paragraphs, or removed altogether so there’s only the Classic Block. I absolutely dread having to edit a page with 40 or 50 different blocks. Gutenberg is going to make editing text heavy content an absolute nightmare.

        Report


  3. This often comes from users who more commonly focus on ‘writing’ versus ‘building’ their posts

    I would argue that the majority of people using the WordPress editor are ‘writing’, not ‘building’, and so something like this should be the default experience in Gutenberg with the ability to switch to an advanced block editor if you need it.

    Is there really evidence that people want the advanced blocks by default?

    Report

    Reply

  4. Just to clarify some of the comments here that states that we declined proposals about “fixed toolbar”: The “fixed toolbar” is already available in Gutenberg for almost a year now and what we’re talking about here are improvements to this behavior: focus mode, full screen and lighter UI.

    And I’d also note that if you want to provide feedback or proposals, Gutenberg issues is the best place for it. We do like the tavern but we can’t read and follow all the discussions here.

    Report

    Reply

  5. One of my biggest frustrations is that things keep popping up and then disappearing AND I cannot see what my options are.

    Should a user have to study the interface to learn how it is thinking or should an interface be intuitive?

    I am in favor of a toggle that would allow ALL things to be seen, so, I can move more quickly and not have to pull down this or that or move the cursor over an area to see what “might” appear. In the distraction free mode – I did not gain real estate for writing. It actually feel like I have less room — so, what is the point of all the white space. SHOW ME WHAT I CAN DO!

    This has been the most unpleasant interface I have ever used (21 years in the business, 14 using WP). I am (trying to build) building three websites with Gutenberg right now… For 20.5 years I looked forward to building websites. Now my stomach churns and I wake up several times in the night. Very disappointed.

    Report

    Reply

  6. This new mode might work for bloggers but those of us building sites for clients (the forgotten ones) need to have all the fields, buttons and labels in sight, to prevent forcing our users having to hover their mouse to discover all the options available. Neither this new mode nor the current UI are good.

    Report

    Reply

    1. I agree. “The editor would be full screen” means that all the ACF fields will be pushed way down the page causing too much scrolling.
      Please give the subset of users who use WordPress as a CMS with ACF fields the option to specify the height of the editor.
      Perhaps there should also be a ‘CMS mode’.

      Report

      Reply

    2. I agree. “The editor would be full screen” means that all the ACF fields will be pushed way down the page causing too much scrolling.

      Please give the subset of users who use WordPress as a CMS with ACF fields the option to specify the height of the editor.
      Perhaps there should also be a ‘CMS mode’.

      Report

      Reply

  7. More efficient, cleaner code in core, as well as being lean for better plugin support would be my choice. But then, WordPress has always had the idea of plugins to solve issues and provide functionality.

    Oh, wait, that’s not what they are doing. They are competing. I don’t really care. It’s all become so annoying I’m looking for alternative platforms for specific projects. It’s easier.

    Report

    Reply

  8. @otto:

    Also, I think this is an awful idea. Why does everybody making an editor think that distraction is an actual problem?

    They think distraction is a problem because long-form article authors often report it as a problem. Just because you don’t experience it, doesn’t mean it isn’t a serious pain point for a large subset of WordPress users. This seems to be a common impasse in our discussions. Not everyone uses WordPress like you, and that isn’t because they are using it wrong.

    That said, I have never seen a long form editing tool that fades out actual content. That is also not a feature I’ve ever heard an author ask for, and it seems completely inconsistent with the idea of reducing distractions. Forced tunnel vision is not the same as removing clutter.

    But that does seem consistent with the other design choices made by Gutenberg, that seem to be based on what looks cool and “modern” more than what the community actually needs.

    Report

    Reply

    1. Forced tunnel vision..

      .. is an accurate description of the Gutenberg idea.

      Report

      Reply

    2. @greg

      Who are these people? Who thinks that “distraction” is the same thing as having other stuff on a screen that your eyes are drawn to so much that they interfere with your mental ability to write text? Who is wanting to stare at a completely blank white screen so that they can write properly?

      Distraction in life comes from external factors. Having your phone turned on, the noise from the parking lot next door, your neighbor shouting at the TV. Whatever. Building a system that is basically shining a light bulb into your eyes so that you can write better makes no sense to me whatsoever.

      Show me where I’m wrong, please. Give with the data. Because this continued concept seems extremely stupid, and without knowing why it continues to exist, then I will continue to think that it is seriously misguided and frankly insane.

      Report

      Reply

      1. Here’s a distraction-free word processor app for chrome (only one of many available) with 17,500 active users and 105 reviews.

        Report


      2. @Otto

        Here is a distraction free word processor app for chrome with 17,500 active users and 105 reviews. It’s only one of many such systems available.

        The difference in viewpoint between you and me is that, while I am not personally distracted by interface elements, I also don’t assume that everyone has the same experience that I do.

        Distraction in life comes from external factors. Having your phone turned on, the noise from the parking lot next door, your neighbor shouting at the TV.

        As a point of fact, none of the things you mentioned are a source of distraction. The human brain is the source of distraction. We often place the blame on the things that our brain chooses to defer attention to, but it is the internal wiring of our unique brains that decide what things draw our attention away from difficult, focus-oriented tasks.

        I personally wouldn’t want to use an editor that showed an engaging novel or a chat window connected to my friends in the sidebar, even if that content was purely my choice to interact with or not. Those aren’t active distractions, but they are passive distractions.

        Similarly, If I was a long-form author, or if I was aware that I often waste time by prioritizing fiddly formatting over writing, I might prefer an interface that focuses on my primary goal, and which deaccentuates or hides the elements that become distracting to my goal.

        You may not experience this pain point. I don’t either, personally. But I can certainly understand how others do, and the popularity of distraction free writing tools is proof that there are plenty of people like that.

        It makes much more sense to attempt to empathize with other viewpoints and understand their needs, rather than making sweeping generalizations about human experience that declare their needs “extremely stupid […], seriously misguided and frankly insane”.

        On a more personal note, you’re an employee of Automattic in a communications role and as such, your posts are generally seen as an extension of the views of Automattic. When you dismiss other people’s experiences and opinions in such absolute terms (which I’ve experienced from you on several platforms), you end up furthering the narrative that has been building of late, that paints Automattic, as a whole, as some sort of unmovable dictatorship, where only certain viewpoints are considered.

        It’s just further contributing to the communications issues that Automattic has been attempting to address.

        Report


      3. @Otto you’ve been around for a long time. I’m a bit surprised strong-worded labelling would be part of your process.

        Data? Yes, good question. Did WP figure out opt-in telemetry yet? I forget.

        Distraction pain is probably a function of any person’s total life cognitive load and general ability to handle it. It’s probably a reasonable assumption that some have more, some less load, some are able to handle it better, some worse.

        WP has a high enough distribution volume that even the smallest segment of any type of person is sizeable in absolute numbers.

        I would hypothesize that “distraction-free” certainly has its place in the system for a sizeable-enough niche.

        Only reason to drop it would be if it’s too complex to implement and/or maintain. I doubt either one is true.

        Report


    3. @greg I worked for Automattic for a single month, 10 years ago. Didn’t work out. I’m currently adjacent, yes, but it really is not the same thing.

      In any case, I don’t like the spotlight mode, and I think that “distraction free” is a silly idea. I don’t see that as some kind of controversial view. So, yeah. Happy to explain my views, in my own words. It’s crazy and silly and dumb. My 2 cents.

      Report

      Reply

  9. Why not just have “Tiny Mode” and “Gutenberg Mode”?

    You know, so we can use it how it already is if we want to? Keep developing the Gutenberg side if they want to then.

    So you might have 3 modes – Tiny, Gutenberg, Focus…

    …keep everyone happy.

    Isn’t this a solution that is in plain view, or am I missing something?

    Report

    Reply

  10. I love the way the Gutenberg team seems to think they know better than all the designers and developers at Google, Microsoft, TinyMCE, etc. that have already created very successful content editors. It’s funny, the first thing I thought of when I saw the toolbar fixed to the top of the Gutenberg editor is how it’s beginning to look more like TinyMCE. Keep going guys, and soon you’ll be back to what we have already.

    And I agree with those that have a beef with distraction-free mode. I don’t think this is a real problem. In fact it feels like a solution in search of a problem. Plus, that faded out idea is nonsense. If you’re typing and then want to read something you wrote already, having to fixate at faded out text is terrible UI and very irritating.

    Report

    Reply

  11. I can feel the idea that if you are focused on writing, continue without considering blocks. The focus on writing showcases your thoughts in new ways. The frequent thought of building the posts may divert your concentration. Thanks, Sarah for sharing this post about Gutenberg.

    Report

    Reply

  12. The issue with Gutenberg’s writing experience isn’t the lack of a focus mode, it’s that the process of creating a new block for every paragraph break is jarring and ruins your flow. At least personally.

    But I always use Google Docs anyway so it’s a moot point.

    Report

    Reply

    1. I guess thats a practical solution if you’re just “writing”. I’d probably just use Note or Wordpad if I did it.

      You can at least get your thoughts out quickly that way.

      Makes the Gutenberg thing a bit of a non-issue I guess.

      Report

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.