Gutenberg: Inserter: Inline inserter is difficult to discover and use

[shaunandrews]

When you have a document containing a few blocks (or a pattern), you should be able to use your cursor (or keyboard) to add a block above or below existing blocks.

Currently, you need to hover over a trigger area for a few milliseconds, and then the insert button will appear. This can make it difficult to discover and often has usability issues when blocks are nested.

[apeatling]

There is also a bug where the inserter does not appear at all when hovering over innerblocks. The Jetpack form block is an example of this. Probably a separate issue but making a note here.

[davipontesblog]

With some blocks it does not come up as mentioned by @apeatling - this is me trying just now:

https://d.pr/i/oytgll/qONSV3opb1

[shaunandrews]

It can be difficult to move your cursor to the button once it does appear — I often "miss" and have to fiddle with my mouse a little to get it to come back.

--

At one point, I think there was an indicator that appeared on the canvas to convey _where_ the new block would be place. It was similar to (but not exactly like) this mockup:

[MichaelArestad]

This has been making me a little crazy as well recently.

I recommend:

• remove hover delay - feels slow and unintentional
• make the hover target quite a bit easier and reliable
• possibly add a blue line like in Shaun's screenshot above (I dig it, but maybe others don't?)

[apeatling]

I've created a draft PR that includes a reduced hover animation delay and the line as a way to test out how this feels: https://github.com/WordPress/gutenberg/pull/22813

[MichaelArestad]

I tried messing with it, but I'm having trouble testing. I've changed it to a pretty fast time and loaded it in the browser, but there's still a significant delay. Perhaps the delay is elsewhere in JS or something? You can see the change represented in the compiled styles here:

FF latest

[apeatling]

Yes you're right, this is adjusting the animation duration not the delay making it seem like the delay was less because of a reduced total animation time. Will dig and find the delay setting.

[apeatling]

@MichaelArestad It's the animation 0% -> 80% -> 100% causing the delay. You can adjust the 80% value, or remove it to alter the delay.

[bobbingwide]

I noted that the icon doesn't appear in the same place everytime, even with two blocks with identical content. And sometimes the Add Block tip never appears

BTW: I mistakenly removed this Add Block insertion method from the End User documentation during WordCamp Europe Contribuor Day due to this behaviour.

[mapk]

Good conversation here! I wanted to add to it a bit. I've noticed a couple problems.

1. When an Image block proceeds the block I have selected below it, and I'm able to target and click the inserter, it doesn't respond to my clicks.
2. Many of the block toolbars cover the Inserter still making it impossible to click.

[MichaelArestad]

@mapk I'm seeing that as well. Can you create a new issue for it?