Gutenberg: Add Block "+" icon has different hover effects

[mapk]

Describe the bug
The Add Block "+" icon shows different hover effects within the editor.

To reproduce
Steps to reproduce the behavior:

1. Create a new post.
2. Without anything selected hover over an existing block's sibling inserter and observe there is no outline.
3. Without anything selected hover over the bottom new block inserter and observe an outline around it that appears off-center.

Expected behavior
There is a color change in the sibling inserter which indicates (subtly) the hover effect. In the new block inserter, there is no color change, so maybe that's why there is an outline? If we want to keep the outline to indicate the hover effect, then we should at least center it around the "+".

Screenshots

Desktop (please complete the following information):

• OS: OSX
• Browser FIrefox
• Gutenberg 5.4

[mapk]

Somewhat related to https://github.com/WordPress/gutenberg/issues/10519

[m-e-h]

This would be because this:

.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle:not(:disabled):not([aria-disabled="true"]):hover {

    box-shadow: none;

is more specific than this:

.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

    box-shadow: inset 0 0 0 1px #e2e4e7,inset 0 0 0 2px #fff,0 1px 1px rgba(25,30,35,.2);

The :not() is equal specificity on both, since it only counts the most specific value in the list.

So essentially it's

.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle

vs

.components-icon-button

Is there ever a case where a block-editor-inserter__toggle would exist without a block-editor-block-list__insertion-point-inserter? If not then that qualifier class isn't necessary .

Of course it may be intentional. Hard to tell.

[mapk]

Thanks for that investigation work @m-e-h!
@karmatosed or @jasmussen any word on why these + icons have different hover effects? Should they be the same?

[jasmussen]

On a meta-level, all icon buttons should have the same treatment. Which means the sibling inserter should have the same style as the buttons in the toolbar.

The reason it's the way it is now, is that the circular inserter button would look weird with that square hover style. Which is why it's the way it is now, with no hover background on the sibling, and a circular one on the left inserter.

A stopgap solution is to remove the box shadow hover style on the left inserter, then it's at least 50% more consistent. But perhaps a better solution is to re-do the hover style for icon buttons in general? Referring also to the icon buttons in the editor bar up top.

I'll think about how those can be tightened up, but that should probably be done as a subsequent PR.

[kjellr]

A stopgap solution is to remove the box shadow hover style on the left inserter, then it's at least 50% more consistent. But perhaps a better solution is to re-do the hover style for icon buttons in general? Referring also to the icon buttons in the editor bar up top.

I'll think about how those can be tightened up, but that should probably be done as a subsequent PR.

Fully agree- it might be nice to re-evaluate those hover states in general. (I'd also love to kill off that pile of :not() selectors if at all possible).

In the meantime, I opened #14936 to remove the box shadow for this icon.