AMP Plugin Release v1.0-alpha1

This early release, v1.0-alpha1, is a little present to those who’ve been testing, playing and adopting AMP into their WordPress websites: We’ve got even more support for AMP theme support, including support for core themes, a big update to the compatibility tool and extended Gutenberg support! 🎉

It’s still early and we’re not done with all of these features yet, but we’re still excited. Just as Matt Mullenweg once lamented on the first major milestone release, we shouldn’t be “afraid of getting a rudimentary 1.0 out into the world”:

Shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work.

Hopefully you’ll test out some of these great new features we’ve built, and help us iterate for the final v1.0 later this summer!

WordCamp Europe

Also, a mini announcement for the AMP plugin team: Several members of the XWP team will travel to Belgrade for WordCamp Europe 2018.

Here’s the skinny on some of what we’ll be doing:

• We’ll be participating in Contributor Day and WCEU sessions, we hope you’ll join! (Tickets are still on sale for those interested!)
• We’re sharing a booth with Google to talk about efforts like AMP, Tide and other open source projects helping build a better web. Come stop by the main sponsor hall and say hi!
• Also, one of XWP’s architects, Thierry Muller, will be presenting at WCEU on the state of what you can do with AMP and WordPress (similar to what he showed at Google I/O just a few weeks back.) It’s going to be great!
• Product Owner Leo Postovoit (hey, that’s me!) is co-leading the Privacy group for Contributor day and TA’ing at Heather Burns’ GDPR workshop.
• Finally, for those interested in hearing partly how we approach design, product designer Joshua Wold will be leading a workshop on Sketching at WCEU.

We’d love to chat about all things WordPress, including AMP, and hope to see you there.

AMP v1.0-alpha1 release

Just after we released v0.7, we kicked off work on v1.0. This release includes the changes from the minor release v0.7.1 and the features listed in our changelog.

Call for alpha testers

We need your help to test the next version of the AMP plugin v0.1-alpha; download the pre-release (amp.zip) and take it for a spin.

While we have tested v1.0-alpha1 on our own sites (in fact, xwp.co is running as a live, tree-shaken, Native AMP website to you and the rest of the internet; and make.xwp.co is running AMP in paired mode) and we want you to take it for a spin, this software is still in development. We strongly recommend you not yet ship this to your production site.

Found a bug? Have an idea for a feature request? Please open an issue to describe on the Plugin Repository.

1. Extended AMP theme support.

To properly meet AMPhtml compliance, you need to follow stricter rules for CSS, Javascript and markup. This isn’t easy to do without the right guidance or tools to get you there, and we’re working hard to make enabling and using AMP easier for your WordPress site: Our goal is to make AMP integration seamless.

What we’ve come up with for this release is some pretty cool stuff: The AMP plugin inlines your WordPress site’s CSS to each page load to prevent render blocking by making an additional request for each stylesheet. It makes for blazing fast page loads, but there’s a catch—CSS has to be under 50kb to be compliant.

To make AMP theme support (introduced in v0.7) even better, we’ve brought runtime CSS minification, !important replacement, and tree shaking to AMP rendering to make the smallest page possible.

If “tree shaking” wasn’t already an awesome term to describe what’s happening, it’s sometimes called “dead-code elimination.” While typically applied to Javascript, it’s a concept in computer science that’s widely used, and we’ve found a way to do that with CSS.

What this means is that you get rid of what you don’t need, and keep only what’s required. Basically, you’re leveraging web technologies to apply essentialism to your website’s styles. On top of all that, that shaken-out CSS is then minified, meaning your inline CSS is very likely less than 50kb. (If it’s not, we’ll warn you.)

What this means, more importantly, is that you can probably use most WordPress theme’s templates out of the box in AMP. Previous versions of the AMP plugin for WordPress didn’t support the three most recent core themes (twentyfifteen, twentysixteen and twentyseventeen)—now it does. The goal is to eliminate the gap as much as possible between the AMP and non-AMP versions of your site, so you can say goodbye to AMP pages with that blue header. Go read over tickets #1048, #1074, #1111, #1142 if you’re curious.

