Demonstrate addition of AMP compatibility to the core bundled themes

[westonruter]

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.

Examples

• https://weston.ruter.net/?amp: Twenty Seventeen running in AMP paired mode.
• https://make.xwp.co/?amp: Child theme of Twenty Fifteen running in AMP paired mode.

[rheinardkorf]

@westonruter does amp need to be added via add_theme_support ?

[westonruter]

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