From 90f673dd5aa3b58d1d22dbf130d8c11407fcdcb7 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Tue, 1 May 2018 14:33:44 -0700
Subject: [PATCH] Add AMP theme support

---
 comments.php                     | 26 ++++++++++++++-
 functions.php                    | 54 ++++++++++++++++++++++++++++++--
 header.php                       | 37 ++++++++++++++++++++--
 inc/template-functions.php       | 12 +++++++
 sass/_normalize.scss             |  6 ++++
 sass/forms/_buttons.scss         |  1 +
 sass/navigation/_menus.scss      | 18 ++++++++++-
 sass/typography/_typography.scss |  1 +
 style.css                        | 38 ++++++++++++++++++----
 9 files changed, 180 insertions(+), 13 deletions(-)

diff --git a/comments.php b/comments.php
index 2c94bfd038..b9eeb2b86d 100644
--- 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
index b7134e760e..f64e0d45bd 100644
--- 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
index 776cbdcd9f..0f54ca043f 100644
--- 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
index e38bf38ba1..524d571714 100644
--- a/inc/template-functions.php
+++ b/inc/template-functions.php
@@ -35,3 +35,15 @@ function _s_pingback_header() {
 	}
 }
 add_action( 'wp_head', '_s_pingback_header' );
+
+/**
+ * Add navigation attribute for amp-live-list when theme supports AMP.
+ *
+ * This is used by the navigation_markup_template filter in the comments tempalte.
+ *
+ * @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
index c5ad67a1af..7a11d7488c 100644
--- 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
index cc54f9519b..c8e4030636 100644
--- 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
index 1a2b040260..880617f6cb 100644
--- 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
index b25e6cc2ce..f807bc0665 100644
--- a/sass/typography/_typography.scss
+++ b/sass/typography/_typography.scss
@@ -1,5 +1,6 @@
 body,
 button,
+[role=button],
 input,
 select,
 optgroup,
diff --git a/style.css b/style.css
index 2884f38658..97c19e8d15 100644
--- a/style.css
+++ b/style.css
@@ -196,6 +196,7 @@ img {
  */
 
 button,
+[role=button],
 input,
 optgroup,
 select,
@@ -212,6 +213,7 @@ textarea {
  */
 
 button,
+[role=button],
 input { /* 1 */
 	overflow: visible;
 }
@@ -222,6 +224,7 @@ input { /* 1 */
  */
 
 button,
+[role=button],
 select { /* 1 */
 	text-transform: none;
 }
@@ -231,6 +234,7 @@ select { /* 1 */
  */
 
 button,
+[role=button],
 [type="button"],
 [type="reset"],
 [type="submit"] {
@@ -242,6 +246,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 {
@@ -254,6 +259,7 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
+[role=button]:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
@@ -391,6 +397,7 @@ template {
 --------------------------------------------------------------*/
 body,
 button,
+[role=button],
 input,
 select,
 optgroup,
@@ -527,6 +534,7 @@ table {
 # Forms
 --------------------------------------------------------------*/
 button,
+[role=button],
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
@@ -542,6 +550,7 @@ input[type="submit"] {
 }
 
 button:hover,
+[role=button]:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
@@ -549,6 +558,7 @@ input[type="submit"]:hover {
 }
 
 button:active, button:focus,
+[role=button]:active, [role=button]:focus,
 input[type="button"]:active,
 input[type="button"]:focus,
 input[type="reset"]:active,
@@ -664,20 +674,33 @@ a:hover, a:active {
 	top: 0;
 }
 
+/* The focus class is added by navigation.js */
 .main-navigation ul ul li:hover > ul,
-.main-navigation ul ul li.focus > ul {
+.main-navigation ul ul li.focus > ul
+{
 	left: 100%;
 }
 
-.main-navigation ul ul a {
-	width: 200px;
-}
-
 .main-navigation ul li:hover > ul,
 .main-navigation ul li.focus > ul {
 	left: auto;
 }
 
+/*
+ * Alternatives to focus class for supporting browsers (all but IE/Edge) for no-JS context (e.g. AMP)
+ * See https://caniuse.com/#feat=css-focus-within
+ */
+.main-navigation ul ul li:focus-within > ul {
+	left: 100%;
+}
+.main-navigation ul li:focus-within > ul {
+	left: auto;
+}
+
+.main-navigation ul ul a {
+	width: 200px;
+}
+
 .main-navigation li {
 	float: left;
 	position: relative;
@@ -689,7 +712,10 @@ a:hover, a:active {
 }
 
 /* Small menu. */
-.menu-toggle,
+.menu-toggle {
+	display: inline-block;
+	user-select: none; /* when label[role=button] in AMP */
+}
 .main-navigation.toggled ul {
 	display: block;
 }