WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 2 weeks ago

#44438 new defect (bug)

Prevent Admin Bar Items From Wrapping if There's More Items Than the Available Adminbar Width

Reported by: KZeni Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.6
Component: Toolbar Keywords: needs-testing has-patch has-screenshots
Focuses: ui, administration Cc:

Description

I have a few sites where the number of plugins, etc. being used on the site has lead to the admin toolbar on a desktop browser wrapping to a second line. This then makes it so the drop down menu for the first row of items can't be accessed since the user then has the hover be hijacked by the second row item which is overlaid on top of the resulting drop down. This seems like a rather serious usability bug that should be addressed.

I have a proposed patch which would make the desktop size of the admin bar use flex layout in conjunction with overflow & text-overflow to make it so this problem isn't encountered. Meanwhile, the tablet & mobile sizes for the admin bar are unaffected due to the @media query being used to isolate this to 782px or wider browsers).

  1. Screenshot of before (current WordPress behavior): https://cloudup.com/cXkSHQN1UbX
    • Notice that moving the mouse down on the My Sites drop down can be intercepted by the Forms menu & the same can be said for the Performance menu being intercepted by the secondary menu items; this becomes more of an issue with narrower browsers & with more items in the admin bar.)
  2. Screenshot after (using the exact CSS I'm proposing here): https://cloudup.com/cEO--F1sMsC
    • Everything is accessible, nothing is wrapping, and the icons are still visible where the full text cannot be shown; was better than before visually & in terms of usability.

Attachments (2)

Patch for admin-bar.css (808 bytes) - added by KZeni 4 weeks ago.
Simply what needs to be added to wp-includes/css/admin-bar.css and then also included in the resulting admin-bar.min.css (probably before the first @media query in the CSS)
Updated patch for admin-bar.css (1.2 KB) - added by KZeni 2 weeks ago.
Updated version of the original Patch for admin-bar.css to make it friendly for admin bars which don't have too many items shown.

Download all attachments as: .zip

Change History (6)

@KZeni
4 weeks ago

Simply what needs to be added to wp-includes/css/admin-bar.css and then also included in the resulting admin-bar.min.css (probably before the first @media query in the CSS)

#1 follow-up: @joyously
4 weeks ago

It's not exactly usable if you don't know what those items are.

I agree that it's not very usable the other way either.

The problem is that the admin bar should be for admin items, but plugins put other stuff in there. That's why themes (in the .org repo) are not allowed to affect the admin bar. Plugins should have some restrictions also.

#2 in reply to: ↑ 1 @KZeni
4 weeks ago

Replying to joyously:

Saying it's not very usable means the mobile admin bar for WordPress isn't very usable since that's just this icons whereas this is the icons in addition to having as much of the text shown as possible.

I don't see how this would be harmful when / if the restriction of plugins adding items to the admin bar takes place, and it does make it so the admin bar is no longer broken by adding a happy medium between the mobile & full admin bar.

Again, here's a screenshot of before: https://cldup.com/WnDrBXEPNW.png

And here's a screenshot after: https://cldup.com/TdiUj6eaYR.png

I checked this in the current version of Safari, Chrome, and Firefox so far without issue.

Aside from more thorough browser testing, I don't see any reason this shouldn't be moved into the next WordPress release... do you? What are the next steps here?

Last edited 3 weeks ago by KZeni (previous) (diff)

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


3 weeks ago

@KZeni
2 weeks ago

Updated version of the original Patch for admin-bar.css to make it friendly for admin bars which don't have too many items shown.

#4 @KZeni
2 weeks ago

Okay, I tested to see how my patch would affect admin bars when there weren't too many items shown, and it had the secondary menu (user menu, etc.) left aligned in the item list rather than right aligned like you'd expect. As such, you'll find https://core.trac.wordpress.org/attachment/ticket/44438/Updated%20patch%20for%20admin-bar.css is the updated patch to use which fixes this issue.

Here's screenshots of the results with this updated patch.

Again, here's what WordPress currently does (overlapping items hijack hover and makes things inaccessible, and the user experience is generally broken): https://cldup.com/KFuta_EkKa.png

Too many items to show with patch (at least show the left icon & truncate text as needed): https://cldup.com/YuwkAezcuG.png

Fewer items shown with patch (shows normally): https://cldup.com/rgm8FakWZ4.png

Should be ready for testing & implementation now.

Note: See TracTickets for help on using tickets.