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

Improve flow for inserting between blocks #2925

Closed
jasmussen opened this issue Oct 9, 2017 · 13 comments
Closed

Improve flow for inserting between blocks #2925

jasmussen opened this issue Oct 9, 2017 · 13 comments
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback.

Comments

@jasmussen
Copy link
Contributor

There's an increasing need to improve the flow for inserting content between existing blocks. See #2752, #833, #2890, #2755, #2043.

It becomes notably important when we start to look at nested blocks, or inserting images inline into paragraph blocks. A sticky inserter (as previously proposed) probably isn't accessible enough. Let's look at what a good way to do this is.

A core design value of Gutenberg is that a block when unselected is a preview of the contents itself. When the block is selected, we can show further options (see https://github.com/WordPress/gutenberg/blob/master/docs/design.md#block-design-checklist-dos-and-donts-and-examples).

We have decided that the movers (up/down), configure block/trash (see also #2884) are important enough to show up on hover. But let's be extremely careful before we add more stuff on hover, it isn't a very mobile friendly pattern, and it also adds cognitive load when just editing or exploring a document.

Dragging and dropping images works fine, that's good.

A standard pattern for editors, online and offline, is to put the cursor where you want to add new content, make linebreaks to add space, and insert content there. This isn't immediately ported to Gutenberg since by design this block editor consists of multiple editors. But could we do this:

insert between

insert between block selected

That is — when a block is selected, we:

  • show space to type below it
  • show the inserter blow the empty line of text
  • perhaps even let Enter take you to this new line

Remember, on a newline, the slash command works for inserting content. In a past design we had the Inserter icon shown on the side.

Let's discuss further, and do more mockups. I'll try and put together an animatic of the above.

@jasmussen jasmussen added General Interface Parts of the UI which don't fall neatly under other labels. Design Needs Design Feedback Needs general design feedback. labels Oct 9, 2017
@karmatosed
Copy link
Member

I totally agree, there should only be one inserter shown at a time. This for example is where confusion happens:

2017-10-09 at 10 00

@jasmussen
Copy link
Contributor Author

Here's what a few other editors do.

Including the current editor — set caret after image, press enter, insert new:

insertbetween

Medium — select image you want to insert before, press enter, get access to inserter:

insertbetweenmedium

Livingdocs — they have a separate "insert" button that adds a horizontal line for where things'll be inserted (after the selected block), like we have:

livingdocs

Notion.so — You can select any block and press Enter to insert an empty line below it, and then insert an image. Notion only has the slash command, but there might as well be an inserter button:

notion

Of these, it feels like the "press enter to make room" is a pattern that might be worth following.

@gziolo
Copy link
Member

gziolo commented Oct 9, 2017

That is — when a block is selected, we:

  • show space to type below it
  • show the inserter blow the empty line of text
  • perhaps even let Enter take you to this new line

This makes a lot of sense when you are editing the existing block, but it gets more complex when you want to add a new block between 2 existing blocks. In that case you need to select the specific block above the space where you want to insert block first just to see the inserter. What if we would also display another inserter when you hover the space between two blocks like this:

screen shot 2017-10-09 at 11 48 43

This pattern would allow to insert a new block also after the title of the document, which isn't possible at all at the moment, even with changes introduced in #2890.

@jasmussen
Copy link
Contributor Author

@mtias also noted that pressing enter when a block is selected is perhaps not the ideal pattern to follow despite my previously noted excitement above. Like what happens to captions, or how do you break out of a list.

My objection to the current implementation is that it adds more cognitive load to the selected block and its silhouette. As this is already very complex, that feels like a visual regression.

Matías noted that we could look at having the "inserter" hover exist between two blocks, and be available there when you hover the space between blocks. It's not a lot of space, but it's an option that can be explored. Here's an old mockup for how that could look:

hover between

@jasmussen
Copy link
Contributor Author

Just referencing #2890 (comment) as Matías has a different mockup posted there.

@gziolo
Copy link
Member

gziolo commented Oct 9, 2017

I reverted #2890 with #2929 to give as more time to find a solution that satisfies everyone.

Matías noted that we could look at having the "inserter" hover exist between two blocks, and be available there when you hover the space between blocks. It's not a lot of space, but it's an option that can be explored. Here's an old mockup for how that could look:

This is exactly what I was trying to describe above with my quick mockup done without design mindset. Personally, I like the idea of having the inserter in the middle of the line when you hover between the blocks.

@aduth
Copy link
Member

aduth commented Oct 9, 2017

Notion.so — You can select any block and press Enter to insert an empty line below it, and then insert an image. Notion only has the slash command, but there might as well be an inserter button:

Trying this one for the first time today, they also rely heavily on drag-and-drop.

notion

Aside from touch implications, another thing I found after using it for a few minutes is that drag-and-drop is quite awkward to use for nested content, in much the same way that managing multi-level WordPress menus is clumsy (moving the cursor to just the right spot to differentiate between a sibling or a different level of nesting).

@jasmussen
Copy link
Contributor Author

Yep, while drag and drop in and of itself doesn't offend me, we probably shouldn't rely on it as anything but an additive enhancement, and a desktop one at that.

@buzztone
Copy link

I'm sure that drag and drop will be a very popular enhancement among many WP users when implemented, but you are right to look at it as an additive desktop enhancement.

One aspect I like about the display another inserter when you hover the space between two blocks idea is the way it could fit well with future drag and drop enhancements.

@buzztone
Copy link

Managing multi-level WordPress menus is a pretty good example how not to do drag and drop. It's pretty old code so I'm sure it can be done much better nowadays.

Doing drag and drop well is still tough but hugely valuable for many users when you get it right.

@jasmussen
Copy link
Contributor Author

Given the "Inserter between blocks" is merged, can we close this one? @karmatosed

@gziolo
Copy link
Member

gziolo commented Oct 19, 2017

It works like a charm 🥇

@jasmussen
Copy link
Contributor Author

Alright, closing for now. We can always reopen if need be!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

No branches or pull requests

5 participants