Toolbar Enhancements: turn off labels / disable plugins / auto-hiding

[tomdevisser]

Something that can get pretty crowded quickly is the Toolbar. I have three suggestions for improving this:

• The option to turn on/off text labels next to the icons
• The option to disable / enable certain plugins to add things to the toolbar
• The option to enable / disable auto-hiding, where the toolbar hides until you move your mouse up (similar to what lots of people use with their Mac's dock)

I'd love to hear your thoughts.

[sabernhardt]

Thanks for the suggestions! Yes, the toolbar can get very crowded (#28983).

For now, a plugin could add any of these features. The first two options might be simpler within core, though, or at least simpler with changes to core.

1. Currently, the markup for the icons is not consistent. Each icon is added on a :before pseudo-element, but those can be on ab-item or ab-icon elements (plus the #adminbarsearch form). So a plugin probably would need to specify each link that contains an icon and set a width (which would need to change at mobile sizes), with overflow hidden. Adding something like ab-has-icon as a meta class and using ab-icon spans within core links could help with consistency.

2. While I think I prefer the option to add/remove plugin-related toolbar items to come from the plugin itself, that relies on plugin authors to offer that option. I know at least two Yoast plugins do this, though I'm not aware of any others. Identifying which toolbar items are added by core (in the PHP, not CSS) could also help determine which links should be hidden on mobile screens (#41288).

3. Auto-hide until scrolling up sounds like the suggestion on ticket:40544#comment:4 of using a script similar to headroom.js. Of course, that was in the context of small screens, not adding as an option for anyone. I do not (yet) think this would belong in core.