Twenty Nineteen

Here are some lessons in making a theme AMP-compatible, from adding AMP support to Twenty Nineteen:

Prevent Enqueuing Of Scripts

Though the plugin can remove enqueued scripts, it’s good to prevent enqueuing them on AMP URLs. This prevents a validation error.

In a function that enqueues scripts, you can exit early if it’s an AMP endpoint:

add_action( 'enqueue_scripts', function() {
        if ( function_exists( 'is_amp_endpoint' && is_amp_endpoint() ) {
                return;
        } 

        // Enqueue scripts here.
} );

The skip-link-focus-fix.js script in Twenty Nineteen that doesn’t need an AMP implementation.

This workaround for IE 11 keyboard users is common in themes. But it’s not needed at all now, as there’s a fix in the AMP project.

Styling Fixes

Comparing AMP and non-AMP pages can show when there are styling fixes needed on AMP:

The AMP version of this URL is horizontally compressed. This is because the styling on the non-AMP URL doesn’t correctly apply to the AMP URL.

The validator converts style selectors for img to amp-img.

For example this selector:

.site-header.featured-image .site-featured-image .post-thumbnail img {
    height: auto;
    /* more style rules */
}

…is converted to:

.site-header.featured-image .site-featured-image .post-thumbnail amp-img {
    height: auto;
    /* more style rules */
}

This usually works well, as the <amp-img> is the AMP version of <img>.

But there’s a style rule of object-fit: cover that doesn’t work when applied to <amp-img>.

So this can simply use a selector that ends in amp-img > img to ensure that it applies to <img>.

.site-header.featured-image .site-featured-image .post-thumbnail amp-img > img {
    height: auto;
    /* more style rules */
}