In Japanese environment, only two characters are displayed for the block name that appears when using select mode

[ddryo]

In a Japanese environment, the component button that appears when using select mode displays only two characters.

To reproduce

1. Set the language setting to Japanese.
2. Use selection mode.
3. Select any block.
4. Then, the block name is displayed only for 2 characters.

Expected behavior
It should look like the following image.

Screenshots
However, it now looks like the following image.

Solution
When "white-space: nowrap;" was applied to the component button (.edit-post-visual-editor .components-button), it became horizontal even in Japanese.

Verification environment

• Mac OS
• Google Chrome
• WordPress 5.4-RC3-47477

[ddryo]

The same problem occurs with the Replace button of the image block.

[waviaei]

This is not Japanese environment issue, because I can recreate it with site's language setting set to:

Korean

Chinese

and English (US)

All three are Mac OS and WordPress 5.4-RC3-47477. First two are Chrome, the last one is Firefox.

[aduth]

Thanks for reporting this issue. If you are able to, could you test to see if this is still an issue in newer versions of the Gutenberg plugin? Was it working correctly in versions of WordPress earlier than the 5.4 release candidates (WordPress 5.3.2)?

There is a significant redesign to this user interface in newer versions of the plugin (#19344) and this issue may have been affected as part of those changes.

I haven't yet debugged to confirm, but I'd wonder if this is in-part caused by a hard-coded width in the styling of these buttons.

[ddryo]

In the latest version of Gutenberg it was displayed without problems!

[ddryo]

However, we will be using 5.4 for a while, so if you can fix the bug, please do.

[skorasaurus]

Hi,

I'm closing this since you have reported that this has been fixed in the latest version of Gutenberg. Please reopen if you are still experiencing this.