Skip to content

Try to reduce the visual weight of the block #2983

Closed

Description

The cognitive load of the chrome we show around and in context of the block unit has been an ongoing topic for a while. Concerns have been noted that it feels heavy, there are many toolbars, options, and it gets in the way of writing.

As an experiment, in this ticket are some new mockups that try to touch on many different ideas presented, including:

  • Fixed-to-the-top block toolbar
  • Smarter auto-hiding of block chrome
  • Clearer grouping of block controls
  • More light-weight writing experience with a different block boundary design and selection model

What are the pros and cons? What are the accessibility implications? Are there flows that will regress in this design?

Please add your thoughts. To focus these mockups, the sidebar is toggled off. No change to that one — it's still on by default.

The basic editor

block unselected

No blocks are selected.

Movers and block context menu

Hover near the edges of the block to surface the movers and the context menu:

block hover near right

block hover near left

This is similar to how Google Docs handles it:

docs comments

You can also hover between blocks for a shortcut to insert a block there:

block hover between

If the block has the cursor, you can still tab into these.

Editing

Clicking a text block does not activate the boundaries. But it does show the quick toolbar, docked to the top of the screen:

block editing

This toolbar can be accessed, no matter where your cursor is, or which block is selected using Alt+F10 or ⌘/Ctrl (see discussion in #2960).

Selected blocks

If you just put the cursor in text, boundaries don't show up to highlight the block. Boundaries are shown for every other block but the text blocks. But you can still select the block, for example when you use the movers to reposition the block, or if you click the context menu:

block selected dropdown open

The context menu groups existing Delete, Configure options, and adds a couple of other block level niceties. See also #2980.

Selecting multiple blocks also gives you the option to convert multiple paragraphs to a list, or a quote:

multi block select dropdown

Mobile

On mobile, the top-docked toolbar moves down a level and stacks:

mobile

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

Metadata

Assignees

Labels

General InterfaceParts of the UI which don't fall neatly under other labels.Needs Design FeedbackNeeds general design feedback.[Feature] BlocksOverall functionality of blocks

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions