Block Styles button labels are truncated

[erickyle]

Description

The block style button label is constrained to a small number of characters. Hovering over the block style button does reveal a preview with the full name, but this forces the user to hover over each of the block style buttons to reveal the full name. The built-in blocks and block styles tend to use single-word, short labels, so the issue may not be readily apparent with a stock configuration.

It may be better to present the block style buttons as a single column with a much larger number of characters supported, versus the two-column button layout that is currently in use. Note that the screen capture below uses a a transparent variant of the --wp-admin-theme-color--rgb CSS custom property.

This issue is related to #37039

Step-by-step reproduction instructions

1. Insert a block that has block styles with long names associated with it.
2. Inspect the block styles in the settings panel.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.0-beta1-53168
• Twenty Twenty-Two theme active
• WordPress Beta Tester is the only plugin installed
• Gutenberg plugin is not installed

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]

Good ticket, thank you, I'll be curious to hear what others think as well. I personally like that the button size encourages short and concise labels, and that the overall footprint of the style interface is balanced against design tools below, making the interface a set of complementary shortcuts rather than the primary block interface.

I wonder if there's a way to automatically adjust the interface size, such as if more than n styles are detected, it becomes a full-width dropdown? 🤔

[erickyle]

Glad to help. I would be fine with leaving it as-is if there was a way to override the truncation easily. I wonder instead of truncating the string before output, if it would not be better to truncate it after output using CSS.
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

[mrwweb]

I'll be curious to hear what others think as well. I personally like that the button size encourages short and concise labels

I do not like it and find that it's hard to write descriptive enough labels in the available space. I wouldn't say "encourage" but rather "enforce." I honestly think it should just be reverted to show the whole label, but some kind of override would be acceptable. If there is a huge concern about the space it takes up, using a select menu or a scrollable container would be an improvement over the current implementation (though a scrollable container would have its own downsides).

Since this is a developer opt-in feature, it feels like it should be left to the developer to make this decision. I agree that shorter labels are better, but the available space really short.

I spend a lot of time and through trying to write short labels and I can't even come close to fitting in the available space at least half the time. Here are some recent examples of styles that I don't think I could shorten any further that are truncated:

• Circle Gradient: Brick to Blue ("Circle Gradi…")
• Circle Gradient: Yellow to Teal ("Circle Gradi…")
• Not Stretched ("Not Stretche..." - In this case the ellipsis truncates the word when it wouldn't have to without it!)
• Centered Not Stretched ("Centered Not…")
• Small Grayscale Logos ("Small Graysc…")
• Snug to Heading ("Snug to Head…")
• space-around Alignment ("space-around..." - See Add space-around justification option to Buttons Block #42536)

Especially since it's not possible to combine Block Styles (#14598), it's more likely to need longer, composite names like the "Small Grayscale Logos" or Circle Gradient variation styles above.

Further, it's possible that the tooltip avoids a formal accessibility failure, but I think most of the logic in a few recent articles still applies.

From "The Ballad of Text Overflow":

If text has been truncated with text-overflow, then this is a loss of content, and therefore an instant failure of 1.4.10.

See also: ["Text Overflow: Ellipsis Considered Harmful"](Text-overflow: ellipsis considered harmful).