Allow showing admin bar on frontend

includes/Story_Post_Type.php

@@ -169,7 +169,6 @@ public function init() {
 		);
 
 		add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] );
-		add_filter( 'show_admin_bar', [ $this, 'show_admin_bar' ] ); // phpcs:ignore WordPressVIPMinimum.UserExperience.AdminBarRemoval.RemovalDetected
 		add_filter( 'replace_editor', [ $this, 'replace_editor' ], 10, 2 );
 		add_filter( 'use_block_editor_for_post_type', [ $this, 'filter_use_block_editor_for_post_type' ], 10, 2 );
 
@@ -511,23 +510,6 @@ public function filter_revision_fields( $fields, $story ) {
 		return $fields;
 	}
 
-	/**
-	 * Filter if show admin bar on single post type.
-	 *
-	 * @since 1.0.0
-	 *
-	 * @param boolean $show Current value of filter.
-	 *
-	 * @return bool
-	 */
-	public function show_admin_bar( $show ) {
-		if ( is_singular( self::POST_TYPE_SLUG ) ) {
-			$show = false;
-		}
-
-		return $show;
-	}
-
 	/**
 	 * Replace default post editor with our own implementation.
 	 *

includes/Story_Renderer/HTML.php

@@ -94,8 +94,8 @@ public function render() {
 
 		$this->transform_html_start_tag();
 		$this->insert_analytics_configuration();
-
 		$this->add_poster_images();
+		$this->display_admin_bar();
 
 		if ( ! defined( '\AMP__VERSION' ) ) {
 			$this->sanitize_markup();
@@ -255,6 +255,83 @@ protected function get_poster_images() {
 		return array_filter( $images );
 	}
 
+	/**
+	 * Displays the WordPress admin bar on  the frontend.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @return void
+	 */
+	protected function display_admin_bar() {
+		ob_start();
+
+		wp_admin_bar_render();
+
+		$output = (string) ob_get_clean();
+
+		if ( empty( $output ) ) {
+			return;
+		}
+
+		$document = Document::fromHtmlFragment( $output, get_bloginfo( 'charset' ) );
+
+		if ( ! $document ) {
+			return;
+		}
+
+		$adminbar = $document->getElementById( 'wpadminbar' );
+
+		if ( ! $adminbar ) {
+			return;
+		}
+
+		$adminbar = $this->document->importNode( $adminbar, true );
+
+		$this->document->body->appendChild( $adminbar );
+
+		$this->add_admin_bar_styles();
+	}
+
+	/**
+	 * 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.0.0
+	 *
+	 * @see _admin_bar_bump_cb
+	 *
+	 * @return void
+	 */
+	protected function add_admin_bar_styles() {
+		ob_start();
+
+		wp_styles()->do_items( 'admin-bar' );
+
+		?>
+		<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 = $this->document->createDocumentFragment();
+		$fragment->appendXml( $output );
+
+		$this->document->head->appendChild( $fragment );
+	}
+
 	/**
 	 * Sanitizes markup to be valid AMP.
 	 *

phpcs.xml.dist

@@ -16,7 +16,9 @@
 		<exclude name="WordPress.Files.FileName.NotHyphenatedLowercase" />
 	</rule>
 
-	<rule ref="WordPress-VIP-Go" />
+	<rule ref="WordPress-VIP-Go">
+		<exclude-pattern>tests/*</exclude-pattern>
+	</rule>
 
 	<rule ref="WordPress.WP.I18n">
 		<properties>

tests/phpunit/tests/Story_Post_Type.php

@@ -90,7 +90,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' ] ) );
@@ -273,16 +272,6 @@ 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->go_to( get_permalink( self::$story_id ) );
-		$story_post_type = new \Google\Web_Stories\Story_Post_Type( $this->createMock( \Google\Web_Stories\Experiments::class ) );
-		$show_admin_bar  = $story_post_type->show_admin_bar( 'current' );
-		$this->assertFalse( $show_admin_bar );
-	}
-
 	/**
 	 * @covers ::add_to_jetpack_sitemap
 	 */

tests/phpunit/tests/Story_Renderer/HTML.php

@@ -199,6 +199,47 @@ public function test_insert_analytics_configuration_no_output() {
 		$this->assertNotContains( 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js', $actual );
 	}
 
+	/**
+	 * @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