The + mark is sometimes difficult to find. The clickable mouseover area should be heaps bigger.

[a4jp-com]

Description

The + mark is sometimes difficult to find. The mouseover area should be heaps bigger.

Step-by-step reproduction instructions

Please list the steps needed to reproduce the bug. For example:

1. Go to edit a page
2. Try to find the plus mark to add a new block
3. The top add block plus mark is totally missing and lower ones only has a tiny mouseover area. About 6mm in size.

Expected behaviour

I mouse over anywhere between the blocks and the plus mark shows up. The space should be clickable not just animate a line. The 6mm square is the only clickable area. It's way too small. The whole iframe of div.edit-post-visual-editor should be clickable.

Actual behaviour

I have to circle the cursor till the mark shows up then click the tiny space.

WordPress information

• WordPress version: 5.6
• Gutenberg version: 9.7.4
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome 87.0.4280.141

[talldan]

The top add block plus mark is totally missing

@a4jp-com Just wondering if you could add some more detail about this point. The + button on the top bar should always be present.

[a4jp-com]

The plus mark doesn't need to always show as distraction free editing is nice but the top area above the first block is just totally missing. You can't add a block higher than any top block added. Because of this you have to create a block under the block you want to add a block above and shift it up all the time.

The iframe for the space where the plus mark shows up should be clickable.

This is not a new feature request. I think the code above the first block was just forgotten or put in the wrong position so it's a bug. Changing the size of the clickable area is just for accessibility. Why only have a 6mm clickable area? It should be a lot bigger/longer that's why I suggest the whole horizontal iframe be clickable. The link tags just need to be moved for that.

[a4jp-com]

[talldan]

@a4jp-com Thanks for the screenshot, I see now that you're referring to the button that appears between blocks.

There are some issues already created for this, but it's tricky to solve because this button can already overlap other UI elements like drag handles on the image and spacer block. Here are the issues I was referring to:

• Inserter: Inline inserter is difficult to discover and use #22801
• Inline inserter: Can't insert into top position #27540
• Inserter: Reveal surrounding block inserters on block hover/selected states #22867

Given there's already other issues discussing the problem I'll close yours as a duplicate. I'd recommend commenting on the other issues with your feedback.