Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS missing only when logged in #3299

Closed
joseph-farruggio opened this issue Sep 19, 2019 · 7 comments

Comments

@joseph-farruggio
Copy link

commented Sep 19, 2019

There are some styles that are being stripped from the page when i'm logged in.

Could this possibly be due to CSS tree shaking and also why the admin bar is not displayed?

@westonruter

This comment has been minimized.

Copy link
Member

commented Sep 19, 2019

That's likely. If you view source of the page it should indicate which styles are specifically excessive and thus being removed. You should see a CSS manifest in an HTML comment right before the style[amp-custom] element.

Nevertheless, please test the latest pre-release: v1.3-RC1. In this new version the admin bar is exempted from validation, so its CSS (and JS!) is not sanitized. See #3187.

@joseph-farruggio

This comment has been minimized.

Copy link
Author

commented Sep 19, 2019

After installing v1.3-RC1, some styles came back, but not all of them. The things that are still being excluded are:

  • two background images via inline CSS
  • inline background color on a form button
  • I have a honeypot form field with inline CSS to move the field out of the viewport
  • Styles affecting h2s. They are supposed to be center aliened, but for admins they are left aligned

What can I do to investigate this further?

@westonruter

This comment has been minimized.

Copy link
Member

commented Sep 19, 2019

Share the HTML comment that appears before the style element.

@joseph-farruggio

This comment has been minimized.

Copy link
Author

commented Sep 19, 2019

The style[amp-custom] element is populated with:
    75 B (24%): link#amp-default-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.3-RC1-20190918T205018Z-820046ad][type=text/css][media=all]
   600 B (5%): link#wp-block-library-css[rel=stylesheet][href=https://www.mightymoms.club/wp-includes/css/dist/block-library/style.min.css?ver=5.2.3][type=text/css][media=all]
 16637 B (58%): link#mightymoms-style-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/themes/mightymoms/dist/css/style.min.css?ver=20190420][type=text/css][media=all]
  2014 B (79%): link#yoast-seo-adminbar-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/plugins/wordpress-seo-premium/css/dist/adminbar-1210.min.css?ver=12.1][type=text/css][media=all]
   522 B: style[type=text/css]
    29 B: style[type=text/css]
     0 B: style[type=text/css]
  3203 B (67%): link#wpcom-notes-admin-bar-css[rel=stylesheet][href=https://s0.wp.com/wp-content/mu-plugins/notes/admin-bar-v2.css?ver=7.7.1-201938][type=text/css][media=all]
 26254 B (90%): link#noticons-css[rel=stylesheet][href=https://s0.wp.com/i/noticons/noticons.css?ver=7.7.1-201938][type=text/css][media=all]
   219 B: a.image amp-wp-5f3b862[href=https://www.mightymoms.club/toddler-care/toddler-curly-hair/]
    74 B: div.wp-block-spacer amp-wp-4532fbd[aria-hidden=true]
    87 B: section.subscribe-box mm-block full has-image amp-wp-a9a596c
    93 B: div.offscreen amp-wp-4bb72de[aria-hidden=true]
    76 B: span.amp-wp-dc2af39[visible-when-invalid=typeMismatch][validation-for=email-block_5cf890c27c1d5]
    74 B: div.wp-block-spacer amp-wp-3b36a7e[aria-hidden=true]
Total included size: 49,957 bytes (62% of 80,259 total after tree shaking)

The following stylesheets are too large to be included in style[amp-custom]:
  5334 B (22%): link#googlesitekit_adminbar_css-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/plugins/google-site-kit/dist/assets/css/adminbar.css?ver=1.0.0-beta.1.0.6][type=text/css][media=all]
    39 B: style[type=text/css][media=print]
   430 B: style[type=text/css]
   224 B: a.image amp-wp-89fc51d[href=https://www.mightymoms.club/baby-sleep/sleep-apnea-in-children/]
   228 B: a.image amp-wp-c81a4ac[href=https://www.mightymoms.club/family-halloween/baby-costumes/]
    73 B: p.amp-wp-421b998
   206 B: input#mc-embedded-subscribe.button amp-wp-935b37f[type=submit][value=Request Your Copy][name=subscribe]
    80 B: p.amp-wp-13076d9
Total excluded size: 6,614 bytes (26% of 24,898 total after tree shaking)

Total combined size: 56,571 bytes (53% of 105,157 total after tree shaking)
@westonruter

This comment has been minimized.

Copy link
Member

commented Sep 19, 2019

Excellent. The issue is the “Notes” module in Jetpack. If you turn that off that module then the CSS should no longer be a problem.

I have a PR open for Jetpack which includes direct support for this: Automattic/jetpack#13450

It looks like I need to open a PR for Yoast as well.

Nevertheless, instead of deactivating the Jetpack module you can also just add this code to your custom theme or plugin to mark the stylesheets as being in AMP dev mode:

add_filter(
	'amp_dev_mode_element_xpaths',
	function ( $xpaths ) {
		$ids = [
			'yoast-seo-adminbar-css',
			'wpcom-notes-admin-bar-css',
			'noticons-css',
			// Add more element IDs as desired.
		];
		foreach ( $ids as $id ) {
			$xpaths[] = sprintf( '//*[ @id = "%s" ]', $id );
		}
		return $xpaths;
	}
);
@joseph-farruggio

This comment has been minimized.

Copy link
Author

commented Sep 19, 2019

Dude. Thanks so much. Everything works as expected now.

@westonruter

This comment has been minimized.

Copy link
Member

commented Sep 19, 2019

Opened PR to add AMP dev mode support for WordPress SEO: Yoast/wordpress-seo#13502

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.