Add AMP theme support #1286

westonruter · 2018-05-01T21:59:58Z

This is an exploration into adding amp theme support to Underscores. This new theme support flag is being introduced in v0.7 of the AMP plugin.

Splits up script and style enqueueing since the former can be isolated to be prevented in AMP.
Adds _s_is_amp() conditional function to check whether or not the response is being served as AMP .
Prevents enqueueing navigation.js. Uses the :focus-within peudo class instead of the focus class which was added via JS. This pseudo-class is supported by all browsers other than IE/Edge, and it ensures the submenu items are accessible even when JS is disabled. Also, amp-bind is used to manage the toggled state of the navigation menu on mobile. To get amp-bind to work, the toggle button has to be switched over to a button-like label which is connected to a hidden checkbox.
Prevent enqueueing skip-link-focus-fix.js since it is not allowed in AMP and it is only needed by IE11 anyway.
Adds support for using amp-live-list for the comment list, allowing new comments to be added to the page without reloading. A refresh time of 60 seconds is used by default. A _s_using_amp_live_list_comments() conditional is added to check whether amp-live-list should be used in the template.
The meta[viewport] is updated to add the AMP-required minimum-scale=1 value.

With these changes applied to a theme, a vanilla WordPress install with the AMP plugin active can generate responses that do not trigger any AMP validation errors.

For more details on changes coming in AMP v0.7, see the RC1 release post. See also another full example theme which implements amp theme support, and a WordPress install that has the theme active.

westonruter · 2018-05-01T22:08:57Z

functions.php

@@ -24,6 +24,10 @@ function _s_setup() {
 		 */
 		load_theme_textdomain( '_s', get_template_directory() . '/languages' );

+		add_theme_support( 'amp', array(
+			'comments_live_list' => true,
+		) );


Naturally this shouldn't be merged as-is into master. It would need to be opt-in by the theme developer.

westonruter · 2018-05-01T22:19:48Z

I manually applied the changes to style.css as opposed to using sass to do so, since when I tried to compile it there were many differences. I suppose this is what #1159 is for.

westonruter · 2018-05-02T02:41:43Z

functions.php

+/**
+ * Enqueue scripts.
+ *
+ * This short-circuits in AMP because custom scripts are not allowed. There is are AMP equivalents provided elsewhere.


s/is are/are/

westonruter · 2018-05-03T04:34:05Z

header.php

+					[aria-expanded]="siteNavigationMenu.expanded ? 'true' : 'false'"
+				>
+				<?php esc_html_e( 'Primary Menu', '_s' ); ?>
+			</label>


Should be indented.

westonruter · 2018-05-03T04:36:15Z

header.php

+					type="checkbox"
+					hidden
+					on="change:AMP.setState( { siteNavigationMenu: { expanded: event.checked } } )"
+				>


This hidden checkbox is far from ideal. It's mainly here because AMP doesn't yet support a toggleClass action. See ampproject/amphtml#1032

westonruter · 2018-05-03T17:48:30Z

The mess I had originally proposed for using a checkbox instead of a button in AMP turned out to not be necessary, fortunately. It's much cleaner now.

westonruter · 2018-05-03T19:07:17Z

comments.php

@@ -58,8 +67,23 @@
 		</ol><!-- .comment-list -->

 		<?php
+		if ( _s_using_amp_live_list_comments() ) {
+			add_filter( 'navigation_markup_template', '_s_add_amp_live_list_pagination_attribute' );


This is a little awkward. It would be preferable if AMP allowed for a nav element (or role="navigation") instead of requiring an element with a custom pagination attribute.

header.php

samikeijonen · 2018-05-04T05:54:52Z

I didn't see an issue for AMP in _s so just checking in here. Looks like a nice job!

Couple of question:

Now that Google, Automattic and XWP are pushing AMP plugin forward, I assume that decision for supporting AMP in _s have already been made?
What does it actually mean. Is there going to be is_amp() checks and other AMP related stuff in template files or does this live in a different branch?

westonruter · 2018-05-04T18:59:26Z

Thanks!

Now that Google, Automattic and XWP are pushing AMP plugin forward, I assume that decision for supporting AMP in _s have already been made?

I don't think this decision has been made. However, in the same way that _s supports Jetpack and WooCommerce, it would seem logical to also support AMP.

What does it actually mean. Is there going to be is_amp() checks and other AMP related stuff in template files or does this live in a different branch?

See #1286 (comment). You're right that it should be opt-in. Maybe that looks like add_theme_support('amp') being commented-out by default, allowing a plugin author to enable it just by uncommenting the line?

grappler · 2018-05-13T18:06:31Z

Thank you @westonruter for the pull request. It is nice to see what needs to be done on a themes side to make it compatable with the AMP Plugin.

However, in the same way that _s supports Jetpack and WooCommerce, it would seem logical to also support AMP.

As WordPress.com supports AMP and _s is used as a base for WordPress.com themes then it may be logical. I don't think it is logical for themes built by the community for clients and WordPress.org.

Jetpack support can be easily be removed be deleting the inc/jetpack.php file.
WooCommerce support is not included by default when using underscores.me.

If we were to add AMP support I would like to see easily removable.

Move _s_is_amp() and _s_using_amp_live_list_comments() from functions.php to it's own file e.g. inc/amp.php.
Create a separate comment template and load it via comments_template().
See if we can work with hooks in the header.php

grappler · 2018-05-13T18:48:16Z

header.php

+					[aria-expanded]="siteNavigationMenu.expanded ? 'true' : 'false'"
+				<?php endif; ?>
+			>
+				<?php esc_html_e( 'Primary Menu', '_s' ); ?>


I could not figure out what the button is for. Is it for the mobile menu?

Yes. If you resize the window to the mobile breakpoint then this button appears.

westonruter · 2018-06-11T23:42:29Z

@grappler I've simplified the PR by removing the comments_live_list support for now. I didn't think it would be good to have a separate template because then a theme author would have to maintain two separate comments templates.

Also, I've removed amp theme support from being hard-coded in functions.php entirely. This is because the AMP plugin as of 1.0-alpha1 now includes an admin screen allowing the user to decide to what kind of AMP integration they want:

westonruter · 2018-06-20T20:45:21Z

Note that WP Rig has similar built-in AMP support now as well.

westonruter force-pushed the amp-support branch from 90f673d to cdf8e2d Compare May 1, 2018 22:04

westonruter commented May 1, 2018

View reviewed changes

westonruter commented May 2, 2018

View reviewed changes

ianstewart requested a review from davidakennedy May 2, 2018 13:47

This was referenced May 2, 2018

Add sanitizer to fixup issues with core themes ampproject/amp-wp#1074

Merged

Understand the level of effort for enabling AMP support on native themes ampproject/amp-wp#1036

Closed

westonruter commented May 3, 2018

View reviewed changes

header.php Show resolved Hide resolved

grappler added the Second Opinion label May 13, 2018

grappler reviewed May 13, 2018

View reviewed changes

westonruter added 3 commits June 11, 2018 15:26

Add AMP theme support

1791783

Fix phpcs errors unrelated to AMP changes

b4d24c2

Restore use of button for menu-toggle in AMP

5f31822

westonruter force-pushed the amp-support branch from 6ff3728 to 5f31822 Compare June 11, 2018 22:27

westonruter added 3 commits June 11, 2018 15:39

Simplify state for siteNavigationMenu

0ec1648

Remove amp theme support in favor of letting user opt-in via admin

ebed1b3

Remove implementation of comments_live_list for now

0c8d535

westonruter changed the title ~~Try: Add AMP theme support~~ Add AMP theme support Jun 11, 2018

grappler mentioned this pull request Sep 1, 2018

Underscores.me + AMP and Guteberg Automattic/underscores.me#69

Open

westonruter mentioned this pull request Oct 17, 2018

Enable AMP Compatibility WordPress/twentynineteen#94

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add AMP theme support #1286

Add AMP theme support #1286

westonruter commented May 1, 2018 •

edited

Loading

westonruter May 1, 2018

westonruter commented May 1, 2018

westonruter May 2, 2018

westonruter May 3, 2018

westonruter May 3, 2018

westonruter commented May 3, 2018

westonruter May 3, 2018

samikeijonen commented May 4, 2018

westonruter commented May 4, 2018

grappler commented May 13, 2018

grappler May 13, 2018

westonruter May 13, 2018

westonruter commented Jun 11, 2018

westonruter commented Jun 20, 2018

Add AMP theme support #1286

Are you sure you want to change the base?

Add AMP theme support #1286

Conversation

westonruter commented May 1, 2018 • edited Loading

westonruter May 1, 2018

Choose a reason for hiding this comment

westonruter commented May 1, 2018

westonruter May 2, 2018

Choose a reason for hiding this comment

westonruter May 3, 2018

Choose a reason for hiding this comment

westonruter May 3, 2018

Choose a reason for hiding this comment

westonruter commented May 3, 2018

westonruter May 3, 2018

Choose a reason for hiding this comment

samikeijonen commented May 4, 2018

westonruter commented May 4, 2018

grappler commented May 13, 2018

grappler May 13, 2018

Choose a reason for hiding this comment

westonruter May 13, 2018

Choose a reason for hiding this comment

westonruter commented Jun 11, 2018

westonruter commented Jun 20, 2018

westonruter commented May 1, 2018 •

edited

Loading