New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: "Focus Mode". #8920

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
@mtias
Contributor

mtias commented Aug 13, 2018

Not Ready To Merge

This PR explores introducing a potential "Focus Mode" to the editor. When enabled, the mode would reduce the weight of the visual interface and highlight only the current block that is selected while the rest fade away. Pairing it with the "fix toolbar to header" can offer a compelling setup for those that already know how to navigate an editor.

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. 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.

Video showing it in action: https://cloudup.com/cwaVMa9NygI

focus-mode-comparison


If we were to add this in, here are a few tasks pending:

  • Figure out where this code should live — editor, edit-post, as a core extension, editor setting, etc.
  • Add a keyboard shortcut to toggle the mode.
  • Decide whether to selectively fade header controls. Should they appear when the header area is focused?
  • Fix multi-selection.
  • Consider adding focus mode as a top-level icon in the header bar that can be easily toggled. If done as an extension it could just use the pinning mechanism.
  • Persist the setting.
  • Properly decouple CSS in its own file.
Add focus mode.
It highlights only the current block while the rest fade away.
@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Aug 13, 2018

Contributor

Yes, yes, yes! One of the issues I have heard people mention regarding Gutenberg is that it feels cluttered, so I think this is precisely the kind of thing Gutenberg needs for people who want a clean writing experience. This is definitely something that should be implemented.

Contributor

ZebulanStanphill commented Aug 13, 2018

Yes, yes, yes! One of the issues I have heard people mention regarding Gutenberg is that it feels cluttered, so I think this is precisely the kind of thing Gutenberg needs for people who want a clean writing experience. This is definitely something that should be implemented.

@shaunandrews

This comment has been minimized.

Show comment
Hide comment
@shaunandrews

shaunandrews commented Aug 13, 2018

Love it.

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Aug 13, 2018

Member

Really excited about this. The biggest feedback around this comes from people really wanting distraction free, over what we have now being partially that (or more than than today). This gives people the option of how they want to experience and that is crucial when thinking about writing flows.

Member

karmatosed commented Aug 13, 2018

Really excited about this. The biggest feedback around this comes from people really wanting distraction free, over what we have now being partially that (or more than than today). This gives people the option of how they want to experience and that is crucial when thinking about writing flows.

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Aug 14, 2018

Member

Bike-shedding here, but I'd think if we want focus on just what we're editing/have literally "in focus", we'd want to dim the title as well. Right now the title is just as loud and distracting as the content that's in focus, so I'd think dimming it would make sense.

Member

tofumatt commented Aug 14, 2018

Bike-shedding here, but I'd think if we want focus on just what we're editing/have literally "in focus", we'd want to dim the title as well. Right now the title is just as loud and distracting as the content that's in focus, so I'd think dimming it would make sense.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Aug 26, 2018

Contributor

No objections from an a11y perspective, as long as this is not the default mode.

I'd only suggest to not use Focus Mode as name for this feature, as that's already used for screen readers specific feature and could be potentially confusing.

Contributor

afercia commented Aug 26, 2018

No objections from an a11y perspective, as long as this is not the default mode.

I'd only suggest to not use Focus Mode as name for this feature, as that's already used for screen readers specific feature and could be potentially confusing.

@LZL0

This comment has been minimized.

Show comment
Hide comment
@LZL0

LZL0 Aug 26, 2018

This is great stuff, however I do agree with @afercia. Nice work tho!

LZL0 commented Aug 26, 2018

This is great stuff, however I do agree with @afercia. Nice work tho!

@rosswintle

This comment has been minimized.

Show comment
Hide comment
@rosswintle

rosswintle Aug 29, 2018

Contributor

I’m so glad this feedback has been listened too.

BUT, while I very much think this is a step in the right direction, it’s still quite the wrong solution. Mostly because it’s based on paragraphs-as-blocks, which is, in my opinion, the main barrier (other than the mass of UI popping in and out) to focussed writing.

When I’m writing I want to see what I’m writing...and what I just wrote. So dimming a block seems really weird. It’s novel, different, but it’s not (as far as I know) an established pattern for any text editor.

Ideally, in focus mode, I’d want:

  • A full(er) text editing toolbar fixed at the top
  • A more “classic” editing experience, with no real reference to blocks at all - this could possibly be “faked” somehow by having the toolbar items transform blocks (see the recent discussions on block-transform button), but I don’t see the point as long as there’s a classic block that can be used.

