Understand the level of effort for enabling AMP support on native themes

[postphotos]

AC1: Test and report the experience of converting the three most recent core themes (Twenty Fifteen, Twenty Sixteen, Twenty Seventeen) to be compatible. Document this process.
AC2: Report CSS findings - this is related to the CSS Tree Shaking issue #930

[kienstra]

Working On This Now

Hi @westonruter,
If it's OK, I'm working on this now, starting with Twenty Fifteen.

[kienstra]

Twenty Fifteen Features
Tested On Posts And Pages, Using A Paired Mode Child Theme

• Customizer > Header Image
• Customizer Colors (including Base Color Schemes, Background Color, Header and Sidebar Text Color, Header and Sidebar Background Color)
• Customizer > Site Identity > Logo
  There's still a minor image display issue related to Images unexpectedly expand to fill containers #1104

Twenty Fifteen: Removed By Validator
We should probably dequeue these illegal scripts that the validator strips (original add_action):

wp_dequeue_script( 'twentyfifteen-skip-link-focus-fix' );
wp_dequeue_script( 'twentyfifteen-script' );
wp_dequeue_script( 'twentyfifteen-keyboard-image-navigation' );
wp_dequeue_script( 'comment-reply' );
remove_action( 'wp_head', 'twentyfifteen_javascript_detection', 0 );

This rule in style.css caused this error in the validator:

CSS @-ms-viewport rules are currently disallowed

There's also an invalid_element error from header.php:

<meta name="viewport" content="width=device-width">

And this illegal script is output inline in header.php.

[westonruter]

See also this PR adds amp theme support to _s, which could have some useful pieces, especially in regards to the nav menus: Automattic/_s#1286

[westonruter]

And this illegal script is output inline in header.php.

Is that the script that is getting reported? Since it is inside of conditional comments it should get ignored by the whitelist sanitizer.

[kienstra]

Script In Header

Hi @westonruter,
You're right that the header.php script isn't reported in the validator. I just crossed it out of the comment above.

[kienstra]

Twenty Sixteen Support
Tested in Paired Mode and Native AMP (with simple child themes)

• Social links menu
• Customizer > Header Image
• Customizer Colors (including Base Color Schemes, Background Color, Page Background Color,
  Link Color, Main Text Color, Secondary Text Color
• Customizer > Site Identity > Logo
• The mobile "Menu toggle" button doesn't work, as its logic is removed when functions.js is dequeued
• There's a lack of space between images with the class alignleft and text (screenshot)

Twenty Sixteen: Removed By Validator
So far, the validation errors look really similar to those in Twenty Fifteen.

We should probably dequeue these illegal scripts that the validator strips (original add_action):

wp_dequeue_script( 'twentysixteen-html5' ); 
wp_dequeue_script( 'twentysixteen-skip-link-focus-fix' );
wp_dequeue_script( 'comment-reply' );
wp_dequeue_script( 'twentysixteen-script' );
remove_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );

There's also an error from style.css: illegal_css_at_rule: CSS @-ms-viewport rules are currently disallowed

And there's an invalid_element error from header.php:

<meta name="viewport" content="width=device-width">

[kienstra]

Twenty Seventeen Support
Tested in Paired Mode and Native AMP (with simple child themes)

• Social Icons Menu
• Front Page Sections
• One And Two Column Layouts of pages
• Header Media: neither the Header Image nor Header Video are supported, as @westonruter mentioned in Add sanitizer to fixup issues with core themes #1074
• The "Top Menu" hamburger icon doesn't appear, and the entire menu always displays on mobile (this stripped script drives it)
• Custom Colors mainly work, but the 'Social Icons Menu' icons are sometimes distorted (screenshot). This is fixed in @westonruter's PR Add sanitizer to fixup issues with core themes #1074.

Twenty Seventeen: Validator Errors

We should probably dequeue the illegal scripts from these handles:

'html5'
'twentyseventeen-skip-link-focus-fix'
'twentyseventeen-navigation'
'comment-reply'
'jquery-scrollto'
'twentyseventeen-global'

And remove an action that prints a <script>:

remove_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );

Similar to the 2 themes above, there's an invalid_element error from this begin output in header.php:

<meta name="viewport" content="width=device-width, initial-scale=1">