AMP Plugin 1.1 Stable Release

The official AMP WordPress plugin’s v1.1 stable release is now available! A few highlights in this release include:

Stylesheet Processing Improvements

WordPress 5.1 was released with an update to Twenty Nineteen that unfortunately broke AMP compatibility for the theme due to a large increase in the amount of CSS. For this reason, the CSS tree shaker was further developed to reduce even more styles.

In the previous version of the AMP plugin (v1.0.2) the size of Twenty Nineteen’s style.css stylesheet after tree shaking (on the Gutenberg demo page) was 70KB. This was 20KB more than the 75KB budget imposed by AMP by itself, let alone the other styles that are also enqueued by core. With the improvements to the CSS processing in 1.1, the size of Twenty Nineteen’s style.css is reduced to 33KB: cutting the amount of CSS by more than half!

Note that the amount of CSS is still too much to also have the admin bar included on AMP pages, so you’ll have to keep that setting enabled to turn off the admin bar on AMP pages. See #1921 for a proposal to ignore the admin bar for AMP validation purposes.

To achieve these improvements in Twenty Nineteen, style processing was improved in the following ways:

• Add tree shaking for attribute selectors (#2080)
• Add tree shaking for :lang() selectors (#1901)
• Expand externalization of data: URLs in @font-face rules (#2079)

In addition to these improvements to reduce the amount of CSS, the tree shaker has also been improved to not over-aggressively remove selectors for elements that are dynamically added to the document, including classes for dynamically-created child nodes of AMP components (e.g. amp-carousel), the referrer and amp-viewer classes (#1959), and the amp-geo classes (#2017).

Something else to note is that the HTML comment with the manifest of the CSS included in style[amp-custom] will now only be added if WP_DEBUG or if an excessive_css validation error has occurred (#1843), which can help with the Lighthouse score.

Rebranded Template Modes

In this release the Paired mode has been rebranded as Transitional mode. One reason for this is that the classic mode was also a paired mode (where there are separate parallel URLs for the AMP version). But more importantly, the goal for this mode is to help facilitate a transition a site to being AMP-first, where there is no separate AMP-specific URLs. So the goal of the Transitional mode is to be a path to Standard mode (a full native AMP experience).

We’ve also settled on a plan for the Classic mode. Instead of deprecating it, we are rebranding it as a “Reader” mode (#2034). Since the Reader mode contains a basic template that does not match the active theme’s templates, the mode is similar to the reader mode that is found in some browsers. By rebranding it in this way we want to make it clear that the basic template design is not due to AMP being limited. In the Customizer you can also enable an “Exit Reader Mode” link to include in the header.

For now the Reader mode remains the default mode, but we plan do switch to Native mode being the default when a compatible theme is active. The Reader mode is the only turnkey solution provided in the plugin. In the Native and Transitional modes, we’ve also made clear that some development work may be required to use them for a given theme and plugins. We’ve also included a link to the ecosystem page to discover themes and plugins that are AMP-compatible.

Image Processing Improvements

A very common bug encountered when serving AMP from WordPress was images appearing horizontally stretched or otherwise overly sized on the page. We believe this to now be definitively fixed as of #2036.

Mobile Nav Menu and Submenu Toggles

Most themes include some custom JavaScript to support presenting the nav menu to mobile users. For this reason there is documentation for how to implement Toggling Hamburger Menus and Navigation Sub-menu Buttons. However, since the implementation looks very similar for most themes, we’ve included some new utilities for you to apply the changes purely with configuration in your theme via nav_menu_toggle and nav_menu_dropdown flags (#1745).

Experimental PWA Plugin Integration

The PWA feature plugin just had a big 0.2 release. The AMP plugin now integrates with the PWA plugin to replace direct service worker registration calls with the amp-install-serviceworker component (#1261). Any service worker logic registered on your site will be installed from your AMP page as well as your non-AMP pages.

Additionally, the AMP plugin specifically introduces service worker logic to implement three features which are demonstrated by the AMP boilerplate:

• cdn_script_caching: AMP CDN assets are cached with a stale-while-revalidate strategy. Enabled by default. (A benefit here is you can work offline once the service worker has cached them.)
• google_fonts_caching: Any requested assets for Google Fonts are cached and served with a cache-first strategy. Disabled by default.
• image_caching: Images loaded during browsing are cached and served with a cache-first strategy. Disabled by default.

To enable all three integrations, you can add the following to your theme (or add the service_worker argument to your existing amp theme support:

add_theme_support( 'amp', [
	'service_worker' => [
		'cdn_script_caching'   => true,
		'google_fonts_caching' => true,
		'image_caching'        => true,
	],
] );Code language: PHP (php)

To disable all three integrations (but not hooking into add amp-install-serviceworker) you can do:

add_theme_support( 'amp', [
	'service_worker' => false,
] );Code language: PHP (php)

In the future the service worker integrations available should implement more of the features provided by amp-sw. The service worker integration is deemed experimental because the PWA feature plugin is still in active development and is liable to change.

---

This release includes over 125 merged pull requests from over a dozen contributors. For the full changelog, see the release notes as well as the 1.1 milestone. You can install the plugin on WordPress.org. For general questions, please use the plugin support forum. For technical bug reports or feature requests, please use issues on GitHub.