From bf18d7986d10c59bd68766bdc84e81634e223240 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Sat, 7 Sep 2019 23:17:17 -0700
Subject: [PATCH 1/7] Add initial support for AMP dev mode

---
 includes/Core/Admin_Bar/Admin_Bar.php | 16 ++++++++-
 includes/Core/Assets/Assets.php       | 47 +++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/includes/Core/Admin_Bar/Admin_Bar.php b/includes/Core/Admin_Bar/Admin_Bar.php
index a7f340e1daa..2e59e949af5 100644
--- a/includes/Core/Admin_Bar/Admin_Bar.php
+++ b/includes/Core/Admin_Bar/Admin_Bar.php
@@ -82,7 +82,7 @@ function( $wp_admin_bar ) {
 			$this->assets->enqueue_asset( 'googlesitekit_adminbar_css' );
 
 			if ( $this->context->is_amp() ) {
-				return;
+				add_filter( 'amp_dev_mode_element_xpaths', [ $this, 'add_amp_dev_mode' ] );
 			}
 
 			// Enqueue scripts.
@@ -92,6 +92,20 @@ function( $wp_admin_bar ) {
 		add_action( 'wp_enqueue_scripts', $admin_bar_callback, 40 );
 	}
 
+	/**
+	 * Add data-ampdevmode attributes to the elements that need it.
+	 *
+	 * @see \Google\Site_Kit\Core\Assets\Assets::get_assets() The 'googlesitekit' string is added to all inline scripts.
+	 * @eee \Google\Site_Kit\Core\Assets\Assets::add_amp_dev_mode_attributes() The data-ampdevmode attribute is added to registered scripts/styles here.
+	 *
+	 * @param string[] $xpath_queries XPath queries for elements that should get the data-ampdevmode attribute.
+	 * @return string[] XPath queries.
+	 */
+	public function add_amp_dev_mode( $xpath_queries ) {
+		$xpath_queries[] = '//script[ contains( text(), "googlesitekit" ) ]';
+		return $xpath_queries;
+	}
+
 	/**
 	 * Render the Adminbar button.
 	 *
diff --git a/includes/Core/Assets/Assets.php b/includes/Core/Assets/Assets.php
index 657c834e1cd..3a8d1a86392 100644
--- a/includes/Core/Assets/Assets.php
+++ b/includes/Core/Assets/Assets.php
@@ -230,6 +230,41 @@ private function register_assets() {
 		foreach ( $assets as $asset ) {
 			$asset->register();
 		}
+
+		$this->add_amp_dev_mode_attributes( $assets );
+	}
+
+	/**
+	 * Add data-ampdevmode attributes to assets.
+	 *
+	 * @todo What about dependencies?
+	 *
+	 * @param Asset[] $assets Assets.
+	 */
+	private function add_amp_dev_mode_attributes( $assets ) {
+		add_filter(
+			'script_loader_tag',
+			function ( $tag, $handle ) use ( $assets ) {
+				if ( $this->context->is_amp() && isset( $assets[ $handle ] ) && $assets[ $handle ] instanceof Script ) {
+					$tag = preg_replace( '/(?<=<script)(?=\s|>)/i', ' data-ampdevmode', $tag );
+				}
+				return $tag;
+			},
+			10,
+			2
+		);
+
+		add_filter(
+			'style_loader_tag',
+			function ( $tag, $handle ) use ( $assets ) {
+				if ( $this->context->is_amp() && isset( $assets[ $handle ] ) && $assets[ $handle ] instanceof Stylesheet ) {
+					$tag = preg_replace( '/(?<=<link)(?=\s|>)/i', ' data-ampdevmode', $tag );
+				}
+				return $tag;
+			},
+			10,
+			2
+		);
 	}
 
 	/**
@@ -248,7 +283,7 @@ private function enqueue_minimal_admin_script() {
 	 *
 	 * @since 1.0.0
 	 *
-	 * @return array Associative array of asset $handle => $instance pairs.
+	 * @return Asset[] Associative array of asset $handle => $instance pairs.
 	 */
 	private function get_assets() {
 		if ( $this->assets ) {
@@ -280,7 +315,7 @@ private function get_assets() {
 					'dependencies'  => array( 'sitekit-vendor' ),
 					'post_register' => function( $handle ) use ( $base_url ) {
 						$url_polyfill = (
-							'( typeof URL === \'function\') || ' .
+							'/*googlesitekit*/ ( typeof URL === \'function\') || ' .
 							'document.write( \'<script src="' . // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
 							$base_url . 'js/externals/wp-polyfill-url.js' .
 							'"></scr\' + \'ipt>\' );'
@@ -639,7 +674,7 @@ private function get_external_assets() {
 					'version'       => '4.17.11',
 					'fallback'      => true,
 					'post_register' => function( $handle ) {
-						wp_add_inline_script( $handle, 'window.lodash = window.lodash || _.noConflict(); window.lodash_load = true;' );
+						wp_add_inline_script( $handle, '/*googlesitekit*/ window.lodash = window.lodash || _.noConflict(); window.lodash_load = true;' );
 					},
 				)
 			),
@@ -681,7 +716,7 @@ private function get_external_assets() {
 							'window.FormData && window.FormData.prototype.keys'      => $base_url . 'js/externals/wp-polyfill-formdata.js', // phpcs:ignore WordPress.Arrays.MultipleStatementAlignment
 							'Element.prototype.matches && Element.prototype.closest' => $base_url . 'js/externals/wp-polyfill-element-closest.js', // phpcs:ignore WordPress.Arrays.MultipleStatementAlignment
 						);
-						$polyfill_scripts = '';
+						$polyfill_scripts = '/*googlesitekit*/';
 						foreach ( $inline_polyfill_tests as $test => $script ) { // phpcs:ignore Generic.WhiteSpace.ScopeIndent.IncorrectExact
 							$polyfill_scripts .= (
 								'( ' . $test . ' ) || ' .
@@ -752,7 +787,7 @@ private function get_external_assets() {
 						wp_add_inline_script(
 							$handle,
 							sprintf(
-								'wp.apiFetch.use( wp.apiFetch.createNonceMiddleware( "%s" ) );',
+								'/*googlesitekit*/ wp.apiFetch.use( wp.apiFetch.createNonceMiddleware( "%s" ) );',
 								( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
 							),
 							'after'
@@ -760,7 +795,7 @@ private function get_external_assets() {
 						wp_add_inline_script(
 							$handle,
 							sprintf(
-								'wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "%s" ) );',
+								'/*googlesitekit*/ wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "%s" ) );',
 								esc_url_raw( get_rest_url() )
 							),
 							'after'

From b50a200f92beb4d2097eb1d2877daadf12abd674 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Fri, 20 Sep 2019 17:25:47 -0700
Subject: [PATCH 2/7] Fix typo in phpdoc tag

---
 includes/Core/Admin_Bar/Admin_Bar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/Core/Admin_Bar/Admin_Bar.php b/includes/Core/Admin_Bar/Admin_Bar.php
index 2e59e949af5..ffbde7cc1e2 100644
--- a/includes/Core/Admin_Bar/Admin_Bar.php
+++ b/includes/Core/Admin_Bar/Admin_Bar.php
@@ -96,7 +96,7 @@ function( $wp_admin_bar ) {
 	 * Add data-ampdevmode attributes to the elements that need it.
 	 *
 	 * @see \Google\Site_Kit\Core\Assets\Assets::get_assets() The 'googlesitekit' string is added to all inline scripts.
-	 * @eee \Google\Site_Kit\Core\Assets\Assets::add_amp_dev_mode_attributes() The data-ampdevmode attribute is added to registered scripts/styles here.
+	 * @see \Google\Site_Kit\Core\Assets\Assets::add_amp_dev_mode_attributes() The data-ampdevmode attribute is added to registered scripts/styles here.
 	 *
 	 * @param string[] $xpath_queries XPath queries for elements that should get the data-ampdevmode attribute.
 	 * @return string[] XPath queries.

From b822bd4b599fd26f5c92202106bf20b580927e2e Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Sun, 27 Oct 2019 13:04:43 -0700
Subject: [PATCH 3/7] Short-circuit AMP dev mode integration if not in dev mode

---
 includes/Core/Admin_Bar/Admin_Bar.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/includes/Core/Admin_Bar/Admin_Bar.php b/includes/Core/Admin_Bar/Admin_Bar.php
index 56801317590..ce7035f9ef3 100644
--- a/includes/Core/Admin_Bar/Admin_Bar.php
+++ b/includes/Core/Admin_Bar/Admin_Bar.php
@@ -82,6 +82,10 @@ function( $wp_admin_bar ) {
 			$this->assets->enqueue_asset( 'googlesitekit_adminbar_css' );
 
 			if ( $this->context->is_amp() ) {
+				if ( ! function_exists( 'amp_is_dev_mode' ) || ! amp_is_dev_mode() ) {
+					// AMP Dev Mode support was added in v1.4, and if it is not enabled then short-circuit since scripts will be invalid.
+					return;
+				}
 				add_filter( 'amp_dev_mode_element_xpaths', [ $this, 'add_amp_dev_mode' ] );
 			}
 

From 7561d0de6a4c73e0791a10f3196fdb016988ac4b Mon Sep 17 00:00:00 2001
From: Felix Arntz <felixarntz@google.com>
Date: Wed, 20 Nov 2019 13:20:23 +0530
Subject: [PATCH 4/7] Render full Site Kit admin bar menu markup if AMP dev
 mode is enabled.

---
 includes/Core/Admin_Bar/Admin_Bar.php | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/includes/Core/Admin_Bar/Admin_Bar.php b/includes/Core/Admin_Bar/Admin_Bar.php
index ce7035f9ef3..8c99e67054c 100644
--- a/includes/Core/Admin_Bar/Admin_Bar.php
+++ b/includes/Core/Admin_Bar/Admin_Bar.php
@@ -82,7 +82,7 @@ function( $wp_admin_bar ) {
 			$this->assets->enqueue_asset( 'googlesitekit_adminbar_css' );
 
 			if ( $this->context->is_amp() ) {
-				if ( ! function_exists( 'amp_is_dev_mode' ) || ! amp_is_dev_mode() ) {
+				if ( ! $this->is_amp_dev_mode() ) {
 					// AMP Dev Mode support was added in v1.4, and if it is not enabled then short-circuit since scripts will be invalid.
 					return;
 				}
@@ -131,7 +131,7 @@ private function add_menu_button( $wp_admin_bar ) {
 			),
 		);
 
-		if ( $this->context->is_amp() ) {
+		if ( $this->context->is_amp() && ! $this->is_amp_dev_mode() ) {
 			$post = get_post();
 			if ( ! $post || ! current_user_can( 'edit_post', $post->ID ) ) {
 				return;
@@ -233,6 +233,19 @@ private function is_admin_post_screen() {
 		return true;
 	}
 
+	/**
+	 * Checks whether AMP dev mode is enabled.
+	 *
+	 * This is only relevant if the current context is AMP.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return bool True if AMP dev mode is enabled, false otherwise.
+	 */
+	private function is_amp_dev_mode() {
+		return function_exists( 'amp_is_dev_mode' ) && amp_is_dev_mode();
+	}
+
 	/**
 	 * Return the Adminbar content markup.
 	 *

From 69831d48c127f0106750a9fa2626ef82d75da62f Mon Sep 17 00:00:00 2001
From: Felix Arntz <felixarntz@google.com>
Date: Wed, 20 Nov 2019 14:14:29 +0530
Subject: [PATCH 5/7] Bundle wp-escape-html and wp-is-shallow-equal since they
 are dependencies of wp-element and wp-compose respectively.

---
 includes/Core/Assets/Assets.php | 16 ++++++++++++++++
 package.json                    |  2 ++
 webpack.config.js               |  2 ++
 3 files changed, 20 insertions(+)

diff --git a/includes/Core/Assets/Assets.php b/includes/Core/Assets/Assets.php
index 24c50b23324..8e735232f77 100644
--- a/includes/Core/Assets/Assets.php
+++ b/includes/Core/Assets/Assets.php
@@ -723,6 +723,22 @@ private function get_external_assets() {
 					},
 				)
 			),
+			new Script(
+				'wp-escape-html',
+				array(
+					'src'      => $base_url . 'js/externals/escapeHtml.js',
+					'version'  => '1.5.1',
+					'fallback' => true,
+				)
+			),
+			new Script(
+				'wp-is-shallow-equal',
+				array(
+					'src'      => $base_url . 'js/externals/isShallowEqual.js',
+					'version'  => '1.6.1',
+					'fallback' => true,
+				)
+			),
 			new Script(
 				'wp-hooks',
 				array(
diff --git a/package.json b/package.json
index 790aa438ab2..15c01ab4fee 100644
--- a/package.json
+++ b/package.json
@@ -122,9 +122,11 @@
     "@wordpress/dom-ready": "^2.5.1",
     "@wordpress/e2e-test-utils": "^2.1.0",
     "@wordpress/element": "^2.8.2",
+    "@wordpress/escape-html": "^1.5.1",
     "@wordpress/eslint-plugin": "^2.4.0",
     "@wordpress/hooks": "^2.6.0",
     "@wordpress/i18n": "^3.6.1",
+    "@wordpress/is-shallow-equal": "^1.6.1",
     "@wordpress/library-export-default-webpack-plugin": "^1.1.0",
     "@wordpress/scripts": "^3.3.0",
     "@wordpress/url": "^2.8.2",
diff --git a/webpack.config.js b/webpack.config.js
index 2b3b5358d03..2aa42fb982e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -49,8 +49,10 @@ const externalPackages = [
 	'compose',
 	'dom-ready',
 	'element',
+	'escape-html',
 	'hooks',
 	'i18n',
+	'is-shallow-equal',
 	'url',
 ];
 

From 545db1023a786b2364407de50923cb6f1d2e1a9c Mon Sep 17 00:00:00 2001
From: Felix Arntz <felixarntz@google.com>
Date: Wed, 20 Nov 2019 14:22:26 +0530
Subject: [PATCH 6/7] Update external WP asset versions to those actually
 bundled.

---
 includes/Core/Assets/Assets.php | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/includes/Core/Assets/Assets.php b/includes/Core/Assets/Assets.php
index 8e735232f77..8f0bfc2173b 100644
--- a/includes/Core/Assets/Assets.php
+++ b/includes/Core/Assets/Assets.php
@@ -665,7 +665,7 @@ private function get_external_assets() {
 				'lodash',
 				array(
 					'src'           => $base_url . 'vendor/lodash' . $suffix . '.js',
-					'version'       => '4.17.11',
+					'version'       => '4.17.15',
 					'fallback'      => true,
 					'post_register' => function( $handle ) {
 						wp_add_inline_script( $handle, '/*googlesitekit*/ window.lodash = window.lodash || _.noConflict(); window.lodash_load = true;' );
@@ -684,7 +684,7 @@ private function get_external_assets() {
 				'react',
 				array(
 					'src'      => $base_url . 'vendor/react' . $react_suffix . '.js',
-					'version'  => '16.8.5',
+					'version'  => '16.11.0',
 					'fallback' => true,
 				)
 			),
@@ -692,7 +692,7 @@ private function get_external_assets() {
 				'react-dom',
 				array(
 					'src'      => $base_url . 'vendor/react-dom' . $react_suffix . '.js',
-					'version'  => '16.8.5',
+					'version'  => '16.11.0',
 					'fallback' => true,
 				)
 			),
@@ -743,7 +743,7 @@ private function get_external_assets() {
 				'wp-hooks',
 				array(
 					'src'      => $base_url . 'js/externals/hooks.js',
-					'version'  => '2.2.0',
+					'version'  => '2.6.0',
 					'fallback' => true,
 				)
 			),
@@ -751,7 +751,7 @@ private function get_external_assets() {
 				'wp-element',
 				array(
 					'src'      => $base_url . 'js/externals/element.js',
-					'version'  => '2.3.0',
+					'version'  => '2.8.2',
 					'fallback' => true,
 				)
 			),
@@ -759,7 +759,7 @@ private function get_external_assets() {
 				'wp-dom-ready',
 				array(
 					'src'      => $base_url . 'js/externals/domReady.js',
-					'version'  => '2.2.0',
+					'version'  => '2.5.1',
 					'fallback' => true,
 				)
 			),
@@ -767,7 +767,7 @@ private function get_external_assets() {
 				'wp-i18n',
 				array(
 					'src'      => $base_url . 'js/externals/i18n.js',
-					'version'  => '3.3.0',
+					'version'  => '3.6.1',
 					'fallback' => true,
 				)
 			),
@@ -775,7 +775,7 @@ private function get_external_assets() {
 				'wp-url',
 				array(
 					'src'      => $base_url . 'js/externals/url.js',
-					'version'  => '2.3.3',
+					'version'  => '2.8.2',
 					'fallback' => true,
 				)
 			),
@@ -783,7 +783,7 @@ private function get_external_assets() {
 				'wp-api-fetch',
 				array(
 					'src'           => $base_url . 'js/externals/apiFetch.js',
-					'version'       => '2.2.8',
+					'version'       => '3.6.4',
 					'fallback'      => true,
 					'post_register' => function( $handle ) {
 						wp_add_inline_script(
@@ -809,7 +809,7 @@ private function get_external_assets() {
 				'wp-compose',
 				array(
 					'src'      => $base_url . 'js/externals/compose.js',
-					'version'  => '3.2.0',
+					'version'  => '3.7.2',
 					'fallback' => true,
 				)
 			),

From 79d344c6eb0459912204163cfe7408c6c294481c Mon Sep 17 00:00:00 2001
From: Felix Arntz <felixarntz@users.noreply.github.com>
Date: Wed, 20 Nov 2019 23:22:07 +0530
Subject: [PATCH 7/7] Use traditional array syntax for consistency.

Co-Authored-By: Evan Mattson <evan.mattson@10up.com>
---
 includes/Core/Admin_Bar/Admin_Bar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/Core/Admin_Bar/Admin_Bar.php b/includes/Core/Admin_Bar/Admin_Bar.php
index 8c99e67054c..637e3d14505 100644
--- a/includes/Core/Admin_Bar/Admin_Bar.php
+++ b/includes/Core/Admin_Bar/Admin_Bar.php
@@ -86,7 +86,7 @@ function( $wp_admin_bar ) {
 					// AMP Dev Mode support was added in v1.4, and if it is not enabled then short-circuit since scripts will be invalid.
 					return;
 				}
-				add_filter( 'amp_dev_mode_element_xpaths', [ $this, 'add_amp_dev_mode' ] );
+				add_filter( 'amp_dev_mode_element_xpaths', array( $this, 'add_amp_dev_mode' ) );
 			}
 
 			// Enqueue scripts.