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

[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.