To go one step even further, we’ve extended the AMP settings screen to include controls for site owners to enable Native AMP or Paired Mode. Previously, you had to edit your theme (or use a child theme) to be able to turn on proper template support: Now we’ve got an interface for you to enable AMP on your site. We’ve also added a “AMP” menu bar item that highlights when we find an error in your pages and posts, directly connecting you to a panel to surface AMP validation status, and how to fix (or accept) what went wrong. We’ve tried to bring a more user-centric approach to the plugin enables AMP on your site, and we strongly welcome feedback. Feel free to read over the work here: #1199

2. Enhanced validation workflow in the compatibility tool

We’ve started to develop our validation tool even further by laying down the “pipes” (hooks, filters, APIs) to add a more enhanced UI—another pass at our desired interface to handle AMP validation errors. We plan on making it as easy as possible for users to bring AMP to their website, learning about this powerful open source spec along the way.

When the plugin encounters a page serving markup that is not valid it will inform you of the validation error. The plugin does not allow invalid AMP markup to be served in a response. When a new validation error is encountered it will automatically redirect to the non-AMP version when you’re using paired mode. You then can decide if the markup causing the validation errors can be safely accepted for sanitization, and if so, then the AMP version will be served. On the other hand, if you’re running the site in native AMP mode, then the validation errors will be forcibly sanitized, but you’ll still be told about them so you can be alerted for issues that need to be fixed.

We’ll continue to expand on what’s here—so stay tuned!

See tickets #1093, #1063, #1087 if you’re interested on reading the extensive work we’ve done here so far.

3. Expanded Gutenberg Support

Our team has spent a bunch of time preparing for Gutenberg so that when your site is ready to switch, it’ll work out-of-the-box. We figured while we were in there we might as well add in new block supports for AMP. We’re really excited at what we’ve done here. Here’s a look:

• Surfacing AMP validation errors at a block level. #1099
• AMP-specific functionality to core blocks. #845, #1026, #1008, #1022, #1065, #1121, #1136, #1151, #1155, #1165, #1168, #1187.

4. Other enhancements and fixes

A lot has gone into this release, including lots of other CSS enhancements to allow for the AMP plugin to work seamlessly with the new AMP features for theme support. Here’s a summary list of things of note that haven’t already been called out:

• Fix handling of font stylesheets with non-HTTPS scheme or scheme-less URLs. #1077.
• Automatically redirect to ?amp from /amp/ URLs when amp theme support is present. #1203.
• Cache post processor response. #1156, #959.
• Incorporate Server Timing API. #990.
• Add information about stylesheets included and excluded instyle[amp-custom]. #1135.
• Fetch (local) stylesheets with @import, instead of removing them. #1181.
• Fetch external stylesheets (which aren’t from whitelisted font CDNs) to include in amp-custom style. #1174.
• Transform CSS selectors according to sanitizer HTML element to AMP component conversions. #1175.
• Ensure layout attributes are only allowed on supporting elements. #1075.
• Correct the width attribute in col tags to the equivalent CSS rule. #1064.
• Remove space from data: url() in stylesheets. #1164, #1089.
• Fix inconsistency between singular and plural. #1114.
• Allow spaces around commas in value property lists. #1112.
• Display admin notice if there’s no persistent object caching.#1050.
• Add workaround to preserve CSS calc() functions. #1116.
• PHPCS fixes, including PHP DocBlocks and strict comparisons. #1002.
• Fix handling of amp-bind attributes to ensure that “>” can appear inside attribute values. #1119.
• Eliminate amp-wp-enforced-sizes style from theme support stylesheet. #1153.
• Add support for extracting (pixel) dimensions from SVG images. #1150.
• Deprecate AMP_WP_Utils, in favor of wp_parse_url(). #995.
• Ensure translatable strings in blocks can actually be translated. #1173.

For a full list of the closed issues and merged pull requests in this release, see the 1.0 milestone.

For a comprehensive look at all changes made and issues completed during the v1.0-alpha1 development, please visit the GitHub repo.

In short, we’d love feedback on what we’ve built here and we hope to chat about it in Belgrade if you’ll be there. Happy testing!

The Featured Image on this post is an original sketch by Joshua Wold.