From b0535e595cff5b69ad8826a2357d4b1e0ad8761f Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Fri, 18 Sep 2020 19:22:28 +0200
Subject: [PATCH 1/9] Allow showing admin bar on frontend

---
 includes/Story_Post_Type.php            | 18 ------
 includes/Story_Renderer/HTML.php        | 80 ++++++++++++++++++++++++-
 tests/phpunit/tests/Story_Post_Type.php | 11 ----
 3 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/includes/Story_Post_Type.php b/includes/Story_Post_Type.php
index 4d1b9ebccff3..5597265ec644 100644
--- a/includes/Story_Post_Type.php
+++ b/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.
 	 *
diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
index 1e6aff4388e7..592dc1c12d67 100644
--- a/includes/Story_Renderer/HTML.php
+++ b/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,84 @@ 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 requiree
+	 * 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.
 	 *
diff --git a/tests/phpunit/tests/Story_Post_Type.php b/tests/phpunit/tests/Story_Post_Type.php
index f04d36cedd04..d56bf9a9688f 100644
--- a/tests/phpunit/tests/Story_Post_Type.php
+++ b/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
 	 */

From 1e8dbe2a6aca47ca4886fb0e544ef0ebd5c850e3 Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Thu, 24 Sep 2020 18:12:38 +0200
Subject: [PATCH 2/9] Add tests

---
 includes/Story_Renderer/HTML.php            |  3 +-
 tests/phpunit/tests/Story_Renderer/HTML.php | 41 +++++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
