WordPress.org

Make WordPress Core

Opened 8 weeks ago

Last modified 8 weeks ago

#47112 new defect (bug)

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 needs-design-feedback
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 8 weeks 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 8 weeks ago.
My Longish Site Name - After.png (51.1 KB) - added by tferry 8 weeks ago.
Shows the "My Sites" menu with the patch applied

Download all attachments as: .zip

Change History (7)

@tferry
8 weeks ago

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

#1 @johnjamesjacoby
8 weeks 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
8 weeks ago

  • Keywords has-screenshots added; needs-screenshots removed

Screenshots can be added also by committers :D

@tferry
8 weeks ago

Shows the "My Sites" menu with the patch applied

#3 @tferry
8 weeks 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
8 weeks 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.

Note: See TracTickets for help on using tickets.