Add AMP theme support

Automattic · May 1, 2018 · cdf8e2d · cdf8e2d
1 parent f5f3a0a
commit cdf8e2d
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 13 deletions.
diff --git a/comments.php b/comments.php
@@ -48,7 +48,16 @@
 
 		<?php the_comments_navigation(); ?>
 
-		<ol class="comment-list">
+		<?php if ( _s_using_amp_live_list_comments() ) : ?>
+			<amp-live-list
+				id="amp-live-comments-list-<?php the_ID(); ?>"
+				<?php echo ( 'asc' === get_option( 'comment_order' ) ) ? ' sort="ascending" ' : ''; ?>
+				data-poll-interval="<?php echo esc_attr( MINUTE_IN_SECONDS * 1000 ); ?>"
+				data-max-items-per-page="<?php echo esc_attr( get_option( 'page_comments' ) ? get_option( 'comments_per_page' ) : 10000 ); ?>"
+			>
+		<?php endif; ?>
+
+		<ol class="comment-list" <?php echo _s_using_amp_live_list_comments() ? 'items' : ''; ?>>
 			<?php
 			wp_list_comments( array(
 				'style'      => 'ol',
@@ -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' );
+		}
 		the_comments_navigation();
+		if ( _s_using_amp_live_list_comments() ) {
+			remove_filter( 'navigation_markup_template', '_s_add_amp_live_list_pagination_attribute' );
+		}
+		?>
 
+		<?php if ( _s_using_amp_live_list_comments() ) : ?>
+			<div update>
+				<button class="button" on="tap:amp-live-comments-list-<?php the_ID(); ?>.update"><?php esc_html_e( 'New comment(s)', '_s' ); ?></button>
+			</div>
+			</amp-live-list>
+		<?php endif; ?>
+
+		<?php
 		// If comments are closed and there are comments, let's leave a little note, shall we?
 		if ( ! comments_open() ) :
 			?>

diff --git a/functions.php b/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,
+		) );
+
 		// Add default posts and comments RSS feed links to head.
 		add_theme_support( 'automatic-feed-links' );
 
@@ -117,10 +121,56 @@ function _s_widgets_init() {
 add_action( 'widgets_init', '_s_widgets_init' );
 
 /**
- * Enqueue scripts and styles.
+ * Determine whether this is an AMP response.
+ *
+ * Note that this must only be called after the parse_query action.
+ *
+ * @link https://github.com/Automattic/amp-wp
  */
-function _s_scripts() {
+function _s_is_amp() {
+	return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
+}
+
+/**
+ * Detemrine whether amp-live-list should be used for the comment list.
+ *
+ * @return bool Whether to use amp-live-list.
+ */
+function _s_using_amp_live_list_comments() {
+	if ( ! _s_is_amp() ) {
+		return false;
+	}
+	$amp_theme_support = get_theme_support( 'amp' );
+	return ! empty( $amp_theme_support[0]['comments_live_list'] );
+}
+
+/**
+ * Enqueue styles.
+ */
+function _s_styles() {
 	wp_enqueue_style( '_s-style', get_stylesheet_uri() );
+}
+add_action( 'wp_enqueue_scripts', '_s_styles' );
+
+/**
+ * Enqueue scripts.
+ *
+ * This short-circuits in AMP because custom scripts are not allowed. There is are AMP equivalents provided elsewhere.
+ *
+ * navigation:
+ *     In AMP the :focus-within selector is used to keep submenus displayed while tabbing,
+ *     and amp-bind is used to managed the toggled state of the nav menu on small screens.
+ *
+ * skip-link-focus-fix:
+ *     This is not implemented in AMP because it only relates to IE11, a browser which now has a very small market share.
+ *
+ * comment-reply:
+ *     Support for comment replies is provided by the AMP plugin.
+ */
+function _s_scripts() {
+	if ( _s_is_amp() ) {
+		return;
+	}
 
 	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
 

diff --git a/header.php b/header.php
@@ -14,7 +14,7 @@
 <html <?php language_attributes(); ?>>
 <head>
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
 	<link rel="profile" href="http://gmpg.org/xfn/11">
 
 	<?php wp_head(); ?>
@@ -44,8 +44,39 @@
 			<?php endif; ?>
 		</div><!-- .site-branding -->
 
-		<nav id="site-navigation" class="main-navigation">
-			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
+		<nav id="site-navigation" class="main-navigation"
+			<?php if ( _s_is_amp() ) : ?>
+				[class]=" siteNavigationMenu.expanded ? 'main-navigation toggled' : 'main-navigation' "
+			<?php endif; ?>
+		>
+			<?php if ( _s_is_amp() ) : ?>
+				<amp-state id="siteNavigationMenu">
+					<script type="application/json">
+						{
+							"expanded": false
+						}
+					</script>
+				</amp-state>
+				<input
+					id="site-navigation-expanded"
+					type="checkbox"
+					hidden
+					on="change:AMP.setState( { siteNavigationMenu: { expanded: event.checked } } )"
+				>
+				<label
+					class="menu-toggle"
+					for="site-navigation-expanded"
+					tabindex="0"
+					role="button"
+					aria-controls="primary-menu"
+					aria-expanded="false"
+					[aria-expanded]="siteNavigationMenu.expanded ? 'true' : 'false'"
+				>
+				<?php esc_html_e( 'Primary Menu', '_s' ); ?>
+			</label>
+			<?php else : ?>
+				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
+			<?php endif; ?>
 			<?php
 			wp_nav_menu( array(
 				'theme_location' => 'menu-1',

diff --git a/inc/template-functions.php b/inc/template-functions.php
@@ -35,3 +35,17 @@ function _s_pingback_header() {
 	}
 }
 add_action( 'wp_head', '_s_pingback_header' );
+
+/**
+ * Add pagination reference point attribute for amp-live-list when theme supports AMP.
+ *
+ * This is used by the navigation_markup_template filter in the comments template.
+ *
+ * @link https://www.ampproject.org/docs/reference/components/amp-live-list#pagination
+ *
+ * @param string $markup Navigation markup.
+ * @return string Markup.
+ */
+function _s_add_amp_live_list_pagination_attribute( $markup ) {
+	return preg_replace( '/(\s*<[a-z0-9_-]+)/i', '$1 pagination ', $markup, 1 );
+}
diff --git a/sass/_normalize.scss b/sass/_normalize.scss
@@ -150,6 +150,7 @@ img {
  */
 
 button,
+[role=button],
 input,
 optgroup,
 select,
@@ -166,6 +167,7 @@ textarea {
  */
 
 button,
+[role=button],
 input { /* 1 */
 	overflow: visible;
 }
@@ -176,6 +178,7 @@ input { /* 1 */
  */
 
 button,
+[role=button],
 select { /* 1 */
 	text-transform: none;
 }
@@ -185,6 +188,7 @@ select { /* 1 */
  */
 
 button,
+[role=button],
 [type="button"],
 [type="reset"],
 [type="submit"] {
@@ -196,6 +200,7 @@ button,
  */
 
 button::-moz-focus-inner,
+[role=button]::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
@@ -208,6 +213,7 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
+[role=button]:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {

diff --git a/sass/forms/_buttons.scss b/sass/forms/_buttons.scss
@@ -1,4 +1,5 @@
 button,
+[role=button],
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {

diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss
@@ -24,10 +24,16 @@
 			}
 
 			li {
+				/* The focus class is added by navigation.js */
 				&:hover > ul,
 				&.focus > ul {
 					left: 100%;
 				}
+
+				/* The :focus-within is for non-JS contexts and AMP (all browsers except IE/Edge support) */
+				&:focus-within > ul {
+					left: 100%;
+				}
 			}
 
 			a {
@@ -43,16 +49,23 @@
 			}
 		}
 
+		/* The focus class is added by navigation.js */
 		li:hover > ul,
 		li.focus > ul {
 			left: auto;
 		}
+
+		/* The :focus-within is for non-JS contexts and AMP (all browsers except IE/Edge support) */
+		li:focus-within > ul {
+			left: auto;
+		}
 	}
 
 	li {
 		float: left;
 		position: relative;
 
+		/* The focus class is added by navigation.js */
 		&:hover > a,
 		&.focus > a {
 		}
@@ -71,7 +84,10 @@
 }
 
 /* Small menu. */
-.menu-toggle,
+.menu-toggle {
+	display: inline-block;
+	user-select: none; /* when label[role=button] in AMP */
+}
 .main-navigation.toggled ul {
 	display: block;
 }

diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss
@@ -1,5 +1,6 @@
 body,
 button,
+[role=button],
 input,
 select,
 optgroup,