index 592dc1c12d67..8116590244e1 100644
--- a/includes/Story_Renderer/HTML.php
+++ b/includes/Story_Renderer/HTML.php
@@ -267,7 +267,6 @@ protected function display_admin_bar() {
 
 		wp_admin_bar_render();
 
-
 		$output = (string) ob_get_clean();
 
 		if ( empty( $output ) ) {
@@ -298,7 +297,7 @@ protected function display_admin_bar() {
 	 *
 	 * Does not rely on theme support for the admin bar
 	 * or the default admin bar styling callback
-	 * since Web Stories are theme-independent and requiree
+	 * since Web Stories are theme-independent and require
 	 * specific styling.
 	 *
 	 * @since 1.0.0
diff --git a/tests/phpunit/tests/Story_Renderer/HTML.php b/tests/phpunit/tests/Story_Renderer/HTML.php
index 7f9332ba3006..0db2346f1501 100644
--- a/tests/phpunit/tests/Story_Renderer/HTML.php
+++ b/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

From 4f57902b2c76cfde14326b7b3f2ce541128a2f9d Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Thu, 24 Sep 2020 23:31:01 +0200
Subject: [PATCH 3/9] Exclude VIP admin bar sniffs for tests

---
 phpcs.xml.dist | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index e839523ca790..02b96de75686 100644
--- a/phpcs.xml.dist
+++ b/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>

From 76eb74271d12d70f3ba9fae4810a2c4ecef9ff43 Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Thu, 24 Sep 2020 23:36:04 +0200
Subject: [PATCH 4/9] Fix indentation

---
 phpcs.xml.dist | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index 02b96de75686..3efd7662c1d9 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -16,9 +16,9 @@
 		<exclude name="WordPress.Files.FileName.NotHyphenatedLowercase" />
 	</rule>
 
-  <rule ref="WordPress-VIP-Go">
-    <exclude-pattern>tests/*</exclude-pattern>
-  </rule>
+	<rule ref="WordPress-VIP-Go">
+		<exclude-pattern>tests/*</exclude-pattern>
+	</rule>
 
 	<rule ref="WordPress.WP.I18n">
 		<properties>

From 973c69d2fd0571b9493a0a54c9f185271143c81d Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Fri, 25 Sep 2020 20:35:17 -0700
Subject: [PATCH 5/9] Fix parsing admin bar to add to import

---
 includes/Story_Renderer/HTML.php | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
index 8116590244e1..be28b1ae2975 100644
--- a/includes/Story_Renderer/HTML.php
+++ b/includes/Story_Renderer/HTML.php
@@ -326,10 +326,13 @@ protected function add_admin_bar_styles() {
 			return;
 		}
 
-		$fragment = $this->document->createDocumentFragment();
-		$fragment->appendXml( $output );
+		$fragment_document = Document::fromHtmlFragment( "<html><head>$output</head><body></body></html>" );
 
-		$this->document->head->appendChild( $fragment );
+		while ( $fragment_document->head->firstChild ) {
+			$node = $fragment_document->head->removeChild( $fragment_document->head->firstChild );
+			$node = $this->document->importNode( $node, true );
+			$this->document->head->appendChild( $node );
+		}
 	}
 
 	/**

From 2dffaebbe9464b5a06db02edbed805981753a90d Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Fri, 25 Sep 2020 20:48:36 -0700
Subject: [PATCH 6/9] Ensure amp-icons stylesheet is printed

---
 includes/Story_Renderer/HTML.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
index be28b1ae2975..5568f71ac001 100644
--- a/includes/Story_Renderer/HTML.php
+++ b/includes/Story_Renderer/HTML.php
@@ -309,7 +309,11 @@ protected function display_admin_bar() {
 	protected function add_admin_bar_styles() {
 		ob_start();
 
-		wp_styles()->do_items( 'admin-bar' );
+		$styles = [ 'admin-bar' ];
+		if ( wp_style_is( 'amp-icons', 'registered' ) ) {
+			$styles[] = 'amp-icons';
+		}
+		wp_styles()->do_items( $styles );
 
 		?>
 		<style media="screen" id="admin-bar-inline-css">

From 748bde83c2e3873a21ec5847f24660f5e508f712 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Fri, 25 Sep 2020 21:06:03 -0700
Subject: [PATCH 7/9] Prevent showing the admin bar in stories embedded inside
 amp-story-page

---
 includes/Story_Post_Type.php | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/includes/Story_Post_Type.php b/includes/Story_Post_Type.php
index 5597265ec644..16976674e30f 100644
--- a/includes/Story_Post_Type.php
+++ b/includes/Story_Post_Type.php
@@ -169,6 +169,7 @@ 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 );
 
@@ -510,6 +511,24 @@ public function filter_revision_fields( $fields, $story ) {
 		return $fields;
 	}
 
+	/**
+	 * Filter if show admin bar on single story template and we're not in an amp-story-player.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param bool $show Current value of filter.
+	 *
+	 * @return bool
+	 */
+	public function show_admin_bar( $show ) {
+		// 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;
+		}
+
+		return $show;
+	}
+
 	/**
 	 * Replace default post editor with our own implementation.
 	 *

From 4d089057bb928d3887c370ee6d7350644214f511 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Sat, 26 Sep 2020 21:40:12 -0700
Subject: [PATCH 8/9] Do all enqueued stylesheets

---
 includes/Story_Renderer/HTML.php | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
index 5568f71ac001..4c24668ffec7 100644
--- a/includes/Story_Renderer/HTML.php
+++ b/includes/Story_Renderer/HTML.php
@@ -309,11 +309,7 @@ protected function display_admin_bar() {
 	protected function add_admin_bar_styles() {
 		ob_start();
 
-		$styles = [ 'admin-bar' ];
-		if ( wp_style_is( 'amp-icons', 'registered' ) ) {
-			$styles[] = 'amp-icons';
-		}
-		wp_styles()->do_items( $styles );
+		wp_styles()->do_items();
 
 		?>
 		<style media="screen" id="admin-bar-inline-css">

From 85159f1a65b0f845c5f35c56dbf0b0c20174d510 Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Thu, 5 Nov 2020 14:00:23 +0100
Subject: [PATCH 9/9] Bring code a bit up to date

---
 .../AMP/Integration/AMP_Story_Sanitizer.php   |  1 -
 includes/AMP/Sanitization.php                 |  3 +-
 includes/AMP/Story_Sanitizer.php              |  1 -
 includes/AMP/Traits/Sanitization_Utils.php    | 84 -----------------
 includes/Story_Renderer/HTML.php              | 92 ++++++++++++++++++-
 scoper.inc.php                                |  1 +
 6 files changed, 94 insertions(+), 88 deletions(-)

diff --git a/includes/AMP/Integration/AMP_Story_Sanitizer.php b/includes/AMP/Integration/AMP_Story_Sanitizer.php
index 1e48dab35579..8196a3157b0b 100644
--- a/includes/AMP/Integration/AMP_Story_Sanitizer.php
+++ b/includes/AMP/Integration/AMP_Story_Sanitizer.php
@@ -54,6 +54,5 @@ public function sanitize() {
 		$this->insert_analytics_configuration( $this->dom );
 		$this->add_publisher_logo( $this->dom, $this->args['publisher_logo'], $this->args['publisher_logo_placeholder'] );
 		$this->add_poster_images( $this->dom, $this->args['poster_images'] );
-		$this->display_admin_bar( $this->dom );
 	}
 }
diff --git a/includes/AMP/Sanitization.php b/includes/AMP/Sanitization.php
index 8630d34bb343..ded6cb86e388 100644
--- 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/AMP/Story_Sanitizer.php b/includes/AMP/Story_Sanitizer.php
index 5753617a22f3..d99d030ca166 100644
--- a/includes/AMP/Story_Sanitizer.php
+++ b/includes/AMP/Story_Sanitizer.php
@@ -52,6 +52,5 @@ public function sanitize() {
 		$this->insert_analytics_configuration( $this->dom );
 		$this->add_publisher_logo( $this->dom, $this->args['publisher_logo'], $this->args['publisher_logo_placeholder'] );
 		$this->add_poster_images( $this->dom, $this->args['poster_images'] );
-		$this->display_admin_bar( $this->dom );
 	}
 }
diff --git a/includes/AMP/Traits/Sanitization_Utils.php b/includes/AMP/Traits/Sanitization_Utils.php
index 12b904bd2f40..0253e3525e0e 100644
--- a/includes/AMP/Traits/Sanitization_Utils.php
+++ b/includes/AMP/Traits/Sanitization_Utils.php
@@ -203,88 +203,4 @@ private function add_poster_images( &$document, $poster_images ) {
 			$document->html->removeAttribute( 'amp' );
 		}
 	}
-
-	/**
-	 * Displays the WordPress admin bar on the frontend.
-	 *
-	 * @since 1.2.0
-	 *
-	 * @param Document|AMP_Document $document Document instance.
-	 * @return void
-	 */
-	private function display_admin_bar( &$document ) {
-		ob_start();
-
-		wp_admin_bar_render();
-
-		$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->body->appendChild( $fragment );
-
-		$this->add_admin_bar_styles( $document );
-	}
-
-	/**
-	 * 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
-	 */
-	private 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 );
-	}
 }
diff --git a/includes/Story_Renderer/HTML.php b/includes/Story_Renderer/HTML.php
index a315b01ca79c..c3c212d615fb 100644
--- a/includes/Story_Renderer/HTML.php
+++ b/includes/Story_Renderer/HTML.php
@@ -26,6 +26,7 @@
 
 namespace Google\Web_Stories\Story_Renderer;
 
+use AmpProject\Dom\Document as AMP_Document;
 use Google\Web_Stories_Dependencies\AmpProject\Dom\Document;
 use Google\Web_Stories\Traits\Publisher;
 use Google\Web_Stories\Model\Story;
@@ -74,6 +75,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 );
 
@@ -184,6 +186,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.
 		 */
@@ -216,6 +239,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.
 	 *
@@ -231,7 +322,6 @@ protected function replace_url_scheme( $content ) {
 		}
 
 		return $content;
-
 	}
 
 	/**
diff --git a/scoper.inc.php b/scoper.inc.php
index 167399d09e18..e105948a8576 100644
--- 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',