WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 weeks ago

#47112 closed defect (bug) (fixed)

Multisite: Site names are truncated in the "My Sites" admin bar dropdown

Reported by: tferry Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.1.1
Component: Networks and Sites Keywords: has-patch has-screenshots
Focuses: ui, administration, multisite Cc:

Description

When using a multisite network, hovering over the "My Sites" item in the WordPress admin bar reveals a list of sites in the network. However, unless the site names are particularly short (~less than 15 characters) they are truncated and replaced with an ellipsis using CSS. The dropdown does expand when sites with longer names are added but the longest names are still truncated in this way.

I believe it would be useful to display the full name of all sites, especially as site "identifiers" may be placed at the end. For example, it might make sense to differentiate different language versions of the same site with the locale/language at the end. Unfortunately;

"My Longish Site Name - EN-US",
"My Longish Site Name - ES-ES",

becomes:

"My Longish Site Name - E...",
"My Longish Site Name - E...",

Which causes a bit of a UI problem. I'm sure there are other reasons to differentiate sites in this way too.

It seems that the cause of this truncation is down to the floated "blavatar" icon next to each site name pushing the text over, rather than a conscious decision to hide the end of the text.

Since there doesn't seem to be a reason to chop off the end of the text in this way, I'd suggest some slight CSS changes to allow the full text to be visible in the dropdown. I have attached a first-pass diff as a starting point to address this.

Attachments (3)

47112.diff (861 bytes) - added by tferry 5 months ago.
Updates CSS in wp-includes/css/admin-bar.css to show full site names in menu dropdown
My Longish Site Name.png (53.1 KB) - added by afercia 5 months ago.
My Longish Site Name - After.png (51.1 KB) - added by tferry 4 months ago.
Shows the "My Sites" menu with the patch applied

Download all attachments as: .zip

Change History (9)

@tferry
5 months ago

Updates CSS in wp-includes/css/admin-bar.css to show full site names in menu dropdown

#1 @johnjamesjacoby
5 months ago

  • Keywords needs-screenshots added

Hey @tferry! 👋 I think this is a great idea, and love that you’ve added a patch already.

These menus in particular have had several deep UX dives over the years, the result of which ended up cumulatively and unintentionally preventing much iteration from happening.

There is much that could be done, and I support making small improvements like this one, towards a greater goal of providing an improved site-picking experience.

I’m going to add the needs-screenshots tag to this, as I think a before & after will help quickly illustrate the problem and proposed solution to a wider audience. (You don’t need to be the person to make them, unless you’re willing & able.)

Great work!

#2 @afercia
5 months ago

  • Keywords has-screenshots added; needs-screenshots removed

Screenshots can be added also by committers :D

@tferry
4 months ago

Shows the "My Sites" menu with the patch applied

#3 @tferry
4 months ago

Hey @johnjamesjacoby 👋 thanks for the feedback, much appreciated! And thank you @afercia for the before screenshot too 🙌

I've uploaded an after screenshot, with the patch applied, to show what a difference it could make to users - hopefully a useful addition!

#4 @jeremyfelt
4 months ago

  • Keywords needs-design-feedback added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to 5.3

It looks like the ellipsis was added with the MP6 merge in [26072] as part of #25858. This was added to MP6 in that plugin's r769624 changeset.

Changing this makes sense to me as long as we're confident that the original issue (text overflowing the arrow on the right) remains solved.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 weeks ago

#6 @SergeyBiryukov
4 weeks ago

  • Keywords needs-design-feedback removed
  • Resolution set to fixed
  • Status changed from new to closed

[45826] missed the ticket:

In 45826:

Multisite: Remove truncation to allow clearers identification of longer site names

Previously the sites were truncated which meant longer names but with ending identifications were unable to be seen as different. This shows the full site name to allow easier understanding.

Props tferry, melinedo, afercia, jeremyfelt
Fixes: 47112

Note: See TracTickets for help on using tickets.