Global styles panel header buttons text overlaps when 'Show button text labels' is enabled

[afercia]

Description

When the 'Show button text labels' preference is enabled, the text of the buttons in the Styles panel header overlaps, making thte text barely readable.

Screenshot from trunk:

This appears to be a regression from WordPress 6.5, where the text is readable. Screenshot:

I think the recent addition of the is-compact CSS class and styling to the buttons hasn't been tested for 'Show button text labels'. Regardless, the buttons text should never overlap.

Worth noting the horizontal space in the panel header is very limited. Placing there a title, 3 action buttons and a close button doesn't seem ideal in the first place.

On the other hand, the 'Show button text labels' preference seems to be often neglected and missed during the design and testing phase. I'd love to see this feature being treated as a first-class citizen in this project at the point that I'd think anydesign for new feature should provide design and mockups for 'Show button text labels' as well.

Note: I created a new GitHub label [Feature] Show button text labels, similarly to other used preferences like [Feature] Distraction Free to better track issues related to it. Thre have been several issues and PRs to remediate to breakages of buttons with this prefrence enabled that are all scattered around and difficult to search for.

Step-by-step reproduction instructions

• Go to the Site editor > Options > Preferences > Accessibility, and enable the 'Show button text labels' preference.
• Open the Styles panel.
• Observe the buttons text overlaps.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Yes

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

Yes

[jasmussen]

What design feedback are you looking for?

[afercia]

@jasmussen as I see it:

• The root problem is that all those button shouldn't be placed there in the first place.
• I'd appreciate the design team to provide design and mockups also for the 'Show button text labels' preference, when relevant, as this is an integral part of the interface.

Too many buttons in a panel header that shoud likely only contain the title and the X close button:

[jasmussen]

Ah, I agree, the text-labels only mode is in a poor state, the block toolbars especially need a lot of attention, and many missing pieces in the inspector. I'm asking because this seemed to report mainly a regression, which is hopefully easy to fix in time for 6.6. Is this meant to be a larger issue around the expanded topics? In that case, how do you feel about dropdowns for handling overflow?

[afercia]

I think the only real solution to this problem is to ust stop placing buttons in the panels header.
See also #61553 Ideally, the panels header should only contain:

• The panel title
• The Close button, if any

Other controls should not be placed there because the available space is not enough when 'Show buttons text labels' is enabled. The length of the visibel text is really unpredictable. As such, the UI of the panels should provide another spot where visibel text can be fully readable and flow as necessary.

I think this specific regression can be remediated in time for 6.6 but a real solution would be to make any desing take into account the 'Show buttons text labels' preference.

the text-labels only mode is in a poor state

Unfortunately, yes. I'd love to see it prioritized, added to design guidelines and be reviewed for any issue/PR that touches the related sections of the UI.

[afercia]

Of course, the problem is even more noticeable with languages other than English, as they often use longer strings. E.g.: Italian:

Not sure a CSS fix would be sufficient in this case. Wondering whether the panels should have a 'subheader'.