I would also make the argument that this should be the DEFAULT Gutenberg editing experience, with the option of switching into a more advanced “block mode” if that is what’s needed. This would actually go a long way towards alleviating concerns that users might be scared off by the more advanced interface AND it solves the issue of what to call “Focus mode”.

At the very least, I’d want my own personal blog to have the focus mode on my default. So maybe could be a user-specific or site-wide option?

Good to see this is being considered. But please evolve the concept further.

Contributor

rosswintle commented Aug 29, 2018

I’m so glad this feedback has been listened too.

BUT, while I very much think this is a step in the right direction, it’s still quite the wrong solution. Mostly because it’s based on paragraphs-as-blocks, which is, in my opinion, the main barrier (other than the mass of UI popping in and out) to focussed writing.

When I’m writing I want to see what I’m writing...and what I just wrote. So dimming a block seems really weird. It’s novel, different, but it’s not (as far as I know) an established pattern for any text editor.

Ideally, in focus mode, I’d want:

  • A full(er) text editing toolbar fixed at the top
  • A more “classic” editing experience, with no real reference to blocks at all - this could possibly be “faked” somehow by having the toolbar items transform blocks (see the recent discussions on block-transform button), but I don’t see the point as long as there’s a classic block that can be used.

I would also make the argument that this should be the DEFAULT Gutenberg editing experience, with the option of switching into a more advanced “block mode” if that is what’s needed. This would actually go a long way towards alleviating concerns that users might be scared off by the more advanced interface AND it solves the issue of what to call “Focus mode”.

At the very least, I’d want my own personal blog to have the focus mode on my default. So maybe could be a user-specific or site-wide option?

Good to see this is being considered. But please evolve the concept further.

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 29, 2018

Contributor

When I’m writing I want to see what I’m writing...and what I just wrote. So dimming a block seems really weird. It’s novel, different, but it’s not (as far as I know) an established pattern for any text editor.

This type of mode is really common. It's sometimes called "focus mode" or "typewriter mode". A few apps that have it: iA Writer, Calmly Writer, Ulysses, Typora, etc.

Contributor

chrisvanpatten commented Aug 29, 2018

When I’m writing I want to see what I’m writing...and what I just wrote. So dimming a block seems really weird. It’s novel, different, but it’s not (as far as I know) an established pattern for any text editor.

This type of mode is really common. It's sometimes called "focus mode" or "typewriter mode". A few apps that have it: iA Writer, Calmly Writer, Ulysses, Typora, etc.

@maddisondesigns

This comment has been minimized.

Show comment
Hide comment
@maddisondesigns

maddisondesigns Aug 30, 2018

Sorry to be blunt, but this is a terrible idea. Constantly fading different elements is considerably more distracting than simply showing everything.

One of the reasons the existing Gutenberg writing/editing experience is horrible is because you insist on making every single paragraph a new block. For some reason you seem to think that people will simply move a whole block here or there when editing. Well, they won't. It's considerably more frustrating and time consuming having to copy/paste text from two dozen different blocks than it is from copying/pasting text within the same block. It should be up to the user to decide when to insert a new block, not Gutenberg. If I want to add multiple paragraphs to a block, I should be able to.

Either change the Paragraph block to allow multiple paragraphs, or better yet, get rid of it altogether and just have the Classic Block. I am absolutely dreading having to edit a text heavy page with 40 or 50 different individual blocks. It's going to be an absolute nightmare!

maddisondesigns commented Aug 30, 2018

Sorry to be blunt, but this is a terrible idea. Constantly fading different elements is considerably more distracting than simply showing everything.

One of the reasons the existing Gutenberg writing/editing experience is horrible is because you insist on making every single paragraph a new block. For some reason you seem to think that people will simply move a whole block here or there when editing. Well, they won't. It's considerably more frustrating and time consuming having to copy/paste text from two dozen different blocks than it is from copying/pasting text within the same block. It should be up to the user to decide when to insert a new block, not Gutenberg. If I want to add multiple paragraphs to a block, I should be able to.

Either change the Paragraph block to allow multiple paragraphs, or better yet, get rid of it altogether and just have the Classic Block. I am absolutely dreading having to edit a text heavy page with 40 or 50 different individual blocks. It's going to be an absolute nightmare!

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Aug 30, 2018

Contributor

closing in favor of #9394

Contributor

youknowriad commented Aug 30, 2018

closing in favor of #9394

@youknowriad youknowriad deleted the add/focus-mode branch Aug 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment