diff --git a/includes/Core/Admin_Bar/Admin_Bar.php b/includes/Core/Admin_Bar/Admin_Bar.php index 063f2a74bfe..637e3d14505 100644 --- a/includes/Core/Admin_Bar/Admin_Bar.php +++ b/includes/Core/Admin_Bar/Admin_Bar.php @@ -82,7 +82,11 @@ function( $wp_admin_bar ) { $this->assets->enqueue_asset( 'googlesitekit_adminbar_css' ); if ( $this->context->is_amp() ) { - return; + 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; + } + add_filter( 'amp_dev_mode_element_xpaths', array( $this, 'add_amp_dev_mode' ) ); } // Enqueue scripts. @@ -92,6 +96,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. + * @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. + */ + public function add_amp_dev_mode( $xpath_queries ) { + $xpath_queries[] = '//script[ contains( text(), "googlesitekit" ) ]'; + return $xpath_queries; + } + /** * Render the Adminbar button. * @@ -113,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; @@ -215,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. * diff --git a/includes/Core/Assets/Assets.php b/includes/Core/Assets/Assets.php index d477ddf2885..8f0bfc2173b 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( '/(?<=)/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( '/(?<=)/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( \'