The new 'Switch to draft' design doesn't take into consideration longer translation strings

[afercia]

Description

Looks like the new design and placement of the 'Switch to draft' button took into consideration only the default English language. The button is now stacked horizontally close to the 'Move to trash' button. In English, the buttons text is short enough to fit within the buttons:

However, it's a pretty known fact that most of the other languages may have longer strings. It's just that other languages have longer words. A couple quick examples:

Italian:

Geerman:

In these cases, the text overflows the buttons and may also get off screen.

I do remember a very similar case occurred in the Customizer a few years ago. A new design provide two buttons, stacked horizontally within the customizer sidebar. It proved to fail with languages other than English. @karmatosed @melchoyce may know more.

WordPress core has a good tradition of making sure the UI is usable and text is always readable in all languages. It would be great to see some more familiarity and knowledge about this kind of issues in the Gutenberg project as well.

Design should always take into account other languages. Ideally, other languages should be tested since the beginning in the design mockups. Truncating text is not an option. In this specific case, the only option I can think of is to just stack the two buttons vertically and make them full width.

Step-by-step reproduction instructions

• Go to the post editor.
• Publish a post.
• Observe the editor Settings sidebar > Post
• Observe the 'Switch to draft' and 'Move to trash' button look okay in English.
• Switch to WordPress to another language, e.g. Italian, German, etc.
• Observe that in most of the cases the text of the 'Switch to draft' and 'Move to trash' buttons overflow and in some cases it's also off screen.

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

[afercia]

Can we try to fix these for the 6.3 release, please? Cc @annezazu ❤️
It would only need a different design and some CSS adjustments.

[annezazu]

Just am catching up after some time off. Good call out. I am going to add this to the 6.3 board for consideration as we're doing an async triage session today ahead of beta 1 tomorrow.

[mrleemon]

I tried WP6.3 beta2 and I can see this issue when setting the site language to Spanish.

[t-hamano]

One idea I have is that if the text of any of the buttons is likely to cause overflow depending on the language, it should automatically wrap and display each button at 100% width. This can be achieved with CSS only.

Is it undesirable for the layout to change depending on the language?

3aec34b1253f07be8b366f594c957c96.mp4

[carolinan]

I like this suggestion, it would be good to get the opinions of @WordPress/gutenberg-design

[jameskoster]

Fixed in #52249.

[mtias]

Thanks for raising this!