Support » Alpha/Beta/RC » Toolbar menu issue

  • Resolved jimisaacs


    I’m wondering with the new admin design, is it required for plugins who register menus to register them with icons?

    If not I would definitely test the admin menu without icons, when menus are text only, the padding looks messed up, and responsively it is very easy for the items to break a line. This line break not being accounted for, it makes the admin menu overlap with the side navigation on small screens, and impossible to click the sidebar items below the overlap.

    I’m not sure of the best solution yet, but here is a simple suggestion: If a plugin does not register an admin menu icon, use one as a default, and the responsive design may work a little better with those default icons in place (even if the same icon is repeated).

    An even simpler option would be to just not allow registering an admin menu without an icon, or to push all of the menus registered without an icon into one dropdown with a default icon.

Viewing 11 replies - 1 through 11 (of 11 total)
  • If there’s no icon defined by the plugin, it falls back to (I think) a gear.

    Just to be sure we are talking about the same thing. I am talking about the horizontal header admin bar. I have not seen a gear for plugin defined menus in this location.

    That’s the toolbar FYI 🙂

    And now your comment makes more sense, though I don’t see a weird space issue with toolbar menus without icons. Can you screenshot what you’re seeing? I’ve never thought the padding looked messed up.

    Along these lines, on older browsers, none of the dashboard icons display at all, but instead, for each icon is a small rectangle with a jumble of four numbers and letters in it. It just makes the dashboard awkward to look at. Looking through some of the code, the icons seem to be embedded in a font of a sort. Is there any chance they’ll change the icons to be image files so it’ll still look nice on older browsers?

    jimisaacs – You’re talking about the wrapping? That’s not a new issue, the weird wrapping, and it’s a known issue, and it’s actually kinda better than it was in the non MP6ified days. Also in this case you’re saying “When my screen is very very small, width wise, there’s a lack of spacing and some overlap.”

    Here’s 3.7:


    So this is actually an improvement to the vanishing act :/

    And on 3.8 the Jetpack stats get goobered:

    Though that said even on a mobile (where some menus vanish in a different way than a desktop resive) it’s still not perfect.

    Will there be a fallback? Probably not. When you switch something to JUST an icon, that icon has to represent what it is to all users, and if we make everything default to a gear, like we do for the admin sidebar, it would be too confusing on mobile :/

    tl;dr? They need to update their plugins for 3.8 sexiness.

    olyma – How old a browser are we talking about? IE 6 is SOL.

    BTW, did anyone look at the first screenshot? I heard no mention of the padding in that one. There are 3 text menu items there, not 1. “Performance” | “CloudFlare” | “SEO”

    As for this thread. Yes I think it’s getting a little TLDR. I was just reporting a problem with the current design, that’s it. To be honest I don’t really know why I am reading about the reasons of how it’s better than it was before.

    There are many different routes to fix this, and whether or not this thread turns into a discussion about all those possibilities, or a debate as to whether it will be left alone. I think I’m done here.


    Please do not put down old ways and appearances of doing things as unsexy and SOL. It’s not IE, but it is quite old. Old is very sexy too. From what you’ve said, I’d imagine that I’ll have to write another plugin to remove the icons and adjust the spacing for the legacy system. Thank you.

    I heard no mention of the padding in that one. There are 3 text menu items there, not 1. “Performance” | “CloudFlare” | “SEO”

    Yes, I know. I didn’t feel the need to restate what you said. If it makes you feel better, “Padding between toolbar menu items has always been a little janky, but it’s getting slightly better.”

    1) This has been a problem for a long time.
    2) We’ve made massive improvements in WP 3.8 (or with MP6, depending on your POV)
    3) The onus is on plugin developers who are choosing to add toolbar menu items to ensure their menus degrade gracefully within the confines of how the toolbar works
    4) This is nothing new with 3.8

    I know that last one is weird, but the point is that it’s not a ‘new’ alpha/beta issue, but one that’s been going on for a while, and even though WP allows for any dev to add those toolbar items, it’s always been on them to make it look right.

    Which is my point. The devs need to decide “Should my menu item vanish when on a mobile? Should it switch to an icon?” IMO, you don’t need quick access to those things on your phone, so I’d use wp_is_mobile and hide the menu all together. But I can’t make that decision for every developer. WP made it for it’s own items where it was logical and is leading by example there.

    The best WP might be able to do on the fly would be to give them a ‘max-width’ setting and kill the overflow, but that would be just as bad a UX as the mashing we’ve got :/

    Please do not put down old ways and appearances of doing things as unsexy and SOL. It’s not IE, but it is quite old.

    Sexy was a JOKE 🙂 It’s in reference to how we talk about MP6, and was not directed at your issue. Again. HOW old is old? Quite seriously, we don’t support IE6 in the WP admin anymore. If your browser’s out of date THAT much, you have other issues, and should really upgrade. Heck Google doesn’t support IE 8 anymore, and we still do (try to).

    Yay!!!!!!! I just updated to the latest nightly build and the dev folks fixed the icons to display right on my old system! Thank you dev folks!!!!!!!! :)))))))))))))

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Toolbar menu issue’ is closed to new replies.