Distraction-free mode

[hedgefield]

I noticed the absence of the distraction-free mode in gutenberg. It's kind of there in the sense that you can close the settings sidebar and collapse the menu, but it's not the same, and I figured that with a few simple tweaks we could bring it back fully.

I have three goals with this proposal:

• Get feature-parity with the classic editor's distraction-free mode,
• Solve an a11y issue,
• Create a new hook to present focused UI elements

For starters, this is as good as it gets in Gutenberg:

It's fine, but if we replace the Settings button with the distraction-free button from the classic editor, the functionality is almost no different. It still closes the sidebar, but also the menu, the extended settings, dims the admin bar, all creating an even nicer zen writing experience, with fewer clicks.

You'll notice the text column isn't perfectly in the middle - this is an essential part of the classic distraction-free mode. It keeps the text in place while fading all other elements around it away. In gutenberg, the text shifts around left and right as you're closing all the sidebars. It's not smooth.

As for a11y, there's been some debate about the Settings button and the fact that it should come directly before the sidebar in code (#2460), and I believe this change could also solve that since the button and the sidebar are no longer tied together - but @afercia you let me know if that's true.

And for the last point, this mode frees up space for special UI - for instance, adding Google Docs-like comments to go with the collaborative editing being worked on in #1930. How that all would work is another matter entirely, but I wanted to mention the possibility here.

[karmatosed]

Whilst I think the idea of a distraction free mode being iterated on is sound, I do not agree with the change from a settings icon to the distractions one. They are not interchangeable from an interaction perspective.

One thing being looked at which maybe could be a way to get this is to have a 'tools' section. This could add that function, although then it hides it under a layer - not perfect.

I do not think removing a visual guide to settings is the solution in this though and encourage you to explore other options. I would also encourage you to check out other tickets where the toolbar is being worked on. Rather than adjusting and doing a lot just to get distraction free mode, looking at the suggestions there may lead to a path where it can come in.

Personally, I am not sure you need to add another icon to do this.

[afercia]

I do not agree with the change from a settings icon to the distractions one. They are not interchangeable from an interaction perspective.

I'd agree, they're not interchangeable. In fact, this proposal is meant to hide not just the sidebar but everything (including the meta boxes at the bottom and the admin menu) so a "Settings" icon wouldn't be appropriate.

It still closes the sidebar, but also the menu, the extended settings, dims the admin bar ...

[hedgefield]

I hope it's not misunderstood that this functionality would be added to the Settings toggle - I'm saying let's remove the Settings toggle and supplant what it does with a wider Distraction-free toggle. It is a bit more all or nothing, that is true, but I would argue that closing the sidebar is an act of increasing focus on the content, the writing process, right? Therefore, why not hide the menu too? Why not bring that focus to its endpoint? Though I can understand still wanting to have the context of the admin menu too. Having this and a settings toggle is perfectly valid too. I'm just exploring if this concept could merge the two. And if not, that's fine too :)

[karmatosed]

I think it's important to note that what the 'remove all things' means to a user. The current 'show settings' actually does mean something important and it calls out an area of the page that doesn't need to be on 'even without distraction free'.

I think it's a valid option to have no settings and yet show the menu, do you have some user evidence this isn't the case?

[hedgefield]

That's fair yeah, I suppose it depends on what people would want to accomplish, both options have a usecase. I came at it with the idea of "we used to have distraction-free mode and the sidebar was always visible", and I personally have not collapsed the sidebar yet in gutenberg, I find the options in it too useful. Especially once plugins start hooking into it further down the road it's something I'd want to see during the editing process, and when I just want to write I want to have it as calm as possible. But I can't say if that's the majority of users, so it's a good candidate for a user test after we process all the open adjustments to the toolbars (or even after release) 👍

[karmatosed]

Have you considered the flows and looked at some user tests? Would be interesting if this backs up what you are suggesting.

[hedgefield]

I see you went ahead and made an iteration on this concept somewhere else, so I thought I'd include it here to keep things organised:

My original pitch only included the functionality that the classic editor offers, but how you iterated on it by also stripping away the admin bar and most of the top bar is a great (and logical) idea! I'd love to see it in action. You mention wanting to make a plugin for it, is there a specific reason for that? Putting it under the ellipsis menu in the top bar would be perfect I'd say.

Would this also hide certain block UI? Or do you see the inspector button for example as another way to exit out of this mode?

[karmatosed]

@hedgefield to me I think something like this makes sense as a plugin as a starting point. It changes more than just the editor. I also think having the approach where we hook into the ellipses is useful and doing in a plugin is a good illustration of this - that menu can be hooked into by other plugins.

It needs to allow inspection of blocks. So, I would say it doesn't hide that menu, more they appear when the block is interacted with.

[hedgefield]

Yes, not having access to those options seems like we'd needlessly limit that mode. And if we're going for a plugin, maybe we can give the sidebar a slightly different, minimal styling, to at least maintain the vibe of this zen mode of writing while still giving access to the essential UI.

Is building that plugin something you'd want to spearhead? Sounds like it's a good proof of concept for multiple things 👍 Is the hook for getting into the ellipsis menu already established?

[jasmussen]

This has been a good ticket to explore how a separate "mode" could exist that would hide chrome could work.

You mention this in the ticket initially also, and this seems like a reasonable argument: being able to dismiss the sidebar and navigation sidebar both, can serve to drastically reduce distractions, in a way that doesn't require a separate mode.

Adding to this, it is likely also a healthy exercise to keep refining and simplifying the UI — we've gotten a lot of tickets around this over the course of the project — to a point where ideally the desire for a separate distraction free mode disappears. That may be a utopian goal, and we may find in the future that a distraction free mode is indeed necessary in Gutenberg. But given our desire to further refine the UI we have, and because in #2460 (comment) (and can be suggested in #3330 as well) we discussed distraction-free being an extension, I'm going to close this one.

As it is with all tickets that are closed, they can be reopened if need be, and as such the act of closing is more a matter of triaging for the near future, not necessarily judging for the long future.

[SNaushadS]

I was writing a detailed Feature Request for "Distraction Free Mode" in Gutenberg and good that i googled around to find this ticket.

My initial approach was to do how @hedgefield did.

And after reading through, i see Distraction Free Mode, is even more appropriate.

Please consider this an Upvote for a "Distraction Free Mode" in Gutenberg.