Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Transform "Fix Toolbar to Top" into "Focus Mode" #9334
A key feedback point we hear is that Gutenberg’s interface can be a little overwhelming. 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.
Oftentimes, this subset of users also miss the common "formatting toolbar at the top of the page" paradigm that's present in Google Docs, Microsoft Word, and the Classic Editor.
I think we can introduce an alternate editing mode that addresses both these concerns for them.
We already have a "Fix Toolbar to Top" option that moves the contextual block toolbar to the top of the page. For the user I described above, this is already a step towards the interface they're used to. It's also a good first step to decluttering the writing interface — relocating heavy UI to a less-disctracting area of the screen.
I suggest we take that option further, and adapt it into a more complete "Focus Mode":
This new editing mode would consist of a collection of UI updates aimed at decluttering the interface so that the user can focus on writing their content.
Focus Mode would be activated via the "More" menu. To accomodate this new mode, I propose renaming the "Fix Toolbar to Top" option to "Focus Mode" and including this as a new "Writing" option:
When users have this new mode active, the editor would include the following UI updates:
1. The block toolbar would be pinned to the top of the screen.
(This is an existing feature.)
2. The editor would be full screen.
This is one of the highest impact changes, and would be the default for this mode. Users could exit out of full screen mode — and retain all other features of Focus Mode — via a new toggle in the upper left of the toolbar.
3. Block outlines would be removed for both hover and selected states.
I initially thought this change would be confusing, but (as a power user myself) I find it quite usable. Since this is an optional mode, and this is a high-impact change in terms of eliminating distractions, I'm all for it.
4. The block label would appear on a delay, and be toned down visually.
This label is less essential in this mode, but including it will help with wayfinding. (The delay aspect of this change is already in progress in #9197)
5. Block mover + block options would also appear on a delay.
(For non-selected blocks). When a block is selected, they'll appear just as quickly as they usually do.
In case you missed it above, here's a short video demo to convey how these changes work in practice:
I foresee a few likely questions to this approach, so I'll try to address them in advance:
Looking forward to thoughts and reactions.
I'm a big fan :)
I have just one concern. If I want to make this my default mode, I'd select it from the menu in that case I don't want it to always stay full screen but I still want to navigate to other pages of WP-Admin, I'd suggest adding a "close" or "previous" icon at the position where you put the icon to close the fullscreen mode (like the customizer). This have some impact on the "exit fullscreen mode button", I wonder if we can have two buttons next to each other or have something separate for the "exit full screen" button.
I love the look of it, with two thoughts:
Overall it looks nice though and is definitely worth iterating on!
I'm less attached to keeping
I also think that Fix Toolbar to Top should remain a separate option at least in the normal Visual Mode. Perhaps it can be enabled permanently in Focus Mode as suggested by @0aveRyan.
I think the Fullscreen option should be separate for the reasons pointed out by @youknowriad.
Note also that the ellipsis being moved to the toolbar would have a slight effect on this idea. See #9074 and #9282. I think having the ellipsis in the toolbar would work really well with a Focus Mode like this, since you would not need to see the block borders to find the ellipsis for the selected block.
I really like this and thanks for everyone's thoughts. Regarding fixing to the top, I am in favour of not having this as a separate option. My reasons fall into a few points:
I would like at least us to try in prototype this suggestion as I think it's something feeling would be beneficial. This isn't dismissing as much as wanting us all to actually feel this flow, I want that myself. Then we can get feedback on it before merging.
One thing to think of here is stepping outside our own flows and preferences. Right now we have a few issues. People are either feeling things are 'too blocky' or feeling the experience is 'too much'. I say the two things separate but they really come down to the same feelings. If we think about flows that people may use splitting out like this makes a lot of sense to explore. Creating easy to understand flows that make sense is what we can see this as setting us on the path for. We're not saying it's done but it's a start.
I also think in this case it would be good to prototype what full screen not being an option feels like, yes we could be going too far but let's see.
Thanks everyone, I think we're all coming from the same point just circling around the finer details.
Same a11y considerations made on #8920:
No objections from an a11y perspective, as long as this is not the default mode. However, I'd consider to not pair this feature with the option to have the toolbar at the top. Moving the toolbar at the top should be possible also for users who don't want this "lighter" UI.
I'd only suggest to not use
Thanks for the feedback, everyone!
I ended up pulling back from that in an effort to be less prescriptive with flows. If someone prefers to "write" using the "blocks/building" mode, or to build out layouts using the "writing/focus" mode, I wouldn't want them to feel like they're using Gutenberg wrong. The core of this direction is really about eliminating distractions, so I think a name like Focus (though not exactly "Focus Mode" for @afercia's reason above) makes sense.
I prefer limiting the top toolbar (and full screen) to this mode for two reasons.
Regarding everyone's other notes about full screen — I think we'll likely need/want to iterate on it once we have this prototyped. It'll help us to see it in action. However we handle it though, I'd love for us to "remember" the users full-screen preference: If they prefer to always edit in full screen mode, that should be possible.
referenced this issue
Aug 28, 2018
Really liking the direction of this proposal. Over the past few weeks I've started using Gutenberg heavily for writing on my own blog. I really like it better as a writing experience (much better than the existing editor, which I only pasted pre-written articles into). The work suggested here would really help with a problem I've faced in being distracted by some parts of the interface. Looking forward to seeing how this progresses! +1 on hiding the sidebar.
After some follow up chats related to #9394, we've decided to break this out into a few features:
Each will be toggled separately. More details over here.
I have a few additional notes on the Full Screen mode. Posting here until we break that out into its own PR:
For the close button, I suggest we either use an
Updated animation (for example only... we'll tweak this in a PR):
Can I add, as someone who’s been quite vocal about finding Gutenberg difficult for “just writing”, that I MUCH prefer this to #8920. Apart from making it full-screen. I’d still like the document options on the right.
I’m going to re-state that I would prefer this to be the DEFAULT editing experience with advanced block mode as a toggle. This ticket opens with:
I’d have thought that most people would want to “write” most of the time rather than “build”. Is there evidence that people want to “build” as default?
Great work though. I’d very much like to support this concept.
The name "Focus mode" has a lot of history in software already so I would actually argue that is another reason it should be named that. Both spotlight mode and writing mode don't evoke the same immediate acknowledgment and are confusing. It could be argued that it would make it less accessible to be named something else so maybe there is a way to address that in the code which the screen reader will read?
Decisions over options makes sense but there is a precedent for allowing users to decide their preferred editor writing option so it makes sense to me to have a user setting rather than a site setting to choose their default editor mode. The fact is that some people writing in other software and simply paste it into Gutenberg, others use WordPress and Gutenberg for their writing experience and both of these experiences will differ to editing previously published content.
Overall I think this approach on focus mode is brilliant and it addresses a lot of feedback.