Improve AMP admin bar menu item

* Add setting for turning off admin bar * Link between AMP and non-AMP versions when on non-native. * Show actual validation errors when viewing admin bar AMP. * Show warning emoji when there are sanitized unaccepted validation errors.
ampproject · Jun 20, 2018 · 1f7f860 · 1f7f860
1 parent 3188501
commit 1f7f860
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 65 deletions.
diff --git a/includes/class-amp-theme-support.php b/includes/class-amp-theme-support.php
@@ -352,23 +352,11 @@ public static function add_hooks() {
 		 * Disable admin bar because admin-bar.css (28K) and Dashicons (48K) alone
 		 * combine to surpass the 50K limit imposed for the amp-custom style.
 		 */
-		add_action( 'admin_bar_init', function() {
-			wp_dequeue_script( 'admin-bar' );
-			wp_styles()->registered['admin-bar']->src = amp_get_asset_url( 'css/admin-bar.css' );
-			wp_styles()->registered['admin-bar']->ver = AMP__VERSION;
-			add_filter( 'body_class', function( $body_classes ) {
-				return array_merge(
-					array_diff(
-						$body_classes,
-						array( 'no-customize-support' )
-					),
-					array( 'customize-support' )
-				);
-			} );
-			add_action( 'admin_bar_menu', function() {
-				remove_action( 'wp_before_admin_bar_render', 'wp_customize_support_script' );
-			}, 41 );
-		} );
+		if ( AMP_Options_Manager::get_option( 'disable_admin_bar' ) ) {
+			add_filter( 'show_admin_bar', '__return_false', 100 );
+		} else {
+			add_action( 'admin_bar_init', array( __CLASS__, 'init_admin_bar' ) );
+		}
 
 		/*
 		 * Start output buffering at very low priority for sake of plugins and themes that use template_redirect
@@ -932,6 +920,37 @@ public static function filter_cancel_comment_reply_link( $formatted_link, $link,
 		);
 	}
 
+	/**
+	 * Configure the admin bar for AMP.
+	 *
+	 * @since 1.0
+	 */
+	public static function init_admin_bar() {
+
+		// Replace admin-bar.css in core with forked version which makes use of :focus-within among other change for AMP-compat.
+		wp_styles()->registered['admin-bar']->src = amp_get_asset_url( 'css/admin-bar.css' );
+		wp_styles()->registered['admin-bar']->ver = AMP__VERSION;
+
+		// Remove script which is almost entirely made obsolete by :focus-inside in the forked admin-bar.css.
+		wp_dequeue_script( 'admin-bar' );
+
+		// Remove customize support script since not valid AMP.
+		add_action( 'admin_bar_menu', function() {
+			remove_action( 'wp_before_admin_bar_render', 'wp_customize_support_script' );
+		}, 41 );
+
+		// Emulate customize support script in PHP, to assume Customizer.
+		add_filter( 'body_class', function( $body_classes ) {
+			return array_merge(
+				array_diff(
+					$body_classes,
+					array( 'no-customize-support' )
+				),
+				array( 'customize-support' )
+			);
+		} );
+	}
+
 	/**
 	 * Print AMP boilerplate and custom styles.
 	 */
@@ -1269,11 +1288,9 @@ public static function prepare_response( $response, $args = array() ) {
 			trigger_error( esc_html( sprintf( __( 'The database has the %s encoding when it needs to be utf-8 to work with AMP.', 'amp' ), get_bloginfo( 'charset' ) ) ), E_USER_WARNING ); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_trigger_error
 		}
 
-		if ( AMP_Validation_Manager::should_validate_response() ) {
-			AMP_Validation_Manager::finalize_validation( $dom, array(
-				'remove_source_comments' => ! isset( $_GET['amp_preserve_source_comments'] ), // WPCS: CSRF.
-			) );
-		}
+		AMP_Validation_Manager::finalize_validation( $dom, array(
+			'remove_source_comments' => ! isset( $_GET['amp_preserve_source_comments'] ), // WPCS: CSRF.
+		) );
 
 		$response  = "<!DOCTYPE html>\n";
 		$response .= AMP_DOM_Utils::get_content_from_dom_node( $dom, $dom->documentElement );

diff --git a/includes/options/class-amp-options-manager.php b/includes/options/class-amp-options-manager.php
@@ -28,6 +28,7 @@ class AMP_Options_Manager {
 		'analytics'            => array(),
 		'force_sanitization'   => false,
 		'accept_tree_shaking'  => false,
+		'disable_admin_bar'    => false,
 	);
 
 	/**
@@ -117,6 +118,7 @@ public static function validate_options( $new_options ) {
 
 		$options['force_sanitization']  = ! empty( $new_options['force_sanitization'] );
 		$options['accept_tree_shaking'] = ! empty( $new_options['accept_tree_shaking'] );
+		$options['disable_admin_bar']   = ! empty( $new_options['disable_admin_bar'] );
 
 		// Validate post type support.
 		if ( isset( $new_options['supported_post_types'] ) ) {

diff --git a/includes/options/class-amp-options-menu.php b/includes/options/class-amp-options-menu.php
@@ -257,6 +257,16 @@ public function render_validation_handling() {
 					jQuery( '.amp-tree-shaking' ).toggleClass( 'hidden', this.checked && 'native' !== jQuery( 'input[type=radio][name="amp-options[theme_support]"]:checked' ).val() );
 				} ).trigger( 'change' );
 			</script>
+
+			<p>
+				<label for="disable_admin_bar">
+					<input id="disable_admin_bar" type="checkbox" name="<?php echo esc_attr( AMP_Options_Manager::OPTION_NAME . '[disable_admin_bar]' ); ?>" <?php checked( AMP_Options_Manager::get_option( 'disable_admin_bar' ) ); ?>>
+					<?php esc_html_e( 'Disable admin bar on AMP pages.', 'amp' ); ?>
+				</label>
+			</p>
+			<p class="description">
+				<?php esc_html_e( 'An additional stylesheet is required to properly render the admin bar. If the additional stylesheet causes the total CSS to surpass 50KB then the admin bar should be disabled to prevent a validation error or an unstyled admin bar in AMP responses .', 'amp' ); ?>
+			</p>
 		</fieldset>
 		<?php
 	}

diff --git a/includes/validation/class-amp-invalid-url-post-type.php b/includes/validation/class-amp-invalid-url-post-type.php
@@ -1355,11 +1355,9 @@ public static function print_url_as_title( $post ) {
 			return;
 		}
 
-		// Remember URL is stored in post_title. Adding query var prevents redirection to non-AMP page.
-		$view_url = add_query_arg( AMP_Validation_Manager::VALIDATE_QUERY_VAR, '', $url );
 		?>
 		<h2 class="amp-invalid-url">
-			<a href="<?php echo esc_url( $view_url ); ?>"><?php echo esc_html( $url ); ?></a>
+			<a href="<?php echo esc_url( $url ); ?>"><?php echo esc_html( $url ); ?></a>
 		</h2>
 		<?php
 	}