Skip to content

Post featured image drop zone layout breaks with longer translations #65745

Open
@afercia

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:

Screenshot 2024-09-30 at 14 43 23

It doesn't work with other languages that may provide longer strings for the drop zone text. For example: German. Screenshot:

Screenshot 2024-09-30 at 14 44 04

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:

fi 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Needs DesignNeeds design efforts.[Package] Editor/packages/editor[Type] BugAn existing feature does not function as intendedl10nLocalization and translations best practices

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions