Skip to content

Commit cdf8e2d

Browse files
westonruterwestonruter
committed
Add AMP theme support
1 parent f5f3a0a commit cdf8e2d

File tree

9 files changed

+182
-13
lines changed

9 files changed

+182
-13
lines changed

‎comments.php

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,16 @@
4848

4949
<?php the_comments_navigation(); ?>
5050

51-
<ol class="comment-list">
51+
<?php if ( _s_using_amp_live_list_comments() ) : ?>
52+
<amp-live-list
53+
id="amp-live-comments-list-<?php the_ID(); ?>"
54+
<?php echo ( 'asc' === get_option( 'comment_order' ) ) ? ' sort="ascending" ' : ''; ?>
55+
data-poll-interval="<?php echo esc_attr( MINUTE_IN_SECONDS * 1000 ); ?>"
56+
data-max-items-per-page="<?php echo esc_attr( get_option( 'page_comments' ) ? get_option( 'comments_per_page' ) : 10000 ); ?>"
57+
>
58+
<?php endif; ?>
59+
60+
<ol class="comment-list" <?php echo _s_using_amp_live_list_comments() ? 'items' : ''; ?>>
5261
<?php
5362
wp_list_comments( array(
5463
'style' => 'ol',
@@ -58,8 +67,23 @@
5867
</ol><!-- .comment-list -->
5968

6069
<?php
70+
if ( _s_using_amp_live_list_comments() ) {
71+
add_filter( 'navigation_markup_template', '_s_add_amp_live_list_pagination_attribute' );
72+
}
6173
the_comments_navigation();
74+
if ( _s_using_amp_live_list_comments() ) {
75+
remove_filter( 'navigation_markup_template', '_s_add_amp_live_list_pagination_attribute' );
76+
}
77+
?>
6278

79+
<?php if ( _s_using_amp_live_list_comments() ) : ?>
80+
<div update>
81+
<button class="button" on="tap:amp-live-comments-list-<?php the_ID(); ?>.update"><?php esc_html_e( 'New comment(s)', '_s' ); ?></button>
82+
</div>
83+
</amp-live-list>
84+
<?php endif; ?>
85+
86+
<?php
6387
// If comments are closed and there are comments, let's leave a little note, shall we?
6488
if ( ! comments_open() ) :
6589
?>

‎functions.php

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ function _s_setup() {
2424
*/
2525
load_theme_textdomain( '_s', get_template_directory() . '/languages' );
2626

27+
add_theme_support( 'amp', array(
28+
'comments_live_list' => true,
29+
) );
30+
2731
// Add default posts and comments RSS feed links to head.
2832
add_theme_support( 'automatic-feed-links' );
2933

@@ -117,10 +121,56 @@ function _s_widgets_init() {
117121
add_action( 'widgets_init', '_s_widgets_init' );
118122

119123
/**
120-
* Enqueue scripts and styles.
124+
* Determine whether this is an AMP response.
125+
*
126+
* Note that this must only be called after the parse_query action.
127+
*
128+
* @link https://github.com/Automattic/amp-wp
121129
*/
122-
function _s_scripts() {
130+
function _s_is_amp() {
131+
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
132+
}
133+
134+
/**
135+
* Detemrine whether amp-live-list should be used for the comment list.
136+
*
137+
* @return bool Whether to use amp-live-list.
138+
*/
139+
function _s_using_amp_live_list_comments() {
140+
if ( ! _s_is_amp() ) {
141+
return false;
142+
}
143+
$amp_theme_support = get_theme_support( 'amp' );
144+
return ! empty( $amp_theme_support[0]['comments_live_list'] );
145+
}
146+
147+
/**
148+
* Enqueue styles.
149+
*/
150+
function _s_styles() {
123151
wp_enqueue_style( '_s-style', get_stylesheet_uri() );
152+
}
153+
add_action( 'wp_enqueue_scripts', '_s_styles' );
154+
155+
/**
156+
* Enqueue scripts.
157+
*
158+
* This short-circuits in AMP because custom scripts are not allowed. There is are AMP equivalents provided elsewhere.
159+
*
160+
* navigation:
161+
* In AMP the :focus-within selector is used to keep submenus displayed while tabbing,
162+
* and amp-bind is used to managed the toggled state of the nav menu on small screens.
163+
*
164+
* skip-link-focus-fix:
165+
* This is not implemented in AMP because it only relates to IE11, a browser which now has a very small market share.
166+
*
167+
* comment-reply:
168+
* Support for comment replies is provided by the AMP plugin.
169+
*/
170+
function _s_scripts() {
171+
if ( _s_is_amp() ) {
172+
return;
173+
}
124174

125175
wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
126176

‎header.php

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<html <?php language_attributes(); ?>>
1515
<head>
1616
<meta charset="<?php bloginfo( 'charset' ); ?>">
17-
<meta name="viewport" content="width=device-width, initial-scale=1">
17+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
1818
<link rel="profile" href="http://gmpg.org/xfn/11">
1919

2020
<?php wp_head(); ?>
@@ -44,8 +44,39 @@
4444
<?php endif; ?>
4545
</div><!-- .site-branding -->
4646

47-
<nav id="site-navigation" class="main-navigation">
48-
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
47+
<nav id="site-navigation" class="main-navigation"
48+
<?php if ( _s_is_amp() ) : ?>
49+
[class]=" siteNavigationMenu.expanded ? 'main-navigation toggled' : 'main-navigation' "
50+
<?php endif; ?>
51+
>
52+
<?php if ( _s_is_amp() ) : ?>
53+
<amp-state id="siteNavigationMenu">
54+
<script type="application/json">
55+
{
56+
"expanded": false
57+
}
58+
</script>
59+
</amp-state>
60+
<input
61+
id="site-navigation-expanded"
62+
type="checkbox"
63+
hidden
64+
on="change:AMP.setState( { siteNavigationMenu: { expanded: event.checked } } )"
65+
>
66+
<label
67+
class="menu-toggle"
68+
for="site-navigation-expanded"
69+
tabindex="0"
70+
role="button"
71+
aria-controls="primary-menu"
72+
aria-expanded="false"
73+
[aria-expanded]="siteNavigationMenu.expanded ? 'true' : 'false'"
74+
>
75+
<?php esc_html_e( 'Primary Menu', '_s' ); ?>
76+
</label>
77+
<?php else : ?>
78+
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
79+
<?php endif; ?>
4980
<?php
5081
wp_nav_menu( array(
5182
'theme_location' => 'menu-1',

‎inc/template-functions.php

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,17 @@ function _s_pingback_header() {
3535
}
3636
}
3737
add_action( 'wp_head', '_s_pingback_header' );
38+
39+
/**
40+
* Add pagination reference point attribute for amp-live-list when theme supports AMP.
41+
*
42+
* This is used by the navigation_markup_template filter in the comments template.
43+
*
44+
* @link https://www.ampproject.org/docs/reference/components/amp-live-list#pagination
45+
*
46+
* @param string $markup Navigation markup.
47+
* @return string Markup.
48+
*/
49+
function _s_add_amp_live_list_pagination_attribute( $markup ) {
50+
return preg_replace( '/(\s*<[a-z0-9_-]+)/i', '$1 pagination ', $markup, 1 );
51+
}

‎sass/_normalize.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ img {
150150
*/
151151

152152
button,
153+
[role=button],
153154
input,
154155
optgroup,
155156
select,
@@ -166,6 +167,7 @@ textarea {
166167
*/
167168

168169
button,
170+
[role=button],
169171
input { /* 1 */
170172
overflow: visible;
171173
}
@@ -176,6 +178,7 @@ input { /* 1 */
176178
*/
177179

178180
button,
181+
[role=button],
179182
select { /* 1 */
180183
text-transform: none;
181184
}
@@ -185,6 +188,7 @@ select { /* 1 */
185188
*/
186189

187190
button,
191+
[role=button],
188192
[type="button"],
189193
[type="reset"],
190194
[type="submit"] {
@@ -196,6 +200,7 @@ button,
196200
*/
197201

198202
button::-moz-focus-inner,
203+
[role=button]::-moz-focus-inner,
199204
[type="button"]::-moz-focus-inner,
200205
[type="reset"]::-moz-focus-inner,
201206
[type="submit"]::-moz-focus-inner {
@@ -208,6 +213,7 @@ button::-moz-focus-inner,
208213
*/
209214

210215
button:-moz-focusring,
216+
[role=button]:-moz-focusring,
211217
[type="button"]:-moz-focusring,
212218
[type="reset"]:-moz-focusring,
213219
[type="submit"]:-moz-focusring {

‎sass/forms/_buttons.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
button,
2+
[role=button],
23
input[type="button"],
34
input[type="reset"],
45
input[type="submit"] {

‎sass/navigation/_menus.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,16 @@
2424
}
2525

2626
li {
27+
/* The focus class is added by navigation.js */
2728
&:hover > ul,
2829
&.focus > ul {
2930
left: 100%;
3031
}
32+
33+
/* The :focus-within is for non-JS contexts and AMP (all browsers except IE/Edge support) */
34+
&:focus-within > ul {
35+
left: 100%;
36+
}
3137
}
3238

3339
a {
@@ -43,16 +49,23 @@
4349
}
4450
}
4551

52+
/* The focus class is added by navigation.js */
4653
li:hover > ul,
4754
li.focus > ul {
4855
left: auto;
4956
}
57+
58+
/* The :focus-within is for non-JS contexts and AMP (all browsers except IE/Edge support) */
59+
li:focus-within > ul {
60+
left: auto;
61+
}
5062
}
5163

5264
li {
5365
float: left;
5466
position: relative;
5567

68+
/* The focus class is added by navigation.js */
5669
&:hover > a,
5770
&.focus > a {
5871
}
@@ -71,7 +84,10 @@
7184
}
7285

7386
/* Small menu. */
74-
.menu-toggle,
87+
.menu-toggle {
88+
display: inline-block;
89+
user-select: none; /* when label[role=button] in AMP */
90+
}
7591
.main-navigation.toggled ul {
7692
display: block;
7793
}

‎sass/typography/_typography.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
body,
22
button,
3+
[role=button],
34
input,
45
select,
56
optgroup,

0 commit comments

Comments
 (0)