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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demonstrate addition of AMP compatibility to the core bundled themes #307

wants to merge 3 commits into
base: 4.9


Copy link

@westonruter westonruter commented Jun 21, 2018

This PR demonstrates how AMP compatibility can be added to the themes that are bundled with core, namely:

  • Twenty Seventeen
  • Twenty Sixteen
  • Twenty Fifteen

馃憠 In general the changes in this PR are not needed if you're using a child theme of one of these themes because the AMP plugin itself applies the changes via the AMP_Core_Theme_Sanitizer , but the code is useful in particular if you have forked a core theme and want to apply the changes to your theme. If you want to try out the changes, you should disable the AMP_Core_Theme_Sanitizer in your install via:

add_filter( 'amp_content_sanitizers', function( $sanitizers ) {
    unset( $sanitizers['AMP_Core_Theme_Sanitizer'] );
    return $sanitizers;
} );

Also compare with AMP support added to Underscores: Automattic/_s#1286. The changes are also generally available in WP Rig.

Remember that custom JavaScript is not allowed in AMP, and the AMP plugin will sanitize all of it out to create a valid AMP response. Therefore, the baseline experience when enabling AMP on a theme is that it behaves as if JavaScript is disabled in the browser. Therefore, most of the work entailed is to progressively enhance a theme for AMP to restore features that were lost during the graceful degradation to AMP. These enhancements for AMP generally involve the use of modern CSS selectors (e.g. :focus-within), AMP components (e.g. amp-position-observer), or AMP scripting via amp-bind.

The changes applied to the core themes include:

  • Add an is_amp() function to wrap the is_amp_endpoint() call, after the requisite function_exists() check.
  • Add minimum-scale=1 to the meta viewport; remove redundant @viewport CSS at-rule since redundant with meta and AMP doesn't allow it.
  • Use amp-bind to manage the expanded state of the (hamburger) nav menu on mobile.
  • Inject expand/collapse buttons for sub-menus via the walker_nav_menu_start_el PHP filter instead of via jQuery, and using amp-bind to manage the expanded state of the sub-menus.
  • Simplify logic for expanding sub-menu items using sibling selector instead of duplicating class name on ul.
  • Only hide sub-menus when no-js if not AMP since they will be shown in AMP.
  • For sub-menu dropdowns which are displayed via the :hover pseudo-class and via the JS-toggled .focus classes, use the :focus-within pseudo class to accomplish the same as .focus (though note that it is not supported in IE/Edge).
  • Skip outputting the javascript detection script which replaces no-js with js on the html element. Custom JavaScript is not allowed in AMP so this script would be removed anyway.
  • Split apart the function for enqueueing scripts and styles into two separate functions, and short-circuit the script-enqueueing function if it is an AMP response, since custom JS is not allowed in AMP and most of the JS functionality gets implemented in AMP:
    • html5: This script is only needed by IE8 and below, which has negligible marketshare now.
    • skip-link-focus-fix: Similarly, this script is only needed by IE11 which has a small marketshare, so it is not implemented in AMP.
    • keyboard-image-navigation: AMP does not provide a way to listen to keydown events.
    • global/functions This largely for nav menus which are implemented in AMP via PHP filters and amp-bind. Fixed sidebar is approximated in AMP. There is no AMP implementation provided for onResizeARIA or belowEntryMetaClass.

Theme-specific changes include:

Twenty Fifteen

  • Force the admin bar to be hidden on the frontend in AMP, since the style.css and admin-bar.css combine to be over 50KB even after the plugin does CSS tree-shaking.
  • Use PHP to determine whether the menu button should be added to the page, instead of using JS to hide it at page load.
  • Emulate sticky sidebar in AMP via position:sticky.

Twenty Seventeen

  • Set the quotes icon in blockquotes using PHP the_content filter instead of using jQuery.
  • Use built-in AMP.scrollTo() instead of requiring the jQuery scrollTo plugin.
  • Implement sticky nav by adding a second hidden copy of the top menu and then showing it when scrolling out of view of the original nav menu via amp-position-observer and amp-animation. With this change the original nav menu can remain statically positioned in the document.
  • Add background-fixed class to HTML element in PHP since fixed background images are supported by most browsers. Likewise, add svg to HTML element instead of no-svg when in AMP since inline SVG is supported by most browsers.
  • Add the has-header-video body class in PHP instead of JS.
  • Add custom header selectors to target amp-img and amp-video.


westonruter added 3 commits Jun 19, 2018
@westonruter westonruter force-pushed the core-theme-amp-support branch from 96998ad to be86d35 Jun 21, 2018
Copy link

@rheinardkorf rheinardkorf commented Jun 26, 2018

@westonruter does amp need to be added via add_theme_support ?

Copy link
Collaborator Author

@westonruter westonruter commented Jun 26, 2018

@rheinardkorf no, not as of v1.0-alpha. There is an admin screen for you to select the desired mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants