Frontend toolbar CSS conflict with some themes

[keraweb]

There are themes available that add some global styling that could interfere with the WP toolbar on the frontend.
This could be fixed by adding some reset/basic CSS for the toolbar.

Example theme: Mesmerize ​https://wordpress.org/themes/mesmerize/

This theme adds various CSS in the toolbar that might affect some menu items.

For example ::before CSS for all items that sets the display as a table. This could cause some indentation issues when adding elements like form types or icons to menu items.

Same with text color.
A simple color: inherit for the #wpadminbar * {} selector would fix any color overwrites for global elements like label etc.

[keraweb]

More info:

This bug came up with a bug report on one of my plugins.
First I wanted to fix this in my plugin but as I was debugging the CSS I noticed plugins like Yoast SEO also have the same issue with such theme styles.
That is why I think it's better to create a proper fix in WP core.

[sabernhardt]

inherit text color

[sabernhardt]

no default color for toolbar text

[sabernhardt]

inheriting text color

[sabernhardt]

@keraweb Thanks for the report!

I think adding a default text color could help with other plugins' toolbar information, too, and inherit seems to work better than setting a specific color. You still would need to adjust your plugin's styles a little (for text on buttons and against white).

However, I would rather avoid adjusting core styles to correct a theme problem. ​The clearfix hack does not belong on elements without specifying a class, especially div or ul. So a few themes break more than the toolbar with that. The clearfix splits up the Yoast notification bubble and pushes the search input down, and it also means that the alignleft and alignright classes for floating media elements (in the content) are cleared every time.

[keraweb]

Hi @sabernhardt

Thanks for your quick actions!

What are your thoughts about adding default form styling for the toolbar?
I understand that WP core itself doesn't have any form elements in the toolbar but various plugins have. This would allow them to use the core UI instead of each plugin having to create their own CSS.
I believe this would benefit the end user in that plugins will more likely choose the same UI.

About the clearfix, totally agree with you, this is bad practice IMO. I will report this to the theme author.

Cheers, Jory

[sabernhardt]

I'm still unsure about adding form styling in core. I have not determined whether that might help with the search box selectors. However, that goes beyond the original scope of this ticket anyway.

So I set the milestone for the color reset, and if there is interest in adding form element styles, we could open a new ticket for that enhancement.

[sabernhardt]

With Beta 1 on Tuesday, I'm moving this to Future Release.