From a38d024a8e5dcc82d9bb79b7b2b1a21edad0d7b7 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sun, 10 Dec 2017 09:58:28 -0800
Subject: [PATCH] Restrict screen-reader-text to Customizer preview styles

Also use AMP_QUERY_VAR instaed of hard-coded 'amp' in amp_admin_get_preview_permalink()
---
 includes/admin/class-amp-customizer.php | 23 +++++++++++++++++++++++
 includes/admin/functions.php            |  2 +-
 templates/style.php                     | 15 ---------------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/includes/admin/class-amp-customizer.php b/includes/admin/class-amp-customizer.php
index 14b14c48d5f..35ab66c6747 100644
--- a/includes/admin/class-amp-customizer.php
+++ b/includes/admin/class-amp-customizer.php
@@ -72,6 +72,7 @@ public function init_preview() {
 		// Output scripts and styles which will break AMP validation only when preview is opened with controls for manipulation.
 		if ( $this->wp_customize->get_messenger_channel() ) {
 			add_action( 'amp_post_template_head', array( $this->wp_customize, 'customize_preview_loading_style' ) );
+			add_action( 'amp_post_template_css', array( $this, 'add_customize_preview_styles' ) );
 			add_action( 'amp_post_template_head', array( $this->wp_customize, 'remove_frameless_preview_messenger_channel' ) );
 			add_action( 'amp_post_template_footer', array( $this, 'add_preview_scripts' ) );
 		}
@@ -182,6 +183,28 @@ public function enqueue_preview_scripts() {
 		) );
 	}
 
+	/**
+	 * Add AMP Customizer preview styles.
+	 */
+	public function add_customize_preview_styles() {
+		?>
+		/* Text meant only for screen readers; this is needed for wp.a11y.speak() */
+		.screen-reader-text {
+			border: 0;
+			clip: rect(1px, 1px, 1px, 1px);
+			-webkit-clip-path: inset(50%);
+			clip-path: inset(50%);
+			height: 1px;
+			margin: -1px;
+			overflow: hidden;
+			padding: 0;
+			position: absolute;
+			width: 1px;
+			word-wrap: normal !important;
+		}
+		<?php
+	}
+
 	/**
 	 * Enqueues scripts and does wp_print_footer_scripts() so we can output customizer scripts.
 	 *
diff --git a/includes/admin/functions.php b/includes/admin/functions.php
index 2e4f867ff2c..a2e823fc05a 100644
--- a/includes/admin/functions.php
+++ b/includes/admin/functions.php
@@ -36,7 +36,7 @@ function amp_admin_get_preview_permalink() {
 	 */
 	$post_type = (string) apply_filters( 'amp_customizer_post_type', 'post' );
 
-	if ( ! post_type_supports( $post_type, 'amp' ) ) {
+	if ( ! post_type_supports( $post_type, AMP_QUERY_VAR ) ) {
 		return;
 	}
 
diff --git a/templates/style.php b/templates/style.php
index 235a559de3c..a9ccc9a3a93 100644
--- a/templates/style.php
+++ b/templates/style.php
@@ -36,21 +36,6 @@
 	margin-right: auto;
 }
 
-/* Text meant only for screen readers */
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
 .amp-wp-enforced-sizes {
 	/** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/
 	max-width: 100%;