Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AMP theme support #1286

Open
wants to merge 6 commits into
base: master
from
Open
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -79,6 +79,23 @@ function _s_setup() {
'flex-width' => true,
'flex-height' => true,
) );
/*
* If you intend your theme to be used with the AMP plugin and make use of AMP components in your templates,
* then you should make sure your site is served in native/canonical AMP via:
*
* add_theme_support( 'amp' );
*
* If you implement <amp-live-list> in your comments.php then you should do:
*
* add_theme_support( 'amp', array(
* 'comments_live_list' => true,
* );
*
* Otherwise, a user of the AMP plugin can decide via an admin screen for whether or not they want to serve
* your theme's templates in AMP responses, either in native AMP (canonical URLs) or paired AMP modes
* (separate AMP-specific URLs).
*/
}
endif;
add_action( 'after_setup_theme', '_s_setup' );
@@ -117,10 +134,44 @@ 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
* @return bool Is AMP endpoint (and AMP plugin is active).
*/
function _s_scripts() {
function _s_is_amp() {
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}
/**
* 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 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 );
@@ -14,7 +14,7 @@
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
This conversation was marked as resolved by westonruter

This comment has been minimized.

Copy link
@westonruter

westonruter May 3, 2018

Author

Removal of space between values isn't actually required. This is just a bug in the AMP plugin fixed by ampproject/amp-wp#1112

This comment has been minimized.

Copy link
@westonruter

westonruter Jun 11, 2018

Author

I've restored the spaces since ampproject/amp-wp#1112 is closed. Can be tested with AMP plugin v1.0-alpha1.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>
@@ -44,8 +44,30 @@
<?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]=" siteNavigationMenuExpanded ? 'main-navigation toggled' : 'main-navigation' "
<?php endif; ?>
>
<?php if ( _s_is_amp() ) : ?>
<amp-state id="siteNavigationMenuExpanded">
<script type="application/json">false</script>
</amp-state>
<?php endif; ?>

<button
class="menu-toggle"
aria-controls="primary-menu"
aria-expanded="false"
<?php if ( _s_is_amp() ) : ?>
on="tap:AMP.setState( { siteNavigationMenuExpanded: ! siteNavigationMenuExpanded } )"
[aria-expanded]="siteNavigationMenuExpanded ? 'true' : 'false'"
<?php endif; ?>
>
<?php esc_html_e( 'Primary Menu', '_s' ); ?>
</button>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
@@ -57,9 +57,9 @@ function _s_header_style() {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
<?php
// If the user has set a custom color for the text use that.
<?php
else :
// If the user has set a custom color for the text use that.
?>
.site-title a,
.site-description {
@@ -175,7 +175,7 @@ function _s_woocommerce_wrapper_before() {
* @return void
*/
function _s_woocommerce_wrapper_after() {
?>
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
@@ -129,4 +129,5 @@
</properties>
</rule>

<exclude-pattern>rtl.css</exclude-pattern>
</ruleset>
@@ -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 {
}
@@ -664,20 +664,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;
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.