Adding clarity to the in-page inserter in Gutenberg

[dubielzyk]

Problem

I sometimes struggle to understand where a block will be inserted when clicking the [+] icon

Opportunity

How can we better communicate where a block will be added?

Idea

What if we added a bit of animation to bring clarity to where the block will be inserted?

Above: When the [+] button is center aligned

Above: When the [+] button is right aligned

Above: For blocks that adds blocks horizontally (e.g. navigation block)

Mocks

Feedback

• Have you ever had the same problem?
• Does this solve the problem?
• Any concerns with this?

[noahtallen]

Have you ever had the same problem?

yes!

Does this solve the problem?

mostly!

Any concerns with this?

For the horizontal inserter, is that for something like the "nav item"? (One weird thing here is that the horizontal inserter shows a vertical line. I think it makes sense in context, but it's challenging to talk about :p)

I'm also curious how this would look at the bottom of "inner blocks". Looking at this example:

It takes up an extra block of space here, and is right aligned. I wonder if there is an interaction here that doesn't take up extra vertical space and also indicates that it is being inserted "at the end" of the block. 🤔

I think it can also be challenging to hover over inserters in the first place. For example, most inserters don't display until you hover over them. I think the designs above assume that the inserters are always displayed, and then show the line when hovering. So i wonder what the interaction should be in that case 🤔

Additionally, I think we could improve the hover state of inserters with one or both of these options in some form:

1. by making the hitbox bigger (so that you don't have to be as precise to hover over where it shows up)
2. by making the delay lower. Currently, you have to very slowly move to the gap between blocks to get it to activate.

[dubielzyk]

For the horizontal inserter, is that for something like the "nav item"?

Yes :)

Additionally, I think we could improve the hover state of inserters with one or both of these options in some form:

They might work but removing the delay might cause them to flicker everywhere and increasing the hitbox might feel odd if the click works outside the icon bounds.

I don't know enough about the inserters as a whole, are you aware of any issues or places I learn more about them? I feel like I understand the logic in the Post Editor, but when toying with FSE I can't seem to get consistent behavior. In the Post Editor it seems to use the bottom padding area around the block as the hit target to trigger the inserter. Is that correct?

[noahtallen]

might cause them to flicker everywhere

I agree -- I think it can be tweaked so that we don't have flicker when moving the mouse around quickly, but still show up more readily at slow mouseover speeds :)

I don't know enough about the inserters as a whole, are you aware of any issues or places I learn more about them

Unfortunately I am not very aware either :(

when toying with FSE I can't seem to get consistent behavior

There currently is nothing we have specifically done to try to make it different! There might be bugs here for some reason, but I don't know what the root cause is. Basically, it isn't meant to be this bad :)

I want to also expand on some more stuff that I mentioned elsewhere!

Basically, there is this thing where every container block (e.g. group, template part, post content, columns, etc) adds an inserter at the very end to “help you out." This interaction represents the story “I would like to insert a block at the very end of the current container.” (this current container would be the template part or group block you are working inside of.)

In my opinion, we should improve that inserter drastically. In my opinion:

• The current block container inserter should take up no vertical space.
• It should be centered.
• It should show a line of some sort to indicate “this is the end of the current container.”
• It should indicate the direction in which it will insert the block (e.g. above or below the inserter button) this would be needed depending on where we aligned it
• It should somehow integrate with the border of the container when the container block is selected.

[paaljoachim]

Hey Jon @dubielzyk

Thank you for bringing it up!

Here is a similar issue: #22867

There is also a PR made by @kirilzh but that has stopped up.
#24372

[StaggerLeee]

For each of your update I have it more and more difficult to use this thing.
Plus icon shows totally randomly. In 80% of cases I have to use "Insert before", "Insert after". It is nowhere near to be used by unexperienced beginners.
Holding mouse cursor above a block gives me option to insert new block under this block.
Next block down gives me right option, depending where mouse cursor stands. (Those are blocks in the middle, not first/last in line, actually the same type of blocks, different results. Swiched to code editor to see that some line break is not playing games, no all is clean.)
If plus icon shows I have to chase it with mouse and it disappear, impossible to click on it and use it. But OK, you made it perfect for keyboard freaks.

• Plus icon at the end of is also randomly showing. It works for first block, later it is nowhere to be seen. Not consistent and confusing even to me.

• "Intelligent" block toolbar is preventing me to edit text, to use media modal link, etc.
  Whose idea was it to put it 2-5 pixels away from mouse cursor ?

No, I have no JS errors in console.

It is first time I am using it more intense (2-3 whole days) and it gets on my nerves big time.

[youknowriad]

Closing as a duplicate. Please add your thoughts on #22867