Post featured image drop zone layout breaks with longer translations #65745
Description
Description
When dragging an image onto the Post featured image drop zone, the button to set an image is replaced with the drop zone.
The visible text string changes from:
Set featured image
to:
Drop files to upload
, preceded by an icon.
This works in English because the two string have a similar length. Screenshot:
It doesn't work with other languages that may provide longer strings for the drop zone text. For example: German. Screenshot:
The drop zone uses some absolute positioning so that its height is indirectly determined by the height taken by the initial button, the 'Set featured image' one. This button has a fixed height of 40 pixels.
As such, when a longer string takes multiple lines, the drop zone height is still 40 pixels. In this case, the layout isn't great. Also, the icon should use a flex-shrink: 0
as it may get smaller depending on the width taken by the string.
A note on design and testing.
I'm not sure I can support this part of the redesign of the post summary. Trying to achieve a 'pixel perfect' layout in a perfect, 'holy grid' may work when there is full control on the length of the content. However, WordPress doesn't have such control. It's important to consider the design process should prioritize content and design around it, not the other way around.
It clearly appears that longer content hasn't been taken into consideration. I would like to remind everyone that in a project like WordPress, that is translated to several languages:
- Any UI should be designed taking longer translations into consideration since the beginning.
- More importantly, any new UI should be tested with other languages that typically provide longer strings.
WordPress has a long tradition, the languages that typically provide longer strings are well known. Testing with these languages should be part of the development and review process. I'd love to see this point included in both the design and development guidelines.
It is also worth noting that before the Post Summary redesign, the Featured image UI provided way more vertical space. The drop zone was bigger, which is also a good usability pattern. Instead, the new drop zone is smaller, its height is only 40 pixels and that's only for 'visual' reasons that didn't take into consideration fucntionality, good usability and localization. Screenshot from WordPress 6.5:
At the very least, I'd recommend to redesign the Post featured image UI to have a larger height. As mentioned earlier, a 40 pixels height isn't great for longer translations and also not great for usability.
Step-by-step reproduction instructions
- Swith the WP admin to German.
- Edit a post and drag an image over the Post featured image drop zone in the settings panel.
- Observe the drop zone text goes in two lines and it doesn't look great.
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
Activity