Merge pull request #6877 from rtCamp/bug/6643-prevent-duplicate-scripts

Prevent duplicated script to hide admin bar in onboarding wizard

Author: westonruter

includes/amp-helper-functions.php

@@ -194,37 +194,43 @@ static function() {
 	 * Detects whether the current window is in an iframe with the specified `name` attribute. The iframe is created
 	 * by Preview component located in <assets/src/setup/pages/save/index.js>.
 	 */
-	add_action(
-		'wp_print_scripts',
-		function() {
-			if ( ! amp_is_dev_mode() || ! is_admin_bar_showing() ) {
+	add_action( 'wp_head', 'amp_remove_admin_bar_in_phone_preview' );
+	add_action( 'amp_post_template_head', 'amp_remove_admin_bar_in_phone_preview' );
+}
+
+/**
+ * Remove the admin bar in phone preview of the site in AMP Onboarding Wizard.
+ *
+ * @since 2.2.2
+ * @internal
+ */
+function amp_remove_admin_bar_in_phone_preview() {
+	if ( ! amp_is_dev_mode() || ! is_admin_bar_showing() ) {
+		return;
+	}
+	?>
+	<script data-ampdevmode>
+		( () => {
+			if ( 'amp-wizard-completion-preview' !== window.name ) {
 				return;
 			}
-			?>
-			<script data-ampdevmode>
-				( () => {
-					if ( 'amp-wizard-completion-preview' !== window.name ) {
-						return;
-					}
-
-					/** @type {HTMLStyleElement} */
-					const style = document.createElement( 'style' );
-					style.setAttribute( 'type', 'text/css' );
-					style.appendChild( document.createTextNode( 'html:not(#_) { margin-top: 0 !important; } #wpadminbar { display: none !important; }' ) );
-					document.head.appendChild( style );
-
-					document.addEventListener( 'DOMContentLoaded', function() {
-						const adminBar = document.getElementById( 'wpadminbar' );
-						if ( adminBar ) {
-							document.body.classList.remove( 'admin-bar' );
-							adminBar.remove();
-						}
-					});
-				} )();
-			</script>
-			<?php
-		}
-	);
+
+			/** @type {HTMLStyleElement} */
+			const style = document.createElement( 'style' );
+			style.setAttribute( 'type', 'text/css' );
+			style.appendChild( document.createTextNode( 'html:not(#_) { margin-top: 0 !important; } #wpadminbar { display: none !important; }' ) );
+			document.head.appendChild( style );
+
+			document.addEventListener( 'DOMContentLoaded', function() {
+				const adminBar = document.getElementById( 'wpadminbar' );
+				if ( adminBar ) {
+					document.body.classList.remove( 'admin-bar' );
+					adminBar.remove();
+				}
+			});
+		} )();
+	</script>
+	<?php
 }
 
 /**

tests/e2e/specs/amp-onboarding/done.js

@@ -22,6 +22,11 @@ async function testCommonDoneStepElements() {
 	await expect( page ).toMatchElement( 'p', { text: /Browse your site/i } );
 	await expect( page ).toMatchElement( '.done__preview-iframe' );
 
+	// Checks for admin bar in iframe phone preview.
+	const iframeElement = await page.$( 'iframe[name="amp-wizard-completion-preview"]' );
+	const previewFrame = await iframeElement.contentFrame();
+	await expect( previewFrame ).not.toMatchElement( '#wpadminbar' );
+
 	await expect( '.done__links-container a' ).not.countToBe( 0 );
 
 	const originalIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );

tests/php/test-amp-helper-functions.php

@@ -547,6 +547,43 @@ static function() use ( $home_url ) {
 		);
 	}
 
+	/** @covers ::amp_remove_admin_bar_in_phone_preview() */
+	public function test_amp_remove_admin_bar_in_phone_preview() {
+		add_filter( 'amp_dev_mode_enabled', '__return_true', 99 );
+		add_filter( 'show_admin_bar', '__return_true', 99 );
+
+		ob_start();
+		amp_remove_admin_bar_in_phone_preview();
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( '<script data-ampdevmode>', $output );
+		$this->assertStringContainsString( "'amp-wizard-completion-preview' !== window.name )", $output );
+
+		remove_filter( 'amp_dev_mode_enabled', '__return_true', 99 );
+		remove_filter( 'show_admin_bar', '__return_true', 99 );
+	}
+
+	/** @covers ::amp_remove_admin_bar_in_phone_preview() */
+	public function test_amp_remove_admin_bar_in_phone_preview_without_dev_mode() {
+		add_filter( 'amp_dev_mode_enabled', '__return_false', 99 );
+
+		ob_start();
+		amp_remove_admin_bar_in_phone_preview();
+		$output = ob_get_clean();
+		$this->assertEmpty( $output );
+
+		remove_filter( 'amp_dev_mode_enabled', '__return_false', 99 );
+
+		add_filter( 'show_admin_bar', '__return_false', 99 );
+
+		ob_start();
+		amp_remove_admin_bar_in_phone_preview();
+		$output = ob_get_clean();
+		$this->assertEmpty( $output );
+
+		remove_filter( 'show_admin_bar', '__return_false', 99 );
+	}
+
 	/**
 	 * Test amp_get_current_url().
 	 *