Admin bar integration and W3 Total Cache Minify conflict

Bug Description

After 1.7.0, a user in the forums reported that Site Kit’s admin bar integration and the minify option in the W3 Total Cache plugin conflict causing display issues in the admin bar integration:

In some themes, like WoodMart, CSS display issues also appear when viewing the site while logged in:

Disabling W3 Total Cache’s minify option resolves the issue in both cases (admin bar and broken site CSS). For the theme issue, disabling Site Kit’s admin bar via the following filter also restores the correct display of the site (while W3TC minify is enabled):

add_filter( 'googlesitekit_show_admin_bar_menu', '__return_false', 1000 );

Steps to reproduce

1. Setup Site Kit and W3 Total Cache with minify option enabled (Performance > General Settings > Minify > Enable) with defaults selected.
2. View a page of the site with stats (to show admin bar integration) while logged in
3. See broken admin bar integration
4. Activate WoodMart theme, see broken display of site additionally.

Screenshots

Correct display with default theme (W3TC minify disabled)

Correct display with Woodmart theme (W3TC minify disabled)

Additional Context

• PHP Version: 7.3.16
• OS: MacOS
• Browser: Chrome
• Plugin Version: 1.7.0
• Device: MacBook Air

Related support topic: https://wordpress.org/support/topic/new-update-breaking-my-site-css-on-admin-side/

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Admin bar should display correctly with Woodmart theme and W3 Total Cache Minify enabled.

Implementation Brief

• Using Admin_Bar/Admin_Bar.php

• Edit the register method and add a filter add_filter() with the following:

  • filter hook name w3tc_minify_css_enable
  • callback function which returns false
  • priority of 10
  • accepted arguments of 1

• Add a comment to explain why this filter has been added with @since n.e.x.t to add the version number when it was introduced

• Using assets/sass/components/adminbar/_googlesitekit-wp-adminbar.scss,

  • Update the background image styles of the .googlesitekit-wp-adminbar.hover .googlesitekit-wp-adminbar__icon selector along with the other selectors having the same styles to have the SVG background image as a base64 encoded string.

  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0MyA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggZD0iTTQyLjUgMThIMjJ2OC41aDExLjhDMzIuNyAzMS45IDI4LjEgMzUgMjIgMzVjLTcuMiAwLTEzLTUuOC0xMy0xM1MxNC44IDkgMjIgOWMzLjEgMCA1LjkgMS4xIDguMSAyLjlsNi40LTYuNEMzMi42IDIuMSAyNy42IDAgMjIgMCA5LjggMCAwIDkuOCAwIDIyczkuOCAyMiAyMiAyMmMxMSAwIDIxLTggMjEtMjIgMC0xLjMtLjItMi43LS41LTR6IiBpZD0iYSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGZpbGw9IiNGQkJDMDUiIG1hc2s9InVybCgjYikiIGQ9Ik0tMiAzNVY5bDE3IDEzeiIvPjxwYXRoIGZpbGw9IiMzNEE4NTMiIG1hc2s9InVybCgjYikiIGQ9Ik0tMiAzNWwzMC0yMyA3LjkgMUw0Ni0ydjQ4SC0yeiIvPjxwYXRoIGZpbGw9IiM0Mjg1RjQiIG1hc2s9InVybCgjYikiIGQ9Ik00NiA0NkwxNSAyMmwtNC0zTDQ2IDl6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgbWFzaz0idXJsKCNiKSIgZD0iTS0yIDlsMTcgMTMgNy02LjFMNDYgMTJWLTJILTJ6Ii8+PC9nPjwvc3ZnPg==");
  

QA Brief

• Setup Site Kit and W3 Total Cache with minify option enabled (Performance > General Settings > Minify > Enable) with defaults selected.
• View a page of the site with stats (to show admin bar integration) while logged in
• The admin bar should not be broken.
• Additionally, test with the WoodMart theme to see if the admin bar renders correctly.

Changelog entry

• Fix admin bar styles conflict with W3 Total Cache Minify functionality.

[asvinb]

@Hazlitte @eugene-manuilov @aaemnnosttv After spending some hours on that, I finally managed to find out the culprit in our CSS which is not playing nicely with minify. It’s the following line: https://github.com/google/site-kit-wp/blob/develop/assets/sass/components/adminbar/_googlesitekit-wp-adminbar.scss#L82

So without minification, the SVG (html decoded) markup is as follows:

<svg width="43" height="44" viewBox="0 0 43 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M42.5 18H22v8.5h11.8C32.7 31.9 28.1 35 22 35c-7.2 0-13-5.8-13-13S14.8 9 22 9c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C32.6 2.1 27.6 0 22 0 9.8 0 0 9.8 0 22s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#FBBC05" mask="url(#b)" d="M-2 35V9l17 13z"/><path fill="#34A853" mask="url(#b)" d="M-2 35l30-23 7.9 1L46-2v48H-2z"/><path fill="#4285F4" mask="url(#b)" d="M46 46L15 22l-4-3L46 9z"/><path fill="#EA4335" mask="url(#b)" d="M-2 9l17 13 7-6.1L46 12V-2H-2z"/></g></svg>

but the minified version is as follows:

<svg width="43" height="44" viewBox="0 0 43 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M42.5 18H22v8.5h11.8C32.7 31.9 28.1 35 22 35c-7.2 0-13-5.8-13-13S14.8 9 22 9c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C32.6 2.1 27.6 0 22 0 9.8 0 0 9.8 0 22s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#FBBC05" mask="url(#")" d="M-2 35V9l17 13z"/><path fill="#34A853" mask="url(#b)" d="M-2 35l30-23 7.9 1L46-2v48H-2z"/><path fill="#4285F4" mask="url(#b)" d="M46 46L15 22l-4-3L46 9z"/><path fill="#EA4335" mask="url(#b)" d="M-2 9l17 13 7-6.1L46 12V-2H-2z"/></g></svg>

There is a small diff between those 2 SVGs: Un minified:

fill="#FBBC05" mask="url(#b)"

Minified:

fill="#FBBC05" mask="url(#")"

Basically minify is replacing #b by #" and it’s messing the overall CSS output. So in the IB, I’ve suggested we base64 encode the SVG to prevent that. I tested it locally and it works fine.

[wpdarren]

QA Update: Pass ✅

Verified:

• With Site Kit and W3 Total Cache with minify option enabled. When I view a page with stats, the admin bar is not broken.
• Also tested with the WoodMart theme and the admin bar renders correctly.