Skip to content
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

Upgrade current modes/New modes: "Layout", "Text", "Preview" #24751

Open
mariohamann opened this issue Aug 23, 2020 · 4 comments
Open

Upgrade current modes/New modes: "Layout", "Text", "Preview" #24751

mariohamann opened this issue Aug 23, 2020 · 4 comments
Labels
Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.

Comments

@mariohamann
Copy link

mariohamann commented Aug 23, 2020

Problem

There is a wide discussion about the balancing act between a clean "focus on text" and a more page-builder-like "focus on blocks".
As described in #23892 (comment) I became aware that we might be talking about two different modes here. I know that there are currently already two modes, namely, "Select" and "Edit". I was wondering if a switch to two other modes, namely "Block mode"/"Layout Mode" (🧊) and "Text Mode" (📝) would be more appropriate. Other issues could also benefit from this e. g. #24372 (comment). Furthermore there are some interesting thoughts about a „Browse mode“ as @MichaelArestad described in #23328. @dubielzyk created a really nice draft how an upgraded „Preview mode“ could look like in #23328 (comment)

Inspiration

In my spare time I like to use the application Dorico to write music. Dorico has very clear modes: „setup“ to add instruments, „write“ to write the music, „engrave“ to visually style the written music, „play“ to change the sounds of the music and finally the self-explanatory „print“ mode. Those modes are great to have a clear focus.
modes dorico

🧊 Layout mode

This mode enhances the usability while creating sophisticated layouts with blocks, inner blocks, etc.

Hover

In "layout mode", the borders and names are immediately displayed on hover. I used a grey frame here to show the difference to a concrete selection. This is the same effect as the current "select" mode.

1a

In this mode we could furthermore show the inserters as proposed in #22867

Click

In this case the "layout mode " works like an improved "Select Mode".

  1. the first click at a glance first marks the block as a whole. The block is marked with a blue frame to make the selection clearer. Pressing the delete key would delete the block. At this moment, for example, only functions that affect the entire block are displayed in the toolbar.
  2. only the second click makes it possible to write the text (as also e.g. the cursor makes clear).The borders of the block are still displayed, but no longer in blue but in grey again.

Instead of switching to edit mode by double clicking, we would still stay in "layout mode".

1b

Hold and move

In layout mode the block can be moved by holding down the mouse button. This is a behavior known from several editors and would be a big improvement over the current "Select mode". In addition, this allows us to drag and drop blocks with the "Top Toolbar" enabled, which to my knowledge is currently not possible.

1c

The idea of upgrading select mode with drag and drop is described here as well: #24092 Again it would be great to show the name of hovered blocks, at least of blocks where the block can be inserted as described here: #24750
exmple

📝 Text Mode

This mode is for a pure writing experience and focusses the creation of content.

Hover

In text mode, at least for the text blocks, no block frames are displayed for hovers. Here the text editor feeling is enhanced. This corresponds to the current behavior in edit mode.

2a

Click

When you click, you are given the opportunity - as usual in text editors - to start writing immediately. The cursor adapts accordingly in advance. This again corresponds to the current behavior of Edit mode.

2b

Hold and move

In text mode the text is selected instead. Here we are currently moving away a little from the behavior of text editors, because suddenly whole blocks are selected. This is the current behavior of text mode and may need to be reconsidered.

2c

👁 Preview/Browse Mode

This mode is easy to describe – it’s just a preview. Therefore the options of the editor are reduced as drafted in #23328 (comment) . Maybe it would be technically possible to load an in-editor-preview incl. the frontend JavaScript, CSS etc.? With this mode #24593 (comment) of @SNaushadS could be solved as well.

3

Conclusion

I must admit that these changes would be quite extensive and all modes would need to be maintained in the future. However, there are already two modes which could be upgraded and it seems that there is a need to enhance the preview mode.

@mariohamann
Copy link
Author

mariohamann commented Aug 23, 2020

Enhancement for block mode

In #23892 (comment) and #23892 (comment) the need for outlines was described. It could be considered to always show the outlines in block mode with dashed lines, changing to solid on hover.

borders

@supernovia
Copy link

Hi! Just noting we've also had a similar complaint about formatting settings disappearing when one selects multiple paragraphs. If you select more than one paragraph block, the formatting settings disappear.

I'd love to see a Just Write mode, since the layout mode can get in the way if someone's trying to compose their thoughts.

Also: re: outlines always showing, would it be possible to turn those off in a writing mode, so the page will look more like the end result?

@mariohamann
Copy link
Author

mariohamann commented Aug 29, 2020

@supernovia Thank you for your feedback. I completely agree. Currently I have the feeling that Gutenberg provides one "hybrid" mode that doesn't suit layouting as well as writing ideally.

And you are totally right that in text mode, there shouldn't be borders around the blocks - even if text in more than one block is being selected. (In fact changing this behaviour could be very hard, as the idea of sepereated blocks would have to be completely ignored, copy and cut should only select the text etc.etc.)

BTW: You called the "block" mode "layout" mode - and I have the feeling that your intuitive naming fits better!

@ZebulanStanphill ZebulanStanphill added the Needs Accessibility Feedback Need input from accessibility label Aug 29, 2020
@ZebulanStanphill
Copy link
Member

I'm not certain what the different modes should be called, but I definitely like the idea of showing all block borders in the "Block" mode. I've seen a lot of users complain that there's no easy way to see the general layout of blocks on a page and where they start and end. This could fill that need.

@mariohamann mariohamann changed the title Upgrade current modes/New modes: "Block", "Text", "Preview" Upgrade current modes/New modes: "Layout", "Text", "Preview" Aug 30, 2020
@mariohamann mariohamann mentioned this issue May 17, 2021
10 tasks
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants