GoogleForCreators · swissspidy · Sep 18, 2020 · Sep 24, 2020 · Sep 24, 2020 · Sep 24, 2020
diff --git a/includes/AMP/Sanitization.php b/includes/AMP/Sanitization.php
@@ -28,6 +28,7 @@
 
 use Google\Web_Stories_Dependencies\AMP_Allowed_Tags_Generated;
 use Google\Web_Stories_Dependencies\AMP_Content_Sanitizer;
+use Google\Web_Stories_Dependencies\AMP_Dev_Mode_Sanitizer;
 use Google\Web_Stories_Dependencies\AMP_DOM_Utils;
 use Google\Web_Stories_Dependencies\AMP_Layout_Sanitizer;
 use Google\Web_Stories_Dependencies\AMP_Script_Sanitizer;
@@ -421,7 +422,7 @@ protected function get_sanitizers() {
 
 			$sanitizers = array_merge(
 				[
-					\AMP_Dev_Mode_Sanitizer::class => [
+					AMP_Dev_Mode_Sanitizer::class => [
 						'element_xpaths' => $dev_mode_xpaths,
 					],
 				],

diff --git a/includes/Story_Post_Type.php b/includes/Story_Post_Type.php
@@ -366,16 +366,17 @@ public function filter_revision_fields( $fields, $story ) {
 	}
 
 	/**
-	 * Filter if show admin bar on single post type.
+	 * Filter if show admin bar on single story template and we're not in an amp-story-player.
 	 *
 	 * @since 1.0.0
 	 *
-	 * @param boolean $show Current value of filter.
+	 * @param bool $show Current value of filter.
 	 *
 	 * @return bool
 	 */
 	public function show_admin_bar( $show ) {
-		if ( is_singular( self::POST_TYPE_SLUG ) ) {
+		// Note that the amp_js_v query param is an indication that the story is inside an amp-story-player.
+		if ( is_singular( self::POST_TYPE_SLUG ) && isset( $_GET['amp_js_v'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 			$show = false;
 		}
 

diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
@@ -74,6 +74,7 @@ public function __construct( Story $story ) {
 	 */
 	public function render() {
 		$markup = $this->story->get_markup();
+		$markup = $this->display_admin_bar( $markup );
 		$markup = $this->replace_html_head( $markup );
 		$markup = $this->replace_url_scheme( $markup );
 		$markup = $this->print_analytics( $markup );
@@ -184,6 +185,27 @@ protected function get_html_head_markup() {
 		<meta name="amp-story-generator-version" content="<?php echo esc_attr( WEBSTORIES_VERSION ); ?>" />
 		<?php
 
+		if ( is_admin_bar_showing() && is_user_logged_in() ) {
+			// Printing scripts here is done primarily for the benefit of the admin bar.
+			// Note that wp_enqueue_scripts() is not called.
+			wp_styles()->do_items();
+			wp_print_head_scripts();
+			wp_print_footer_scripts();
+			?>
+			<style media="screen" id="admin-bar-inline-css">
+				amp-story {
+					top: 32px !important;
+				}
+
+				@media screen and ( max-width: 782px ) {
+					amp-story {
+						top: 46px !important;
+					}
+				}
+			</style>
+			<?php
+		}
+
 		/**
 		 * Prints scripts or data in the head tag on the front end.
 		 */
@@ -220,6 +242,74 @@ protected function replace_html_head( $content ) {
 		return $content;
 	}
 
+	/**
+	 * Displays the WordPress admin bar on the frontend.
+	 *
+	 * @since 1.2.0
+	 *
+	 * @param string $content Story markup.
+	 *
+	 * @return string Filtered content.
+	 */
+	protected function display_admin_bar( $content ) {
+		ob_start();
+
+		wp_admin_bar_render();
+
+		$output = (string) ob_get_clean();
+
+		return str_replace( '<body>', '<body>' . $output, $content );
+	}
+
+	/**
+	 * Prints the admin bar styles.
+	 *
+	 * Does not rely on theme support for the admin bar
+	 * or the default admin bar styling callback
+	 * since Web Stories are theme-independent and require
+	 * specific styling.
+	 *
+	 * @since 1.2.0
+	 *
+	 * @see _admin_bar_bump_cb
+	 *
+	 * @param Document|AMP_Document $document Document instance.
+	 * @return void
+	 */
+	protected function add_admin_bar_styles( &$document ) {
+		ob_start();
+
+		wp_styles()->do_items();
+
+		?>
+		<style media="screen" id="admin-bar-inline-css">
+			amp-story { top: 32px !important; }
+			@media screen and ( max-width: 782px ) {
+				amp-story { top: 46px !important; }
+			}
+		</style>
+		<?php
+
+		$output = (string) ob_get_clean();
+
+		if ( empty( $output ) ) {
+			return;
+		}
+
+		$fragment          = $document->createDocumentFragment();
+		$fragment_document = Document::fromHtmlFragment( $output );
+
+		if ( $fragment_document ) {
+			while ( $fragment_document->body->firstChild ) {
+				$node = $fragment_document->body->removeChild( $fragment_document->body->firstChild );
+				$node = $document->importNode( $node, true );
+				$fragment->appendChild( $node );
+			}
+		}
+
+		$document->head->appendChild( $fragment );
+	}
+
 	/**
 	 * Force home urls to http / https based on context.
 	 *
@@ -237,7 +327,6 @@ protected function replace_url_scheme( $content ) {
 		}
 
 		return $content;
-
 	}
 
 	/**

diff --git a/scoper.inc.php b/scoper.inc.php
@@ -84,6 +84,7 @@
 				[
 					'vendor/ampproject/amp-wp/includes/sanitizers/class-amp-allowed-tags-generated.php',
 					'vendor/ampproject/amp-wp/includes/sanitizers/class-amp-base-sanitizer.php',
+					'vendor/ampproject/amp-wp/includes/sanitizers/class-amp-dev-mode-sanitizer.php',
 					'vendor/ampproject/amp-wp/includes/sanitizers/class-amp-layout-sanitizer.php',
 					'vendor/ampproject/amp-wp/includes/sanitizers/class-amp-meta-sanitizer.php',
 					'vendor/ampproject/amp-wp/includes/sanitizers/class-amp-rule-spec.php',

diff --git a/tests/phpunit/tests/Story_Post_Type.php b/tests/phpunit/tests/Story_Post_Type.php
@@ -93,7 +93,6 @@ public function test_init() {
 		$story_post_type->init();
 
 		$this->assertSame( 10, has_filter( 'admin_enqueue_scripts', [ $story_post_type, 'admin_enqueue_scripts' ] ) );
-		$this->assertSame( 10, has_filter( 'show_admin_bar', [ $story_post_type, 'show_admin_bar' ] ) );
 		$this->assertSame( 10, has_filter( 'replace_editor', [ $story_post_type, 'replace_editor' ] ) );
 		$this->assertSame( 10, has_filter( 'use_block_editor_for_post_type', [ $story_post_type, 'filter_use_block_editor_for_post_type' ] ) );
 		$this->assertSame( PHP_INT_MAX, has_filter( 'template_include', [ $story_post_type, 'filter_template_include' ] ) );
@@ -257,11 +256,12 @@ public function test_filter_template_include() {
 		$this->assertContains( WEBSTORIES_PLUGIN_DIR_PATH, $template_include );
 	}
 
+	/**
+
 	/**
 	 * @covers ::show_admin_bar
 	 */
 	public function test_show_admin_bar() {
-		$this->set_permalink_structure( '/%postname%/' );
 		$this->go_to( get_permalink( self::$story_id ) );
 		$experiments     = $this->createMock( \Google\Web_Stories\Experiments::class );
 		$meta_boxes      = $this->createMock( \Google\Web_Stories\Meta_Boxes::class );

diff --git a/tests/phpunit/tests/Story_Renderer/HTML.php b/tests/phpunit/tests/Story_Renderer/HTML.php
@@ -241,6 +241,47 @@ public function test_add_poster_images_no_poster_no_amp() {
 		$this->assertNotContains( 'amp=', $rendered );
 	}
 
+	/**
+	 * @covers ::display_admin_bar
+	 */
+	public function test_display_admin_bar_disabled() {
+		$post = self::factory()->post->create_and_get(
+			[
+				'post_type'    => \Google\Web_Stories\Story_Post_Type::POST_TYPE_SLUG,
+				'post_content' => '<html><head></head><body><amp-story standalone="" publisher="Web Stories" title="Example Story" publisher-logo-src="https://example.com/image.png" poster-portrait-src="https://example.com/image.png"><amp-story-page id="example"><amp-story-grid-layer template="fill"></amp-story-grid-layer></amp-story-page></amp-story></body></html>',
+			]
+		);
+
+		add_filter( 'show_admin_bar', '__return_false' );
+		_wp_admin_bar_init();
+		$actual = $this->setup_renderer( $post );
+		remove_filter( 'show_admin_bar', '__return_false' );
+
+		$this->assertNotContains( '<div id="wpadminbar"', $actual );
+		$this->assertNotContains( 'amp-story{top:32px}', $actual );
+	}
+
+	/**
+	 * @covers ::display_admin_bar
+	 */
+	public function test_display_admin_bar() {
+		$post = self::factory()->post->create_and_get(
+			[
+				'post_type'    => \Google\Web_Stories\Story_Post_Type::POST_TYPE_SLUG,
+				'post_content' => '<html><head></head><body><amp-story standalone="" publisher="Web Stories" title="Example Story" publisher-logo-src="https://example.com/image.png" poster-portrait-src="https://example.com/image.png"><amp-story-page id="example"><amp-story-grid-layer template="fill"></amp-story-grid-layer></amp-story-page></amp-story></body></html>',
+			]
+		);
+
+		add_filter( 'show_admin_bar', '__return_true' );
+		_wp_admin_bar_init();
+		$actual = $this->setup_renderer( $post );
+		remove_filter( 'show_admin_bar', '__return_true' );
+
+		$this->assertContains( '<div id="wpadminbar"', $actual );
+		$this->assertContains( 'amp-story{top:32px}', $actual );
+	}
+
+
 	/**
 	 * @covers ::sanitize_markup
 	 * @covers ::optimize_markup