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

Ignore admin bar for AMP validation purposes #1921

Open
westonruter opened this issue Mar 2, 2019 · 7 comments

Comments

Projects
None yet
4 participants
@westonruter
Copy link
Member

commented Mar 2, 2019

The inclusion of the admin bar was included in AMP via #1205. However, the amount of admin bar CSS is so large (20KB) that it takes up about 40% of the total allowed CSS in AMP (50KB). For this reason it very frequently causes excessive_css validation errors when an authenticated user is browsing the frontend. As opposed to providing this option or trying to automatically disable the admin bar when there is too much CSS (#1800), we could instead just exclude admin bar CSS (including any styles that depend on admin-bar) from being considered in the 50KB budget. This can mean that an authenticated user will often be served an invalid AMP page, but this is of little importance since the unauthenticated visitor (including crawlers) will only get the valid AMP pages for indexing. The admin bar has an indicator of AMP validity already, so users who have the AMP validator browser extension would just need to trust the admin bar status rather than the browser toolbar, or else open the URL in an incognito window to double-check.

In other words, we could allow "dirty AMP" for the sake of the admin bar for authenticated users. Note that we already do this in the case of the Customizer preview.

Some ideas:

  • Remove checkbox from settings screen to hide admin bar in AMP. If anyone wants to do this, they can easily do so via a show_admin_bar filter along with a check for ! is_amp_endpoint(). Most users will benefit from the admin bar. Decisions not options. (Done in #2346 & #2405.)
  • Suppress admin bar from being shown during validation requests. Done in #2500.
  • Add note in admin bar submenu for AMP that page is not valid due to admin bar, but otherwise it is OK.
  • Add link to AMP admin bar menu to navigate to the current URL without the admin bar. A query param like hide_admin_bar can be introduced. This URL can also automatically add #development=1.
  • Consider removing the amp attribute from the html element when the admin bar is showing to prevent the AMP Validator extension from screaming at the user.
@swissspidy

This comment has been minimized.

Copy link
Collaborator

commented Mar 2, 2019

Sounds like a plan!

@westonruter westonruter added this to the v1.1 milestone Mar 14, 2019

@westonruter westonruter changed the title Exclude admin bar CSS from being included in amp-custom styles Ignore admin bar for AMP validation purposes Mar 15, 2019

@westonruter westonruter modified the milestones: v1.1, v1.2 Mar 23, 2019

@westonruter westonruter added the CSS label May 15, 2019

@westonruter

This comment has been minimized.

Copy link
Member Author

commented May 15, 2019

For perhaps a better alternative to this, see #2322.

@westonruter

This comment has been minimized.

Copy link
Member Author

commented May 15, 2019

Also, this could be made obsolete especially for Native mode sites by #2326, as excessive CSS could be rejected from sanitization by default.

@felixarntz

This comment has been minimized.

Copy link
Collaborator

commented May 15, 2019

I agree #2322 would be a better alternative - if there is excessive CSS, the admin bar CSS should be removed first. We would need to ensure though that we still keep the user informed about that. Also, what would happen to the admin bar markup (that would then appear broken)?

@swissspidy

This comment has been minimized.

Copy link
Collaborator

commented May 15, 2019

The suggestion here is to remove the admin bar as a whole in those cases, not just the admin bar CSS.

@amedina

This comment has been minimized.

Copy link
Member

commented May 16, 2019

I agree. As a user I'd like to have the Admin bar in cases where there is no excess CSS since it provides easy access points that should be there if possible, and can automatically be disabled if needed. This way the prioritization of stylesheets would apply only for all the other site style sheets.

@westonruter

This comment has been minimized.

Copy link
Member Author

commented Jun 4, 2019

Something else that comes to mind here is that when performing a validation request, we should prevent the admin bar from being shown at all. In other words:

--- a/includes/validation/class-amp-validation-manager.php
+++ b/includes/validation/class-amp-validation-manager.php
@@ -212,6 +212,8 @@ class AMP_Validation_Manager {
 		}
 
 		if ( self::$should_locate_sources ) {
+			add_filter( 'show_admin_bar', '__return_false', PHP_INT_MAX );
+
 			self::add_validation_error_sourcing();
 		}
 	}

This would actually align the behavior of user-initiated validation requests with validation requests performed via wp amp validate-site, which makes requests as an unauthenticated user and thus the admin bar is not displayed.

With that in place, then what remains is to ignore validation errors caused by the admin bar when rendering the page outside the context of a validation error, and thus allowing the admin bar to be included even though otherwise it causes the page to be strictly invalid AMP.

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