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

[mariohamann]

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.

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

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

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.

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

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

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.

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.

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

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]

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.

[supernovia]

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]

@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]

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.