Heading level tooltip covers subsequent level

[mrwweb]

Description

When hovering over a heading level, the next heading level is covered. This is extremely inconvenient, because in practice this means that Heading 3—the most likely heading a user would want to select since Heading 2 is default and followed by 3—is covered by the Heading 2 tooltip as the cursor passes over Heading Level 2 on the way to Level 3.

Step-by-step reproduction instructions

1. Insert heading block.
2. Select heading level setting in block toolbar
3. Move cursor directly down toward Heading 3
4. Tooltip from hovering over Heading 2 obscures majority of Heading 3 button

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.2
• Firefox
• Windows
• Any theme / plugins

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[ramonjd]

Just checking, do you mean the black-background tooltip? I couldn't grok it from the screenshot in the description. E.g.,

I wonder if making the list horizontal might be acceptable 🤔

[jasmussen]

It looks like the component only supports positions above and below, but my first instinct would've been to show the tooltip to the right of the heading level. Showing horizontally is also an option. I think I actually saw some designs for this a while back.

[mrwweb]

@ramonjd I believe that in earlier versions of WP the heading menu was horizontal as you show, so I wonder about why it was changed. (My guess would that be that straight down motion is easier for users thanks to Fitt's Law: Straight down for a variable distance is easier than across at a variable angle.)

Other options:

1. Don't use a tooltip
2. Spell out "Heading" (so also no tooltip)

I think I might really like option 2?

[ramonjd]

Spell out "Heading" (so also no tooltip)

Do mean remove the icons like this (but better looking) 😄 ?

[mrwweb]

@ramonjd You got it! It seems that space wouldn't be a concern there, and I could imagine it might even be slightly clearer to folks.

[t-hamano]

I would like to suggest that this issue be considered at the same time as the site title block. The Site Title block has both an icon and a title.

[t-hamano]

I also discovered that the heading icons used in the site title block and heading block are made in size 20 instead of the basic size 24 of the other icons.

I reported this in #50520.

[carolinan]

In #46003, I proposed using the design from the site title block, where the name of the tag is always visible, but based on feedback I changed it back to the design that only uses the icon. Happy to change it again.

[t-hamano]

Update: In #50856, all heading-level icons have been added to the icons package. These icons may also be available for this issue.

[mrwweb]

@carolinan I really love that PR you made! Changing the heading level selector to show the icons + text label seems like an especially good idea given that the list includes "Paragraph" for the Site Title.

So it feels like #46003 would resolve this issue and have a ton of other benefits (clarity, no tooltip, shared compontents, filtering heading levels).

[afercia]

This problem was recently reported also on #55927 and it is still a clear issue for a good user experience. I kindly disagree with the design feedback provided on #46003

Having both the icon and visible text seems to be the most appropriate solution here. The icon represents a visual hint that may help some users, while the visible text is universally accessible to everyone.
I'd also like to remind that icon-only buttons have inherent usability and accessibility problems. Their usage should be limited to only the cases where there isn't enough space to use visible text. This is not the case, as there's a lot of space to show visible text.

[afercia]

Aside: For the site title this dropdown options also include a button for a paragraph. In this case, I'd argue the dropdown menu name 'Change level' isn't ideal: