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: #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?

[ZebulanStanphill]

The sibling inserter now has a much more visible indicator line that appears when hovering over the gap between two blocks. Would you say this solves the issue, @shaunandrews?

[a4jp-com]

The whole line should be clickable not just the tiny plus mark. Most clickable elements are meant to be about 44px in size.

[ZebulanStanphill]

@a4jp-com The line is so thin (especially in the most recent iteration) that I don't think that would help at all. I think a better solution would just be to make the button bigger. And if that starts to cover up the preceding block too much, then perhaps consider combining the size increase with the changes proposed in #13571.

[a4jp-com]

block-editor-block-list__insertion-point is-vertical is 28 pixels high. It should be easy to make it clickable. Not the actual line.
At the moment the code is just a button but that could be moved up a few levels to easily fix the problem.

[a4jp-com]

The inserter isn't showing above the first div. Any way to get that fixed at the same time?

[getdave]

@jasmussen I can't even trigger an appender to appear above the first block in the document (see also https://wordpress.org/support/topic/blocks-cant-be-added-at-the-top-of-pages/#post-14847846).

Is this something we ought to introduce? Was it removed? I feel like you worked on this a fair bit a one point and may have some insight 🙇

[jasmussen]

Is this something we ought to introduce? Was it removed? I feel like you worked on this a fair bit a one point and may have some insight 🙇

I'd love to see an inserter between the title and the first block. I think it's likely not as simple as it sounds, if the proper tabbing flow is to be kept. That's the only thing I recall being challenging in the past.

[TestPlan]

We're having complaints from many users about this. They find it difficult to locate and click the block inserter.

It would be nice if there was an optional mode or setting to always have the inserter button be visible between every block, instead of relying on hover. Maybe the button can initially have a ~30% opacity, and on hover it goes to full opacity. I think that would help with discoverability.

I think back in WP 5.3 the block inserter would appear when you had any block focused. 5.3 didn't look as nice, but it seemed to have superior usability in terms of inserting blocks.

[a4jp-com]

That seem like a nice option. I just hope the block inserter mark get added to the top soon.

[jasmussen]

Here's a GIF of how the inbetween inserter appears in trunk currently. It has a big blue line, which wasn't there when this ticket was originally created:

[a4jp-com]

Try between Add Title and the 1st paragraph (Alice...)

[jasmussen]

Yes, it would be nice for it to be available there. I believe #30470 is the ticket to follow for that, though, with this one mostly about discoverability.

[apeatling]

I think we can close this one out @jasmussen based on the changes in trunk and #30470.