From 53319570d96a2a058045a4dbc11b34fa87a0505e Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 18 Aug 2021 15:23:53 +0200
Subject: [PATCH 01/68] Update "Welcome" step copy

---
 .../src/onboarding-wizard/pages/welcome/index.js   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/welcome/index.js b/assets/src/onboarding-wizard/pages/welcome/index.js
index 7f751909804..f32b6363175 100644
--- a/assets/src/onboarding-wizard/pages/welcome/index.js
+++ b/assets/src/onboarding-wizard/pages/welcome/index.js
@@ -47,7 +47,7 @@ export function Welcome() {
 					</svg>
 				</div>
 				<h1>
-					{ __( 'Welcome to the Official AMP Plugin for WordPress', 'amp' ) }
+					{ __( 'AMP for WordPress', 'amp' ) }
 				</h1>
 			</div>
 			<div className="welcome__body">
@@ -72,9 +72,11 @@ export function Welcome() {
 							{ __( 'AMP and WordPress', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'AMP is a web framework designed to make it easier to build user-first sites, which are beautiful, fast, engaging, secure, and accessible.', 'amp' ) }
+							{ __( 'AMP provides support for building beautiful, fast, engaging, secure, and accessible sites, and the AMP plugin makes it easy for you to take advantage of AMP on WordPress.', 'amp' ) }
 							{ ' ' }
-							{ __( 'The Official AMP plugin for WordPress enables you to incorporate AMP into your site.', 'amp' ) }
+							<a href="https://amp-wp.org/" target="_blank" rel="noreferrer noopener">
+								{ __( 'Learn more.', 'amp' ) }
+							</a>
 						</p>
 					</div>
 
@@ -107,7 +109,7 @@ export function Welcome() {
 							{ __( 'Configure your site with AMP', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'There are different ways in which you can incorporate AMP content into your site, depending on its configuration (e.g. which theme and/or plugins you are using), your technical expertise and the level of resources you may have for addressing AMP compatibility issues as your site evolves.', 'amp' ) }
+							{ __( 'Regardless of technical expertise, the onboarding flow guides you through the configuration of the plugin in a few easy steps.', 'amp' ) }
 						</p>
 					</div>
 
@@ -132,10 +134,10 @@ export function Welcome() {
 					</div>
 					<div className="welcome__section-description">
 						<h4>
-							{ __( 'Onboarding flow', 'amp' ) }
+							{ __( 'Site review', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'This onboarding flow will guide you through the plugin configuration and getting started with AMP on your site.', 'amp' ) }
+							{ __( 'At the end of the onboarding flow, the AMP plugin is fully set up and configured, and your site is ready to serve great experiences to your users.', 'amp' ) }
 						</p>
 					</div>
 

From 9e51bb09c60fdf92ad5a56de77a88e5472522336 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 18 Aug 2021 15:24:26 +0200
Subject: [PATCH 02/68] Update plugin name copy and color

---
 assets/src/css/variables.css                 | 1 +
 assets/src/onboarding-wizard/setup-wizard.js | 2 +-
 assets/src/onboarding-wizard/style.css       | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/src/css/variables.css b/assets/src/css/variables.css
index 622c7f64818..b76e22f717e 100644
--- a/assets/src/css/variables.css
+++ b/assets/src/css/variables.css
@@ -6,6 +6,7 @@
 :root {
 	--amp-settings-color-black: #212121;
 	--amp-settings-color-brand: #2459e7;
+	--amp-settings-color-muted: #48525c;
 	--gray: #6c7781;
 	--amp-settings-color-border: #e8e8e8;
 	--very-light-gray: #fafafc;
diff --git a/assets/src/onboarding-wizard/setup-wizard.js b/assets/src/onboarding-wizard/setup-wizard.js
index 5674e0534b7..ef0e4b342ac 100644
--- a/assets/src/onboarding-wizard/setup-wizard.js
+++ b/assets/src/onboarding-wizard/setup-wizard.js
@@ -71,7 +71,7 @@ export function SetupWizard( { closeLink, finishLink, appRoot } ) {
 							</h1>
 						</div>
 						<div className="amp-onboarding-wizard-plugin-name">
-							{ __( 'Official WordPress Plugin', 'amp' ) }
+							{ __( 'Official AMP Plugin for WordPress', 'amp' ) }
 						</div>
 					</div>
 					<Stepper
diff --git a/assets/src/onboarding-wizard/style.css b/assets/src/onboarding-wizard/style.css
index c36ce7f4caf..2cbe346771f 100644
--- a/assets/src/onboarding-wizard/style.css
+++ b/assets/src/onboarding-wizard/style.css
@@ -84,7 +84,7 @@ body {
  * Sidebar.
  */
 .amp-onboarding-wizard-plugin-name {
-	color: var(--amp-settings-color-black);
+	color: var(--amp-settings-color-muted);
 	font-size: 16px;
 	line-height: 1.5;
 	padding: 0.5rem 0 0;
@@ -166,6 +166,7 @@ body {
 }
 
 .amp-stepper__item-title {
+	color: var(--amp-settings-color-muted);
 	display: none;
 	margin-left: 18px;
 

From 8386e12a7b4639dcd79785d7ba8abf6893f98a01 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 18 Aug 2021 18:56:31 +0200
Subject: [PATCH 03/68] Determine active page index based on current page kept
 in state

The list of Onboarding Wizard pages can be dynamically changed depending on the theme mode. The actual pages list is memoized in the `adaptedPages` array. The `adaptedPages` list should be used as a source of truth (after all, the `activePageIndex` references the `adaptedPages` array).

In some cases the `activePageIndex` can get out of sync with the `adaptedPages` array. For instance, when viewing the last page and one of the previous pages gets removed the `activePageIndex` references a non-existent item.

With this commit, we're stop keeping active page index in the state and instead track current page itself. Based on the `currentPage` object and the `adaptedPages` array we can determine the `activePageIndex`. This eliminates a risk of referencing a non-existent array item.
---
 .../components/navigation-context-provider.js            | 9 ++++-----
 .../template-mode-override-context-provider.js           | 7 +++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/assets/src/onboarding-wizard/components/navigation-context-provider.js b/assets/src/onboarding-wizard/components/navigation-context-provider.js
index 8bad19582d1..51ba502f9f1 100644
--- a/assets/src/onboarding-wizard/components/navigation-context-provider.js
+++ b/assets/src/onboarding-wizard/components/navigation-context-provider.js
@@ -23,7 +23,7 @@ export const Navigation = createContext();
  * @param {Array}  props.pages    Pages in the app.
  */
 export function NavigationContextProvider( { children, pages } ) {
-	const [ activePageIndex, setActivePageIndex ] = useState( 0 );
+	const [ currentPage, setCurrentPage ] = useState( pages[ 0 ] );
 	const [ canGoForward, setCanGoForward ] = useState( true ); // Allow immediately moving forward on first page. @todo This may need to change in 2.1.
 	const { editedOptions } = useContext( Options );
 
@@ -37,7 +37,7 @@ export function NavigationContextProvider( { children, pages } ) {
 		return pages.filter( ( page ) => 'theme-selection' !== page.slug );
 	}, [ pages, themeSupport ] );
 
-	const currentPage = adaptedPages[ activePageIndex ];
+	const activePageIndex = adaptedPages.findIndex( ( adaptedPage ) => adaptedPage.slug === currentPage.slug );
 
 	const isLastPage = activePageIndex === adaptedPages.length - 1;
 
@@ -45,7 +45,7 @@ export function NavigationContextProvider( { children, pages } ) {
 	 * Navigates back to the previous page.
 	 */
 	const moveBack = () => {
-		setActivePageIndex( activePageIndex - 1 );
+		setCurrentPage( adaptedPages[ activePageIndex - 1 ] );
 		setCanGoForward( true );
 	};
 
@@ -57,7 +57,7 @@ export function NavigationContextProvider( { children, pages } ) {
 			return;
 		}
 
-		setActivePageIndex( activePageIndex + 1 );
+		setCurrentPage( adaptedPages[ activePageIndex + 1 ] );
 		setCanGoForward( false ); // Each page is responsible for setting this to true.
 	};
 
@@ -72,7 +72,6 @@ export function NavigationContextProvider( { children, pages } ) {
 					moveBack,
 					moveForward,
 					pages: adaptedPages,
-					setActivePageIndex,
 					setCanGoForward,
 				}
 			}
diff --git a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
index c20d3c8fa7e..8a0f023d59c 100644
--- a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
+++ b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
@@ -26,13 +26,14 @@ export const TemplateModeOverride = createContext();
  */
 export function TemplateModeOverrideContextProvider( { children } ) {
 	const { editedOptions, originalOptions, updateOptions, readerModeWasOverridden, setReaderModeWasOverridden } = useContext( Options );
-	const { activePageIndex, currentPage: { slug: currentPageSlug }, setActivePageIndex } = useContext( Navigation );
+	const { activePageIndex, currentPage } = useContext( Navigation );
 	const { selectedTheme, currentTheme } = useContext( ReaderThemes );
 	const { developerToolsOption, fetchingUser, originalDeveloperToolsOption } = useContext( User );
 	const [ respondedToDeveloperToolsOptionChange, setRespondedToDeveloperToolsOptionChange ] = useState( false );
 	const [ mostRecentlySelectedThemeSupport, setMostRecentlySelectedThemeSupport ] = useState( null );
 	const [ technicalQuestionChangedAtLeastOnce, setTechnicalQuestionChangedAtLeastOnce ] = useState( false );
 
+	const { slug: currentPageSlug } = currentPage || {};
 	const { theme_support: themeSupport } = editedOptions || {};
 	const { theme_support: originalThemeSupport } = originalOptions || {};
 
@@ -60,11 +61,10 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 	 * Override with transitional if the user has selected reader mode and their currently active theme is the same as the selected reader theme.
 	 */
 	useEffect( () => {
-		if ( 'summary' === currentPageSlug && 'reader' === themeSupport && selectedTheme.name === currentTheme.name ) {
+		if ( 'review' === currentPageSlug && 'reader' === themeSupport && selectedTheme.name === currentTheme.name ) {
 			if ( ! readerModeWasOverridden ) {
 				updateOptions( { theme_support: 'transitional' } );
 				setReaderModeWasOverridden( true );
-				setActivePageIndex( activePageIndex - 1 );
 			} else {
 				setReaderModeWasOverridden( false );
 			}
@@ -78,7 +78,6 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 		readerModeWasOverridden,
 		updateOptions,
 		setReaderModeWasOverridden,
-		setActivePageIndex,
 	] );
 
 	/**

From a01a728478e4b0c75fedda9a71f8d48d709455f5 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 18 Aug 2021 18:58:41 +0200
Subject: [PATCH 04/68] Combine Summary and Done steps of Wizard into single
 step

---
 assets/src/components/svg/done.js             |  38 -----
 assets/src/css/elements.css                   |   2 +-
 assets/src/css/variables.css                  |   1 +
 assets/src/onboarding-wizard/pages/index.js   |   8 +-
 .../src/onboarding-wizard/pages/save/index.js | 133 ++++++++---------
 .../onboarding-wizard/pages/save/style.css    |  30 ++--
 .../pages/summary/desktop-screenshot.js       |  60 --------
 .../onboarding-wizard/pages/summary/index.js  |  60 --------
 .../onboarding-wizard/pages/summary/reader.js | 135 ------------------
 .../pages/summary/standard.js                 |  45 ------
 .../onboarding-wizard/pages/summary/style.css | 101 -------------
 .../pages/summary/summary-header.js           |  32 -----
 .../pages/summary/transitional.js             |  55 -------
 tests/e2e/specs/amp-onboarding/done.js        |  12 +-
 .../e2e/specs/amp-onboarding/reader-themes.js |   2 +-
 tests/e2e/specs/amp-onboarding/summary.js     |  39 -----
 .../e2e/specs/amp-onboarding/template-mode.js |   4 +-
 .../transitional-recommendation.js            |  13 +-
 tests/e2e/utils/onboarding-wizard-utils.js    |  12 +-
 19 files changed, 97 insertions(+), 685 deletions(-)
 delete mode 100644 assets/src/components/svg/done.js
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/desktop-screenshot.js
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/index.js
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/standard.js
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/style.css
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/summary-header.js

diff --git a/assets/src/components/svg/done.js b/assets/src/components/svg/done.js
deleted file mode 100644
index 5b308c7f228..00000000000
--- a/assets/src/components/svg/done.js
+++ /dev/null
@@ -1,38 +0,0 @@
-export function Done() {
-	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201.73 147.98" className="svg-done">
-			<defs>
-				<style>
-					{ `.svg-done-1{fill:none;}.svg-done-1,.svg-done-2{stroke:#2459e7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.svg-done-2{fill:#fff;}` }
-				</style>
-			</defs>
-			<g id="svg-done-layer-2" data-name="Layer 2">
-				<g id="svg-done-layer-1-2" data-name="Layer 1">
-					<path className="svg-done-1" d="M73.61,147s34.7-34,109.3-17.6" />
-					<path className="svg-done-1" d="M96.28,133.57s-43.86-24.39-83.51-9.27" />
-					<path className="svg-done-2" d="M144.21,134.63l-.06,0c-1.29-1-1.23-2.33-1.77-3.62a21.2,21.2,0,0,1-1.28-5.22,2.11,2.11,0,0,1,0-1c.25-.66,1.33-.48,1.49-1s-1-1.59-1.31-2.07a8.06,8.06,0,0,1-1-4.92,4.16,4.16,0,0,1,.63-1.88,2.81,2.81,0,0,1,1.44-1.12c.55-.16,1.37,0,1.68-.58a1.1,1.1,0,0,0,.08-.6c-.17-2.3-1.25-5.43,1.7-6.88a6.43,6.43,0,0,1,4.16-.32,8.76,8.76,0,0,1,5.68,3.88c1.57,2.77.62,6.07-1.38,8.51a1.28,1.28,0,0,0,.25,2c.58.36,1.35.38,1.74.91a2.65,2.65,0,0,1,.36,1.84c-.09,1-.12,2-.28,3a11.05,11.05,0,0,1-1,3.23,12,12,0,0,1-1.94,2.79,30.08,30.08,0,0,1-2.26,2.55,6.39,6.39,0,0,1-3.28,1.55A5.27,5.27,0,0,1,144.21,134.63Z" />
-					<path className="svg-done-1" d="M152.38,113.73S149,117,147.94,117.3" />
-					<path className="svg-done-1" d="M150.84,119.89a16.86,16.86,0,0,1-4.37,3.3" />
-					<path className="svg-done-1" d="M152.15,125.31a39.59,39.59,0,0,1-6.87,2.85" />
-					<path className="svg-done-1" d="M147,135.38s1.21-6.36,1.75-7.82a12.62,12.62,0,0,0-.67-6.59,31.55,31.55,0,0,1,.33-9.89,33.83,33.83,0,0,0,.68-5.86" />
-					<path className="svg-done-1" d="M156,138.05c-9-4.51-17.17-1.76-16.89-1.11" />
-					<path className="svg-done-1" d="M27.56,120a3.35,3.35,0,1,1,2.69-6.12A2.67,2.67,0,0,1,35.07,112,4.8,4.8,0,0,1,40.13,109a4.86,4.86,0,0,1,3.7,2.66,2.41,2.41,0,1,1,3.28,3.52,3,3,0,0,1,3.13,4.57" />
-					<path className="svg-done-1" d="M29.89,131.13A14.58,14.58,0,0,0,33.81,130c1-.51,1.9-1.65.79-2.55-.71-.58-2.5-.46-3.4-.54a8.48,8.48,0,0,0-4.65.52c-1.05.51-4.4,2.86-4,4.19C23,133.18,28.71,131.35,29.89,131.13Z" />
-					<path className="svg-done-1" d="M47.12,126.12a7.37,7.37,0,0,0-2.23-.35c-2.46.06-4.51,2.14-2,3.83,1.57,1.06,3.87,1.19,5.69,1.44,1.13.16,2.54.08,3-.94a2,2,0,0,0-.52-2.13,5.71,5.71,0,0,0-2-1.15C48.42,126.57,47.77,126.31,47.12,126.12Z" />
-					<path className="svg-done-2" d="M174.82,78.37a4.68,4.68,0,0,0,2.54-1.28,4,4,0,0,0,1.19-4.28c-.53-1.29-2.22-3.41-6-3.09-.82.07-1.87-3.39-2.38-4a8.2,8.2,0,0,0-5.14-2.9,5.29,5.29,0,0,0-3,.2c-.42.19-2.22,1.52-1.85,2.15,0,0-4.39-7.49-10.62-1.14a13.2,13.2,0,0,0-2.05,3.22s-5.7-1.29-6.88,3.34c-.54,2.36-1.51,7.2,5.92,7.63,5.2,0,10.42.11,15.61.2,3.61.05,7.24.6,10.85.24A18.31,18.31,0,0,0,174.82,78.37Z" />
-					<path className="svg-done-2" d="M12.51,76.39H31.62a4.39,4.39,0,0,0-.69-5.54,4.21,4.21,0,0,0-5.45,0,4.7,4.7,0,0,0-8.71-2.67A5.46,5.46,0,0,0,9,70.22C7.74,73,9.58,75.59,12.51,76.39Z" />
-					<path className="svg-done-2" d="M180.92,61.75H200a4.38,4.38,0,0,0-.69-5.54,4.22,4.22,0,0,0-5.45,0,4.7,4.7,0,0,0-8.71-2.67,5.46,5.46,0,0,0-7.74,2.06C176.15,58.34,178,61,180.92,61.75Z" />
-					<polygon className="svg-done-2" points="187.73 104.77 184.65 111.08 187.53 117.49 181.22 114.41 174.81 117.29 177.89 110.97 175.01 104.56 181.32 107.65 187.73 104.77" />
-					<polygon className="svg-done-2" points="18.03 46.61 11 46.73 6.6 52.2 6.48 45.18 1 40.77 8.03 40.66 12.43 35.18 12.55 42.2 18.03 46.61" />
-					<polygon className="svg-done-2" points="182.96 38.95 175.94 39.07 171.53 44.55 171.41 37.52 165.94 33.12 172.96 33 177.37 27.52 177.49 34.55 182.96 38.95" />
-					<path className="svg-done-1" d="M65.86,10.57a25.53,25.53,0,0,0-8,.17C45.54,13,35.69,24.22,34.32,36.63c-1.94,17.61,17.79,45.15,37.43,34C77.91,67.14,82.08,61,85,54.5c3.79-8.39,5.78-18.11,2.77-26.81C84.55,18.44,75.53,11.88,65.86,10.57Z" />
-					<path className="svg-done-1" d="M142.15,4.53a25.61,25.61,0,0,0-7.49-2.95C122.45-1.06,109,5.5,103,16.43c-8.57,15.5-1,48.52,21.45,45.79,7-.85,13.26-5,18.43-9.79,6.73-6.28,12.31-14.49,12.88-23.68C156.36,19,150.56,9.46,142.15,4.53Z" />
-					<path className="svg-done-1" d="M116.15,61.48c-12.61,2.58.28,13.12,0,18.09-.27,4.75-4.76,3.66-7,6.79-4.1,5.72,2.46,12.83-3.42,18.27" />
-					<path className="svg-done-1" d="M66.05,72.92C59.1,84.21,72.92,84.1,73,93.51c0,5-3.25,5.83-.5,10.55,2.39,4.11,5.68,4.7,6.12,9.22" />
-					<path className="svg-done-1" d="M45.17,28.08a17.37,17.37,0,0,0-1.83,17.81" />
-					<path className="svg-done-1" d="M123.81,10c-9.19,4.55-14.6,10.48-13.92,21.57" />
-				</g>
-			</g>
-		</svg>
-	);
-}
diff --git a/assets/src/css/elements.css b/assets/src/css/elements.css
index 7b331556050..332f6e989c2 100644
--- a/assets/src/css/elements.css
+++ b/assets/src/css/elements.css
@@ -28,7 +28,7 @@
 }
 
 .amp p {
-	font-size: 16px;
+	font-size: var(--amp-settings-font-size);
 }
 
 .amp,
diff --git a/assets/src/css/variables.css b/assets/src/css/variables.css
index b76e22f717e..caa23643cf2 100644
--- a/assets/src/css/variables.css
+++ b/assets/src/css/variables.css
@@ -17,4 +17,5 @@
 	--color-valid: #46b450;
 	--amp-settings-color-danger: #dc3232;
 	--color-gray-medium: rgba(0, 0, 0, 0.54);
+	--amp-settings-font-size: 16px;
 }
diff --git a/assets/src/onboarding-wizard/pages/index.js b/assets/src/onboarding-wizard/pages/index.js
index 0a6592bd60d..24cdea4f15d 100644
--- a/assets/src/onboarding-wizard/pages/index.js
+++ b/assets/src/onboarding-wizard/pages/index.js
@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
 import { TechnicalBackground } from './technical-background';
 import { TemplateMode } from './template-mode';
 import { ChooseReaderTheme } from './choose-reader-theme';
-import { Summary } from './summary';
 import { Save } from './save';
 import { Welcome } from './welcome';
 
@@ -40,13 +39,8 @@ export const PAGES = [
 		PageComponent: ChooseReaderTheme,
 	},
 	{
-		slug: 'summary',
+		slug: 'review',
 		title: __( 'Review', 'amp' ),
-		PageComponent: Summary,
-	},
-	{
-		slug: 'done',
-		title: __( 'Done', 'amp' ),
 		PageComponent: Save,
 		showTitle: false,
 	},
diff --git a/assets/src/onboarding-wizard/pages/save/index.js b/assets/src/onboarding-wizard/pages/save/index.js
index c4379d6792d..b9659fc7358 100644
--- a/assets/src/onboarding-wizard/pages/save/index.js
+++ b/assets/src/onboarding-wizard/pages/save/index.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext, useEffect } from '@wordpress/element';
-import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -12,31 +11,14 @@ import { User } from '../../../components/user-context-provider';
 import { Phone } from '../../../components/phone';
 import './style.css';
 import { ReaderThemes } from '../../../components/reader-themes-context-provider';
-import { AMPNotice, NOTICE_SIZE_LARGE, NOTICE_TYPE_SUCCESS, NOTICE_TYPE_INFO } from '../../../components/amp-notice';
+import {
+	AMPNotice,
+	NOTICE_SIZE_LARGE,
+	NOTICE_TYPE_SUCCESS,
+	NOTICE_TYPE_INFO,
+} from '../../../components/amp-notice';
 import { Navigation } from '../../components/navigation-context-provider';
 import { Options } from '../../../components/options-context-provider';
-import { Done } from '../../../components/svg/done';
-
-/**
- * Provides the description for the done screen.
- *
- * @param {string} mode The selected mode.
- * @return {string} The text.
- */
-function getDescription( mode ) {
-	switch ( mode ) {
-		case 'standard':
-			return __( 'Your site is ready to serve AMP pages to your users! In Standard mode (AMP-first) all canonical URLs are AMP by default. You can still opt out of AMP for specific content types and templates from the AMP settings screen. Depending on the theme and plugins you are using, development work may be required to maintain your site’s AMP compatibility.', 'amp' );
-
-		case 'transitional':
-			return __( 'Your site is ready to serve AMP pages to your users! In Transitional mode both the AMP and non-AMP versions of your site will be served using your currently active theme. With further development work to address AMP-compatibility issues in your themes and plugins, your site can be made fully AMP-first.', 'amp' );
-
-		case 'reader':
-			return __( 'Your site is ready to serve AMP pages to your users! In Reader mode the AMP version of your site will be served using the Reader theme you have selected (shown to the right), while pages for the non-AMP version of your site will be served using your primary theme. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' );
-		default:
-			return '';
-	}
-}
 
 /**
  * UI for a saving state.
@@ -76,28 +58,14 @@ function Preview() {
 	} = useContext( Options );
 
 	return (
-		<>
-			<Phone>
-				<iframe
-					className="done__preview-iframe"
-					src={ previewPermalink }
-					title={ __( 'Site preview', 'amp' ) }
-					name="amp-wizard-completion-preview"
-				/>
-			</Phone>
-			<div className="done__link-buttons">
-
-				<Button
-					isPrimary
-					href={ previewPermalink }
-					target="_blank"
-					rel="noreferrer"
-				>
-					{ __( 'Browse AMP', 'amp' ) }
-				</Button>
-
-			</div>
-		</>
+		<Phone>
+			<iframe
+				className="done__preview-iframe"
+				src={ previewPermalink }
+				title={ __( 'Site preview', 'amp' ) }
+				name="amp-wizard-completion-preview"
+			/>
+		</Phone>
 	);
 }
 
@@ -108,6 +76,7 @@ export function Save() {
 	const {
 		didSaveOptions,
 		editedOptions: { theme_support: themeSupport, reader_theme: readerTheme },
+		readerModeWasOverridden,
 		saveOptions,
 		savingOptions,
 	} = useContext( Options );
@@ -149,28 +118,62 @@ export function Save() {
 		return <Saving />;
 	}
 
-	let heading = __( 'Congratulations!', 'amp' );
-	if ( 'standard' === themeSupport ) {
-		heading = __( 'Your site is ready', 'amp' );
-	}
-
 	return (
 		<div className="done">
-			<div className="done__text">
-				<Done />
-				<h1>
-					{ heading }
-				</h1>
-				{
-					'reader' === themeSupport && downloadedTheme === readerTheme && (
-						<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
-							{ __( 'Your Reader theme was automatically installed', 'amp' ) }
+			<div className="done__content">
+				<div className="done__text">
+					<h1>
+						{ __( 'Your site is live!', 'amp' ) }
+					</h1>
+					{
+						'reader' === themeSupport && downloadedTheme === readerTheme && (
+							<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
+								{ __( 'Your Reader theme was automatically installed', 'amp' ) }
+							</AMPNotice>
+						)
+					}
+					{ readerModeWasOverridden && (
+						<AMPNotice type={ NOTICE_TYPE_INFO } size={ NOTICE_SIZE_LARGE }>
+							{ __( 'Because you selected a Reader theme that is the same as your site\'s active theme, your site has automatically been switched to Transitional template mode.', 'amp' ) }
 						</AMPNotice>
-					)
-				}
-				<p>
-					{ getDescription( themeSupport ) }
-				</p>
+					) }
+					{ 'standard' === themeSupport && (
+						<p>
+							{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single version of your site, the AMP version. Browse your site by navigating through the links below and ensure the functionality and look-and-feel of your site work as expected.', 'amp' ) }
+						</p>
+					) }
+					{ 'transitional' === themeSupport && (
+						<p>
+							{ __( 'Your site is ready to bring great experiences to your users! In Transitional mode both the AMP and non-AMP versions of your site will be served using your currently active theme. Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations.', 'amp' ) }
+						</p>
+					) }
+					{ 'reader' === themeSupport && (
+						<>
+							<p>
+								{ __( 'Your site is ready to bring great experiences to your users! In Reader mode the AMP version of your site will be served using the Reader theme you have selected, while pages for the non-AMP version of your site will be served using your primary theme.', 'amp' ) }
+							</p>
+							<p>
+								{ __( 'Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' ) }
+							</p>
+						</>
+					) }
+				</div>
+				<div className="done__text">
+					<h2>
+						{ __( 'Needing extra help?', 'amp' ) }
+					</h2>
+					<ul className="done__list">
+						<li>
+							{ __( 'Reach out in the support forums', 'amp' ) }
+						</li>
+						<li>
+							{ __( 'Try a different template mode in settings', 'amp' ) }
+						</li>
+						<li>
+							{ __( 'Learn more about how AMP works', 'amp' ) }
+						</li>
+					</ul>
+				</div>
 			</div>
 			<div className="done__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
diff --git a/assets/src/onboarding-wizard/pages/save/style.css b/assets/src/onboarding-wizard/pages/save/style.css
index d65e3b2252e..f87ad36c546 100644
--- a/assets/src/onboarding-wizard/pages/save/style.css
+++ b/assets/src/onboarding-wizard/pages/save/style.css
@@ -7,31 +7,24 @@
 	}
 }
 
-.done__text {
-	width: 100%;
+.done__content {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: space-between;
 	padding-bottom: 30px;
+	width: 100%;
 
 	@media screen and (min-width: 1280px) {
 		padding-right: 30px;
 	}
 }
 
-.done__text h1 {
-	text-align: center;
+.done__list {
+	font-size: var(--amp-settings-font-size);
+	list-style: disc;
+	padding-left: 30px;
 }
 
-.done__text .svg-done {
-	display: block;
-	width: 150px;
-	height: auto;
-	margin: 0 auto;
-}
-
-.done__link-buttons a:not(:last-child) {
-	margin-right: 15px;
-}
-
-
 .done__preview-container {
 	text-align: center;
 
@@ -64,11 +57,6 @@
 	}
 }
 
-.done__preview-container .components-button {
-	margin-top: 0.5rem;
-	margin-bottom: 0.75rem;
-}
-
 .saving {
 	border-bottom: 2px solid #d3d9dd;
 	margin: 0 auto;
diff --git a/assets/src/onboarding-wizard/pages/summary/desktop-screenshot.js b/assets/src/onboarding-wizard/pages/summary/desktop-screenshot.js
deleted file mode 100644
index cb332193425..00000000000
--- a/assets/src/onboarding-wizard/pages/summary/desktop-screenshot.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Desktop } from '../../components/desktop';
-import DesktopIcon from '../../../components/svg/desktop-icon.svg';
-
-export function DesktopScreenshot( { screenshot, name, description, url } ) {
-	return (
-		<div className="selectable selectable--bottom">
-
-			<div className="grid grid-1-2 summary-screenshot">
-				<Desktop>
-					{
-						screenshot ? (
-							<img
-								src={ screenshot }
-								alt={ name }
-								loading="lazy"
-								decoding="async"
-								height="900"
-								width="1200"
-							/>
-						) : <DesktopIcon />
-					}
-				</Desktop>
-				<div>
-					<h3>
-						{ name }
-					</h3>
-					<p>
-						{ description }
-					</p>
-					<p>
-						<a href={ url } target="_blank" rel="noreferrer">
-							{ __( 'Learn more', 'amp' ) }
-						</a>
-					</p>
-				</div>
-			</div>
-
-		</div>
-	);
-}
-
-DesktopScreenshot.propTypes = {
-	description: PropTypes.string.isRequired,
-	name: PropTypes.string.isRequired,
-	screenshot: PropTypes.string,
-	url: PropTypes.string.isRequired,
-};
diff --git a/assets/src/onboarding-wizard/pages/summary/index.js b/assets/src/onboarding-wizard/pages/summary/index.js
deleted file mode 100644
index 4b9c134be5a..00000000000
--- a/assets/src/onboarding-wizard/pages/summary/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext, useEffect, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import './style.css';
-import { Navigation } from '../../components/navigation-context-provider';
-import { Options } from '../../../components/options-context-provider';
-import { ReaderThemes } from '../../../components/reader-themes-context-provider';
-import { Reader } from './reader';
-import { Standard } from './standard';
-import { Transitional } from './transitional';
-
-/**
- * Screen showing site configuration details.
- */
-export function Summary() {
-	const { setCanGoForward } = useContext( Navigation );
-	const { editedOptions } = useContext( Options );
-	const { currentTheme } = useContext( ReaderThemes );
-
-	const { theme_support: themeSupport } = editedOptions;
-
-	/**
-	 * Allow moving forward.
-	 */
-	useEffect( () => {
-		setCanGoForward( true );
-	}, [ setCanGoForward ] );
-
-	const Screen = useCallback( () => {
-		if ( undefined === themeSupport ) {
-			return null;
-		}
-
-		switch ( themeSupport ) {
-			case 'reader':
-				return <Reader currentTheme={ currentTheme } />;
-
-			case 'standard':
-				return <Standard currentTheme={ currentTheme } />;
-
-			case 'transitional':
-				return <Transitional currentTheme={ currentTheme } />;
-
-			default:
-				throw new Error( __( 'A mode option was not accounted for on the summary screen.', 'amp' ) );
-		}
-	}, [ currentTheme, themeSupport ] );
-
-	return (
-		<div className="summary">
-			<Screen />
-		</div>
-	);
-}
diff --git a/assets/src/onboarding-wizard/pages/summary/reader.js b/assets/src/onboarding-wizard/pages/summary/reader.js
index 2324d1399ed..e69de29bb2d 100644
--- a/assets/src/onboarding-wizard/pages/summary/reader.js
+++ b/assets/src/onboarding-wizard/pages/summary/reader.js
@@ -1,135 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useContext } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { Desktop } from '../../components/desktop';
-import { Phone } from '../../../components/phone';
-import { Reader as ReaderIllustration } from '../../../components/svg/reader';
-import { AMPInfo } from '../../../components/amp-info';
-import { IconDesktop } from '../../../components/svg/icon-desktop';
-import { IconMobile } from '../../../components/svg/icon-mobile';
-import { Options } from '../../../components/options-context-provider';
-import { ReaderThemes } from '../../../components/reader-themes-context-provider';
-import DesktopIcon from '../../../components/svg/desktop-icon.svg';
-import MobileIcon from '../../../components/svg/mobile-icon.svg';
-import { SummaryHeader } from './summary-header';
-
-/**
- * Summary screen when reader mode was selected.
- *
- * @param {Object} props
- * @param {Object} props.currentTheme Data for the theme currently active on the site.
- */
-export function Reader( { currentTheme } ) {
-	const { editedOptions } = useContext( Options );
-	const { themes } = useContext( ReaderThemes );
-
-	const { reader_theme: readerTheme, mobile_redirect: mobileRedirect } = editedOptions;
-
-	const readerThemeData = themes ? themes.find( ( theme ) => theme.slug === readerTheme ) : {};
-
-	const mobileCaption = mobileRedirect ? __( 'Mobile and AMP visitors', 'amp' ) : __( 'AMP visitors', 'amp' );
-	const desktopCaption = mobileRedirect ? __( 'Desktop visitors', 'amp' ) : __( 'Desktop and non-AMP mobile visitors', 'amp' );
-
-	return (
-		<>
-			<SummaryHeader
-				illustration={ <ReaderIllustration /> }
-				title={ __( 'Reader', 'amp' ) }
-				text={ __( 'In Reader mode your site will have a non-AMP and an AMP version, and each version will use its own theme. If automatic mobile redirection is enabled, the AMP version of the content will be served on mobile devices. If AMP-to-AMP linking is enabled, once users are on an AMP page, they will continue navigating your AMP content.', 'amp' ) }
-			/>
-
-			<div className="reader-summary__screens grid grid-2-1">
-				<div>
-					<div className="selectable selectable--bottom">
-						<AMPInfo icon={ ( props ) => <IconDesktop { ...props } /> }>
-							{ desktopCaption }
-						</AMPInfo>
-
-						<Desktop>
-							{
-								currentTheme.screenshot ? (
-									<img
-										src={ currentTheme.screenshot }
-										alt={ currentTheme.name }
-										loading="lazy"
-										decoding="async"
-										height="900"
-										width="1200"
-									/>
-								) : <DesktopIcon />
-							}
-
-						</Desktop>
-
-						<h3>
-							{ currentTheme.name }
-						</h3>
-						<p className="amp-description">
-							{ currentTheme.description }
-						</p>
-						{ currentTheme.url && currentTheme.url.length && (
-							<a href={ currentTheme.url }>
-								{ __( 'Learn more' ) }
-							</a>
-						) }
-					</div>
-				</div>
-				<div>
-
-					<div className="selectable selectable--bottom">
-						<AMPInfo icon={ ( props ) => <IconMobile { ...props } /> }>
-							{ mobileCaption }
-						</AMPInfo>
-
-						<Phone>
-							{
-								readerThemeData.screenshot_url ? (
-									<img
-										src={ readerThemeData.screenshot_url }
-										alt={ readerThemeData.name }
-										loading="lazy"
-										decoding="async"
-										height="2165"
-										width="1000"
-									/>
-								) : <MobileIcon style={ { width: '100%' } } />
-							}
-						</Phone>
-
-						<h3>
-							{ readerThemeData.name }
-						</h3>
-						<p className="amp-description">
-							{ readerThemeData.description }
-						</p>
-						{ readerThemeData.homepage && readerThemeData.homepage.length && (
-							<a href={ readerThemeData.homepage } target="_blank" rel="noreferrer">
-								{ __( 'Learn more' ) }
-							</a>
-						) }
-					</div>
-
-				</div>
-			</div>
-		</>
-	);
-}
-
-Reader.propTypes = {
-	currentTheme: PropTypes.shape( {
-		description: PropTypes.string,
-		name: PropTypes.string,
-		screenshot: PropTypes.string,
-		url: PropTypes.string,
-	} ).isRequired,
-};
diff --git a/assets/src/onboarding-wizard/pages/summary/standard.js b/assets/src/onboarding-wizard/pages/summary/standard.js
deleted file mode 100644
index fda485c2096..00000000000
--- a/assets/src/onboarding-wizard/pages/summary/standard.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-import { Standard as StandardIllustration } from '../../../components/svg/standard';
-import { SummaryHeader } from './summary-header';
-import { DesktopScreenshot } from './desktop-screenshot';
-
-/**
- * Summary screen when standard mode was selected.
- *
- * @param {Object} props
- * @param {Object} props.currentTheme Data for the theme currently active on the site.
- */
-export function Standard( { currentTheme } ) {
-	return (
-		<>
-			<SummaryHeader
-				illustration={ <StandardIllustration /> }
-				title={ __( 'Standard', 'amp' ) }
-				text={ __( 'In Standard mode <b>your site will be completely AMP</b> (except in cases where you opt-out of AMP for specific parts of your site), and <b>it will use a single theme</b>. ', 'amp' ) }
-			/>
-
-			<DesktopScreenshot { ...currentTheme } />
-
-		</>
-	);
-}
-
-Standard.propTypes = {
-	currentTheme: PropTypes.shape( {
-		description: PropTypes.string,
-		name: PropTypes.string,
-		screenshot: PropTypes.string,
-		url: PropTypes.string,
-	} ).isRequired,
-};
diff --git a/assets/src/onboarding-wizard/pages/summary/style.css b/assets/src/onboarding-wizard/pages/summary/style.css
deleted file mode 100644
index a147437503f..00000000000
--- a/assets/src/onboarding-wizard/pages/summary/style.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.summary .selectable {
-	margin-bottom: 2.25rem;
-	padding: 40px 30px;
-
-	/* For the mobile redirection toggle */
-	.amp-setting-toggle .components-form-toggle {
-		margin-right: 30px;
-	}
-}
-
-.summary .amp-notice {
-	margin-bottom: 1.5rem;
-}
-
-/**
- * Reader-specific styles.
- */
-.reader-summary__screens .amp-description {
-	display: -webkit-box;
-	font-size: 14px;
-	line-height: 1.85;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 4;
-	overflow: hidden;
-}
-
-.reader-summary__description {
-	margin-bottom: 1.5rem;
-}
-
-.reader-summary__screens img {
-	width: 100%;
-	height: auto;
-	margin: auto;
-}
-
-.reader-summary__screens .selectable {
-	padding: 35px 30px;
-}
-
-/**
- * Summary header component.
- */
-.summary-header__header {
-	align-items: center;
-	border-bottom: 1px solid var(--amp-settings-color-border);
-	display: flex;
-	font-family: var(--font-poppins);
-	margin-bottom: 1.5rem;
-	padding-bottom: 0.5rem;
-}
-
-.summary-header__header h2 {
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.summary-header__illustration {
-	margin-right: 1.5rem;
-}
-
-.summary-header__illustration svg {
-	height: auto;
-	width: 60px;
-}
-
-.summary-header p {
-	font-size: 1rem;
-	line-height: 1.5;
-}
-
-.summary-header p:last-child {
-	margin-bottom: 0;
-}
-
-/**
- * Summary screenshot component.
- */
-.summary-screenshot {
-	align-items: start;
-	padding-bottom: 3rem;
-	position: relative;
-}
-
-.summary-screenshot h3 {
-	font-size: 1.5rem;
-}
-
-.summary-screenshot p {
-	font-size: 1rem;
-	line-height: 1.5;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 6;
-	overflow: hidden;
-}
-
-.summary-screenshot img {
-	height: auto;
-	width: 100%;
-}
diff --git a/assets/src/onboarding-wizard/pages/summary/summary-header.js b/assets/src/onboarding-wizard/pages/summary/summary-header.js
deleted file mode 100644
index 15147618518..00000000000
--- a/assets/src/onboarding-wizard/pages/summary/summary-header.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-export function SummaryHeader( { illustration, title, text } ) {
-	return (
-		<div className="summary-header selectable selectable--bottom">
-
-			<div className="summary-header__header">
-				<div className="summary-header__illustration">
-					{ illustration }
-				</div>
-				<h2>
-					{ title }
-				</h2>
-			</div>
-
-			<div className="summary-header__body">
-				<div>
-					<p dangerouslySetInnerHTML={ { __html: text } } />
-				</div>
-			</div>
-		</div>
-	);
-}
-
-SummaryHeader.propTypes = {
-	illustration: PropTypes.node.isRequired,
-	title: PropTypes.string.isRequired,
-	text: PropTypes.string.isRequired,
-};
diff --git a/assets/src/onboarding-wizard/pages/summary/transitional.js b/assets/src/onboarding-wizard/pages/summary/transitional.js
index f802b9a7d79..e69de29bb2d 100644
--- a/assets/src/onboarding-wizard/pages/summary/transitional.js
+++ b/assets/src/onboarding-wizard/pages/summary/transitional.js
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useContext } from '@wordpress/element';
-import { Transitional as TransitionalIllustration } from '../../../components/svg/transitional';
-import { AMPNotice, NOTICE_TYPE_INFO, NOTICE_SIZE_LARGE } from '../../../components/amp-notice';
-import { Options } from '../../../components/options-context-provider';
-import { SummaryHeader } from './summary-header';
-import { DesktopScreenshot } from './desktop-screenshot';
-
-/**
- * Summary screen when transitional mode was selected.
- *
- * @param {Object} props
- * @param {Object} props.currentTheme Data for the theme currently active on the site.
- */
-export function Transitional( { currentTheme } ) {
-	const { readerModeWasOverridden } = useContext( Options );
-
-	return (
-		<>
-			{ readerModeWasOverridden && (
-				<AMPNotice type={ NOTICE_TYPE_INFO } size={ NOTICE_SIZE_LARGE }>
-					{ __( 'Because you selected a Reader theme that is the same as your site\'s active theme, your site has automatically been switched to Transitional template mode.', 'amp' ) }
-				</AMPNotice>
-			) }
-			<SummaryHeader
-				illustration={ <TransitionalIllustration /> }
-				title={ __( 'Transitional', 'amp' ) }
-				text={ __( 'In Transitional mode <b>your site will have a non-AMP and an AMP version</b>, and <b>both will use the same theme</b>. If automatic mobile redirection is enabled, the AMP version of the content will be served on mobile devices. If AMP-to-AMP linking is enabled, once users are on an AMP page, they will continue navigating your AMP content.', 'amp' ) }
-			/>
-
-			<DesktopScreenshot { ...currentTheme } />
-		</>
-	);
-}
-
-Transitional.propTypes = {
-	currentTheme: PropTypes.shape( {
-		description: PropTypes.string,
-		name: PropTypes.string,
-		screenshot: PropTypes.string,
-		url: PropTypes.string,
-	} ).isRequired,
-};
diff --git a/tests/e2e/specs/amp-onboarding/done.js b/tests/e2e/specs/amp-onboarding/done.js
index b206b694286..12b798d5fe2 100644
--- a/tests/e2e/specs/amp-onboarding/done.js
+++ b/tests/e2e/specs/amp-onboarding/done.js
@@ -14,10 +14,9 @@ describe( 'Done', () => {
 
 		testCloseButton( { exists: false } );
 
-		await expect( page ).toMatchElement( 'h1', { text: 'Your site is ready' } );
+		await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
 		await expect( page ).toMatchElement( 'p', { text: /standard mode/i } );
 		await expect( page ).toMatchElement( '.phone iframe' );
-		await expect( page ).toMatchElement( 'a', { text: 'Browse AMP' } );
 	} );
 
 	it( 'renders transitional mode done screen', async () => {
@@ -25,10 +24,9 @@ describe( 'Done', () => {
 
 		testCloseButton( { exists: false } );
 
-		await expect( page ).toMatchElement( 'h1', { text: 'Congratulations!' } );
+		await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
 		await expect( page ).toMatchElement( 'p', { text: /transitional mode/i } );
 		await expect( page ).toMatchElement( '.phone iframe' );
-		await expect( page ).toMatchElement( 'a', { text: 'Browse AMP' } );
 	} );
 
 	it( 'renders reader mode done screen', async () => {
@@ -36,10 +34,8 @@ describe( 'Done', () => {
 
 		testCloseButton( { exists: true } );
 
-		await expect( page ).toMatchElement( 'h1', { text: 'Congratulations!' } );
-		await expect( page ).toMatchElement( '.phone iframe' );
+		await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
 		await expect( page ).toMatchElement( 'p', { text: /reader mode/i } );
-		await expect( page ).toMatchElement( 'a', { text: 'Browse AMP' } );
-		await expect( page ).toMatchElement( 'a', { text: 'Customize' } );
+		await expect( page ).toMatchElement( '.phone iframe' );
 	} );
 } );
diff --git a/tests/e2e/specs/amp-onboarding/reader-themes.js b/tests/e2e/specs/amp-onboarding/reader-themes.js
index c32b96810a2..a56f1a9291a 100644
--- a/tests/e2e/specs/amp-onboarding/reader-themes.js
+++ b/tests/e2e/specs/amp-onboarding/reader-themes.js
@@ -10,7 +10,7 @@ describe( 'Reader themes', () => {
 
 	it( 'shows the correct active stepper item', async () => {
 		const itemCount = await page.$$eval( '.amp-stepper__item', ( els ) => els.length );
-		expect( itemCount ).toBe( 6 );
+		expect( itemCount ).toBe( 5 );
 
 		await expect( page ).toMatchElement( '.amp-stepper__item--active', { text: 'Theme Selection' } );
 	} );
diff --git a/tests/e2e/specs/amp-onboarding/summary.js b/tests/e2e/specs/amp-onboarding/summary.js
index 43f9dad9b67..e69de29bb2d 100644
--- a/tests/e2e/specs/amp-onboarding/summary.js
+++ b/tests/e2e/specs/amp-onboarding/summary.js
@@ -1,39 +0,0 @@
-/**
- * Internal dependencies
- */
-import { moveToSummaryScreen, testNextButton, testPreviousButton } from '../../utils/onboarding-wizard-utils';
-
-const sharedTests = () => {
-	expect( page ).toMatchElement( '.desktop img' );
-	testNextButton( { text: 'Next' } );
-	testPreviousButton( { text: 'Previous' } );
-};
-
-describe( 'Summary', () => {
-	it( 'renders standard mode summary', async () => {
-		await moveToSummaryScreen( { mode: 'standard' } );
-
-		await expect( page ).toMatchElement( 'h2', { text: 'Standard' } );
-		await expect( page ).not.toMatchElement( '.phone img' );
-
-		sharedTests();
-	} );
-
-	it( 'renders transitional mode summary', async () => {
-		await moveToSummaryScreen( { mode: 'transitional' } );
-
-		await expect( page ).toMatchElement( 'h2', { text: 'Transitional' } );
-		await expect( page ).not.toMatchElement( '.phone img' );
-
-		sharedTests();
-	} );
-
-	it( 'renders reader mode summary', async () => {
-		await moveToSummaryScreen( { mode: 'reader' } );
-
-		await expect( page ).toMatchElement( 'h2', { text: 'Reader' } );
-		await expect( page ).toMatchElement( '.phone img' );
-
-		sharedTests();
-	} );
-} );
diff --git a/tests/e2e/specs/amp-onboarding/template-mode.js b/tests/e2e/specs/amp-onboarding/template-mode.js
index 3d5ee6556e8..796d038f41c 100644
--- a/tests/e2e/specs/amp-onboarding/template-mode.js
+++ b/tests/e2e/specs/amp-onboarding/template-mode.js
@@ -69,7 +69,7 @@ describe( 'Stepper item modifications', () => {
 		await clickMode( 'reader' );
 
 		const itemCount = await page.$$eval( '.amp-stepper__item', ( els ) => els.length );
-		expect( itemCount ).toBe( 6 );
+		expect( itemCount ).toBe( 5 );
 
 		await expect( page ).toMatchElement( '.amp-stepper__item-title', { text: 'Theme Selection' } );
 	} );
@@ -78,7 +78,7 @@ describe( 'Stepper item modifications', () => {
 		await clickMode( 'transitional' );
 
 		const itemCount = await page.$$eval( '.amp-stepper__item', ( els ) => els.length );
-		expect( itemCount ).toBe( 5 );
+		expect( itemCount ).toBe( 4 );
 
 		await expect( page ).not.toMatchElement( '.amp-stepper__item-title', { text: 'Theme Selection' } );
 	} );
diff --git a/tests/e2e/specs/amp-onboarding/transitional-recommendation.js b/tests/e2e/specs/amp-onboarding/transitional-recommendation.js
index 4465c6fe72b..282153b18bc 100644
--- a/tests/e2e/specs/amp-onboarding/transitional-recommendation.js
+++ b/tests/e2e/specs/amp-onboarding/transitional-recommendation.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { moveToReaderThemesScreen, moveToTemplateModeScreen, moveToSummaryScreen } from '../../utils/onboarding-wizard-utils';
+import { moveToReaderThemesScreen, moveToTemplateModeScreen, moveToDoneScreen } from '../../utils/onboarding-wizard-utils';
 
 /**
  * When a site has a Reader theme already set as the active theme (e.g. Twenty Twenty), when the user expresses they
@@ -23,19 +23,22 @@ describe( 'Current active theme is reader theme and user is nontechnical', () =>
 		await expect( '.amp-notice--success' ).countToBe( 2 ); // Reader and transitional.
 	} );
 
-	it( 'includes active them in reader theme list', async () => {
+	it( 'includes active theme in reader theme list', async () => {
 		await moveToReaderThemesScreen( { technical: false } );
 
 		await expect( page ).toMatchElement( '[for="theme-card__twentytwenty"]' );
 	} );
 
 	it( 'switches to transitional mode and shows a notice if the user chooses the active theme', async () => {
-		await moveToSummaryScreen( { technical: false, readerTheme: 'twentytwenty', mode: 'reader' } );
+		await moveToDoneScreen( { technical: false, readerTheme: 'twentytwenty', mode: 'reader' } );
 
 		const stepperItemCount = await page.$$eval( '.amp-stepper__item', ( els ) => els.length );
-		expect( stepperItemCount ).toBe( 5 );
+		expect( stepperItemCount ).toBe( 4 );
 
-		await expect( page ).toMatchElement( 'h2', { text: 'Transitional' } );
+		// Wait for the settings to get saved.
+		await page.waitForTimeout( 1000 );
+
+		await expect( page ).toMatchElement( 'p', { text: /transitional mode/i } );
 		await expect( page ).toMatchElement( '.amp-notice--info', { text: /switched to Transitional/i } );
 	} );
 } );
diff --git a/tests/e2e/utils/onboarding-wizard-utils.js b/tests/e2e/utils/onboarding-wizard-utils.js
index c8bd87d8615..b0d53f914ab 100644
--- a/tests/e2e/utils/onboarding-wizard-utils.js
+++ b/tests/e2e/utils/onboarding-wizard-utils.js
@@ -67,7 +67,7 @@ export async function selectReaderTheme( theme = 'legacy' ) {
 	await page.$eval( selector, ( el ) => el.click() );
 }
 
-export async function moveToSummaryScreen( { technical = true, mode, readerTheme = 'legacy' } ) {
+export async function moveToDoneScreen( { technical = true, mode, readerTheme = 'legacy' } ) {
 	if ( mode === 'reader' ) {
 		await moveToReaderThemesScreen( { technical } );
 		await selectReaderTheme( readerTheme );
@@ -78,15 +78,7 @@ export async function moveToSummaryScreen( { technical = true, mode, readerTheme
 
 	await clickNextButton();
 
-	await page.waitForSelector( '.summary' );
-}
-
-export async function moveToDoneScreen( { technical = true, mode, readerTheme = 'legacy' } ) {
-	await moveToSummaryScreen( { technical, mode, readerTheme } );
-
-	await clickNextButton();
-	await page.waitForTimeout( 1000 );
-	await page.waitForSelector( '.done__preview-container' );
+	await page.waitForSelector( '.done' );
 }
 
 export async function completeWizard( { technical = true, mode, readerTheme = 'legacy' } ) {

From a08ada3be46b17947de58f402fa14ac6d3b25f19 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 18 Aug 2021 19:03:12 +0200
Subject: [PATCH 05/68] Use uniform name for Review (final) step in Onboarding
 Wizard

---
 assets/src/onboarding-wizard/pages/index.js      |  4 ++--
 .../pages/{save => review}/index.js              | 16 ++++++++--------
 .../pages/{save => review}/style.css             | 16 ++++++++--------
 .../specs/amp-onboarding/{done.js => review.js}  |  8 ++++----
 tests/e2e/utils/onboarding-wizard-utils.js       |  2 +-
 5 files changed, 23 insertions(+), 23 deletions(-)
 rename assets/src/onboarding-wizard/pages/{save => review}/index.js (97%)
 rename assets/src/onboarding-wizard/pages/{save => review}/style.css (78%)
 rename tests/e2e/specs/amp-onboarding/{done.js => review.js} (84%)

diff --git a/assets/src/onboarding-wizard/pages/index.js b/assets/src/onboarding-wizard/pages/index.js
index 24cdea4f15d..72003a26c02 100644
--- a/assets/src/onboarding-wizard/pages/index.js
+++ b/assets/src/onboarding-wizard/pages/index.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { TechnicalBackground } from './technical-background';
 import { TemplateMode } from './template-mode';
 import { ChooseReaderTheme } from './choose-reader-theme';
-import { Save } from './save';
+import { Review } from './review';
 import { Welcome } from './welcome';
 
 /**
@@ -41,7 +41,7 @@ export const PAGES = [
 	{
 		slug: 'review',
 		title: __( 'Review', 'amp' ),
-		PageComponent: Save,
+		PageComponent: Review,
 		showTitle: false,
 	},
 ];
diff --git a/assets/src/onboarding-wizard/pages/save/index.js b/assets/src/onboarding-wizard/pages/review/index.js
similarity index 97%
rename from assets/src/onboarding-wizard/pages/save/index.js
rename to assets/src/onboarding-wizard/pages/review/index.js
index b9659fc7358..aa456aa6b68 100644
--- a/assets/src/onboarding-wizard/pages/save/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -60,7 +60,7 @@ function Preview() {
 	return (
 		<Phone>
 			<iframe
-				className="done__preview-iframe"
+				className="review__preview-iframe"
 				src={ previewPermalink }
 				title={ __( 'Site preview', 'amp' ) }
 				name="amp-wizard-completion-preview"
@@ -72,7 +72,7 @@ function Preview() {
 /**
  * Final screen, where data is saved.
  */
-export function Save() {
+export function Review() {
 	const {
 		didSaveOptions,
 		editedOptions: { theme_support: themeSupport, reader_theme: readerTheme },
@@ -119,9 +119,9 @@ export function Save() {
 	}
 
 	return (
-		<div className="done">
-			<div className="done__content">
-				<div className="done__text">
+		<div className="review">
+			<div className="review__content">
+				<div className="review__text">
 					<h1>
 						{ __( 'Your site is live!', 'amp' ) }
 					</h1>
@@ -158,11 +158,11 @@ export function Save() {
 						</>
 					) }
 				</div>
-				<div className="done__text">
+				<div className="review__text">
 					<h2>
 						{ __( 'Needing extra help?', 'amp' ) }
 					</h2>
-					<ul className="done__list">
+					<ul className="review__list">
 						<li>
 							{ __( 'Reach out in the support forums', 'amp' ) }
 						</li>
@@ -175,7 +175,7 @@ export function Save() {
 					</ul>
 				</div>
 			</div>
-			<div className="done__preview-container">
+			<div className="review__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
 						{ __( 'There was an error downloading your Reader theme. As a result, your site is currently using the legacy reader theme. Please install your chosen theme manually.', 'amp' ) }
diff --git a/assets/src/onboarding-wizard/pages/save/style.css b/assets/src/onboarding-wizard/pages/review/style.css
similarity index 78%
rename from assets/src/onboarding-wizard/pages/save/style.css
rename to assets/src/onboarding-wizard/pages/review/style.css
index f87ad36c546..6f71ba8efc2 100644
--- a/assets/src/onboarding-wizard/pages/save/style.css
+++ b/assets/src/onboarding-wizard/pages/review/style.css
@@ -1,4 +1,4 @@
-.done {
+.review {
 	display: flex;
 	flex-wrap: wrap;
 
@@ -7,7 +7,7 @@
 	}
 }
 
-.done__content {
+.review__content {
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
@@ -19,13 +19,13 @@
 	}
 }
 
-.done__list {
+.review__list {
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
 	padding-left: 30px;
 }
 
-.done__preview-container {
+.review__preview-container {
 	text-align: center;
 
 	@media screen and (max-width: 1279px) {
@@ -34,21 +34,21 @@
 	}
 }
 
-.done__preview-container .amp-notice {
+.review__preview-container .amp-notice {
 	margin-bottom: 1.5rem;
 }
 
-.done__preview-container .phone {
+.review__preview-container .phone {
 	height: auto;
 	padding-bottom: 2rem;
 }
 
-.done__preview-container .phone::before {
+.review__preview-container .phone::before {
 	height: 9px;
 	width: 80px;
 }
 
-.done__preview-iframe {
+.review__preview-iframe {
 	height: 610px;
 	width: 400px;
 
diff --git a/tests/e2e/specs/amp-onboarding/done.js b/tests/e2e/specs/amp-onboarding/review.js
similarity index 84%
rename from tests/e2e/specs/amp-onboarding/done.js
rename to tests/e2e/specs/amp-onboarding/review.js
index 12b798d5fe2..ffb79898f8b 100644
--- a/tests/e2e/specs/amp-onboarding/done.js
+++ b/tests/e2e/specs/amp-onboarding/review.js
@@ -4,12 +4,12 @@
  */
 import { testCloseButton, cleanUpSettings, moveToDoneScreen } from '../../utils/onboarding-wizard-utils';
 
-describe( 'Done', () => {
+describe( 'Review', () => {
 	afterEach( async () => {
 		await cleanUpSettings();
 	} );
 
-	it( 'renders standard mode done screen', async () => {
+	it( 'renders standard mode review screen', async () => {
 		await moveToDoneScreen( { mode: 'standard' } );
 
 		testCloseButton( { exists: false } );
@@ -19,7 +19,7 @@ describe( 'Done', () => {
 		await expect( page ).toMatchElement( '.phone iframe' );
 	} );
 
-	it( 'renders transitional mode done screen', async () => {
+	it( 'renders transitional mode review screen', async () => {
 		await moveToDoneScreen( { mode: 'transitional' } );
 
 		testCloseButton( { exists: false } );
@@ -29,7 +29,7 @@ describe( 'Done', () => {
 		await expect( page ).toMatchElement( '.phone iframe' );
 	} );
 
-	it( 'renders reader mode done screen', async () => {
+	it( 'renders reader mode review screen', async () => {
 		await moveToDoneScreen( { mode: 'reader' } );
 
 		testCloseButton( { exists: true } );
diff --git a/tests/e2e/utils/onboarding-wizard-utils.js b/tests/e2e/utils/onboarding-wizard-utils.js
index b0d53f914ab..bfb6b80d10e 100644
--- a/tests/e2e/utils/onboarding-wizard-utils.js
+++ b/tests/e2e/utils/onboarding-wizard-utils.js
@@ -78,7 +78,7 @@ export async function moveToDoneScreen( { technical = true, mode, readerTheme =
 
 	await clickNextButton();
 
-	await page.waitForSelector( '.done' );
+	await page.waitForSelector( '.review' );
 }
 
 export async function completeWizard( { technical = true, mode, readerTheme = 'legacy' } ) {

From bad4a5d227a4e61b94488472698a044f0f215466 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 18 Aug 2021 19:40:21 +0200
Subject: [PATCH 06/68] Remove unused code

---
 .../components/template-mode-override-context-provider.js    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
index 8a0f023d59c..3a8cbd7fd0d 100644
--- a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
+++ b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
@@ -26,7 +26,7 @@ export const TemplateModeOverride = createContext();
  */
 export function TemplateModeOverrideContextProvider( { children } ) {
 	const { editedOptions, originalOptions, updateOptions, readerModeWasOverridden, setReaderModeWasOverridden } = useContext( Options );
-	const { activePageIndex, currentPage } = useContext( Navigation );
+	const { currentPage } = useContext( Navigation );
 	const { selectedTheme, currentTheme } = useContext( ReaderThemes );
 	const { developerToolsOption, fetchingUser, originalDeveloperToolsOption } = useContext( User );
 	const [ respondedToDeveloperToolsOptionChange, setRespondedToDeveloperToolsOptionChange ] = useState( false );
@@ -70,7 +70,6 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 			}
 		}
 	}, [
-		activePageIndex,
 		selectedTheme.name,
 		currentTheme.name,
 		themeSupport,
@@ -118,7 +117,7 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 	] );
 
 	return (
-		<TemplateModeOverride.Provider value={ { readerModeWasOverridden, technicalQuestionChangedAtLeastOnce } }>
+		<TemplateModeOverride.Provider value={ { technicalQuestionChangedAtLeastOnce } }>
 			{ children }
 		</TemplateModeOverride.Provider>
 	);

From 4e055c2695a6e3517c542b41e45721cffc09c421 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 19 Aug 2021 11:12:16 +0200
Subject: [PATCH 07/68] Ensure saving message is displayed as long as there are
 unsaved options

---
 assets/src/onboarding-wizard/pages/review/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index aa456aa6b68..a8333601647 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -76,6 +76,7 @@ export function Review() {
 	const {
 		didSaveOptions,
 		editedOptions: { theme_support: themeSupport, reader_theme: readerTheme },
+		hasOptionsChanges,
 		readerModeWasOverridden,
 		saveOptions,
 		savingOptions,
@@ -114,7 +115,7 @@ export function Review() {
 		}
 	}, [ didSaveDeveloperToolsOption, savingDeveloperToolsOption, saveDeveloperToolsOption ] );
 
-	if ( savingOptions || savingDeveloperToolsOption || downloadingTheme ) {
+	if ( savingOptions || savingDeveloperToolsOption || downloadingTheme || hasOptionsChanges ) {
 		return <Saving />;
 	}
 

From 0fb717d5c266f7bf6326f63389b496818b3f6cb8 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 19 Aug 2021 12:01:14 +0200
Subject: [PATCH 08/68] Use grid layout for review step and update content
 hierarchy

---
 .../onboarding-wizard/pages/review/index.js   | 99 +++++++++----------
 .../pages/review/{style.css => style.scss}    | 58 ++++++-----
 2 files changed, 83 insertions(+), 74 deletions(-)
 rename assets/src/onboarding-wizard/pages/review/{style.css => style.scss} (50%)

diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index a8333601647..e2d24412eb9 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -9,7 +9,7 @@ import { useContext, useEffect } from '@wordpress/element';
  */
 import { User } from '../../../components/user-context-provider';
 import { Phone } from '../../../components/phone';
-import './style.css';
+import './style.scss';
 import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import {
 	AMPNotice,
@@ -121,60 +121,40 @@ export function Review() {
 
 	return (
 		<div className="review">
-			<div className="review__content">
-				<div className="review__text">
-					<h1>
-						{ __( 'Your site is live!', 'amp' ) }
-					</h1>
-					{
-						'reader' === themeSupport && downloadedTheme === readerTheme && (
-							<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
-								{ __( 'Your Reader theme was automatically installed', 'amp' ) }
-							</AMPNotice>
-						)
-					}
-					{ readerModeWasOverridden && (
-						<AMPNotice type={ NOTICE_TYPE_INFO } size={ NOTICE_SIZE_LARGE }>
-							{ __( 'Because you selected a Reader theme that is the same as your site\'s active theme, your site has automatically been switched to Transitional template mode.', 'amp' ) }
-						</AMPNotice>
-					) }
-					{ 'standard' === themeSupport && (
+			<div className="review__content review__content--primary">
+				<h1>
+					{ __( 'Your site is live!', 'amp' ) }
+				</h1>
+				{ 'reader' === themeSupport && downloadedTheme === readerTheme && (
+					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
+						{ __( 'Your Reader theme was automatically installed', 'amp' ) }
+					</AMPNotice>
+				) }
+				{ readerModeWasOverridden && (
+					<AMPNotice type={ NOTICE_TYPE_INFO } size={ NOTICE_SIZE_LARGE }>
+						{ __( 'Because you selected a Reader theme that is the same as your site\'s active theme, your site has automatically been switched to Transitional template mode.', 'amp' ) }
+					</AMPNotice>
+				) }
+				{ 'standard' === themeSupport && (
+					<p>
+						{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single version of your site, the AMP version. Browse your site by navigating through the links below and ensure the functionality and look-and-feel of your site work as expected.', 'amp' ) }
+					</p>
+				) }
+				{ 'transitional' === themeSupport && (
+					<p>
+						{ __( 'Your site is ready to bring great experiences to your users! In Transitional mode both the AMP and non-AMP versions of your site will be served using your currently active theme. Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations.', 'amp' ) }
+					</p>
+				) }
+				{ 'reader' === themeSupport && (
+					<>
 						<p>
-							{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single version of your site, the AMP version. Browse your site by navigating through the links below and ensure the functionality and look-and-feel of your site work as expected.', 'amp' ) }
+							{ __( 'Your site is ready to bring great experiences to your users! In Reader mode the AMP version of your site will be served using the Reader theme you have selected, while pages for the non-AMP version of your site will be served using your primary theme.', 'amp' ) }
 						</p>
-					) }
-					{ 'transitional' === themeSupport && (
 						<p>
-							{ __( 'Your site is ready to bring great experiences to your users! In Transitional mode both the AMP and non-AMP versions of your site will be served using your currently active theme. Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations.', 'amp' ) }
+							{ __( 'Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' ) }
 						</p>
-					) }
-					{ 'reader' === themeSupport && (
-						<>
-							<p>
-								{ __( 'Your site is ready to bring great experiences to your users! In Reader mode the AMP version of your site will be served using the Reader theme you have selected, while pages for the non-AMP version of your site will be served using your primary theme.', 'amp' ) }
-							</p>
-							<p>
-								{ __( 'Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' ) }
-							</p>
-						</>
-					) }
-				</div>
-				<div className="review__text">
-					<h2>
-						{ __( 'Needing extra help?', 'amp' ) }
-					</h2>
-					<ul className="review__list">
-						<li>
-							{ __( 'Reach out in the support forums', 'amp' ) }
-						</li>
-						<li>
-							{ __( 'Try a different template mode in settings', 'amp' ) }
-						</li>
-						<li>
-							{ __( 'Learn more about how AMP works', 'amp' ) }
-						</li>
-					</ul>
-				</div>
+					</>
+				) }
 			</div>
 			<div className="review__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
@@ -183,7 +163,22 @@ export function Review() {
 					</AMPNotice>
 				) }
 				<Preview />
-
+			</div>
+			<div className="review__content review__content--secondary">
+				<h2>
+					{ __( 'Needing extra help?', 'amp' ) }
+				</h2>
+				<ul className="review__list">
+					<li>
+						{ __( 'Reach out in the support forums', 'amp' ) }
+					</li>
+					<li>
+						{ __( 'Try a different template mode in settings', 'amp' ) }
+					</li>
+					<li>
+						{ __( 'Learn more about how AMP works', 'amp' ) }
+					</li>
+				</ul>
 			</div>
 		</div>
 	);
diff --git a/assets/src/onboarding-wizard/pages/review/style.css b/assets/src/onboarding-wizard/pages/review/style.scss
similarity index 50%
rename from assets/src/onboarding-wizard/pages/review/style.css
rename to assets/src/onboarding-wizard/pages/review/style.scss
index 6f71ba8efc2..f178a10e878 100644
--- a/assets/src/onboarding-wizard/pages/review/style.css
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -1,21 +1,33 @@
 .review {
 	display: flex;
-	flex-wrap: wrap;
+	flex-flow: column nowrap;
 
 	@media screen and (min-width: 1280px) {
-		flex-wrap: nowrap;
+		display: grid;
+		grid-gap: 30px;
+		grid-template-columns: auto auto;
+		grid-template-rows: 1fr auto;
 	}
 }
 
 .review__content {
-	display: flex;
-	flex-flow: column nowrap;
-	justify-content: space-between;
-	padding-bottom: 30px;
-	width: 100%;
 
 	@media screen and (min-width: 1280px) {
-		padding-right: 30px;
+		grid-column: 1 / 2;
+	}
+}
+
+.review__content--primary {
+
+	@media screen and (min-width: 1280px) {
+		grid-row: 1 / 2;
+	}
+}
+
+.review__content--secondary {
+
+	@media screen and (min-width: 1280px) {
+		grid-row: 2 / 3;
 	}
 }
 
@@ -26,26 +38,28 @@
 }
 
 .review__preview-container {
+	margin-left: auto;
+	margin-right: auto;
 	text-align: center;
 
-	@media screen and (max-width: 1279px) {
-		margin-left: auto;
-		margin-right: auto;
+	@media screen and (min-width: 1280px) {
+		grid-column: 2 / 3;
+		grid-row: 1 / 3;
 	}
-}
 
-.review__preview-container .amp-notice {
-	margin-bottom: 1.5rem;
-}
+	.amp-notice {
+		margin-bottom: 1.5rem;
+	}
 
-.review__preview-container .phone {
-	height: auto;
-	padding-bottom: 2rem;
-}
+	.phone {
+		height: auto;
+		padding-bottom: 2rem;
 
-.review__preview-container .phone::before {
-	height: 9px;
-	width: 80px;
+		&::before {
+			height: 9px;
+			width: 80px;
+		}
+	}
 }
 
 .review__preview-iframe {

From 0f8e477fd9bd33cb769f344668254ca1aefce580 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 19 Aug 2021 16:26:21 +0200
Subject: [PATCH 09/68] Add preview page and mode selector to Review step

---
 .../onboarding-wizard/pages/review/index.js   | 88 +++++++------------
 .../pages/review/preview-mode-selector.js     | 67 ++++++++++++++
 .../pages/review/preview-page-selector.js     | 80 +++++++++++++++++
 .../onboarding-wizard/pages/review/saving.js  | 36 ++++++++
 .../onboarding-wizard/pages/review/style.scss | 74 +++++++++++++++-
 src/Admin/OnboardingWizardSubmenuPage.php     | 46 ++++++++--
 6 files changed, 324 insertions(+), 67 deletions(-)
 create mode 100644 assets/src/onboarding-wizard/pages/review/preview-mode-selector.js
 create mode 100644 assets/src/onboarding-wizard/pages/review/preview-page-selector.js
 create mode 100644 assets/src/onboarding-wizard/pages/review/saving.js

diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index e2d24412eb9..a9ce779804c 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -2,15 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useContext, useEffect } from '@wordpress/element';
+import { useContext, useEffect, useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
 
 /**
  * Internal dependencies
  */
-import { User } from '../../../components/user-context-provider';
-import { Phone } from '../../../components/phone';
 import './style.scss';
-import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import {
 	AMPNotice,
 	NOTICE_SIZE_LARGE,
@@ -19,55 +21,12 @@ import {
 } from '../../../components/amp-notice';
 import { Navigation } from '../../components/navigation-context-provider';
 import { Options } from '../../../components/options-context-provider';
-
-/**
- * UI for a saving state.
- */
-function Saving() {
-	return (
-		<div className="saving">
-			<svg width="285" height="138" viewBox="0 0 285 138" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M95.1831 136.785C95.1831 136.785 129.883 102.785 204.483 119.185" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M117.883 123.285C117.883 123.285 73.9833 98.8854 34.3833 113.985" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M177.583 127.785C168.583 123.285 160.383 125.985 160.683 126.685" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M49.1836 109.788C47.4836 109.188 46.4836 106.988 47.2836 105.288C47.9836 103.588 50.2836 102.788 51.8836 103.688C51.6836 102.488 52.4836 101.288 53.5836 100.888C54.6836 100.488 56.0836 100.888 56.7836 101.788C57.4836 99.7882 59.6836 98.4882 61.8836 98.6882C63.4836 98.8882 64.8836 99.8882 65.5836 101.388C66.4836 100.488 68.1836 100.488 69.0836 101.488C69.9836 102.388 69.8836 104.088 68.8836 104.988C70.0836 104.688 71.3836 105.188 71.9836 106.188C72.5836 107.188 72.6836 108.588 71.9836 109.588" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M51.4828 120.886C52.7828 120.586 54.1828 120.386 55.3828 119.786C56.3828 119.286 57.2828 118.186 56.1828 117.286C55.4828 116.686 53.6828 116.786 52.7828 116.786C51.1828 116.686 49.5828 116.586 48.0828 117.286C47.0828 117.786 43.6828 120.186 44.0828 121.486C44.6828 122.986 50.2828 121.086 51.4828 120.886Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M68.6833 115.885C67.9833 115.685 67.1833 115.485 66.4833 115.585C63.9833 115.685 61.9833 117.685 64.4833 119.385C66.0833 120.485 68.3833 120.585 70.1833 120.785C71.2833 120.985 72.6833 120.885 73.1833 119.885C73.4833 119.185 73.1833 118.285 72.6833 117.785C72.1833 117.185 71.3833 116.885 70.6833 116.685C70.0833 116.285 69.3833 116.085 68.6833 115.885Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M246.827 89.9262C247.727 89.7262 248.627 89.4262 249.327 88.6262C250.427 87.5262 251.227 85.9262 250.527 84.3262C250.027 83.0262 248.327 80.9262 244.527 81.2262C243.727 81.3262 242.627 77.8262 242.127 77.2262C240.827 75.6262 239.027 74.7262 237.027 74.3262C236.027 74.1262 234.927 74.1262 234.027 74.5262C233.627 74.7262 231.827 76.0262 232.127 76.6262C232.127 76.6262 227.727 69.1262 221.527 75.5262C220.027 77.3262 219.527 78.7262 219.527 78.7262C219.527 78.7262 213.827 77.4262 212.627 82.0262C212.127 84.4262 211.127 89.2262 218.527 89.6262C223.727 89.6262 228.927 89.7262 234.127 89.8262C237.727 89.9262 241.327 90.4262 245.027 90.0262C245.627 90.1262 246.227 90.0262 246.827 89.9262Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M235.629 109.054H254.729C255.929 107.454 255.529 104.854 254.029 103.554C252.529 102.254 250.029 102.154 248.629 103.554C248.729 101.454 247.329 99.454 245.329 98.854C243.329 98.254 241.029 99.154 239.929 100.854C237.429 99.154 233.529 100.154 232.229 102.954C230.829 105.654 232.629 108.254 235.629 109.054Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M275.75 56.9414L277.85 62.8414L283.75 64.9414L277.85 67.0414L275.75 72.9414L273.65 67.0414L267.75 64.9414L273.65 62.8414L275.75 56.9414Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M34.3833 64.9414L36.4833 70.8414L42.3833 72.9414L36.4833 75.0414L34.3833 80.9414L32.2833 75.0414L26.3833 72.9414L32.2833 70.8414L34.3833 64.9414Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M10.4722 81.5586L12.8722 88.1586L19.4722 90.5586L12.8722 92.9586L10.4722 99.5586L8.07217 92.9586L1.47217 90.5586L8.07217 88.1586L10.4722 81.5586Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M144.095 75.0624L145.303 84.4721L151.979 86.8034L156.709 93.8481L155.359 100.717L164.592 105.589L169.674 100.473L178.103 99.0727L184.393 103.366L191.437 98.6364L189.651 92.1705L194.524 82.9369L201.182 80.1693L199.782 71.7409L193.106 69.4095L187.395 62.172L188.745 55.3034L180.493 50.6238L175.218 56.7209L166.982 57.1403L159.711 52.6535L153.84 56.5953L155.434 64.0425L150.561 73.276L144.095 75.0624Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-				<path d="M170.614 87.9204C176.033 88.9857 181.29 85.4562 182.355 80.037C183.42 74.6179 179.891 69.3612 174.471 68.296C169.052 67.2307 163.796 70.7603 162.73 76.1794C161.665 81.5986 165.195 86.8552 170.614 87.9204Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-				<path d="M138.394 47.0394L148.416 53.086L146.101 64.8607L134.536 66.6639L131.609 71.1842L134.394 82.9421L123.827 90.0372L113.998 83.0094L108.706 84.0074L103.834 93.241L91.0776 90.7336L90.0628 80.3427L84.7541 76.2417L74.9587 79.4119L67.8636 68.845L73.7173 59.8043L72.7192 54.5124L62.6973 48.4659L65.0119 36.6912L76.5768 34.888L79.6966 29.3864L76.7193 18.6098L87.0933 12.4959L96.9223 19.5237L102.407 17.5445L107.28 8.31088L120.035 10.8183L122.032 21.4021L126.359 25.3101L137.136 22.3328L144.424 31.9185L137.589 40.7664L138.394 47.0394Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-				<path d="M103.628 60.5884C109.047 61.6537 114.304 58.1241 115.369 52.705C116.434 47.2858 112.905 42.0292 107.486 40.964C102.066 39.8987 96.8098 43.4282 95.7445 48.8474C94.6793 54.2665 98.2088 59.5232 103.628 60.5884Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-				<path d="M101.718 70.3011C112.502 72.421 122.963 65.3972 125.083 54.6131C127.203 43.829 120.179 33.3683 109.395 31.2485C98.6109 29.1286 88.1502 36.1524 86.0303 46.9365C83.9105 57.7206 90.9342 68.1813 101.718 70.3011Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-			</svg>
-
-			<h1>
-				{ __( 'Saving your settings …', 'amp' ) }
-			</h1>
-		</div>
-	);
-}
-
-function Preview() {
-	const {
-		originalOptions: { preview_permalink: previewPermalink },
-	} = useContext( Options );
-
-	return (
-		<Phone>
-			<iframe
-				className="review__preview-iframe"
-				src={ previewPermalink }
-				title={ __( 'Site preview', 'amp' ) }
-				name="amp-wizard-completion-preview"
-			/>
-		</Phone>
-	);
-}
+import { ReaderThemes } from '../../../components/reader-themes-context-provider';
+import { User } from '../../../components/user-context-provider';
+import { Phone } from '../../../components/phone';
+import { PreviewPageSelector } from './preview-page-selector';
+import { PreviewModeSelector } from './preview-mode-selector';
+import { Saving } from './saving';
 
 /**
  * Final screen, where data is saved.
@@ -84,6 +43,8 @@ export function Review() {
 	const { didSaveDeveloperToolsOption, saveDeveloperToolsOption, savingDeveloperToolsOption } = useContext( User );
 	const { canGoForward, setCanGoForward } = useContext( Navigation );
 	const { downloadedTheme, downloadingTheme, downloadingThemeError } = useContext( ReaderThemes );
+	const [ previewMode, setPreviewMode ] = useState( themeSupport === 'standard' ? 'non-amp' : 'amp' );
+	const [ previewPageType, setPreviewPageType ] = useState( PREVIEW_URLS[ Object.keys( PREVIEW_URLS )[ 0 ] ].type );
 
 	/**
 	 * Allow the finish button to be enabled.
@@ -155,6 +116,11 @@ export function Review() {
 						</p>
 					</>
 				) }
+				<PreviewPageSelector
+					pages={ Object.keys( PREVIEW_URLS ) }
+					selectedPage={ previewPageType }
+					onChange={ setPreviewPageType }
+				/>
 			</div>
 			<div className="review__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
@@ -162,7 +128,21 @@ export function Review() {
 						{ __( 'There was an error downloading your Reader theme. As a result, your site is currently using the legacy reader theme. Please install your chosen theme manually.', 'amp' ) }
 					</AMPNotice>
 				) }
-				<Preview />
+				{ 'transitional' === themeSupport && (
+					<PreviewModeSelector
+						modes={ [ 'amp', 'non-amp' ] }
+						onChange={ setPreviewMode }
+						selectedMode={ previewMode }
+					/>
+				) }
+				<Phone>
+					<iframe
+						className="review__preview-iframe"
+						src={ PREVIEW_URLS[ previewPageType ][ previewMode === 'amp' ? 'amp_url' : 'url' ] }
+						title={ __( 'Site preview', 'amp' ) }
+						name="amp-wizard-completion-preview"
+					/>
+				</Phone>
 			</div>
 			<div className="review__content review__content--secondary">
 				<h2>
diff --git a/assets/src/onboarding-wizard/pages/review/preview-mode-selector.js b/assets/src/onboarding-wizard/pages/review/preview-mode-selector.js
new file mode 100644
index 00000000000..3de79215897
--- /dev/null
+++ b/assets/src/onboarding-wizard/pages/review/preview-mode-selector.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Gets the title for the preview mode selector.
+ *
+ * @param {string} mode The mode.
+ */
+function getTitle( mode ) {
+	switch ( mode ) {
+		case 'amp':
+			return __( 'AMP', 'amp' );
+
+		case 'non-amp':
+			return __( 'Non-AMP', 'amp' );
+
+		default:
+			return null;
+	}
+}
+
+/**
+ * Preview mode selector.
+ *
+ * @param {Object}   props              Component props.
+ * @param {Object}   props.modes        Preview modes.
+ * @param {Function} props.onChange     Preview mode change handler.
+ * @param {string}   props.selectedMode Currently selected mode.
+ */
+export function PreviewModeSelector( { modes, onChange, selectedMode } ) {
+	return (
+		<form className="review__preview-mode-selector">
+			{ modes.map( ( mode ) => (
+				<label
+					key={ mode }
+					className={ `review__preview-mode-selector-label ${ selectedMode === mode ? 'is-selected' : '' }` }
+					htmlFor={ `preview-mode-${ mode }` }
+				>
+					<div className="review__preview-mode-selector-input">
+						<input
+							type="radio"
+							id={ `preview-mode-${ mode }` }
+							checked={ selectedMode === mode }
+							onChange={ () => onChange( mode ) }
+						/>
+					</div>
+					<h3 className="review__preview-mode-selector-title">
+						{ getTitle( mode ) }
+					</h3>
+				</label>
+			) ) }
+		</form>
+	);
+}
+
+PreviewModeSelector.propTypes = {
+	modes: PropTypes.array,
+	onChange: PropTypes.func,
+	selectedMode: PropTypes.string,
+};
diff --git a/assets/src/onboarding-wizard/pages/review/preview-page-selector.js b/assets/src/onboarding-wizard/pages/review/preview-page-selector.js
new file mode 100644
index 00000000000..c5e7258ca8c
--- /dev/null
+++ b/assets/src/onboarding-wizard/pages/review/preview-page-selector.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Selectable } from '../../../components/selectable';
+
+/**
+ * Gets the title for the preview page selector.
+ *
+ * @param {string} page The page type.
+ */
+function getTitle( page ) {
+	switch ( page ) {
+		case 'home':
+			return __( 'Homepage', 'amp' );
+
+		case 'author':
+			return __( 'Author page', 'amp' );
+
+		case 'date':
+			return __( 'Archive page', 'amp' );
+
+		case 'search':
+			return __( 'Search results', 'amp' );
+
+		default:
+			return `${ page.charAt( 0 ).toUpperCase() }${ page.slice( 1 ) }`;
+	}
+}
+
+/**
+ * Preview page selector.
+ *
+ * @param {Object}   props              Component props.
+ * @param {Array}    props.pages        Preview pages.
+ * @param {Function} props.onChange     Preview page change handler.
+ * @param {string}   props.selectedPage Currently selected page.
+ */
+export function PreviewPageSelector( { pages, onChange, selectedPage } ) {
+	return (
+		<Selectable>
+			<form className="review__preview-page-selector">
+				{ pages.map( ( page ) => (
+					<label
+						key={ page }
+						className={ `review__preview-page-selector-label ${ selectedPage === page ? 'is-selected' : '' }` }
+						htmlFor={ `preview-${ page }` }
+					>
+						<div className="review__preview-page-selector-input">
+							<input
+								type="radio"
+								id={ `preview-${ page }` }
+								checked={ selectedPage === page }
+								onChange={ () => onChange( page ) }
+							/>
+						</div>
+						<h3 className="review__preview-page-selector-title">
+							{ getTitle( page ) }
+						</h3>
+					</label>
+				) ) }
+			</form>
+		</Selectable>
+	);
+}
+
+PreviewPageSelector.propTypes = {
+	pages: PropTypes.array,
+	onChange: PropTypes.func,
+	selectedPage: PropTypes.string,
+};
diff --git a/assets/src/onboarding-wizard/pages/review/saving.js b/assets/src/onboarding-wizard/pages/review/saving.js
new file mode 100644
index 00000000000..ef83265da73
--- /dev/null
+++ b/assets/src/onboarding-wizard/pages/review/saving.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * UI for a saving state.
+ */
+export function Saving() {
+	return (
+		<div className="saving">
+			<svg width="285" height="138" viewBox="0 0 285 138" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M95.1831 136.785C95.1831 136.785 129.883 102.785 204.483 119.185" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M117.883 123.285C117.883 123.285 73.9833 98.8854 34.3833 113.985" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M177.583 127.785C168.583 123.285 160.383 125.985 160.683 126.685" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M49.1836 109.788C47.4836 109.188 46.4836 106.988 47.2836 105.288C47.9836 103.588 50.2836 102.788 51.8836 103.688C51.6836 102.488 52.4836 101.288 53.5836 100.888C54.6836 100.488 56.0836 100.888 56.7836 101.788C57.4836 99.7882 59.6836 98.4882 61.8836 98.6882C63.4836 98.8882 64.8836 99.8882 65.5836 101.388C66.4836 100.488 68.1836 100.488 69.0836 101.488C69.9836 102.388 69.8836 104.088 68.8836 104.988C70.0836 104.688 71.3836 105.188 71.9836 106.188C72.5836 107.188 72.6836 108.588 71.9836 109.588" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M51.4828 120.886C52.7828 120.586 54.1828 120.386 55.3828 119.786C56.3828 119.286 57.2828 118.186 56.1828 117.286C55.4828 116.686 53.6828 116.786 52.7828 116.786C51.1828 116.686 49.5828 116.586 48.0828 117.286C47.0828 117.786 43.6828 120.186 44.0828 121.486C44.6828 122.986 50.2828 121.086 51.4828 120.886Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M68.6833 115.885C67.9833 115.685 67.1833 115.485 66.4833 115.585C63.9833 115.685 61.9833 117.685 64.4833 119.385C66.0833 120.485 68.3833 120.585 70.1833 120.785C71.2833 120.985 72.6833 120.885 73.1833 119.885C73.4833 119.185 73.1833 118.285 72.6833 117.785C72.1833 117.185 71.3833 116.885 70.6833 116.685C70.0833 116.285 69.3833 116.085 68.6833 115.885Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M246.827 89.9262C247.727 89.7262 248.627 89.4262 249.327 88.6262C250.427 87.5262 251.227 85.9262 250.527 84.3262C250.027 83.0262 248.327 80.9262 244.527 81.2262C243.727 81.3262 242.627 77.8262 242.127 77.2262C240.827 75.6262 239.027 74.7262 237.027 74.3262C236.027 74.1262 234.927 74.1262 234.027 74.5262C233.627 74.7262 231.827 76.0262 232.127 76.6262C232.127 76.6262 227.727 69.1262 221.527 75.5262C220.027 77.3262 219.527 78.7262 219.527 78.7262C219.527 78.7262 213.827 77.4262 212.627 82.0262C212.127 84.4262 211.127 89.2262 218.527 89.6262C223.727 89.6262 228.927 89.7262 234.127 89.8262C237.727 89.9262 241.327 90.4262 245.027 90.0262C245.627 90.1262 246.227 90.0262 246.827 89.9262Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M235.629 109.054H254.729C255.929 107.454 255.529 104.854 254.029 103.554C252.529 102.254 250.029 102.154 248.629 103.554C248.729 101.454 247.329 99.454 245.329 98.854C243.329 98.254 241.029 99.154 239.929 100.854C237.429 99.154 233.529 100.154 232.229 102.954C230.829 105.654 232.629 108.254 235.629 109.054Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M275.75 56.9414L277.85 62.8414L283.75 64.9414L277.85 67.0414L275.75 72.9414L273.65 67.0414L267.75 64.9414L273.65 62.8414L275.75 56.9414Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M34.3833 64.9414L36.4833 70.8414L42.3833 72.9414L36.4833 75.0414L34.3833 80.9414L32.2833 75.0414L26.3833 72.9414L32.2833 70.8414L34.3833 64.9414Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M10.4722 81.5586L12.8722 88.1586L19.4722 90.5586L12.8722 92.9586L10.4722 99.5586L8.07217 92.9586L1.47217 90.5586L8.07217 88.1586L10.4722 81.5586Z" fill="white" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M144.095 75.0624L145.303 84.4721L151.979 86.8034L156.709 93.8481L155.359 100.717L164.592 105.589L169.674 100.473L178.103 99.0727L184.393 103.366L191.437 98.6364L189.651 92.1705L194.524 82.9369L201.182 80.1693L199.782 71.7409L193.106 69.4095L187.395 62.172L188.745 55.3034L180.493 50.6238L175.218 56.7209L166.982 57.1403L159.711 52.6535L153.84 56.5953L155.434 64.0425L150.561 73.276L144.095 75.0624Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
+				<path d="M170.614 87.9204C176.033 88.9857 181.29 85.4562 182.355 80.037C183.42 74.6179 179.891 69.3612 174.471 68.296C169.052 67.2307 163.796 70.7603 162.73 76.1794C161.665 81.5986 165.195 86.8552 170.614 87.9204Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
+				<path d="M138.394 47.0394L148.416 53.086L146.101 64.8607L134.536 66.6639L131.609 71.1842L134.394 82.9421L123.827 90.0372L113.998 83.0094L108.706 84.0074L103.834 93.241L91.0776 90.7336L90.0628 80.3427L84.7541 76.2417L74.9587 79.4119L67.8636 68.845L73.7173 59.8043L72.7192 54.5124L62.6973 48.4659L65.0119 36.6912L76.5768 34.888L79.6966 29.3864L76.7193 18.6098L87.0933 12.4959L96.9223 19.5237L102.407 17.5445L107.28 8.31088L120.035 10.8183L122.032 21.4021L126.359 25.3101L137.136 22.3328L144.424 31.9185L137.589 40.7664L138.394 47.0394Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
+				<path d="M103.628 60.5884C109.047 61.6537 114.304 58.1241 115.369 52.705C116.434 47.2858 112.905 42.0292 107.486 40.964C102.066 39.8987 96.8098 43.4282 95.7445 48.8474C94.6793 54.2665 98.2088 59.5232 103.628 60.5884Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
+				<path d="M101.718 70.3011C112.502 72.421 122.963 65.3972 125.083 54.6131C127.203 43.829 120.179 33.3683 109.395 31.2485C98.6109 29.1286 88.1502 36.1524 86.0303 46.9365C83.9105 57.7206 90.9342 68.1813 101.718 70.3011Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
+			</svg>
+
+			<h1>
+				{ __( 'Saving your settings …', 'amp' ) }
+			</h1>
+		</div>
+	);
+}
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index f178a10e878..cc7d067712b 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -1,10 +1,8 @@
 .review {
-	display: flex;
-	flex-flow: column nowrap;
+	display: grid;
+	grid-gap: 30px;
 
 	@media screen and (min-width: 1280px) {
-		display: grid;
-		grid-gap: 30px;
 		grid-template-columns: auto auto;
 		grid-template-rows: 1fr auto;
 	}
@@ -37,6 +35,74 @@
 	padding-left: 30px;
 }
 
+// Preview page selector.
+.review__preview-page-selector-label {
+	align-items: baseline;
+	color: var(--amp-settings-color-muted);
+	display: flex;
+	flex-flow: row nowrap;
+	padding: 15px 0 14px;
+
+	&.is-selected,
+	&:hover {
+		color: var(--amp-settings-color-black);
+	}
+
+	& + & {
+		border-top: 1px solid var(--amp-settings-color-border);
+	}
+
+	&:first-child {
+		padding-top: 0;
+	}
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+}
+
+.review__preview-page-selector-input {
+	margin-right: 20px;
+}
+
+.amp .review__preview-page-selector-title {
+	color: inherit;
+	font-size: 16px;
+}
+
+// Preview mode selector.
+.review__preview-mode-selector {
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+.review__preview-mode-selector-input {
+	margin-right: 10px;
+}
+
+.review__preview-mode-selector-label {
+	align-items: baseline;
+	color: var(--amp-settings-color-muted);
+	display: flex;
+	flex-flow: row nowrap;
+	padding: 20px 0;
+
+	&.is-selected,
+	&:hover {
+		color: var(--amp-settings-color-black);
+	}
+
+	& + & {
+		margin-left: 25px;
+	}
+}
+
+.amp .review__preview-mode-selector-title {
+	color: inherit;
+	font-size: 15px;
+}
+
+// Preview container.
 .review__preview-container {
 	margin-left: auto;
 	margin-right: auto;
diff --git a/src/Admin/OnboardingWizardSubmenuPage.php b/src/Admin/OnboardingWizardSubmenuPage.php
index 75c4c8ac401..a918cf707f3 100644
--- a/src/Admin/OnboardingWizardSubmenuPage.php
+++ b/src/Admin/OnboardingWizardSubmenuPage.php
@@ -14,6 +14,7 @@
 use AmpProject\AmpWP\Infrastructure\Registerable;
 use AmpProject\AmpWP\Infrastructure\Service;
 use AmpProject\AmpWP\LoadingError;
+use AmpProject\AmpWP\Validation\ScannableURLProvider;
 
 /**
  * AMP setup wizard submenu page class.
@@ -68,19 +69,28 @@ final class OnboardingWizardSubmenuPage implements Delayed, Registerable, Servic
 	 */
 	private $loading_error;
 
+	/**
+	 * ScannableURLProvider instance.
+	 *
+	 * @var ScannableURLProvider
+	 */
+	private $scannable_url_provider;
+
 	/**
 	 * OnboardingWizardSubmenuPage constructor.
 	 *
-	 * @param GoogleFonts   $google_fonts   An instance of the GoogleFonts service.
-	 * @param ReaderThemes  $reader_themes  An instance of the ReaderThemes class.
-	 * @param RESTPreloader $rest_preloader An instance of the RESTPreloader class.
-	 * @param LoadingError  $loading_error  An instance of the LoadingError class.
+	 * @param GoogleFonts          $google_fonts           An instance of the GoogleFonts service.
+	 * @param ReaderThemes         $reader_themes          An instance of the ReaderThemes class.
+	 * @param RESTPreloader        $rest_preloader         An instance of the RESTPreloader class.
+	 * @param LoadingError         $loading_error          An instance of the LoadingError class.
+	 * @param ScannableURLProvider $scannable_url_provider An instance of the ScannableURLProvider class.
 	 */
-	public function __construct( GoogleFonts $google_fonts, ReaderThemes $reader_themes, RESTPreloader $rest_preloader, LoadingError $loading_error ) {
-		$this->google_fonts   = $google_fonts;
-		$this->reader_themes  = $reader_themes;
-		$this->rest_preloader = $rest_preloader;
-		$this->loading_error  = $loading_error;
+	public function __construct( GoogleFonts $google_fonts, ReaderThemes $reader_themes, RESTPreloader $rest_preloader, LoadingError $loading_error, ScannableURLProvider $scannable_url_provider ) {
+		$this->google_fonts           = $google_fonts;
+		$this->reader_themes          = $reader_themes;
+		$this->rest_preloader         = $rest_preloader;
+		$this->loading_error          = $loading_error;
+		$this->scannable_url_provider = $scannable_url_provider;
 	}
 
 	/**
@@ -239,6 +249,7 @@ public function enqueue_assets( $hook_suffix ) {
 			'USING_FALLBACK_READER_THEME'        => $this->reader_themes->using_fallback_theme(),
 			'FINISH_LINK'                        => $amp_settings_link,
 			'OPTIONS_REST_PATH'                  => '/amp/v1/options',
+			'PREVIEW_URLS'                       => $this->get_preview_urls(),
 			'READER_THEMES_REST_PATH'            => '/amp/v1/reader-themes',
 			'UPDATES_NONCE'                      => wp_create_nonce( 'updates' ),
 			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
@@ -301,4 +312,21 @@ public function get_close_link() {
 		// Default to the AMP Settings page if a referrer link could not be determined.
 		return menu_page_url( AMP_Options_Manager::OPTION_NAME, false );
 	}
+
+	/**
+	 * Get a list of preview URLs.
+	 *
+	 * @return array Preview URLs.
+	 */
+	protected function get_preview_urls() {
+		$preview_urls   = [];
+		$scannable_urls = $this->scannable_url_provider->get_urls();
+
+		foreach ( $scannable_urls as $scannable_url ) {
+			$preview_urls[ $scannable_url['type'] ]            = $scannable_url;
+			$preview_urls[ $scannable_url['type'] ]['amp_url'] = amp_add_paired_endpoint( $scannable_url['url'] );
+		}
+
+		return $preview_urls;
+	}
 }

From f43b496eb433e2377b51553761420c23cb7065a3 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 19 Aug 2021 19:49:10 +0200
Subject: [PATCH 10/68] Extract preview to separate component; add loading
 state

---
 assets/src/components/phone/index.js          | 16 +++--
 assets/src/components/phone/style.css         | 27 +++++++-
 assets/src/css/variables.css                  |  1 +
 .../onboarding-wizard/pages/review/index.js   | 12 ++--
 .../onboarding-wizard/pages/review/preview.js | 63 +++++++++++++++++++
 5 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 assets/src/onboarding-wizard/pages/review/preview.js

diff --git a/assets/src/components/phone/index.js b/assets/src/components/phone/index.js
index 2e1f4934660..1c4ed55de68 100644
--- a/assets/src/components/phone/index.js
+++ b/assets/src/components/phone/index.js
@@ -7,17 +7,22 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import './style.css';
+import { Loading } from '../loading';
 
 /**
  * Component resembling a phone with a screen.
  *
- * @param {Object} props          Component props.
- * @param {any}    props.children The elements to display in the screen.
+ * @param {Object}  props           Component props.
+ * @param {any}     props.children  The elements to display in the screen.
+ * @param {boolean} props.isLoading Flag indicating if the content is loading.
  */
-export function Phone( { children } ) {
+export function Phone( { children, isLoading = false } ) {
 	return (
-		<div className="phone">
-			<div className="phone-inner">
+		<div className={ `phone ${ isLoading ? 'is-loading' : '' }` }>
+			<div className="phone__inner">
+				<div className="phone__overlay">
+					<Loading />
+				</div>
 				{ children }
 			</div>
 		</div>
@@ -26,4 +31,5 @@ export function Phone( { children } ) {
 
 Phone.propTypes = {
 	children: PropTypes.any,
+	isLoading: PropTypes.bool,
 };
diff --git a/assets/src/components/phone/style.css b/assets/src/components/phone/style.css
index 8ad1355cb4a..e9cec3c3529 100644
--- a/assets/src/components/phone/style.css
+++ b/assets/src/components/phone/style.css
@@ -24,9 +24,32 @@
 	width: 43px;
 }
 
-.phone-inner {
+.phone__inner {
 	display: flex;
-	background-color: var(--color-gray-medium);
+	background-color: var(--amp-settings-color-dark-gray);
 	flex-grow: 1;
 	overflow: hidden;
+	position: relative;
+}
+
+.phone__overlay {
+	align-items: center;
+	background-color: var(--amp-settings-color-dark-gray);
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	left: 0;
+	opacity: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: opacity 0.3s ease, visibility 0.3s ease;
+	visibility: hidden;
+}
+
+.phone.is-loading .phone__overlay {
+	opacity: 1;
+	pointer-events: auto;
+	visibility: visible;
 }
diff --git a/assets/src/css/variables.css b/assets/src/css/variables.css
index caa23643cf2..60673f6039e 100644
--- a/assets/src/css/variables.css
+++ b/assets/src/css/variables.css
@@ -5,6 +5,7 @@
  */
 :root {
 	--amp-settings-color-black: #212121;
+	--amp-settings-color-dark-gray: #333333;
 	--amp-settings-color-brand: #2459e7;
 	--amp-settings-color-muted: #48525c;
 	--gray: #6c7781;
diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index a9ce779804c..5e74064278d 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -13,6 +13,8 @@ import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
  * Internal dependencies
  */
 import './style.scss';
+import { User } from '../../components/user-context-provider';
+import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import {
 	AMPNotice,
 	NOTICE_SIZE_LARGE,
@@ -24,6 +26,7 @@ import { Options } from '../../../components/options-context-provider';
 import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import { User } from '../../../components/user-context-provider';
 import { Phone } from '../../../components/phone';
+import { Preview } from './preview';
 import { PreviewPageSelector } from './preview-page-selector';
 import { PreviewModeSelector } from './preview-mode-selector';
 import { Saving } from './saving';
@@ -135,14 +138,7 @@ export function Review() {
 						selectedMode={ previewMode }
 					/>
 				) }
-				<Phone>
-					<iframe
-						className="review__preview-iframe"
-						src={ PREVIEW_URLS[ previewPageType ][ previewMode === 'amp' ? 'amp_url' : 'url' ] }
-						title={ __( 'Site preview', 'amp' ) }
-						name="amp-wizard-completion-preview"
-					/>
-				</Phone>
+				<Preview url={ PREVIEW_URLS[ previewPageType ][ previewMode === 'amp' ? 'amp_url' : 'url' ] } />
 			</div>
 			<div className="review__content review__content--secondary">
 				<h2>
diff --git a/assets/src/onboarding-wizard/pages/review/preview.js b/assets/src/onboarding-wizard/pages/review/preview.js
new file mode 100644
index 00000000000..83671f00ebd
--- /dev/null
+++ b/assets/src/onboarding-wizard/pages/review/preview.js
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Phone } from '../../../components/phone';
+
+/**
+ * Page preview component.
+ *
+ * @param {Object} props     Component props.
+ * @param {string} props.url URL of the page to be previewed.
+ */
+export function Preview( { url } ) {
+	const iframeRef = useRef( null );
+	const [ isLoading, setIsLoading ] = useState( true );
+
+	useEffect( () => {
+		if ( ! iframeRef.current ) {
+			return null;
+		}
+
+		const iframe = iframeRef.current;
+		const onLoad = () => setIsLoading( false );
+
+		iframe.addEventListener( 'load', onLoad );
+
+		return () => {
+			iframe.removeEventListener( 'load', onLoad );
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( url ) {
+			setIsLoading( true );
+		}
+	}, [ url ] );
+
+	return (
+		<Phone isLoading={ isLoading }>
+			<iframe
+				className="review__preview-iframe"
+				src={ url }
+				ref={ iframeRef }
+				title={ __( 'Site preview', 'amp' ) }
+				name="amp-wizard-completion-preview"
+			/>
+		</Phone>
+	);
+}
+
+Preview.propTypes = {
+	url: PropTypes.string,
+};

From 223ebbb2f52bd3922602c1381f90036a4def7e6e Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 20 Aug 2021 13:28:36 +0200
Subject: [PATCH 11/68] Refactor `RadioGroup` into stand-alone component

---
 .../src/components/radio-group/radio-group.js |  71 +++++++++++
 assets/src/components/radio-group/style.scss  |  57 +++++++++
 .../test/__snapshots__/radio-group.js.snap    |  48 +++++++
 .../radio-group/test/radio-group.js           | 118 ++++++++++++++++++
 .../onboarding-wizard/pages/review/index.js   |  63 ++++++++--
 .../pages/review/preview-mode-selector.js     |  67 ----------
 .../pages/review/preview-page-selector.js     |  80 ------------
 .../onboarding-wizard/pages/review/style.scss |  67 ----------
 8 files changed, 345 insertions(+), 226 deletions(-)
 create mode 100644 assets/src/components/radio-group/radio-group.js
 create mode 100644 assets/src/components/radio-group/style.scss
 create mode 100644 assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
 create mode 100644 assets/src/components/radio-group/test/radio-group.js
 delete mode 100644 assets/src/onboarding-wizard/pages/review/preview-mode-selector.js
 delete mode 100644 assets/src/onboarding-wizard/pages/review/preview-page-selector.js

diff --git a/assets/src/components/radio-group/radio-group.js b/assets/src/components/radio-group/radio-group.js
new file mode 100644
index 00000000000..dbb79fbe0ad
--- /dev/null
+++ b/assets/src/components/radio-group/radio-group.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Radio group.
+ *
+ * @param {Object}   props              Component props.
+ * @param {Array}    props.options      List of option values and titles.
+ * @param {Function} props.onChange     Change handler.
+ * @param {string}   props.selected     Currently selected option.
+ * @param {boolean}  props.isHorizontal Flag indicating that the options should not be stacked.
+ */
+export function RadioGroup( { options = [], onChange, selected, isHorizontal } ) {
+	const htmlIdPrefix = `radio-group-${ useInstanceId( RadioGroup ) }`;
+
+	return (
+		<form
+			className={ classnames( 'radio-group', {
+				'radio-group--stacked': ! isHorizontal,
+				'radio-group--horizontal': isHorizontal,
+			} ) }
+		>
+			{ options.map( ( { value, title } ) => (
+				<label
+					key={ value }
+					className={ classnames( 'radio-group__label', {
+						'radio-group__label--selected': isHorizontal,
+					} ) }
+					htmlFor={ `${ htmlIdPrefix }-${ value }` }
+				>
+					<div className="radio-group__input">
+						<input
+							type="radio"
+							id={ `${ htmlIdPrefix }-${ value }` }
+							checked={ selected === value }
+							onChange={ () => onChange( value ) }
+						/>
+					</div>
+					<h3 className="radio-group__title">
+						{ title }
+					</h3>
+				</label>
+			) ) }
+		</form>
+	);
+}
+
+RadioGroup.propTypes = {
+	options: PropTypes.arrayOf(
+		PropTypes.shape( {
+			value: PropTypes.string,
+			title: PropTypes.string,
+		} ),
+	),
+	onChange: PropTypes.func,
+	selected: PropTypes.string,
+	isHorizontal: PropTypes.bool,
+};
diff --git a/assets/src/components/radio-group/style.scss b/assets/src/components/radio-group/style.scss
new file mode 100644
index 00000000000..f2cc54c6189
--- /dev/null
+++ b/assets/src/components/radio-group/style.scss
@@ -0,0 +1,57 @@
+.radio-group__label {
+	align-items: baseline;
+	color: var(--amp-settings-color-muted);
+	display: flex;
+	flex-flow: row nowrap;
+
+	&.radio-group__label--selected,
+	&:hover {
+		color: var(--amp-settings-color-black);
+	}
+}
+
+.radio-group__title.radio-group__title {
+	color: inherit;
+	font-size: 16px;
+}
+
+.radio-group--stacked {
+
+	.radio-group__label {
+		padding: 15px 0 14px;
+
+		& + .radio-group__label {
+			border-top: 1px solid var(--amp-settings-color-border);
+		}
+
+		&:first-child {
+			padding-top: 0;
+		}
+
+		&:last-child {
+			padding-bottom: 0;
+		}
+	}
+
+	.radio-group__input {
+		margin-right: 20px;
+	}
+
+}
+
+.radio-group--horizontal {
+	display: flex;
+	flex-flow: row nowrap;
+
+	.radio-group__input {
+		margin-right: 10px;
+	}
+
+	.radio-group__label {
+		padding: 20px 0;
+
+		& + .radio-group__label {
+			margin-left: 25px;
+		}
+	}
+}
diff --git a/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap b/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
new file mode 100644
index 00000000000..e8e7ed35a6e
--- /dev/null
+++ b/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RadioGroup matches the snapshot 1`] = `
+<form
+  className="radio-group radio-group--stacked"
+>
+  <label
+    className="radio-group__label"
+    htmlFor="radio-group-0-a"
+  >
+    <div
+      className="radio-group__input"
+    >
+      <input
+        checked={false}
+        id="radio-group-0-a"
+        onChange={[Function]}
+        type="radio"
+      />
+    </div>
+    <h3
+      className="radio-group__title"
+    >
+      Foo
+    </h3>
+  </label>
+  <label
+    className="radio-group__label"
+    htmlFor="radio-group-0-b"
+  >
+    <div
+      className="radio-group__input"
+    >
+      <input
+        checked={false}
+        id="radio-group-0-b"
+        onChange={[Function]}
+        type="radio"
+      />
+    </div>
+    <h3
+      className="radio-group__title"
+    >
+      Bar
+    </h3>
+  </label>
+</form>
+`;
diff --git a/assets/src/components/radio-group/test/radio-group.js b/assets/src/components/radio-group/test/radio-group.js
new file mode 100644
index 00000000000..6058abd7af8
--- /dev/null
+++ b/assets/src/components/radio-group/test/radio-group.js
@@ -0,0 +1,118 @@
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+import { create } from 'react-test-renderer';
+
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { RadioGroup } from '../radio-group';
+
+let container;
+
+const options = [
+	{
+		value: 'a',
+		title: 'Foo',
+	},
+	{
+		value: 'b',
+		title: 'Bar',
+	},
+];
+
+describe( 'RadioGroup', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'matches the snapshot', () => {
+		const wrapper = create( <RadioGroup options={ options } /> );
+
+		expect( wrapper.toJSON() ).toMatchSnapshot();
+	} );
+
+	it( 'renders radio buttons in a form element', () => {
+		act( () => {
+			render(
+				<RadioGroup options={ options } />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'form' ) ).not.toBeNull();
+		expect( container.querySelector( 'form' ).className ).toContain( '--stacked' );
+		expect( container.querySelectorAll( 'input[type="radio"]' ) ).toHaveLength( 2 );
+		expect( container.querySelector( 'input[type="radio"]:checked' ) ).toBeNull();
+		expect( container.querySelector( 'form' ).textContent ).toBe( 'FooBar' );
+	} );
+
+	it( 'renders label with a matching for attribute', () => {
+		act( () => {
+			render(
+				<RadioGroup options={ options } />,
+				container,
+			);
+		} );
+
+		const forAttribute = container.querySelector( 'label:first-child' ).getAttribute( 'for' );
+		expect( container.querySelector( 'label:first-child input' ).getAttribute( 'id' ) ).toBe( forAttribute );
+	} );
+
+	it( 'renders a horizontal group', () => {
+		act( () => {
+			render(
+				<RadioGroup options={ options } isHorizontal={ true } />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'form' ).className ).toContain( '--horizontal' );
+	} );
+
+	it( 'renders an initially selected option', () => {
+		act( () => {
+			render(
+				<RadioGroup options={ options } selected="b" />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'input[type="radio"]:checked' ) ).not.toBeNull();
+		expect( container.querySelector( 'input[type="radio"]:checked' ).closest( 'label' ).textContent ).toBe( 'Bar' );
+		expect( container.querySelector( 'input[type="radio"]:not(checked)' ) ).not.toBeNull();
+	} );
+
+	it( 'calls the handler function on selection change', () => {
+		const handler = jest.fn();
+
+		act( () => {
+			render(
+				<RadioGroup options={ options } onChange={ handler } />,
+				container,
+			);
+		} );
+
+		act(
+			() => {
+				container.querySelector( 'label' ).dispatchEvent( new global.MouseEvent( 'click' ) );
+			},
+		);
+
+		expect( handler ).toHaveBeenCalledTimes( 1 );
+		expect( handler ).toHaveBeenCalledWith( 'a' );
+	} );
+} );
diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index 5e74064278d..1598fd129fe 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -13,8 +13,6 @@ import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
  * Internal dependencies
  */
 import './style.scss';
-import { User } from '../../components/user-context-provider';
-import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import {
 	AMPNotice,
 	NOTICE_SIZE_LARGE,
@@ -26,11 +24,40 @@ import { Options } from '../../../components/options-context-provider';
 import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import { User } from '../../../components/user-context-provider';
 import { Phone } from '../../../components/phone';
+import { RadioGroup } from '../../../components/radio-group/radio-group';
+import { Selectable } from '../../../components/selectable';
 import { Preview } from './preview';
-import { PreviewPageSelector } from './preview-page-selector';
-import { PreviewModeSelector } from './preview-mode-selector';
 import { Saving } from './saving';
 
+/**
+ * Gets the title for the preview page selector.
+ *
+ * @param {string} page The page type.
+ */
+function getPreviewPageTitle( page ) {
+	switch ( page ) {
+		case 'home':
+			return __( 'Homepage', 'amp' );
+
+		case 'author':
+			return __( 'Author page', 'amp' );
+
+		case 'date':
+			return __( 'Archive page', 'amp' );
+
+		case 'search':
+			return __( 'Search results', 'amp' );
+
+		default:
+			return `${ page.charAt( 0 ).toUpperCase() }${ page.slice( 1 ) }`;
+	}
+}
+
+const previewPageOptions = Object.keys( PREVIEW_URLS ).map( ( page ) => ( {
+	value: page,
+	title: getPreviewPageTitle( page ),
+} ) );
+
 /**
  * Final screen, where data is saved.
  */
@@ -119,11 +146,13 @@ export function Review() {
 						</p>
 					</>
 				) }
-				<PreviewPageSelector
-					pages={ Object.keys( PREVIEW_URLS ) }
-					selectedPage={ previewPageType }
-					onChange={ setPreviewPageType }
-				/>
+				<Selectable>
+					<RadioGroup
+						options={ previewPageOptions }
+						selected={ previewPageType }
+						onChange={ setPreviewPageType }
+					/>
+				</Selectable>
 			</div>
 			<div className="review__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
@@ -132,10 +161,20 @@ export function Review() {
 					</AMPNotice>
 				) }
 				{ 'transitional' === themeSupport && (
-					<PreviewModeSelector
-						modes={ [ 'amp', 'non-amp' ] }
+					<RadioGroup
+						options={ [
+							{
+								value: 'amp',
+								title: __( 'AMP', 'amp' ),
+							},
+							{
+								value: 'non-amp',
+								title: __( 'Non-AMP', 'amp' ),
+							},
+						] }
+						selected={ previewMode }
 						onChange={ setPreviewMode }
-						selectedMode={ previewMode }
+						isHorizontal={ true }
 					/>
 				) }
 				<Preview url={ PREVIEW_URLS[ previewPageType ][ previewMode === 'amp' ? 'amp_url' : 'url' ] } />
diff --git a/assets/src/onboarding-wizard/pages/review/preview-mode-selector.js b/assets/src/onboarding-wizard/pages/review/preview-mode-selector.js
deleted file mode 100644
index 3de79215897..00000000000
--- a/assets/src/onboarding-wizard/pages/review/preview-mode-selector.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * Gets the title for the preview mode selector.
- *
- * @param {string} mode The mode.
- */
-function getTitle( mode ) {
-	switch ( mode ) {
-		case 'amp':
-			return __( 'AMP', 'amp' );
-
-		case 'non-amp':
-			return __( 'Non-AMP', 'amp' );
-
-		default:
-			return null;
-	}
-}
-
-/**
- * Preview mode selector.
- *
- * @param {Object}   props              Component props.
- * @param {Object}   props.modes        Preview modes.
- * @param {Function} props.onChange     Preview mode change handler.
- * @param {string}   props.selectedMode Currently selected mode.
- */
-export function PreviewModeSelector( { modes, onChange, selectedMode } ) {
-	return (
-		<form className="review__preview-mode-selector">
-			{ modes.map( ( mode ) => (
-				<label
-					key={ mode }
-					className={ `review__preview-mode-selector-label ${ selectedMode === mode ? 'is-selected' : '' }` }
-					htmlFor={ `preview-mode-${ mode }` }
-				>
-					<div className="review__preview-mode-selector-input">
-						<input
-							type="radio"
-							id={ `preview-mode-${ mode }` }
-							checked={ selectedMode === mode }
-							onChange={ () => onChange( mode ) }
-						/>
-					</div>
-					<h3 className="review__preview-mode-selector-title">
-						{ getTitle( mode ) }
-					</h3>
-				</label>
-			) ) }
-		</form>
-	);
-}
-
-PreviewModeSelector.propTypes = {
-	modes: PropTypes.array,
-	onChange: PropTypes.func,
-	selectedMode: PropTypes.string,
-};
diff --git a/assets/src/onboarding-wizard/pages/review/preview-page-selector.js b/assets/src/onboarding-wizard/pages/review/preview-page-selector.js
deleted file mode 100644
index c5e7258ca8c..00000000000
--- a/assets/src/onboarding-wizard/pages/review/preview-page-selector.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { Selectable } from '../../../components/selectable';
-
-/**
- * Gets the title for the preview page selector.
- *
- * @param {string} page The page type.
- */
-function getTitle( page ) {
-	switch ( page ) {
-		case 'home':
-			return __( 'Homepage', 'amp' );
-
-		case 'author':
-			return __( 'Author page', 'amp' );
-
-		case 'date':
-			return __( 'Archive page', 'amp' );
-
-		case 'search':
-			return __( 'Search results', 'amp' );
-
-		default:
-			return `${ page.charAt( 0 ).toUpperCase() }${ page.slice( 1 ) }`;
-	}
-}
-
-/**
- * Preview page selector.
- *
- * @param {Object}   props              Component props.
- * @param {Array}    props.pages        Preview pages.
- * @param {Function} props.onChange     Preview page change handler.
- * @param {string}   props.selectedPage Currently selected page.
- */
-export function PreviewPageSelector( { pages, onChange, selectedPage } ) {
-	return (
-		<Selectable>
-			<form className="review__preview-page-selector">
-				{ pages.map( ( page ) => (
-					<label
-						key={ page }
-						className={ `review__preview-page-selector-label ${ selectedPage === page ? 'is-selected' : '' }` }
-						htmlFor={ `preview-${ page }` }
-					>
-						<div className="review__preview-page-selector-input">
-							<input
-								type="radio"
-								id={ `preview-${ page }` }
-								checked={ selectedPage === page }
-								onChange={ () => onChange( page ) }
-							/>
-						</div>
-						<h3 className="review__preview-page-selector-title">
-							{ getTitle( page ) }
-						</h3>
-					</label>
-				) ) }
-			</form>
-		</Selectable>
-	);
-}
-
-PreviewPageSelector.propTypes = {
-	pages: PropTypes.array,
-	onChange: PropTypes.func,
-	selectedPage: PropTypes.string,
-};
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index cc7d067712b..b24e20fcced 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -35,73 +35,6 @@
 	padding-left: 30px;
 }
 
-// Preview page selector.
-.review__preview-page-selector-label {
-	align-items: baseline;
-	color: var(--amp-settings-color-muted);
-	display: flex;
-	flex-flow: row nowrap;
-	padding: 15px 0 14px;
-
-	&.is-selected,
-	&:hover {
-		color: var(--amp-settings-color-black);
-	}
-
-	& + & {
-		border-top: 1px solid var(--amp-settings-color-border);
-	}
-
-	&:first-child {
-		padding-top: 0;
-	}
-
-	&:last-child {
-		padding-bottom: 0;
-	}
-}
-
-.review__preview-page-selector-input {
-	margin-right: 20px;
-}
-
-.amp .review__preview-page-selector-title {
-	color: inherit;
-	font-size: 16px;
-}
-
-// Preview mode selector.
-.review__preview-mode-selector {
-	display: flex;
-	flex-flow: row nowrap;
-}
-
-.review__preview-mode-selector-input {
-	margin-right: 10px;
-}
-
-.review__preview-mode-selector-label {
-	align-items: baseline;
-	color: var(--amp-settings-color-muted);
-	display: flex;
-	flex-flow: row nowrap;
-	padding: 20px 0;
-
-	&.is-selected,
-	&:hover {
-		color: var(--amp-settings-color-black);
-	}
-
-	& + & {
-		margin-left: 25px;
-	}
-}
-
-.amp .review__preview-mode-selector-title {
-	color: inherit;
-	font-size: 15px;
-}
-
 // Preview container.
 .review__preview-container {
 	margin-left: auto;

From ce7355b92b18b1a2ea8e2c4f5841423bde92d939 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 23 Aug 2021 14:03:21 +0200
Subject: [PATCH 12/68] Improve Review site Onboarding step styles

---
 .../src/components/svg/icon-laptop-search.js  | 21 +++++++++++
 .../src/components/svg/icon-laptop-toggles.js | 19 ++++++++++
 .../onboarding-wizard/pages/review/index.js   | 17 ++++++---
 .../onboarding-wizard/pages/review/style.scss | 37 ++++++++++++++++---
 4 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 assets/src/components/svg/icon-laptop-search.js
 create mode 100644 assets/src/components/svg/icon-laptop-toggles.js

diff --git a/assets/src/components/svg/icon-laptop-search.js b/assets/src/components/svg/icon-laptop-search.js
new file mode 100644
index 00000000000..e9b24f73f6c
--- /dev/null
+++ b/assets/src/components/svg/icon-laptop-search.js
@@ -0,0 +1,21 @@
+export function IconLaptopSearch( props ) {
+	return (
+		<svg width="42" height="29" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+			<g clipPath="url(#clip0)">
+				<path d="M9.102 6.577l-.017 3.95a1.89 1.89 0 001.882 1.897l15.76.066a1.89 1.89 0 001.898-1.882l.016-3.95a1.89 1.89 0 00-1.882-1.897L11 4.694a1.89 1.89 0 00-1.897 1.883z" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M13.14 9.2a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3zM9.13 18.03a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3z" fill="#005AF0" />
+				<path d="M12.24 16.88h4.63M19.83 16.88h1.79M14.46 12.22l7.98-4.97 4.36 5.22" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M4.24 19.65V3.71A2.71 2.71 0 016.95 1h22.74a2.71 2.71 0 012.72 2.71v16.43M23.5 20.35v.82H13.24v-.82H1v2a2.1 2.1 0 002.09 2h30.59a2.1 2.1 0 002.09-2.09v-2l-12.27.09z" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z" fill="#fff" />
+				<path d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M29.37 23.51a6.4 6.4 0 100-12.8 6.4 6.4 0 000 12.8z" fill="#fff" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M32.11 15.98a2.999 2.999 0 01-2.93 3.8" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
+			</g>
+			<defs>
+				<clipPath id="clip0">
+					<path fill="#fff" d="M0 0h41.21v28.96H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
diff --git a/assets/src/components/svg/icon-laptop-toggles.js b/assets/src/components/svg/icon-laptop-toggles.js
new file mode 100644
index 00000000000..e896e256eb4
--- /dev/null
+++ b/assets/src/components/svg/icon-laptop-toggles.js
@@ -0,0 +1,19 @@
+export function IconLaptopToggles( props ) {
+	return (
+		<svg width="40" height="28" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+			<g clipPath="url(#clip0)" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+				<path d="M4.46 21.02V3.91A2.92 2.92 0 017.38 1h24.4a2.91 2.91 0 012.91 2.91v17.64M25.15 21.76v.88h-11v-.88H1v2.09a2.24 2.24 0 002.28 2.25h32.79a2.24 2.24 0 002.21-2.25v-2.09H25.15zM11.2 5.79v11.6" />
+				<path d="M11.2 14.06a2.47 2.47 0 100-4.94 2.47 2.47 0 000 4.94z" fill="#fff" />
+				<path d="M19.58 5.79v11.6" />
+				<path d="M19.58 12.06a2.47 2.47 0 100-4.94 2.47 2.47 0 000 4.94z" fill="#fff" />
+				<path d="M27.95 5.79v11.6" />
+				<path d="M27.95 16.06a2.47 2.47 0 100-4.94 2.47 2.47 0 000 4.94z" fill="#fff" />
+			</g>
+			<defs>
+				<clipPath id="clip0">
+					<path fill="#fff" d="M0 0h39.31v27.09H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index 1598fd129fe..eb41e29381d 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -26,6 +26,8 @@ import { User } from '../../../components/user-context-provider';
 import { Phone } from '../../../components/phone';
 import { RadioGroup } from '../../../components/radio-group/radio-group';
 import { Selectable } from '../../../components/selectable';
+import { IconLaptopToggles } from '../../../components/svg/icon-laptop-toggles';
+import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';
 import { Preview } from './preview';
 import { Saving } from './saving';
 
@@ -112,10 +114,14 @@ export function Review() {
 
 	return (
 		<div className="review">
+			<h1 className="review__heading">
+				{ __( 'Your site is live!', 'amp' ) }
+			</h1>
 			<div className="review__content review__content--primary">
-				<h1>
-					{ __( 'Your site is live!', 'amp' ) }
-				</h1>
+				<h2 className="review__icon-title">
+					<IconLaptopSearch />
+					{ __( 'Review', 'amp' ) }
+				</h2>
 				{ 'reader' === themeSupport && downloadedTheme === readerTheme && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
 						{ __( 'Your Reader theme was automatically installed', 'amp' ) }
@@ -146,7 +152,7 @@ export function Review() {
 						</p>
 					</>
 				) }
-				<Selectable>
+				<Selectable className="review__links-container">
 					<RadioGroup
 						options={ previewPageOptions }
 						selected={ previewPageType }
@@ -180,7 +186,8 @@ export function Review() {
 				<Preview url={ PREVIEW_URLS[ previewPageType ][ previewMode === 'amp' ? 'amp_url' : 'url' ] } />
 			</div>
 			<div className="review__content review__content--secondary">
-				<h2>
+				<h2 className="review__icon-title">
+					<IconLaptopToggles />
 					{ __( 'Needing extra help?', 'amp' ) }
 				</h2>
 				<ul className="review__list">
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index b24e20fcced..65f44d62f98 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -1,10 +1,18 @@
 .review {
 	display: grid;
-	grid-gap: 30px;
+	grid-gap: 15px 45px;
 
 	@media screen and (min-width: 1280px) {
 		grid-template-columns: auto auto;
-		grid-template-rows: 1fr auto;
+		grid-template-rows: auto 1fr auto;
+	}
+}
+
+.review__heading {
+	margin: 0;
+
+	@media screen and (min-width: 1280px) {
+		grid-column: 1 / 3;
 	}
 }
 
@@ -18,17 +26,36 @@
 .review__content--primary {
 
 	@media screen and (min-width: 1280px) {
-		grid-row: 1 / 2;
+		grid-row: 2 / 3;
 	}
 }
 
 .review__content--secondary {
 
 	@media screen and (min-width: 1280px) {
-		grid-row: 2 / 3;
+		grid-row: 3 / 4;
 	}
 }
 
+.review__icon-title {
+	align-items: center;
+	display: flex;
+	flex-flow: row nowrap;
+	line-height: 1.25;
+
+	svg {
+		flex: 0 0 auto;
+		height: auto;
+		margin-right: 25px;
+		width: 40px;
+	}
+}
+
+.review__links-container {
+	margin: 25px auto;
+	max-width: 400px;
+}
+
 .review__list {
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
@@ -43,7 +70,7 @@
 
 	@media screen and (min-width: 1280px) {
 		grid-column: 2 / 3;
-		grid-row: 1 / 3;
+		grid-row: 2 / 4;
 	}
 
 	.amp-notice {

From 3adf5e89fe671e7071b55775eb91cb2f6156e318 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 23 Aug 2021 14:15:04 +0200
Subject: [PATCH 13/68] Add links to "Need help" section in "Review" step

---
 .../__mocks__/amp-settings.js                 |  2 +-
 assets/src/onboarding-wizard/index.js         |  6 +--
 .../onboarding-wizard/pages/review/index.js   | 39 +++++++++++++------
 .../onboarding-wizard/pages/review/style.scss |  8 ++++
 src/Admin/OnboardingWizardSubmenuPage.php     |  2 +-
 5 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/assets/src/onboarding-wizard/__mocks__/amp-settings.js b/assets/src/onboarding-wizard/__mocks__/amp-settings.js
index cbdd1e3857b..b291caa4804 100644
--- a/assets/src/onboarding-wizard/__mocks__/amp-settings.js
+++ b/assets/src/onboarding-wizard/__mocks__/amp-settings.js
@@ -4,7 +4,7 @@ module.exports = {
 	CURRENT_THEME: {
 		name: 'Twenty Twenty',
 	},
-	FINISH_LINK: 'http://site.test/wp-admin/?page=amp-options',
+	SETTINGS_LINK: 'http://site.test/wp-admin/?page=amp-options',
 	OPTIONS_REST_PATH: 'http://site.test/wp-json/amp/v1/options',
 	READER_THEMES_REST_PATH: 'http://site.test/wp-json/amp/v1/reader-themes',
 	UPDATES_NONCE: '',
diff --git a/assets/src/onboarding-wizard/index.js b/assets/src/onboarding-wizard/index.js
index ea7db292c5e..4571a468e65 100644
--- a/assets/src/onboarding-wizard/index.js
+++ b/assets/src/onboarding-wizard/index.js
@@ -12,7 +12,7 @@ import {
 	APP_ROOT_ID,
 	CLOSE_LINK,
 	CURRENT_THEME,
-	FINISH_LINK,
+	SETTINGS_LINK,
 	OPTIONS_REST_PATH,
 	READER_THEMES_REST_PATH,
 	UPDATES_NONCE,
@@ -57,7 +57,7 @@ export function Providers( { children } ) {
 		<ErrorContextProvider>
 			<ErrorBoundary
 				exitLinkLabel={ __( 'Return to AMP settings.', 'amp' ) }
-				exitLinkUrl={ FINISH_LINK }
+				exitLinkUrl={ SETTINGS_LINK }
 				title={ __( 'The setup wizard has experienced an error.', 'amp' ) }
 			>
 				<OptionsContextProvider
@@ -114,7 +114,7 @@ domReady( () => {
 
 	render(
 		<Providers>
-			<SetupWizard closeLink={ CLOSE_LINK } finishLink={ FINISH_LINK } appRoot={ root } />
+			<SetupWizard closeLink={ CLOSE_LINK } finishLink={ SETTINGS_LINK } appRoot={ root } />
 		</Providers>,
 		root,
 	);
diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index eb41e29381d..6a3eb1fe4f1 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useContext, useEffect, useState } from '@wordpress/element';
 
 /**
  * External dependencies
  */
-import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
+import { PREVIEW_URLS, SETTINGS_LINK } from 'amp-settings'; // From WP inline script.
 
 /**
  * Internal dependencies
@@ -188,18 +188,33 @@ export function Review() {
 			<div className="review__content review__content--secondary">
 				<h2 className="review__icon-title">
 					<IconLaptopToggles />
-					{ __( 'Needing extra help?', 'amp' ) }
+					{ __( 'Need help?', 'amp' ) }
 				</h2>
 				<ul className="review__list">
-					<li>
-						{ __( 'Reach out in the support forums', 'amp' ) }
-					</li>
-					<li>
-						{ __( 'Try a different template mode in settings', 'amp' ) }
-					</li>
-					<li>
-						{ __( 'Learn more about how AMP works', 'amp' ) }
-					</li>
+					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+					<li dangerouslySetInnerHTML={ {
+						__html: sprintf(
+							/* translators: placeholder is a link to support forum. */
+							__( 'Reach out in the <a href="%s" target="_blank" rel="noreferrer noopener">support forums</a>', 'amp' ),
+							'https://wordpress.org/support/plugin/amp/#new-topic-0',
+						),
+					} } />
+					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+					<li dangerouslySetInnerHTML={ {
+						__html: sprintf(
+							/* translators: placeholder is a link to the settings page. */
+							__( 'Try a different template mode <a href="%s" target="_blank" rel="noreferrer noopener">in settings</a>', 'amp' ),
+							SETTINGS_LINK,
+						),
+					} } />
+					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+					<li dangerouslySetInnerHTML={ {
+						__html: sprintf(
+							/* translators: placeholder is a link to the AMP for WP site. */
+							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> about how AMP works', 'amp' ),
+							'https://amp-wp.org/documentation/how-the-plugin-works/',
+						),
+					} } />
 				</ul>
 			</div>
 		</div>
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index 65f44d62f98..c4bd330a449 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -60,6 +60,14 @@
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
 	padding-left: 30px;
+
+	a {
+
+		&:hover,
+		&:focus {
+			text-decoration: none;
+		}
+	}
 }
 
 // Preview container.
diff --git a/src/Admin/OnboardingWizardSubmenuPage.php b/src/Admin/OnboardingWizardSubmenuPage.php
index a918cf707f3..8a1f70ddc6b 100644
--- a/src/Admin/OnboardingWizardSubmenuPage.php
+++ b/src/Admin/OnboardingWizardSubmenuPage.php
@@ -247,7 +247,7 @@ public function enqueue_assets( $hook_suffix ) {
 				'url'             => $theme->get( 'ThemeURI' ),
 			],
 			'USING_FALLBACK_READER_THEME'        => $this->reader_themes->using_fallback_theme(),
-			'FINISH_LINK'                        => $amp_settings_link,
+			'SETTINGS_LINK'                      => $amp_settings_link,
 			'OPTIONS_REST_PATH'                  => '/amp/v1/options',
 			'PREVIEW_URLS'                       => $this->get_preview_urls(),
 			'READER_THEMES_REST_PATH'            => '/amp/v1/reader-themes',

From d9514fdfb9b2f8831aebf6588d0e0961c5c785f1 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 23 Aug 2021 18:28:43 +0200
Subject: [PATCH 14/68] Update "Review" step E2E test specs

---
 .../src/components/radio-group/radio-group.js |  2 +-
 tests/e2e/specs/amp-onboarding/review.js      | 57 ++++++++++++++++---
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/assets/src/components/radio-group/radio-group.js b/assets/src/components/radio-group/radio-group.js
index dbb79fbe0ad..35f10dbbbd9 100644
--- a/assets/src/components/radio-group/radio-group.js
+++ b/assets/src/components/radio-group/radio-group.js
@@ -37,7 +37,7 @@ export function RadioGroup( { options = [], onChange, selected, isHorizontal } )
 				<label
 					key={ value }
 					className={ classnames( 'radio-group__label', {
-						'radio-group__label--selected': isHorizontal,
+						'radio-group__label--selected': selected === value,
 					} ) }
 					htmlFor={ `${ htmlIdPrefix }-${ value }` }
 				>
diff --git a/tests/e2e/specs/amp-onboarding/review.js b/tests/e2e/specs/amp-onboarding/review.js
index ffb79898f8b..1da88d1d44e 100644
--- a/tests/e2e/specs/amp-onboarding/review.js
+++ b/tests/e2e/specs/amp-onboarding/review.js
@@ -4,38 +4,77 @@
  */
 import { testCloseButton, cleanUpSettings, moveToDoneScreen } from '../../utils/onboarding-wizard-utils';
 
+async function testCommonReviewStepElements() {
+	await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
+	await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
+	await expect( page ).toMatchElement( 'h2', { text: 'Need help?' } );
+
+	await expect( page ).toMatchElement( '.review__list' );
+	await expect( '.review__list li' ).countToBe( 3 );
+	await expect( page ).toMatchElement( '.review__list li', { text: /support forums/i } );
+	await expect( page ).toMatchElement( '.review__list li', { text: /different template mode/i } );
+	await expect( page ).toMatchElement( '.review__list li', { text: /how AMP works/i } );
+
+	await expect( page ).toMatchElement( '.review__preview-iframe' );
+
+	const optionsCount = await page.$$eval( '.review__links-container input[type="radio"]', ( e ) => e.length );
+	await expect( optionsCount ).not.toBe( 0 );
+
+	const originalIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+	await expect( page ).toClick( '.review__links-container input[type="radio"]:not(:checked)' );
+	const updatedIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+	expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
+}
+
 describe( 'Review', () => {
 	afterEach( async () => {
 		await cleanUpSettings();
 	} );
 
-	it( 'renders standard mode review screen', async () => {
+	it( 'renders standard mode site review screen', async () => {
 		await moveToDoneScreen( { mode: 'standard' } );
 
 		testCloseButton( { exists: false } );
 
-		await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
+		await testCommonReviewStepElements();
+
 		await expect( page ).toMatchElement( 'p', { text: /standard mode/i } );
-		await expect( page ).toMatchElement( '.phone iframe' );
+		await expect( '.review__preview-container input[type="radio"]' ).countToBe( 0 );
 	} );
 
-	it( 'renders transitional mode review screen', async () => {
+	it( 'renders transitional mode site review screen', async () => {
 		await moveToDoneScreen( { mode: 'transitional' } );
 
 		testCloseButton( { exists: false } );
 
-		await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
+		await testCommonReviewStepElements();
+
 		await expect( page ).toMatchElement( 'p', { text: /transitional mode/i } );
-		await expect( page ).toMatchElement( '.phone iframe' );
+		await expect( '.review__preview-container input[type="radio"]' ).countToBe( 2 );
+
+		const originalMode = await page.$eval( '.review__preview-container input[type="radio"]:checked', ( e ) => e.closest( 'label' ).textContent );
+		await expect( originalMode ).toBe( 'AMP' );
+
+		await page.waitForSelector( '.review__preview-iframe' );
+		const originalIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+		await expect( page ).toClick( '.review__preview-container input[type="radio"]:not(:checked)' );
+		await page.waitForSelector( '.review__preview-iframe' );
+		const updatedIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+		expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
+
+		const updatedMode = await page.$eval( '.review__preview-container input[type="radio"]:checked', ( e ) => e.closest( 'label' ).textContent );
+		await expect( updatedMode ).toBe( 'Non-AMP' );
 	} );
 
-	it( 'renders reader mode review screen', async () => {
+	it( 'renders reader mode site review screen', async () => {
 		await moveToDoneScreen( { mode: 'reader' } );
 
 		testCloseButton( { exists: true } );
 
-		await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
+		await testCommonReviewStepElements();
+
 		await expect( page ).toMatchElement( 'p', { text: /reader mode/i } );
-		await expect( page ).toMatchElement( '.phone iframe' );
+		await expect( page ).toMatchElement( '.review__preview-iframe' );
+		await expect( '.review__preview-container input[type="radio"]' ).countToBe( 0 );
 	} );
 } );

From 9e18a6053aca91808e6fe1df0a5dd0ab691c4124 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 26 Aug 2021 16:05:27 +0200
Subject: [PATCH 15/68] Update copy and typography

---
 assets/src/onboarding-wizard/pages/review/index.js   | 12 ++++++------
 assets/src/onboarding-wizard/pages/review/style.scss |  8 --------
 assets/src/onboarding-wizard/pages/welcome/index.js  |  2 +-
 assets/src/onboarding-wizard/style.css               | 11 +++++++++++
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index 6a3eb1fe4f1..c3d181115f0 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -134,21 +134,21 @@ export function Review() {
 				) }
 				{ 'standard' === themeSupport && (
 					<p>
-						{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single version of your site, the AMP version. Browse your site by navigating through the links below and ensure the functionality and look-and-feel of your site work as expected.', 'amp' ) }
+						{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single, AMP, version of your site. Browse your site by navigating through the links below and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
 					</p>
 				) }
 				{ 'transitional' === themeSupport && (
 					<p>
-						{ __( 'Your site is ready to bring great experiences to your users! In Transitional mode both the AMP and non-AMP versions of your site will be served using your currently active theme. Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations.', 'amp' ) }
+						{ __( 'Your site is ready to bring great experiences to your users! In Transitional mode the AMP and non-AMP versions of your site are served using your currently active theme. Switch between “AMP” and “non-AMP” to browse your site and ensure both versions meet your expectations.', 'amp' ) }
 					</p>
 				) }
 				{ 'reader' === themeSupport && (
 					<>
 						<p>
-							{ __( 'Your site is ready to bring great experiences to your users! In Reader mode the AMP version of your site will be served using the Reader theme you have selected, while pages for the non-AMP version of your site will be served using your primary theme.', 'amp' ) }
+							{ __( 'You’re ready to bring great experiences to your users! In Reader mode the AMP version is served using the Reader theme you have selected, while pages for non-AMP version of your site will be served using your primary theme.', 'amp' ) }
 						</p>
 						<p>
-							{ __( 'Toggle the “AMP version” switch you can browse throughout your site and ensure both versions of your site meet your expectations. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' ) }
+							{ __( 'Toggle “AMP” and “Non-AMP” to browse your site and ensure both versions meet your expectations. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' ) }
 						</p>
 					</>
 				) }
@@ -210,8 +210,8 @@ export function Review() {
 					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
 					<li dangerouslySetInnerHTML={ {
 						__html: sprintf(
-							/* translators: placeholder is a link to the AMP for WP site. */
-							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> about how AMP works', 'amp' ),
+							/* translators: placeholder is a link to the plugin site. */
+							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the PX plugin works', 'amp' ),
 							'https://amp-wp.org/documentation/how-the-plugin-works/',
 						),
 					} } />
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index c4bd330a449..65f44d62f98 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -60,14 +60,6 @@
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
 	padding-left: 30px;
-
-	a {
-
-		&:hover,
-		&:focus {
-			text-decoration: none;
-		}
-	}
 }
 
 // Preview container.
diff --git a/assets/src/onboarding-wizard/pages/welcome/index.js b/assets/src/onboarding-wizard/pages/welcome/index.js
index f32b6363175..21b63e32cc8 100644
--- a/assets/src/onboarding-wizard/pages/welcome/index.js
+++ b/assets/src/onboarding-wizard/pages/welcome/index.js
@@ -137,7 +137,7 @@ export function Welcome() {
 							{ __( 'Site review', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'At the end of the onboarding flow, the AMP plugin is fully set up and configured, and your site is ready to serve great experiences to your users.', 'amp' ) }
+							{ __( 'At the end of the onboarding flow the AMP plugin is fully configured, and your site is ready to start serving great experiences to your users.', 'amp' ) }
 						</p>
 					</div>
 
diff --git a/assets/src/onboarding-wizard/style.css b/assets/src/onboarding-wizard/style.css
index 2cbe346771f..dc959ab1a58 100644
--- a/assets/src/onboarding-wizard/style.css
+++ b/assets/src/onboarding-wizard/style.css
@@ -48,6 +48,17 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 
+.amp-onboarding-wizard p a,
+.amp-onboarding-wizard li > a {
+	color: var(--amp-settings-color-black);
+	transition: color 80ms ease;
+}
+
+.amp-onboarding-wizard p a:hover,
+.amp-onboarding-wizard li > a:hover {
+	color: var(--amp-settings-color-brand);
+}
+
 /**
  * Main app panel.
  */

From 2abc53a8eaf29476ef8aeef0d8c968fe37f05bc4 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 26 Aug 2021 16:27:09 +0200
Subject: [PATCH 16/68] Replace radio buttons with toggle for preview mode

---
 .../components/amp-setting-toggle/index.js    | 19 +++++-
 .../components/amp-setting-toggle/style.css   | 11 ++++
 .../src/components/radio-group/radio-group.js | 11 +---
 assets/src/components/radio-group/style.scss  | 58 ++++++-------------
 .../onboarding-wizard/pages/review/index.js   | 24 +++-----
 .../onboarding-wizard/pages/review/style.scss |  4 ++
 6 files changed, 59 insertions(+), 68 deletions(-)

diff --git a/assets/src/components/amp-setting-toggle/index.js b/assets/src/components/amp-setting-toggle/index.js
index 23cc7f2b3f6..05ddbb579c2 100644
--- a/assets/src/components/amp-setting-toggle/index.js
+++ b/assets/src/components/amp-setting-toggle/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -19,14 +20,27 @@ import './style.css';
  *
  * @param {Object}        props          Component props.
  * @param {boolean}       props.checked  Whether the toggle is on.
+ * @param {boolean}       props.compact  Whether the toggle is compact/small.
  * @param {boolean}       props.disabled Whether the toggle is disabled.
  * @param {Function}      props.onChange Change handler.
  * @param {string}        props.text     Toggle text.
  * @param {Object|string} props.title    Toggle title.
  */
-export function AMPSettingToggle( { checked, disabled = false, onChange, text, title } ) {
+export function AMPSettingToggle( {
+	checked,
+	compact = false,
+	disabled = false,
+	onChange,
+	text,
+	title,
+} ) {
 	return (
-		<div className={ `amp-setting-toggle ${ disabled ? 'amp-setting-toggle--disabled' : '' }` }>
+		<div
+			className={ classnames( 'amp-setting-toggle', {
+				'amp-setting-toggle--disabled': disabled,
+				'amp-setting-toggle--compact': compact,
+			} ) }
+		>
 			<ToggleControl
 				checked={ ! disabled && checked }
 				label={ (
@@ -55,6 +69,7 @@ export function AMPSettingToggle( { checked, disabled = false, onChange, text, t
 }
 AMPSettingToggle.propTypes = {
 	checked: PropTypes.bool.isRequired,
+	compact: PropTypes.bool,
 	disabled: PropTypes.bool,
 	onChange: PropTypes.func.isRequired,
 	text: PropTypes.string,
diff --git a/assets/src/components/amp-setting-toggle/style.css b/assets/src/components/amp-setting-toggle/style.css
index 0f11205e580..f6727c397bd 100644
--- a/assets/src/components/amp-setting-toggle/style.css
+++ b/assets/src/components/amp-setting-toggle/style.css
@@ -21,3 +21,14 @@
 .amp-setting-toggle--disabled .components-toggle-control__label {
 	pointer-events: none;
 }
+
+.amp .amp-setting-toggle--compact .components-form-toggle {
+
+	@media (min-width: 783px) {
+		margin-right: 1rem;
+	}
+}
+
+.amp .amp-setting-toggle--compact .amp-setting-toggle__label-text p {
+	margin: 0;
+}
diff --git a/assets/src/components/radio-group/radio-group.js b/assets/src/components/radio-group/radio-group.js
index 35f10dbbbd9..9dc71eb8af1 100644
--- a/assets/src/components/radio-group/radio-group.js
+++ b/assets/src/components/radio-group/radio-group.js
@@ -21,18 +21,12 @@ import './style.scss';
  * @param {Array}    props.options      List of option values and titles.
  * @param {Function} props.onChange     Change handler.
  * @param {string}   props.selected     Currently selected option.
- * @param {boolean}  props.isHorizontal Flag indicating that the options should not be stacked.
  */
-export function RadioGroup( { options = [], onChange, selected, isHorizontal } ) {
+export function RadioGroup( { options = [], onChange, selected } ) {
 	const htmlIdPrefix = `radio-group-${ useInstanceId( RadioGroup ) }`;
 
 	return (
-		<form
-			className={ classnames( 'radio-group', {
-				'radio-group--stacked': ! isHorizontal,
-				'radio-group--horizontal': isHorizontal,
-			} ) }
-		>
+		<form className="radio-group">
 			{ options.map( ( { value, title } ) => (
 				<label
 					key={ value }
@@ -67,5 +61,4 @@ RadioGroup.propTypes = {
 	),
 	onChange: PropTypes.func,
 	selected: PropTypes.string,
-	isHorizontal: PropTypes.bool,
 };
diff --git a/assets/src/components/radio-group/style.scss b/assets/src/components/radio-group/style.scss
index f2cc54c6189..33863066c72 100644
--- a/assets/src/components/radio-group/style.scss
+++ b/assets/src/components/radio-group/style.scss
@@ -3,55 +3,31 @@
 	color: var(--amp-settings-color-muted);
 	display: flex;
 	flex-flow: row nowrap;
+	padding: 15px 0 14px;
 
-	&.radio-group__label--selected,
-	&:hover {
-		color: var(--amp-settings-color-black);
+	& + & {
+		border-top: 1px solid var(--amp-settings-color-border);
 	}
-}
-
-.radio-group__title.radio-group__title {
-	color: inherit;
-	font-size: 16px;
-}
-
-.radio-group--stacked {
-
-	.radio-group__label {
-		padding: 15px 0 14px;
 
-		& + .radio-group__label {
-			border-top: 1px solid var(--amp-settings-color-border);
-		}
-
-		&:first-child {
-			padding-top: 0;
-		}
-
-		&:last-child {
-			padding-bottom: 0;
-		}
+	&:first-child {
+		padding-top: 0;
 	}
 
-	.radio-group__input {
-		margin-right: 20px;
+	&:last-child {
+		padding-bottom: 0;
 	}
 
-}
-
-.radio-group--horizontal {
-	display: flex;
-	flex-flow: row nowrap;
-
-	.radio-group__input {
-		margin-right: 10px;
+	&.radio-group__label--selected,
+	&:hover {
+		color: var(--amp-settings-color-black);
 	}
+}
 
-	.radio-group__label {
-		padding: 20px 0;
+.radio-group__input {
+	margin-right: 20px;
+}
 
-		& + .radio-group__label {
-			margin-left: 25px;
-		}
-	}
+.radio-group__title.radio-group__title {
+	color: inherit;
+	font-size: 16px;
 }
diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index c3d181115f0..dec59e12217 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -28,6 +28,7 @@ import { RadioGroup } from '../../../components/radio-group/radio-group';
 import { Selectable } from '../../../components/selectable';
 import { IconLaptopToggles } from '../../../components/svg/icon-laptop-toggles';
 import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';
+import { AMPSettingToggle } from '../../../components/amp-setting-toggle';
 import { Preview } from './preview';
 import { Saving } from './saving';
 
@@ -75,7 +76,7 @@ export function Review() {
 	const { didSaveDeveloperToolsOption, saveDeveloperToolsOption, savingDeveloperToolsOption } = useContext( User );
 	const { canGoForward, setCanGoForward } = useContext( Navigation );
 	const { downloadedTheme, downloadingTheme, downloadingThemeError } = useContext( ReaderThemes );
-	const [ previewMode, setPreviewMode ] = useState( themeSupport === 'standard' ? 'non-amp' : 'amp' );
+	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== 'standard' );
 	const [ previewPageType, setPreviewPageType ] = useState( PREVIEW_URLS[ Object.keys( PREVIEW_URLS )[ 0 ] ].type );
 
 	/**
@@ -167,23 +168,14 @@ export function Review() {
 					</AMPNotice>
 				) }
 				{ 'transitional' === themeSupport && (
-					<RadioGroup
-						options={ [
-							{
-								value: 'amp',
-								title: __( 'AMP', 'amp' ),
-							},
-							{
-								value: 'non-amp',
-								title: __( 'Non-AMP', 'amp' ),
-							},
-						] }
-						selected={ previewMode }
-						onChange={ setPreviewMode }
-						isHorizontal={ true }
+					<AMPSettingToggle
+						text={ __( 'AMP', 'amp' ) }
+						checked={ isPreviewingAMP }
+						onChange={ () => setIsPreviewingAMP( ( mode ) => ! mode ) }
+						compact={ true }
 					/>
 				) }
-				<Preview url={ PREVIEW_URLS[ previewPageType ][ previewMode === 'amp' ? 'amp_url' : 'url' ] } />
+				<Preview url={ PREVIEW_URLS[ previewPageType ][ isPreviewingAMP ? 'amp_url' : 'url' ] } />
 			</div>
 			<div className="review__content review__content--secondary">
 				<h2 className="review__icon-title">
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index 65f44d62f98..9af23551951 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -73,6 +73,10 @@
 		grid-row: 2 / 4;
 	}
 
+	.amp-setting-toggle {
+		margin: 20px 0;
+	}
+
 	.amp-notice {
 		margin-bottom: 1.5rem;
 	}

From fd7bf06ce7d3c1e1b47cf43cd6fc5fa6126abd1c Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 26 Aug 2021 17:21:52 +0200
Subject: [PATCH 17/68] Update `RadioGroup` typography

---
 assets/src/components/radio-group/radio-group.js | 4 ++--
 assets/src/components/radio-group/style.scss     | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/src/components/radio-group/radio-group.js b/assets/src/components/radio-group/radio-group.js
index 9dc71eb8af1..46268880b49 100644
--- a/assets/src/components/radio-group/radio-group.js
+++ b/assets/src/components/radio-group/radio-group.js
@@ -43,9 +43,9 @@ export function RadioGroup( { options = [], onChange, selected } ) {
 							onChange={ () => onChange( value ) }
 						/>
 					</div>
-					<h3 className="radio-group__title">
+					<p className="radio-group__title">
 						{ title }
-					</h3>
+					</p>
 				</label>
 			) ) }
 		</form>
diff --git a/assets/src/components/radio-group/style.scss b/assets/src/components/radio-group/style.scss
index 33863066c72..04712b046ed 100644
--- a/assets/src/components/radio-group/style.scss
+++ b/assets/src/components/radio-group/style.scss
@@ -29,5 +29,6 @@
 
 .radio-group__title.radio-group__title {
 	color: inherit;
-	font-size: 16px;
+	font-size: 14px;
+	margin: 0;
 }

From 56251e4cf721fbbba7e32ff63e6021058803b49c Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 26 Aug 2021 17:34:27 +0200
Subject: [PATCH 18/68] Update E2E tests

---
 .../src/onboarding-wizard/pages/review/index.js  |  2 +-
 tests/e2e/specs/amp-onboarding/review.js         | 16 ++++++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index dec59e12217..3633ea0d802 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -167,7 +167,7 @@ export function Review() {
 						{ __( 'There was an error downloading your Reader theme. As a result, your site is currently using the legacy reader theme. Please install your chosen theme manually.', 'amp' ) }
 					</AMPNotice>
 				) }
-				{ 'transitional' === themeSupport && (
+				{ 'standard' !== themeSupport && (
 					<AMPSettingToggle
 						text={ __( 'AMP', 'amp' ) }
 						checked={ isPreviewingAMP }
diff --git a/tests/e2e/specs/amp-onboarding/review.js b/tests/e2e/specs/amp-onboarding/review.js
index 1da88d1d44e..538e38a9a18 100644
--- a/tests/e2e/specs/amp-onboarding/review.js
+++ b/tests/e2e/specs/amp-onboarding/review.js
@@ -13,7 +13,7 @@ async function testCommonReviewStepElements() {
 	await expect( '.review__list li' ).countToBe( 3 );
 	await expect( page ).toMatchElement( '.review__list li', { text: /support forums/i } );
 	await expect( page ).toMatchElement( '.review__list li', { text: /different template mode/i } );
-	await expect( page ).toMatchElement( '.review__list li', { text: /how AMP works/i } );
+	await expect( page ).toMatchElement( '.review__list li', { text: /how the PX plugin works/i } );
 
 	await expect( page ).toMatchElement( '.review__preview-iframe' );
 
@@ -39,7 +39,7 @@ describe( 'Review', () => {
 		await testCommonReviewStepElements();
 
 		await expect( page ).toMatchElement( 'p', { text: /standard mode/i } );
-		await expect( '.review__preview-container input[type="radio"]' ).countToBe( 0 );
+		await expect( '.review__preview-container input[type="checkbox"]' ).countToBe( 0 );
 	} );
 
 	it( 'renders transitional mode site review screen', async () => {
@@ -50,20 +50,16 @@ describe( 'Review', () => {
 		await testCommonReviewStepElements();
 
 		await expect( page ).toMatchElement( 'p', { text: /transitional mode/i } );
-		await expect( '.review__preview-container input[type="radio"]' ).countToBe( 2 );
-
-		const originalMode = await page.$eval( '.review__preview-container input[type="radio"]:checked', ( e ) => e.closest( 'label' ).textContent );
-		await expect( originalMode ).toBe( 'AMP' );
+		await expect( '.review__preview-container input[type="checkbox"]:checked' ).countToBe( 1 );
 
 		await page.waitForSelector( '.review__preview-iframe' );
 		const originalIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
-		await expect( page ).toClick( '.review__preview-container input[type="radio"]:not(:checked)' );
+		await expect( page ).toClick( '.review__preview-container input[type="checkbox"]' );
 		await page.waitForSelector( '.review__preview-iframe' );
 		const updatedIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
 		expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
 
-		const updatedMode = await page.$eval( '.review__preview-container input[type="radio"]:checked', ( e ) => e.closest( 'label' ).textContent );
-		await expect( updatedMode ).toBe( 'Non-AMP' );
+		await expect( '.review__preview-container input[type="checkbox"]:not(:checked)' ).countToBe( 1 );
 	} );
 
 	it( 'renders reader mode site review screen', async () => {
@@ -75,6 +71,6 @@ describe( 'Review', () => {
 
 		await expect( page ).toMatchElement( 'p', { text: /reader mode/i } );
 		await expect( page ).toMatchElement( '.review__preview-iframe' );
-		await expect( '.review__preview-container input[type="radio"]' ).countToBe( 0 );
+		await expect( '.review__preview-container input[type="checkbox"]' ).countToBe( 1 );
 	} );
 } );

From 26adfde688b00f7fe359217b6c439367525c9bcd Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 26 Aug 2021 19:25:38 +0200
Subject: [PATCH 19/68] Add "Review" section to Settings page

---
 .../src/components/svg/icon-laptop-search.js  |  2 +-
 .../src/components/svg/icon-laptop-toggles.js |  2 +-
 assets/src/settings-page/index.js             | 18 ++++++-
 assets/src/settings-page/review.js            | 52 +++++++++++++++++++
 assets/src/settings-page/style.css            | 45 +++++++++++++++-
 5 files changed, 115 insertions(+), 4 deletions(-)
 create mode 100644 assets/src/settings-page/review.js

diff --git a/assets/src/components/svg/icon-laptop-search.js b/assets/src/components/svg/icon-laptop-search.js
index e9b24f73f6c..eea39f45c06 100644
--- a/assets/src/components/svg/icon-laptop-search.js
+++ b/assets/src/components/svg/icon-laptop-search.js
@@ -1,6 +1,6 @@
 export function IconLaptopSearch( props ) {
 	return (
-		<svg width="42" height="29" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+		<svg viewBox="0 0 42 29" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
 			<g clipPath="url(#clip0)">
 				<path d="M9.102 6.577l-.017 3.95a1.89 1.89 0 001.882 1.897l15.76.066a1.89 1.89 0 001.898-1.882l.016-3.95a1.89 1.89 0 00-1.882-1.897L11 4.694a1.89 1.89 0 00-1.897 1.883z" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
 				<path d="M13.14 9.2a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3zM9.13 18.03a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3z" fill="#005AF0" />
diff --git a/assets/src/components/svg/icon-laptop-toggles.js b/assets/src/components/svg/icon-laptop-toggles.js
index e896e256eb4..b5697bdbb0d 100644
--- a/assets/src/components/svg/icon-laptop-toggles.js
+++ b/assets/src/components/svg/icon-laptop-toggles.js
@@ -1,6 +1,6 @@
 export function IconLaptopToggles( props ) {
 	return (
-		<svg width="40" height="28" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+		<svg viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
 			<g clipPath="url(#clip0)" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 				<path d="M4.46 21.02V3.91A2.92 2.92 0 017.38 1h24.4a2.91 2.91 0 012.91 2.91v17.64M25.15 21.76v.88h-11v-.88H1v2.09a2.24 2.24 0 002.28 2.25h32.79a2.24 2.24 0 002.21-2.25v-2.09H25.15zM11.2 5.79v11.6" />
 				<path d="M11.2 14.06a2.47 2.47 0 100-4.94 2.47 2.47 0 000 4.94z" fill="#fff" />
diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index c3fb9826251..a395c6c34ee 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -37,6 +37,7 @@ import { AMPDrawer } from '../components/amp-drawer';
 import { AMPNotice, NOTICE_SIZE_LARGE } from '../components/amp-notice';
 import { ErrorScreen } from '../components/error-screen';
 import { User, UserContextProvider } from '../components/user-context-provider';
+import { IconLaptopSearch } from '../components/svg/icon-laptop-search';
 import { Welcome } from './welcome';
 import { TemplateModes } from './template-modes';
 import { SupportedTemplates } from './supported-templates';
@@ -44,6 +45,7 @@ import { SettingsFooter } from './settings-footer';
 import { PluginSuppression } from './plugin-suppression';
 import { Analytics } from './analytics';
 import { PairedUrlStructure } from './paired-url-structure';
+import { Review } from './review';
 import { MobileRedirection } from './mobile-redirection';
 import { DeveloperTools } from './developer-tools';
 
@@ -190,13 +192,27 @@ function Root( { appRoot } ) {
 				</AMPNotice>
 			) }
 			<Welcome />
+			<AMPDrawer
+				heading={ (
+					<>
+						<IconLaptopSearch />
+						<h3>
+							{ __( 'Review', 'amp' ) }
+						</h3>
+					</>
+				) }
+				hiddenTitle={ __( 'Review', 'amp' ) }
+				id="review"
+				initialOpen={ true }
+			>
+				<Review />
+			</AMPDrawer>
 			<form onSubmit={ onSubmit }>
 				<TemplateModes focusReaderThemes={ 'reader-themes' === focusedSection } />
 				<h2 id="advanced-settings">
 					{ __( 'Advanced Settings', 'amp' ) }
 				</h2>
 				<AMPDrawer
-
 					heading={ (
 						<h3>
 							{ __( 'Supported Templates', 'amp' ) }
diff --git a/assets/src/settings-page/review.js b/assets/src/settings-page/review.js
new file mode 100644
index 00000000000..79f32f345a2
--- /dev/null
+++ b/assets/src/settings-page/review.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { IconLaptopToggles } from '../components/svg/icon-laptop-toggles';
+
+/**
+ * Review component on the settings screen.
+ */
+export function Review() {
+	return (
+		<div className="settings-review">
+			<p>
+				{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single AMP version of your site. Browse your site and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
+			</p>
+			<h3 className="settings-review__heading">
+				<IconLaptopToggles />
+				{ __( 'Need help?', 'amp' ) }
+			</h3>
+			<ul className="settings-review__list">
+				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+				<li dangerouslySetInnerHTML={ {
+					__html: sprintf(
+						/* translators: placeholder is a link to support forum. */
+						__( 'Reach out in the <a href="%s" target="_blank" rel="noreferrer noopener">support forums</a>', 'amp' ),
+						'https://wordpress.org/support/plugin/amp/#new-topic-0',
+					),
+				} } />
+				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+				<li dangerouslySetInnerHTML={ {
+					__html: sprintf(
+						/* translators: placeholder is the template mode section anchor. */
+						__( 'Try a different setting in the <a href="%s">template mode section</a>', 'amp' ),
+						'#template-modes',
+					),
+				} } />
+				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+				<li dangerouslySetInnerHTML={ {
+					__html: sprintf(
+						/* translators: placeholder is a link to the plugin site. */
+						__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the PX plugin works', 'amp' ),
+						'https://amp-wp.org/documentation/how-the-plugin-works/',
+					),
+				} } />
+			</ul>
+		</div>
+	);
+}
diff --git a/assets/src/settings-page/style.css b/assets/src/settings-page/style.css
index 1b19d20709e..9a3cea7e9cb 100644
--- a/assets/src/settings-page/style.css
+++ b/assets/src/settings-page/style.css
@@ -357,6 +357,7 @@ li.error-kept {
 	}
 }
 
+#review .amp-drawer__panel-body-inner,
 #plugin-suppression .amp-drawer__panel-body-inner,
 .amp-analytics .amp-drawer__panel-body-inner,
 #paired-url-structure .amp-drawer__panel-body-inner,
@@ -368,6 +369,7 @@ li.error-kept {
 	}
 }
 
+#review .amp-drawer__panel-body-inner > p,
 #plugin-suppression .amp-drawer__panel-body-inner > p,
 #paired-url-structure .amp-drawer__panel-body-inner > p,
 .amp-analytics .amp-drawer__panel-body-inner p,
@@ -530,6 +532,48 @@ li.error-kept {
 	width: 24px;
 }
 
+/* Review. */
+#review {
+	margin-bottom: 2.5rem;
+}
+
+#review .amp-drawer__heading svg {
+	fill: transparent;
+	width: 55px;
+}
+
+.amp .settings-review__heading {
+	align-items: center;
+	display: flex;
+	flex-flow: row nowrap;
+	font-size: 1rem;
+	line-height: 1.25;
+	margin-top: 2rem;
+}
+
+.settings-review__heading svg {
+	flex: 0 0 auto;
+	height: auto;
+	margin-right: 25px;
+	width: 40px;
+}
+
+.settings-review__list {
+	font-size: var(--amp-settings-font-size);
+	list-style: disc;
+	padding-left: 30px;
+}
+
+.settings-review__list a {
+	color: var(--amp-settings-color-black);
+	transition: color 80ms ease;
+}
+
+.settings-review__list a:hover,
+.settings-review__list a:focus {
+	color: var(--amp-settings-color-brand);
+}
+
 /* Other Settings */
 .amp-other-settings section + section {
 	margin-top: 2rem;
@@ -556,4 +600,3 @@ li.error-kept {
 .amp-other-settings .developer-tools p {
 	font-size: 0.875rem;
 }
-

From 33a3fb1d2ee830ea4521fc6ae8968e639b3a700e Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 26 Aug 2021 19:27:24 +0200
Subject: [PATCH 20/68] Update unit tests

---
 .../test/__snapshots__/radio-group.js.snap           | 10 +++++-----
 .../src/components/radio-group/test/radio-group.js   | 12 ------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap b/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
index e8e7ed35a6e..851ed644ec0 100644
--- a/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
+++ b/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
@@ -2,7 +2,7 @@
 
 exports[`RadioGroup matches the snapshot 1`] = `
 <form
-  className="radio-group radio-group--stacked"
+  className="radio-group"
 >
   <label
     className="radio-group__label"
@@ -18,11 +18,11 @@ exports[`RadioGroup matches the snapshot 1`] = `
         type="radio"
       />
     </div>
-    <h3
+    <p
       className="radio-group__title"
     >
       Foo
-    </h3>
+    </p>
   </label>
   <label
     className="radio-group__label"
@@ -38,11 +38,11 @@ exports[`RadioGroup matches the snapshot 1`] = `
         type="radio"
       />
     </div>
-    <h3
+    <p
       className="radio-group__title"
     >
       Bar
-    </h3>
+    </p>
   </label>
 </form>
 `;
diff --git a/assets/src/components/radio-group/test/radio-group.js b/assets/src/components/radio-group/test/radio-group.js
index 6058abd7af8..f17d8b4792e 100644
--- a/assets/src/components/radio-group/test/radio-group.js
+++ b/assets/src/components/radio-group/test/radio-group.js
@@ -54,7 +54,6 @@ describe( 'RadioGroup', () => {
 		} );
 
 		expect( container.querySelector( 'form' ) ).not.toBeNull();
-		expect( container.querySelector( 'form' ).className ).toContain( '--stacked' );
 		expect( container.querySelectorAll( 'input[type="radio"]' ) ).toHaveLength( 2 );
 		expect( container.querySelector( 'input[type="radio"]:checked' ) ).toBeNull();
 		expect( container.querySelector( 'form' ).textContent ).toBe( 'FooBar' );
@@ -72,17 +71,6 @@ describe( 'RadioGroup', () => {
 		expect( container.querySelector( 'label:first-child input' ).getAttribute( 'id' ) ).toBe( forAttribute );
 	} );
 
-	it( 'renders a horizontal group', () => {
-		act( () => {
-			render(
-				<RadioGroup options={ options } isHorizontal={ true } />,
-				container,
-			);
-		} );
-
-		expect( container.querySelector( 'form' ).className ).toContain( '--horizontal' );
-	} );
-
 	it( 'renders an initially selected option', () => {
 		act( () => {
 			render(

From 19221b2a5b2225d01cd0818c2535437f128f7269 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 2 Sep 2021 12:10:12 +0200
Subject: [PATCH 21/68] Use more specific name for `SiteReview` component

---
 assets/src/settings-page/index.js             |  5 +++--
 .../{review.js => site-review.js}             | 10 +++++-----
 assets/src/settings-page/style.css            | 20 +++++++++----------
 3 files changed, 18 insertions(+), 17 deletions(-)
 rename assets/src/settings-page/{review.js => site-review.js} (86%)

diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index a395c6c34ee..4e2b0de675d 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -42,6 +42,7 @@ import { Welcome } from './welcome';
 import { TemplateModes } from './template-modes';
 import { SupportedTemplates } from './supported-templates';
 import { SettingsFooter } from './settings-footer';
+import { SiteReview } from './site-review';
 import { PluginSuppression } from './plugin-suppression';
 import { Analytics } from './analytics';
 import { PairedUrlStructure } from './paired-url-structure';
@@ -202,10 +203,10 @@ function Root( { appRoot } ) {
 					</>
 				) }
 				hiddenTitle={ __( 'Review', 'amp' ) }
-				id="review"
+				id="site-review"
 				initialOpen={ true }
 			>
-				<Review />
+				<SiteReview />
 			</AMPDrawer>
 			<form onSubmit={ onSubmit }>
 				<TemplateModes focusReaderThemes={ 'reader-themes' === focusedSection } />
diff --git a/assets/src/settings-page/review.js b/assets/src/settings-page/site-review.js
similarity index 86%
rename from assets/src/settings-page/review.js
rename to assets/src/settings-page/site-review.js
index 79f32f345a2..4ff8e2d23b2 100644
--- a/assets/src/settings-page/review.js
+++ b/assets/src/settings-page/site-review.js
@@ -11,17 +11,17 @@ import { IconLaptopToggles } from '../components/svg/icon-laptop-toggles';
 /**
  * Review component on the settings screen.
  */
-export function Review() {
+export function SiteReview() {
 	return (
-		<div className="settings-review">
+		<div className="settings-site-review">
 			<p>
 				{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single AMP version of your site. Browse your site and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
 			</p>
-			<h3 className="settings-review__heading">
+			<h3 className="settings-site-review__heading">
 				<IconLaptopToggles />
 				{ __( 'Need help?', 'amp' ) }
 			</h3>
-			<ul className="settings-review__list">
+			<ul className="settings-site-review__list">
 				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
 				<li dangerouslySetInnerHTML={ {
 					__html: sprintf(
@@ -34,7 +34,7 @@ export function Review() {
 				<li dangerouslySetInnerHTML={ {
 					__html: sprintf(
 						/* translators: placeholder is the template mode section anchor. */
-						__( 'Try a different setting in the <a href="%s">template mode section</a>', 'amp' ),
+						__( 'Try a different <a href="%s">template mode</a>', 'amp' ),
 						'#template-modes',
 					),
 				} } />
diff --git a/assets/src/settings-page/style.css b/assets/src/settings-page/style.css
index 9a3cea7e9cb..229c2d40171 100644
--- a/assets/src/settings-page/style.css
+++ b/assets/src/settings-page/style.css
@@ -357,7 +357,7 @@ li.error-kept {
 	}
 }
 
-#review .amp-drawer__panel-body-inner,
+#site-review .amp-drawer__panel-body-inner,
 #plugin-suppression .amp-drawer__panel-body-inner,
 .amp-analytics .amp-drawer__panel-body-inner,
 #paired-url-structure .amp-drawer__panel-body-inner,
@@ -369,7 +369,7 @@ li.error-kept {
 	}
 }
 
-#review .amp-drawer__panel-body-inner > p,
+#site-review .amp-drawer__panel-body-inner > p,
 #plugin-suppression .amp-drawer__panel-body-inner > p,
 #paired-url-structure .amp-drawer__panel-body-inner > p,
 .amp-analytics .amp-drawer__panel-body-inner p,
@@ -533,16 +533,16 @@ li.error-kept {
 }
 
 /* Review. */
-#review {
+#site-review {
 	margin-bottom: 2.5rem;
 }
 
-#review .amp-drawer__heading svg {
+#site-review .amp-drawer__heading svg {
 	fill: transparent;
 	width: 55px;
 }
 
-.amp .settings-review__heading {
+.amp .settings-site-review__heading {
 	align-items: center;
 	display: flex;
 	flex-flow: row nowrap;
@@ -551,26 +551,26 @@ li.error-kept {
 	margin-top: 2rem;
 }
 
-.settings-review__heading svg {
+.settings-site-review__heading svg {
 	flex: 0 0 auto;
 	height: auto;
 	margin-right: 25px;
 	width: 40px;
 }
 
-.settings-review__list {
+.settings-site-review__list {
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
 	padding-left: 30px;
 }
 
-.settings-review__list a {
+.settings-site-review__list a {
 	color: var(--amp-settings-color-black);
 	transition: color 80ms ease;
 }
 
-.settings-review__list a:hover,
-.settings-review__list a:focus {
+.settings-site-review__list a:hover,
+.settings-site-review__list a:focus {
 	color: var(--amp-settings-color-brand);
 }
 

From d300c582e77620a83b061e1658dbbc0603d7b16b Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 2 Sep 2021 14:14:54 +0200
Subject: [PATCH 22/68] Add "Browse Site" button to AMP Settings page

---
 assets/src/settings-page/site-review.js | 21 +++++++++++++++++++++
 assets/src/settings-page/style.css      | 13 +++++++++++++
 src/Admin/OptionsMenu.php               |  1 +
 3 files changed, 35 insertions(+)

diff --git a/assets/src/settings-page/site-review.js b/assets/src/settings-page/site-review.js
index 4ff8e2d23b2..03191341587 100644
--- a/assets/src/settings-page/site-review.js
+++ b/assets/src/settings-page/site-review.js
@@ -1,17 +1,33 @@
+/**
+ * External dependencies
+ */
+import { HOME_URL } from 'amp-settings';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { IconLaptopToggles } from '../components/svg/icon-laptop-toggles';
+import { Options } from '../components/options-context-provider';
 
 /**
  * Review component on the settings screen.
  */
 export function SiteReview() {
+	const { originalOptions } = useContext( Options );
+	const {
+		paired_url_examples: pairedUrlExamples,
+		paired_url_structure: pairedUrlStructure,
+		theme_support: themeSupport,
+	} = originalOptions;
+	const previewPermalink = 'standard' === themeSupport ? HOME_URL : pairedUrlExamples[ pairedUrlStructure ][ 0 ];
+
 	return (
 		<div className="settings-site-review">
 			<p>
@@ -47,6 +63,11 @@ export function SiteReview() {
 					),
 				} } />
 			</ul>
+			<div className="settings-site-review__actions">
+				<Button href={ previewPermalink } isPrimary={ true }>
+					{ __( 'Browse Site', 'amp' ) }
+				</Button>
+			</div>
 		</div>
 	);
 }
diff --git a/assets/src/settings-page/style.css b/assets/src/settings-page/style.css
index 229c2d40171..52a05dcd4c1 100644
--- a/assets/src/settings-page/style.css
+++ b/assets/src/settings-page/style.css
@@ -561,6 +561,7 @@ li.error-kept {
 .settings-site-review__list {
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
+	margin-bottom: 2rem;
 	padding-left: 30px;
 }
 
@@ -574,6 +575,18 @@ li.error-kept {
 	color: var(--amp-settings-color-brand);
 }
 
+.settings-site-review__actions {
+	align-items: center;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+.settings-site-review__actions .components-button.is-primary {
+	height: 40px;
+	padding-left: 2.25rem;
+	padding-right: 2.25rem;
+}
+
 /* Other Settings */
 .amp-other-settings section + section {
 	margin-top: 2rem;
diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index 513ff873f74..9a4d6d3c5d6 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -232,6 +232,7 @@ public function enqueue_assets( $hook_suffix ) {
 				'url'             => $theme->get( 'ThemeURI' ),
 			],
 			'HAS_DEPENDENCY_SUPPORT'             => $this->dependency_support->has_support(),
+			'HOME_URL'                           => home_url( '/' ),
 			'OPTIONS_REST_PATH'                  => '/amp/v1/options',
 			'READER_THEMES_REST_PATH'            => '/amp/v1/reader-themes',
 			'IS_CORE_THEME'                      => in_array(

From 13d25db67ed4572cf52ddea354d87510a45beb12 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 2 Sep 2021 16:09:17 +0200
Subject: [PATCH 23/68] Prevent nesting HTML headings

---
 assets/src/settings-page/index.js  | 4 +---
 assets/src/settings-page/style.css | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index 4e2b0de675d..57274e50beb 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -197,9 +197,7 @@ function Root( { appRoot } ) {
 				heading={ (
 					<>
 						<IconLaptopSearch />
-						<h3>
-							{ __( 'Review', 'amp' ) }
-						</h3>
+						{ __( 'Review', 'amp' ) }
 					</>
 				) }
 				hiddenTitle={ __( 'Review', 'amp' ) }
diff --git a/assets/src/settings-page/style.css b/assets/src/settings-page/style.css
index 52a05dcd4c1..74664ab9ece 100644
--- a/assets/src/settings-page/style.css
+++ b/assets/src/settings-page/style.css
@@ -537,6 +537,10 @@ li.error-kept {
 	margin-bottom: 2.5rem;
 }
 
+#site-review .amp-drawer__heading {
+	font-size: 1.2rem;
+}
+
 #site-review .amp-drawer__heading svg {
 	fill: transparent;
 	width: 55px;

From b39d1fbbeaaad1b8517e79ca3e4bec0183a2a9e5 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 2 Sep 2021 16:55:26 +0200
Subject: [PATCH 24/68] Add E2E test for Review section on Settings page

---
 tests/e2e/specs/admin/amp-options.js | 44 ++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index 327037c3896..e981b1d40bb 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -136,3 +136,47 @@ describe( 'Saving', () => {
 	} );
 } );
 
+describe( 'AMP Settings Screen Review section', () => {
+	beforeEach( async () => {
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+	} );
+
+	afterEach( async () => {
+		await cleanUpSettings();
+	} );
+
+	it( 'is present on the page', async () => {
+		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
+		await expect( page ).toMatchElement( 'h3', { text: 'Need help?' } );
+		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /support forums/i } );
+		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /different template mode/i } );
+		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /how the PX plugin works/i } );
+	} );
+
+	it( 'button redirects to an AMP page in transitional mode', async () => {
+		await clickMode( 'transitional' );
+
+		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
+		await page.waitForNavigation();
+
+		await expect( page ).toMatchElement( 'html[amp]' );
+	} );
+
+	it( 'button redirects to an AMP page in reader mode', async () => {
+		await clickMode( 'reader' );
+
+		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
+		await page.waitForNavigation();
+
+		await expect( page ).toMatchElement( 'html[amp]' );
+	} );
+
+	it( 'button redirects to an AMP page in standard mode', async () => {
+		await clickMode( 'standard' );
+
+		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
+		await page.waitForNavigation();
+
+		await expect( page ).toMatchElement( 'html[amp]' );
+	} );
+} );

From 9cf7955771bca6c22e1e4993c8df71a6094b2452 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 2 Sep 2021 19:37:42 +0200
Subject: [PATCH 25/68] Add basic dismiss functionality to site Review section

---
 assets/src/settings-page/index.js       | 33 +++++++++++++++----------
 assets/src/settings-page/site-review.js | 13 +++++++++-
 assets/src/settings-page/style.css      |  2 +-
 tests/e2e/specs/admin/amp-options.js    |  6 +++++
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index 57274e50beb..5945abb2aa1 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -129,6 +129,7 @@ function scrollFocusedSectionIntoView( focusedSectionId ) {
  */
 function Root( { appRoot } ) {
 	const [ focusedSection, setFocusedSection ] = useState( global.location.hash.replace( /^#/, '' ) );
+	const [ showSiteReview, setShowSiteReview ] = useState( true );
 
 	const { hasOptionsChanges, fetchingOptions, saveOptions } = useContext( Options );
 	const { hasDeveloperToolsOptionChange, saveDeveloperToolsOption } = useContext( User );
@@ -193,19 +194,25 @@ function Root( { appRoot } ) {
 				</AMPNotice>
 			) }
 			<Welcome />
-			<AMPDrawer
-				heading={ (
-					<>
-						<IconLaptopSearch />
-						{ __( 'Review', 'amp' ) }
-					</>
-				) }
-				hiddenTitle={ __( 'Review', 'amp' ) }
-				id="site-review"
-				initialOpen={ true }
-			>
-				<SiteReview />
-			</AMPDrawer>
+			{ showSiteReview && (
+				<AMPDrawer
+					heading={ (
+						<>
+							<IconLaptopSearch />
+							{ __( 'Review', 'amp' ) }
+						</>
+					) }
+					hiddenTitle={ __( 'Review', 'amp' ) }
+					id="site-review"
+					initialOpen={ true }
+				>
+					<SiteReview
+						dismiss={ () => {
+							setShowSiteReview( false );
+						} }
+					/>
+				</AMPDrawer>
+			) }
 			<form onSubmit={ onSubmit }>
 				<TemplateModes focusReaderThemes={ 'reader-themes' === focusedSection } />
 				<h2 id="advanced-settings">
diff --git a/assets/src/settings-page/site-review.js b/assets/src/settings-page/site-review.js
index 03191341587..af53182ef45 100644
--- a/assets/src/settings-page/site-review.js
+++ b/assets/src/settings-page/site-review.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import PropTypes from 'prop-types';
 import { HOME_URL } from 'amp-settings';
 
 /**
@@ -18,8 +19,11 @@ import { Options } from '../components/options-context-provider';
 
 /**
  * Review component on the settings screen.
+ *
+ * @param {Object}   props         Component props.
+ * @param {Function} props.dismiss Dismiss handler.
  */
-export function SiteReview() {
+export function SiteReview( { dismiss } ) {
 	const { originalOptions } = useContext( Options );
 	const {
 		paired_url_examples: pairedUrlExamples,
@@ -67,7 +71,14 @@ export function SiteReview() {
 				<Button href={ previewPermalink } isPrimary={ true }>
 					{ __( 'Browse Site', 'amp' ) }
 				</Button>
+				<Button onClick={ dismiss } isLink={ true }>
+					{ __( 'Dismiss', 'amp' ) }
+				</Button>
 			</div>
 		</div>
 	);
 }
+
+SiteReview.propTypes = {
+	dismiss: PropTypes.func,
+};
diff --git a/assets/src/settings-page/style.css b/assets/src/settings-page/style.css
index 74664ab9ece..3a210dbc82b 100644
--- a/assets/src/settings-page/style.css
+++ b/assets/src/settings-page/style.css
@@ -585,7 +585,7 @@ li.error-kept {
 	flex-flow: row nowrap;
 }
 
-.settings-site-review__actions .components-button.is-primary {
+.amp .settings-site-review__actions .components-button {
 	height: 40px;
 	padding-left: 2.25rem;
 	padding-right: 2.25rem;
diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index e981b1d40bb..30b841d7a1c 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -153,6 +153,12 @@ describe( 'AMP Settings Screen Review section', () => {
 		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /how the PX plugin works/i } );
 	} );
 
+	it( 'can be dismissed', async () => {
+		await expect( page ).toMatchElement( 'button', { text: 'Dismiss' } );
+		await expect( page ).toClick( 'button', { text: 'Dismiss' } );
+		await expect( page ).not.toMatchElement( 'h2', { text: 'Review' } );
+	} );
+
 	it( 'button redirects to an AMP page in transitional mode', async () => {
 		await clickMode( 'transitional' );
 

From aeed6b140701254e2e94578b834e700237cbb4bd Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 3 Sep 2021 11:02:15 +0200
Subject: [PATCH 26/68] Add user meta and REST field for Review panel
 `is_dismissed` state

---
 src/Admin/OptionsMenu.php | 109 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 108 insertions(+), 1 deletion(-)

diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index 9a4d6d3c5d6..f2531b600ef 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -16,7 +16,9 @@
 use AmpProject\AmpWP\Infrastructure\Registerable;
 use AmpProject\AmpWP\Infrastructure\Service;
 use AmpProject\AmpWP\LoadingError;
-
+use AmpProject\AmpWP\Option;
+use WP_Error;
+use WP_User;
 /**
  * OptionsMenu class.
  *
@@ -40,6 +42,15 @@ class OptionsMenu implements Conditional, Service, Registerable {
 	 */
 	const ICON_BASE64_SVG = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIiIGhlaWdodD0iNjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQxLjYyODg2NjcgMjguMTYxNDMzM2wtMTMuMDA0NSAyMS42NDIxMzM0aC0yLjM1NmwyLjMyOTEzMzMtMTQuMTAxOS03LjIxMzcuMDA5M3MtLjA2ODIuMDAyMDY2Ni0uMTAwMjMzMy4wMDIwNjY2Yy0uNjQ5OTY2NyAwLTEuMTc1OTMzNC0uNTI1OTY2Ni0xLjE3NTkzMzQtMS4xNzU5MzMzIDAtLjI3OS4yNTkzNjY3LS43NTEyMzMzLjI1OTM2NjctLjc1MTIzMzNsMTIuOTYyMTMzMy0yMS42MTYzTDM1LjcyNDQgMTIuMTc5OWwtMi4zODgwMzMzIDE0LjEyMzYgNy4yNTA5LS4wMDkzcy4wNzc1LS4wMDEwMzMzLjExNDctLjAwMTAzMzNjLjY0OTk2NjYgMCAxLjE3NTkzMzMuNTI1OTY2NiAxLjE3NTkzMzMgMS4xNzU5MzMzIDAgLjI2MzUtLjEwMzMzMzMuNDk0OTY2Ny0uMjUwMDY2Ny42OTEzbC4wMDEwMzM0LjAwMTAzMzN6TTMxIDBDMTMuODc4NyAwIDAgMTMuODc5NzMzMyAwIDMxYzAgMTcuMTIxMyAxMy44Nzg3IDMxIDMxIDMxIDE3LjEyMDI2NjcgMCAzMS0xMy44Nzg3IDMxLTMxQzYyIDEzLjg3OTczMzMgNDguMTIwMjY2NyAwIDMxIDB6IiBmaWxsPSIjYTBhNWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=';
 
+	/**
+	 * Handle for JS file.
+	 *
+	 * @since 2.2
+	 *
+	 * @var string
+	 */
+	const USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE = '';
+
 	/**
 	 * GoogleFonts instance.
 	 *
@@ -112,6 +123,8 @@ public function register() {
 		$plugin_file = preg_replace( '#.+/(?=.+?/.+?)#', '', AMP__FILE__ );
 		add_filter( "plugin_action_links_{$plugin_file}", [ $this, 'add_plugin_action_links' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );
+
+		add_action( 'rest_api_init', [ $this, 'register_rest_field' ] );
 	}
 
 	/**
@@ -310,4 +323,98 @@ protected function add_preload_rest_paths() {
 			$this->rest_preloader->add_preloaded_path( $path );
 		}
 	}
+
+	/**
+	 * Register REST field for storing Review panel state.
+	 */
+	public function register_rest_field() {
+		register_rest_field(
+			'user',
+			'amp_review_panel_is_dismissed',
+			[
+				'get_callback'    => [ $this, 'rest_get_review_panel_is_dismissed' ],
+				'update_callback' => [ $this, 'rest_update_review_panel_is_dismissed' ],
+				'schema'          => [
+					'description' => __( 'Whether the Review panel on Settings screen was dismissed by a user', 'amp' ),
+					'type'        => 'boolean',
+				],
+			]
+		);
+	}
+
+	/**
+	 * Provides the user's dev tools enabled setting.
+	 *
+	 * @param array $user Array of user data prepared for REST.
+	 * @return null|boolean Whether tools are enabled for the user, or null if the option has not been set.
+	 */
+	public function rest_get_review_panel_is_dismissed( $user ) {
+		return $this->is_review_panel_dismissed( $user['id'] );
+	}
+
+	/**
+	 * Updates a user's dev tools enabled setting.
+	 *
+	 * @param bool    $dismissed New setting for whether dev tools are enabled for the user.
+	 * @param WP_User $user      The WP user to update.
+	 *
+	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
+	 */
+	public function rest_update_review_panel_is_dismissed( bool $dismissed, WP_User $user ) {
+		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
+			return new WP_Error(
+				'amp_rest_cannot_edit_user',
+				__( 'Sorry, the current user is not allowed to make this change.', 'amp' ),
+				[ 'status' => rest_authorization_required_code() ]
+			);
+		}
+
+		return $this->set_is_review_panel_dismissed( $user->ID, $dismissed );
+	}
+
+	/**
+	 * Determine whether developer tools are enabled for the a user and whether they can access them.
+	 *
+	 * @param null|WP_User|int $user User. Defaults to the current user.
+	 * @return bool Whether developer tools are enabled for the user.
+	 */
+	public function is_review_panel_dismissed( $user = null ) {
+		if ( null === $user ) {
+			$user = wp_get_current_user();
+		} elseif ( ! $user instanceof WP_User ) {
+			$user = new WP_User( $user );
+		}
+
+		$is_dismissed_for_template_mode = $user->get( self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE );
+
+		if ( empty( $is_dismissed_for_template_mode ) ) {
+			return false;
+		}
+
+		return $is_dismissed_for_template_mode === AMP_Options_Manager::get_option( Option::THEME_SUPPORT );
+	}
+
+	/**
+	 * Set user enabled.
+	 *
+	 * @param int|WP_User $user      User.
+	 * @param bool        $dismissed Whether enabled.
+	 *
+	 * @return bool Whether update was successful.
+	 */
+	public function set_is_review_panel_dismissed( $user, bool $dismissed ) {
+		if ( $user instanceof WP_User ) {
+			$user = $user->ID;
+		}
+
+		if ( false === $dismissed ) {
+			return delete_user_meta( (int) $user, self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE );
+		}
+
+		return (bool) update_user_meta(
+			(int) $user,
+			self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
+			wp_json_encode( AMP_Options_Manager::get_option( Option::THEME_SUPPORT ) )
+		);
+	}
 }

From 2643dc8c8fef61e1665d442bf092a0d2f85d7318 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 3 Sep 2021 11:50:30 +0200
Subject: [PATCH 27/68] Remove rebase artifact

---
 assets/src/settings-page/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index 5945abb2aa1..f10dc9624ce 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -46,7 +46,6 @@ import { SiteReview } from './site-review';
 import { PluginSuppression } from './plugin-suppression';
 import { Analytics } from './analytics';
 import { PairedUrlStructure } from './paired-url-structure';
-import { Review } from './review';
 import { MobileRedirection } from './mobile-redirection';
 import { DeveloperTools } from './developer-tools';
 

From d9986e02b7b20cf2be959576c240f9865dcbe5f8 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 3 Sep 2021 12:36:48 +0200
Subject: [PATCH 28/68] Use Review panel dismiss state from user meta on
 Settings screen

---
 .../components/user-context-provider/index.js | 43 +++++++++++++++-
 assets/src/settings-page/index.js             | 14 ++++--
 src/Admin/OptionsMenu.php                     | 49 ++++++++++---------
 3 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/assets/src/components/user-context-provider/index.js b/assets/src/components/user-context-provider/index.js
index 5e6ccaa6495..0c8530a2ad7 100644
--- a/assets/src/components/user-context-provider/index.js
+++ b/assets/src/components/user-context-provider/index.js
@@ -23,16 +23,19 @@ export const User = createContext();
  * @param {Object}  props                               Component props.
  * @param {?any}    props.children                      Component children.
  * @param {boolean} props.onlyFetchIfPluginIsConfigured Flag indicating whether the users data should be fetched only if the plugin is fully configured (i.e. the Onboarding Wizard has been completed).
+ * @param {string}  props.userFieldReviewPanelIsDismissed The key of the option to use from the settings endpoint.
  * @param {string}  props.userOptionDeveloperTools      The key of the option to use from the settings endpoint.
  * @param {string}  props.usersResourceRestPath         The REST path for interacting with the `users` resources.
  */
-export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured = true, userOptionDeveloperTools, usersResourceRestPath } ) {
+export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured = true, userFieldReviewPanelIsDismissed, userOptionDeveloperTools, usersResourceRestPath } ) {
 	const { originalOptions, fetchingOptions } = useContext( Options );
 	const { plugin_configured: pluginConfigured } = originalOptions;
 	const [ fetchingUser, setFetchingUser ] = useState( false );
 	const [ developerToolsOption, setDeveloperToolsOption ] = useState( null );
+	const [ isReviewPanelDismissed, setIsReviewPanelDismissed ] = useState( null );
 	const [ originalDeveloperToolsOption, setOriginalDeveloperToolsOption ] = useState( null );
 	const [ savingDeveloperToolsOption, setSavingDeveloperToolsOption ] = useState( false );
+	const [ savingIsReviewPanelDismissed, setSavingIsReviewPanelDismissed ] = useState( false );
 	const [ didSaveDeveloperToolsOption, setDidSaveDeveloperToolsOption ] = useState( false );
 	const { setAsyncError } = useAsyncError();
 
@@ -82,6 +85,7 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 
 				setOriginalDeveloperToolsOption( fetchedUser[ userOptionDeveloperTools ] );
 				setDeveloperToolsOption( fetchedUser[ userOptionDeveloperTools ] );
+				setIsReviewPanelDismissed( fetchedUser[ userFieldReviewPanelIsDismissed ] );
 			} catch ( e ) {
 				setAsyncError( e );
 				return;
@@ -89,7 +93,7 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 
 			setFetchingUser( false );
 		} )();
-	}, [ onlyFetchIfPluginIsConfigured, fetchingOptions, fetchingUser, originalDeveloperToolsOption, pluginConfigured, setAsyncError, userOptionDeveloperTools, usersResourceRestPath ] );
+	}, [ onlyFetchIfPluginIsConfigured, fetchingOptions, fetchingUser, originalDeveloperToolsOption, pluginConfigured, setAsyncError, userFieldReviewPanelIsDismissed, userOptionDeveloperTools, usersResourceRestPath ] );
 
 	/**
 	 * Sends the option back to the REST endpoint to be saved.
@@ -125,6 +129,38 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 		setSavingDeveloperToolsOption( false );
 	}, [ hasDeveloperToolsOptionChange, developerToolsOption, setAsyncError, userOptionDeveloperTools, usersResourceRestPath ] );
 
+	/**
+	 * Sends the option back to the REST endpoint to be saved.
+	 */
+	const saveIsReviewPanelDismissed = useCallback( async ( isDismissed ) => {
+		setIsReviewPanelDismissed( isDismissed );
+
+		if ( savingIsReviewPanelDismissed ) {
+			return;
+		}
+
+		setSavingIsReviewPanelDismissed( true );
+
+		try {
+			await apiFetch( {
+				method: 'post',
+				path: `${ usersResourceRestPath }/me`,
+				data: {
+					[ userFieldReviewPanelIsDismissed ]: isDismissed,
+				},
+			} );
+
+			if ( true === hasUnmounted.current ) {
+				return;
+			}
+		} catch ( e ) {
+			setAsyncError( e );
+			return;
+		}
+
+		setSavingIsReviewPanelDismissed( false );
+	}, [ savingIsReviewPanelDismissed, setAsyncError, userFieldReviewPanelIsDismissed, usersResourceRestPath ] );
+
 	return (
 		<User.Provider
 			value={
@@ -133,10 +169,12 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 					fetchingUser,
 					didSaveDeveloperToolsOption,
 					hasDeveloperToolsOptionChange,
+					isReviewPanelDismissed,
 					originalDeveloperToolsOption,
 					saveDeveloperToolsOption,
 					savingDeveloperToolsOption,
 					setDeveloperToolsOption,
+					saveIsReviewPanelDismissed,
 				}
 			}
 		>
@@ -148,6 +186,7 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 UserContextProvider.propTypes = {
 	children: PropTypes.any,
 	onlyFetchIfPluginIsConfigured: PropTypes.bool,
+	userFieldReviewPanelIsDismissed: PropTypes.string.isRequired,
 	userOptionDeveloperTools: PropTypes.string.isRequired,
 	usersResourceRestPath: PropTypes.string.isRequired,
 };
diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index f10dc9624ce..e7fbc5c07e6 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -9,6 +9,7 @@ import {
 	READER_THEMES_REST_PATH,
 	UPDATES_NONCE,
 	USER_FIELD_DEVELOPER_TOOLS_ENABLED,
+	USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
 	USERS_RESOURCE_REST_PATH,
 } from 'amp-settings';
 
@@ -74,6 +75,7 @@ function Providers( { children } ) {
 						<UserContextProvider
 							onlyFetchIfPluginIsConfigured={ false }
 							userOptionDeveloperTools={ USER_FIELD_DEVELOPER_TOOLS_ENABLED }
+							userFieldReviewPanelIsDismissed={ USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE }
 							usersResourceRestPath={ USERS_RESOURCE_REST_PATH }
 						>
 							<ReaderThemesContextProvider
@@ -128,10 +130,14 @@ function scrollFocusedSectionIntoView( focusedSectionId ) {
  */
 function Root( { appRoot } ) {
 	const [ focusedSection, setFocusedSection ] = useState( global.location.hash.replace( /^#/, '' ) );
-	const [ showSiteReview, setShowSiteReview ] = useState( true );
 
 	const { hasOptionsChanges, fetchingOptions, saveOptions } = useContext( Options );
-	const { hasDeveloperToolsOptionChange, saveDeveloperToolsOption } = useContext( User );
+	const {
+		hasDeveloperToolsOptionChange,
+		isReviewPanelDismissed,
+		saveDeveloperToolsOption,
+		saveIsReviewPanelDismissed,
+	} = useContext( User );
 	const { templateModeWasOverridden } = useContext( ReaderThemes );
 
 	/**
@@ -193,7 +199,7 @@ function Root( { appRoot } ) {
 				</AMPNotice>
 			) }
 			<Welcome />
-			{ showSiteReview && (
+			{ ! isReviewPanelDismissed && (
 				<AMPDrawer
 					heading={ (
 						<>
@@ -207,7 +213,7 @@ function Root( { appRoot } ) {
 				>
 					<SiteReview
 						dismiss={ () => {
-							setShowSiteReview( false );
+							saveIsReviewPanelDismissed( true );
 						} }
 					/>
 				</AMPDrawer>
diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index f2531b600ef..456001dc01d 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -49,7 +49,7 @@ class OptionsMenu implements Conditional, Service, Registerable {
 	 *
 	 * @var string
 	 */
-	const USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE = '';
+	const USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_is_dismissed';
 
 	/**
 	 * GoogleFonts instance.
@@ -84,7 +84,7 @@ class OptionsMenu implements Conditional, Service, Registerable {
 	 * @return bool Whether the conditional object is needed.
 	 */
 	public static function is_needed() {
-		if ( ! is_admin() ) {
+		if ( ! is_admin() && ! wp_is_json_request() ) {
 			return false;
 		}
 
@@ -236,19 +236,19 @@ public function enqueue_assets( $hook_suffix ) {
 		$is_reader_theme = $this->reader_themes->theme_data_exists( get_stylesheet() );
 
 		$js_data = [
-			'AMP_QUERY_VAR'                      => amp_get_slug(),
-			'CURRENT_THEME'                      => [
+			'AMP_QUERY_VAR'                                          => amp_get_slug(),
+			'CURRENT_THEME'                                          => [
 				'name'            => $theme->get( 'Name' ),
 				'description'     => $theme->get( 'Description' ),
 				'is_reader_theme' => $is_reader_theme,
 				'screenshot'      => $theme->get_screenshot() ?: null,
 				'url'             => $theme->get( 'ThemeURI' ),
 			],
-			'HAS_DEPENDENCY_SUPPORT'             => $this->dependency_support->has_support(),
-			'HOME_URL'                           => home_url( '/' ),
-			'OPTIONS_REST_PATH'                  => '/amp/v1/options',
-			'READER_THEMES_REST_PATH'            => '/amp/v1/reader-themes',
-			'IS_CORE_THEME'                      => in_array(
+			'HAS_DEPENDENCY_SUPPORT'                                 => $this->dependency_support->has_support(),
+			'HOME_URL'                                               => home_url( '/' ),
+			'OPTIONS_REST_PATH'                                      => '/amp/v1/options',
+			'READER_THEMES_REST_PATH'                                => '/amp/v1/reader-themes',
+			'IS_CORE_THEME'                                          => in_array(
 				get_stylesheet(),
 				AMP_Core_Theme_Sanitizer::get_supported_themes(),
 				true
@@ -259,6 +259,7 @@ public function enqueue_assets( $hook_suffix ) {
 			'THEME_SUPPORTS_READER_MODE'         => AMP_Theme_Support::supports_reader_mode(),
 			'UPDATES_NONCE'                      => wp_create_nonce( 'updates' ),
 			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
+			'USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE' => self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
 			'USERS_RESOURCE_REST_PATH'           => '/wp/v2/users',
 		];
 
@@ -330,7 +331,7 @@ protected function add_preload_rest_paths() {
 	public function register_rest_field() {
 		register_rest_field(
 			'user',
-			'amp_review_panel_is_dismissed',
+			self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
 			[
 				'get_callback'    => [ $this, 'rest_get_review_panel_is_dismissed' ],
 				'update_callback' => [ $this, 'rest_update_review_panel_is_dismissed' ],
@@ -343,24 +344,24 @@ public function register_rest_field() {
 	}
 
 	/**
-	 * Provides the user's dev tools enabled setting.
+	 * Provides the dismissed state of the "Review" panel for the user.
 	 *
 	 * @param array $user Array of user data prepared for REST.
-	 * @return null|boolean Whether tools are enabled for the user, or null if the option has not been set.
+	 * @return null|boolean Whether the panel is dismissed, or null if the option has not been set.
 	 */
 	public function rest_get_review_panel_is_dismissed( $user ) {
 		return $this->is_review_panel_dismissed( $user['id'] );
 	}
 
 	/**
-	 * Updates a user's dev tools enabled setting.
+	 * Updates a user's setting indicating if the "Review" panel is dismissed for the current template mode.
 	 *
-	 * @param bool    $dismissed New setting for whether dev tools are enabled for the user.
-	 * @param WP_User $user      The WP user to update.
+	 * @param bool    $is_dismissed A flag indicating if a panel should be dismissed for the current template mode.
+	 * @param WP_User $user         The WP user to update.
 	 *
 	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
 	 */
-	public function rest_update_review_panel_is_dismissed( bool $dismissed, WP_User $user ) {
+	public function rest_update_review_panel_is_dismissed( bool $is_dismissed, WP_User $user ) {
 		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
 			return new WP_Error(
 				'amp_rest_cannot_edit_user',
@@ -369,11 +370,11 @@ public function rest_update_review_panel_is_dismissed( bool $dismissed, WP_User
 			);
 		}
 
-		return $this->set_is_review_panel_dismissed( $user->ID, $dismissed );
+		return $this->set_is_review_panel_dismissed( $user->ID, $is_dismissed );
 	}
 
 	/**
-	 * Determine whether developer tools are enabled for the a user and whether they can access them.
+	 * Determine whether the "Review" panel should be dismissed for the current template mode.
 	 *
 	 * @param null|WP_User|int $user User. Defaults to the current user.
 	 * @return bool Whether developer tools are enabled for the user.
@@ -395,26 +396,26 @@ public function is_review_panel_dismissed( $user = null ) {
 	}
 
 	/**
-	 * Set user enabled.
+	 * Set "Review" panel dismissed setting.
 	 *
-	 * @param int|WP_User $user      User.
-	 * @param bool        $dismissed Whether enabled.
+	 * @param int|WP_User $user         User.
+	 * @param bool        $id_dismissed Whether the panel is dismissed.
 	 *
 	 * @return bool Whether update was successful.
 	 */
-	public function set_is_review_panel_dismissed( $user, bool $dismissed ) {
+	public function set_is_review_panel_dismissed( $user, bool $id_dismissed ) {
 		if ( $user instanceof WP_User ) {
 			$user = $user->ID;
 		}
 
-		if ( false === $dismissed ) {
+		if ( false === $id_dismissed ) {
 			return delete_user_meta( (int) $user, self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE );
 		}
 
 		return (bool) update_user_meta(
 			(int) $user,
 			self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
-			wp_json_encode( AMP_Options_Manager::get_option( Option::THEME_SUPPORT ) )
+			AMP_Options_Manager::get_option( Option::THEME_SUPPORT )
 		);
 	}
 }

From b19ddd242d4514d9f916de903094c5f0f18fd21e Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 3 Sep 2021 16:18:24 +0200
Subject: [PATCH 29/68] Move "Review" panel dismissal logic to client-side

---
 .../components/user-context-provider/index.js |  56 ++++----
 assets/src/settings-page/index.js             |  32 +----
 assets/src/settings-page/site-review.js       | 124 +++++++++++-------
 src/Admin/OptionsMenu.php                     | 118 +++++++----------
 4 files changed, 154 insertions(+), 176 deletions(-)

diff --git a/assets/src/components/user-context-provider/index.js b/assets/src/components/user-context-provider/index.js
index 0c8530a2ad7..1da94f592b8 100644
--- a/assets/src/components/user-context-provider/index.js
+++ b/assets/src/components/user-context-provider/index.js
@@ -20,22 +20,28 @@ export const User = createContext();
 /**
  * Context provider user data.
  *
- * @param {Object}  props                               Component props.
- * @param {?any}    props.children                      Component children.
- * @param {boolean} props.onlyFetchIfPluginIsConfigured Flag indicating whether the users data should be fetched only if the plugin is fully configured (i.e. the Onboarding Wizard has been completed).
- * @param {string}  props.userFieldReviewPanelIsDismissed The key of the option to use from the settings endpoint.
- * @param {string}  props.userOptionDeveloperTools      The key of the option to use from the settings endpoint.
- * @param {string}  props.usersResourceRestPath         The REST path for interacting with the `users` resources.
+ * @param {Object}  props                                              Component props.
+ * @param {?any}    props.children                                     Component children.
+ * @param {boolean} props.onlyFetchIfPluginIsConfigured                Flag indicating whether the users data should be fetched only if the plugin is fully configured (i.e. the Onboarding Wizard has been completed).
+ * @param {string}  props.userFieldReviewPanelDismissedForTemplateMode The key of the option to use from the settings endpoint.
+ * @param {string}  props.userOptionDeveloperTools                     The key of the option to use from the settings endpoint.
+ * @param {string}  props.usersResourceRestPath                        The REST path for interacting with the `users` resources.
  */
-export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured = true, userFieldReviewPanelIsDismissed, userOptionDeveloperTools, usersResourceRestPath } ) {
+export function UserContextProvider( {
+	children,
+	onlyFetchIfPluginIsConfigured = true,
+	userFieldReviewPanelDismissedForTemplateMode,
+	userOptionDeveloperTools,
+	usersResourceRestPath,
+} ) {
 	const { originalOptions, fetchingOptions } = useContext( Options );
 	const { plugin_configured: pluginConfigured } = originalOptions;
 	const [ fetchingUser, setFetchingUser ] = useState( false );
 	const [ developerToolsOption, setDeveloperToolsOption ] = useState( null );
-	const [ isReviewPanelDismissed, setIsReviewPanelDismissed ] = useState( null );
+	const [ reviewPanelDismissedForTemplateMode, setReviewPanelDismissedForTemplateMode ] = useState( null );
 	const [ originalDeveloperToolsOption, setOriginalDeveloperToolsOption ] = useState( null );
 	const [ savingDeveloperToolsOption, setSavingDeveloperToolsOption ] = useState( false );
-	const [ savingIsReviewPanelDismissed, setSavingIsReviewPanelDismissed ] = useState( false );
+	const [ savingReviewPanelDismissedForTemplateMode, setSavingReviewPanelDismissedForTemplateMode ] = useState( false );
 	const [ didSaveDeveloperToolsOption, setDidSaveDeveloperToolsOption ] = useState( false );
 	const { setAsyncError } = useAsyncError();
 
@@ -85,7 +91,7 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 
 				setOriginalDeveloperToolsOption( fetchedUser[ userOptionDeveloperTools ] );
 				setDeveloperToolsOption( fetchedUser[ userOptionDeveloperTools ] );
-				setIsReviewPanelDismissed( fetchedUser[ userFieldReviewPanelIsDismissed ] );
+				setReviewPanelDismissedForTemplateMode( fetchedUser[ userFieldReviewPanelDismissedForTemplateMode ] );
 			} catch ( e ) {
 				setAsyncError( e );
 				return;
@@ -93,10 +99,10 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 
 			setFetchingUser( false );
 		} )();
-	}, [ onlyFetchIfPluginIsConfigured, fetchingOptions, fetchingUser, originalDeveloperToolsOption, pluginConfigured, setAsyncError, userFieldReviewPanelIsDismissed, userOptionDeveloperTools, usersResourceRestPath ] );
+	}, [ onlyFetchIfPluginIsConfigured, fetchingOptions, fetchingUser, originalDeveloperToolsOption, pluginConfigured, setAsyncError, userFieldReviewPanelDismissedForTemplateMode, userOptionDeveloperTools, usersResourceRestPath ] );
 
 	/**
-	 * Sends the option back to the REST endpoint to be saved.
+	 * Sends the dev tools option back to the REST endpoint to be saved.
 	 */
 	const saveDeveloperToolsOption = useCallback( async () => {
 		if ( ! hasDeveloperToolsOptionChange ) {
@@ -130,23 +136,24 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 	}, [ hasDeveloperToolsOptionChange, developerToolsOption, setAsyncError, userOptionDeveloperTools, usersResourceRestPath ] );
 
 	/**
-	 * Sends the option back to the REST endpoint to be saved.
+	 * Sends the template mode for which the "Review" panel is dismissed back to
+	 * the REST endpoint to be saved.
 	 */
-	const saveIsReviewPanelDismissed = useCallback( async ( isDismissed ) => {
-		setIsReviewPanelDismissed( isDismissed );
-
-		if ( savingIsReviewPanelDismissed ) {
+	const saveReviewPanelDismissedForTemplateMode = useCallback( async ( templateMode ) => {
+		if ( savingReviewPanelDismissedForTemplateMode ) {
 			return;
 		}
 
-		setSavingIsReviewPanelDismissed( true );
+		// Update the local state immediately.
+		setReviewPanelDismissedForTemplateMode( templateMode );
+		setSavingReviewPanelDismissedForTemplateMode( true );
 
 		try {
 			await apiFetch( {
 				method: 'post',
 				path: `${ usersResourceRestPath }/me`,
 				data: {
-					[ userFieldReviewPanelIsDismissed ]: isDismissed,
+					[ userFieldReviewPanelDismissedForTemplateMode ]: templateMode,
 				},
 			} );
 
@@ -158,8 +165,8 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 			return;
 		}
 
-		setSavingIsReviewPanelDismissed( false );
-	}, [ savingIsReviewPanelDismissed, setAsyncError, userFieldReviewPanelIsDismissed, usersResourceRestPath ] );
+		setSavingReviewPanelDismissedForTemplateMode( false );
+	}, [ savingReviewPanelDismissedForTemplateMode, setAsyncError, userFieldReviewPanelDismissedForTemplateMode, usersResourceRestPath ] );
 
 	return (
 		<User.Provider
@@ -169,12 +176,13 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 					fetchingUser,
 					didSaveDeveloperToolsOption,
 					hasDeveloperToolsOptionChange,
-					isReviewPanelDismissed,
+					reviewPanelDismissedForTemplateMode,
 					originalDeveloperToolsOption,
 					saveDeveloperToolsOption,
 					savingDeveloperToolsOption,
 					setDeveloperToolsOption,
-					saveIsReviewPanelDismissed,
+					saveReviewPanelDismissedForTemplateMode,
+					savingReviewPanelDismissedForTemplateMode,
 				}
 			}
 		>
@@ -186,7 +194,7 @@ export function UserContextProvider( { children, onlyFetchIfPluginIsConfigured =
 UserContextProvider.propTypes = {
 	children: PropTypes.any,
 	onlyFetchIfPluginIsConfigured: PropTypes.bool,
-	userFieldReviewPanelIsDismissed: PropTypes.string.isRequired,
+	userFieldReviewPanelDismissedForTemplateMode: PropTypes.string.isRequired,
 	userOptionDeveloperTools: PropTypes.string.isRequired,
 	usersResourceRestPath: PropTypes.string.isRequired,
 };
diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
index e7fbc5c07e6..15fc3eb2e3c 100644
--- a/assets/src/settings-page/index.js
+++ b/assets/src/settings-page/index.js
@@ -9,7 +9,7 @@ import {
 	READER_THEMES_REST_PATH,
 	UPDATES_NONCE,
 	USER_FIELD_DEVELOPER_TOOLS_ENABLED,
-	USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
+	USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
 	USERS_RESOURCE_REST_PATH,
 } from 'amp-settings';
 
@@ -38,7 +38,6 @@ import { AMPDrawer } from '../components/amp-drawer';
 import { AMPNotice, NOTICE_SIZE_LARGE } from '../components/amp-notice';
 import { ErrorScreen } from '../components/error-screen';
 import { User, UserContextProvider } from '../components/user-context-provider';
-import { IconLaptopSearch } from '../components/svg/icon-laptop-search';
 import { Welcome } from './welcome';
 import { TemplateModes } from './template-modes';
 import { SupportedTemplates } from './supported-templates';
@@ -75,7 +74,7 @@ function Providers( { children } ) {
 						<UserContextProvider
 							onlyFetchIfPluginIsConfigured={ false }
 							userOptionDeveloperTools={ USER_FIELD_DEVELOPER_TOOLS_ENABLED }
-							userFieldReviewPanelIsDismissed={ USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE }
+							userFieldReviewPanelDismissedForTemplateMode={ USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE }
 							usersResourceRestPath={ USERS_RESOURCE_REST_PATH }
 						>
 							<ReaderThemesContextProvider
@@ -132,12 +131,7 @@ function Root( { appRoot } ) {
 	const [ focusedSection, setFocusedSection ] = useState( global.location.hash.replace( /^#/, '' ) );
 
 	const { hasOptionsChanges, fetchingOptions, saveOptions } = useContext( Options );
-	const {
-		hasDeveloperToolsOptionChange,
-		isReviewPanelDismissed,
-		saveDeveloperToolsOption,
-		saveIsReviewPanelDismissed,
-	} = useContext( User );
+	const { hasDeveloperToolsOptionChange, saveDeveloperToolsOption } = useContext( User );
 	const { templateModeWasOverridden } = useContext( ReaderThemes );
 
 	/**
@@ -199,25 +193,7 @@ function Root( { appRoot } ) {
 				</AMPNotice>
 			) }
 			<Welcome />
-			{ ! isReviewPanelDismissed && (
-				<AMPDrawer
-					heading={ (
-						<>
-							<IconLaptopSearch />
-							{ __( 'Review', 'amp' ) }
-						</>
-					) }
-					hiddenTitle={ __( 'Review', 'amp' ) }
-					id="site-review"
-					initialOpen={ true }
-				>
-					<SiteReview
-						dismiss={ () => {
-							saveIsReviewPanelDismissed( true );
-						} }
-					/>
-				</AMPDrawer>
-			) }
+			<SiteReview />
 			<form onSubmit={ onSubmit }>
 				<TemplateModes focusReaderThemes={ 'reader-themes' === focusedSection } />
 				<h2 id="advanced-settings">
diff --git a/assets/src/settings-page/site-review.js b/assets/src/settings-page/site-review.js
index af53182ef45..c1eb7e90a19 100644
--- a/assets/src/settings-page/site-review.js
+++ b/assets/src/settings-page/site-review.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { HOME_URL } from 'amp-settings';
 
 /**
@@ -15,70 +14,93 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { IconLaptopToggles } from '../components/svg/icon-laptop-toggles';
+import { AMPDrawer } from '../components/amp-drawer';
+import { IconLaptopSearch } from '../components/svg/icon-laptop-search';
 import { Options } from '../components/options-context-provider';
+import { User } from '../components/user-context-provider';
 
 /**
  * Review component on the settings screen.
- *
- * @param {Object}   props         Component props.
- * @param {Function} props.dismiss Dismiss handler.
  */
-export function SiteReview( { dismiss } ) {
+export function SiteReview() {
+	const {
+		reviewPanelDismissedForTemplateMode,
+		saveReviewPanelDismissedForTemplateMode,
+		savingReviewPanelDismissedForTemplateMode,
+	} = useContext( User );
 	const { originalOptions } = useContext( Options );
 	const {
 		paired_url_examples: pairedUrlExamples,
 		paired_url_structure: pairedUrlStructure,
 		theme_support: themeSupport,
 	} = originalOptions;
+
+	if ( savingReviewPanelDismissedForTemplateMode || reviewPanelDismissedForTemplateMode === themeSupport ) {
+		return null;
+	}
+
 	const previewPermalink = 'standard' === themeSupport ? HOME_URL : pairedUrlExamples[ pairedUrlStructure ][ 0 ];
 
 	return (
-		<div className="settings-site-review">
-			<p>
-				{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single AMP version of your site. Browse your site and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
-			</p>
-			<h3 className="settings-site-review__heading">
-				<IconLaptopToggles />
-				{ __( 'Need help?', 'amp' ) }
-			</h3>
-			<ul className="settings-site-review__list">
-				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
-				<li dangerouslySetInnerHTML={ {
-					__html: sprintf(
-						/* translators: placeholder is a link to support forum. */
-						__( 'Reach out in the <a href="%s" target="_blank" rel="noreferrer noopener">support forums</a>', 'amp' ),
-						'https://wordpress.org/support/plugin/amp/#new-topic-0',
-					),
-				} } />
-				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
-				<li dangerouslySetInnerHTML={ {
-					__html: sprintf(
-						/* translators: placeholder is the template mode section anchor. */
-						__( 'Try a different <a href="%s">template mode</a>', 'amp' ),
-						'#template-modes',
-					),
-				} } />
-				{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
-				<li dangerouslySetInnerHTML={ {
-					__html: sprintf(
-						/* translators: placeholder is a link to the plugin site. */
-						__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the PX plugin works', 'amp' ),
-						'https://amp-wp.org/documentation/how-the-plugin-works/',
-					),
-				} } />
-			</ul>
-			<div className="settings-site-review__actions">
-				<Button href={ previewPermalink } isPrimary={ true }>
-					{ __( 'Browse Site', 'amp' ) }
-				</Button>
-				<Button onClick={ dismiss } isLink={ true }>
-					{ __( 'Dismiss', 'amp' ) }
-				</Button>
+		<AMPDrawer
+			heading={ (
+				<>
+					<IconLaptopSearch />
+					{ __( 'Review', 'amp' ) }
+				</>
+			) }
+			hiddenTitle={ __( 'Review', 'amp' ) }
+			id="site-review"
+			initialOpen={ true }
+		>
+			<div className="settings-site-review">
+				<p>
+					{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single AMP version of your site. Browse your site and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
+				</p>
+				<h3 className="settings-site-review__heading">
+					<IconLaptopToggles />
+					{ __( 'Need help?', 'amp' ) }
+				</h3>
+				<ul className="settings-site-review__list">
+					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+					<li dangerouslySetInnerHTML={ {
+						__html: sprintf(
+							/* translators: placeholder is a link to support forum. */
+							__( 'Reach out in the <a href="%s" target="_blank" rel="noreferrer noopener">support forums</a>', 'amp' ),
+							'https://wordpress.org/support/plugin/amp/#new-topic-0',
+						),
+					} } />
+					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+					<li dangerouslySetInnerHTML={ {
+						__html: sprintf(
+							/* translators: placeholder is the template mode section anchor. */
+							__( 'Try a different <a href="%s">template mode</a>', 'amp' ),
+							'#template-modes',
+						),
+					} } />
+					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
+					<li dangerouslySetInnerHTML={ {
+						__html: sprintf(
+							/* translators: placeholder is a link to the plugin site. */
+							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the PX plugin works', 'amp' ),
+							'https://amp-wp.org/documentation/how-the-plugin-works/',
+						),
+					} } />
+				</ul>
+				<div className="settings-site-review__actions">
+					<Button href={ previewPermalink } isPrimary={ true }>
+						{ __( 'Browse Site', 'amp' ) }
+					</Button>
+					<Button
+						onClick={ () => {
+							saveReviewPanelDismissedForTemplateMode( themeSupport );
+						} }
+						isLink={ true }
+					>
+						{ __( 'Dismiss', 'amp' ) }
+					</Button>
+				</div>
 			</div>
-		</div>
+		</AMPDrawer>
 	);
 }
-
-SiteReview.propTypes = {
-	dismiss: PropTypes.func,
-};
diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index 456001dc01d..7a4ca17b102 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -43,13 +43,13 @@ class OptionsMenu implements Conditional, Service, Registerable {
 	const ICON_BASE64_SVG = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIiIGhlaWdodD0iNjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQxLjYyODg2NjcgMjguMTYxNDMzM2wtMTMuMDA0NSAyMS42NDIxMzM0aC0yLjM1NmwyLjMyOTEzMzMtMTQuMTAxOS03LjIxMzcuMDA5M3MtLjA2ODIuMDAyMDY2Ni0uMTAwMjMzMy4wMDIwNjY2Yy0uNjQ5OTY2NyAwLTEuMTc1OTMzNC0uNTI1OTY2Ni0xLjE3NTkzMzQtMS4xNzU5MzMzIDAtLjI3OS4yNTkzNjY3LS43NTEyMzMzLjI1OTM2NjctLjc1MTIzMzNsMTIuOTYyMTMzMy0yMS42MTYzTDM1LjcyNDQgMTIuMTc5OWwtMi4zODgwMzMzIDE0LjEyMzYgNy4yNTA5LS4wMDkzcy4wNzc1LS4wMDEwMzMzLjExNDctLjAwMTAzMzNjLjY0OTk2NjYgMCAxLjE3NTkzMzMuNTI1OTY2NiAxLjE3NTkzMzMgMS4xNzU5MzMzIDAgLjI2MzUtLjEwMzMzMzMuNDk0OTY2Ny0uMjUwMDY2Ny42OTEzbC4wMDEwMzM0LjAwMTAzMzN6TTMxIDBDMTMuODc4NyAwIDAgMTMuODc5NzMzMyAwIDMxYzAgMTcuMTIxMyAxMy44Nzg3IDMxIDMxIDMxIDE3LjEyMDI2NjcgMCAzMS0xMy44Nzg3IDMxLTMxQzYyIDEzLjg3OTczMzMgNDguMTIwMjY2NyAwIDMxIDB6IiBmaWxsPSIjYTBhNWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=';
 
 	/**
-	 * Handle for JS file.
+	 * User meta key that stores a template mode for which the "Review" panel was dismissed.
 	 *
 	 * @since 2.2
 	 *
 	 * @var string
 	 */
-	const USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_is_dismissed';
+	const USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_dismissed_for_template_mode';
 
 	/**
 	 * GoogleFonts instance.
@@ -236,31 +236,31 @@ public function enqueue_assets( $hook_suffix ) {
 		$is_reader_theme = $this->reader_themes->theme_data_exists( get_stylesheet() );
 
 		$js_data = [
-			'AMP_QUERY_VAR'                                          => amp_get_slug(),
-			'CURRENT_THEME'                                          => [
+			'AMP_QUERY_VAR'                                       => amp_get_slug(),
+			'CURRENT_THEME'                                       => [
 				'name'            => $theme->get( 'Name' ),
 				'description'     => $theme->get( 'Description' ),
 				'is_reader_theme' => $is_reader_theme,
 				'screenshot'      => $theme->get_screenshot() ?: null,
 				'url'             => $theme->get( 'ThemeURI' ),
 			],
-			'HAS_DEPENDENCY_SUPPORT'                                 => $this->dependency_support->has_support(),
-			'HOME_URL'                                               => home_url( '/' ),
-			'OPTIONS_REST_PATH'                                      => '/amp/v1/options',
-			'READER_THEMES_REST_PATH'                                => '/amp/v1/reader-themes',
-			'IS_CORE_THEME'                                          => in_array(
+			'HAS_DEPENDENCY_SUPPORT'                              => $this->dependency_support->has_support(),
+			'HOME_URL'                                            => home_url( '/' ),
+			'OPTIONS_REST_PATH'                                   => '/amp/v1/options',
+			'READER_THEMES_REST_PATH'                             => '/amp/v1/reader-themes',
+			'IS_CORE_THEME'                                       => in_array(
 				get_stylesheet(),
 				AMP_Core_Theme_Sanitizer::get_supported_themes(),
 				true
 			),
-			'LEGACY_THEME_SLUG'                  => ReaderThemes::DEFAULT_READER_THEME,
-			'USING_FALLBACK_READER_THEME'        => $this->reader_themes->using_fallback_theme(),
-			'THEME_SUPPORT_ARGS'                 => AMP_Theme_Support::get_theme_support_args(),
-			'THEME_SUPPORTS_READER_MODE'         => AMP_Theme_Support::supports_reader_mode(),
-			'UPDATES_NONCE'                      => wp_create_nonce( 'updates' ),
-			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
-			'USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE' => self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
-			'USERS_RESOURCE_REST_PATH'           => '/wp/v2/users',
+			'LEGACY_THEME_SLUG'                                   => ReaderThemes::DEFAULT_READER_THEME,
+			'USING_FALLBACK_READER_THEME'                         => $this->reader_themes->using_fallback_theme(),
+			'THEME_SUPPORT_ARGS'                                  => AMP_Theme_Support::get_theme_support_args(),
+			'THEME_SUPPORTS_READER_MODE'                          => AMP_Theme_Support::supports_reader_mode(),
+			'UPDATES_NONCE'                                       => wp_create_nonce( 'updates' ),
+			'USER_FIELD_DEVELOPER_TOOLS_ENABLED'                  => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
+			'USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE' => self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
+			'USERS_RESOURCE_REST_PATH'                            => '/wp/v2/users',
 		];
 
 		wp_add_inline_script(
@@ -326,42 +326,42 @@ protected function add_preload_rest_paths() {
 	}
 
 	/**
-	 * Register REST field for storing Review panel state.
+	 * Register REST field for storing a template mode for which the "Review" panel was dismissed.
 	 */
 	public function register_rest_field() {
 		register_rest_field(
 			'user',
-			self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
+			self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
 			[
-				'get_callback'    => [ $this, 'rest_get_review_panel_is_dismissed' ],
-				'update_callback' => [ $this, 'rest_update_review_panel_is_dismissed' ],
+				'get_callback'    => [ $this, 'rest_get_review_panel_dismissed_for_template_mode' ],
+				'update_callback' => [ $this, 'rest_update_review_panel_dismissed_for_template_mode' ],
 				'schema'          => [
-					'description' => __( 'Whether the Review panel on Settings screen was dismissed by a user', 'amp' ),
-					'type'        => 'boolean',
+					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
+					'type'        => [ 'string', 'bool' ],
 				],
 			]
 		);
 	}
 
 	/**
-	 * Provides the dismissed state of the "Review" panel for the user.
+	 * Provides a template mode for which the "Review" panel has been dismissed by a user.
 	 *
 	 * @param array $user Array of user data prepared for REST.
-	 * @return null|boolean Whether the panel is dismissed, or null if the option has not been set.
+	 * @return string Whether the panel is dismissed, or null if the option has not been set.
 	 */
-	public function rest_get_review_panel_is_dismissed( $user ) {
-		return $this->is_review_panel_dismissed( $user['id'] );
+	public function rest_get_review_panel_dismissed_for_template_mode( $user ) {
+		return get_user_meta( $user['id'] , self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );
 	}
 
 	/**
-	 * Updates a user's setting indicating if the "Review" panel is dismissed for the current template mode.
+	 * Updates a user's setting determining for which template mode the "Review" panel was dismissed.
 	 *
-	 * @param bool    $is_dismissed A flag indicating if a panel should be dismissed for the current template mode.
-	 * @param WP_User $user         The WP user to update.
+	 * @param string  $template_mode Template mode.
+	 * @param WP_User $user          The WP user to update.
 	 *
 	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
 	 */
-	public function rest_update_review_panel_is_dismissed( bool $is_dismissed, WP_User $user ) {
+	public function rest_update_review_panel_dismissed_for_template_mode( string $template_mode, WP_User $user ) {
 		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
 			return new WP_Error(
 				'amp_rest_cannot_edit_user',
@@ -370,52 +370,24 @@ public function rest_update_review_panel_is_dismissed( bool $is_dismissed, WP_Us
 			);
 		}
 
-		return $this->set_is_review_panel_dismissed( $user->ID, $is_dismissed );
-	}
-
-	/**
-	 * Determine whether the "Review" panel should be dismissed for the current template mode.
-	 *
-	 * @param null|WP_User|int $user User. Defaults to the current user.
-	 * @return bool Whether developer tools are enabled for the user.
-	 */
-	public function is_review_panel_dismissed( $user = null ) {
-		if ( null === $user ) {
-			$user = wp_get_current_user();
-		} elseif ( ! $user instanceof WP_User ) {
-			$user = new WP_User( $user );
+		if ( empty( $template_mode ) ) {
+			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
 		}
 
-		$is_dismissed_for_template_mode = $user->get( self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE );
-
-		if ( empty( $is_dismissed_for_template_mode ) ) {
-			return false;
-		}
-
-		return $is_dismissed_for_template_mode === AMP_Options_Manager::get_option( Option::THEME_SUPPORT );
-	}
-
-	/**
-	 * Set "Review" panel dismissed setting.
-	 *
-	 * @param int|WP_User $user         User.
-	 * @param bool        $id_dismissed Whether the panel is dismissed.
-	 *
-	 * @return bool Whether update was successful.
-	 */
-	public function set_is_review_panel_dismissed( $user, bool $id_dismissed ) {
-		if ( $user instanceof WP_User ) {
-			$user = $user->ID;
-		}
+		$allowed_template_modes = [
+			AMP_Theme_Support::READER_MODE_SLUG,
+			AMP_Theme_Support::STANDARD_MODE_SLUG,
+			AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
+		];
 
-		if ( false === $id_dismissed ) {
-			return delete_user_meta( (int) $user, self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE );
+		if ( ! in_array( $template_mode, $allowed_template_modes, true ) ) {
+			return new WP_Error(
+				'amp_rest_incorrect_template_mode',
+				__( 'Sorry, the template mode is incorrect.', 'amp' ),
+				[ 'status' => 400 ]
+			);
 		}
 
-		return (bool) update_user_meta(
-			(int) $user,
-			self::USER_FIELD_REVIEW_PANEL_IS_DISMISSED_FOR_TEMPLATE_MODE,
-			AMP_Options_Manager::get_option( Option::THEME_SUPPORT )
-		);
+		return (bool) update_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $template_mode );
 	}
 }

From ed5ffa069fd07fa89c5b247efd91244a683fd6be Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 6 Sep 2021 14:14:42 +0200
Subject: [PATCH 30/68] Add E2E tests for "Review" panel on AMP settings page

---
 tests/e2e/specs/admin/amp-options.js       | 49 ++++++++++++++--------
 tests/e2e/specs/amp-onboarding/summary.js  |  0
 tests/e2e/utils/onboarding-wizard-utils.js |  5 ++-
 3 files changed, 35 insertions(+), 19 deletions(-)
 delete mode 100644 tests/e2e/specs/amp-onboarding/summary.js

diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index 30b841d7a1c..cecb10f597b 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -136,7 +136,7 @@ describe( 'Saving', () => {
 	} );
 } );
 
-describe( 'AMP Settings Screen Review section', () => {
+describe( 'AMP settings screen Review panel', () => {
 	beforeEach( async () => {
 		await visitAdminPage( 'admin.php', 'page=amp-options' );
 	} );
@@ -145,6 +145,12 @@ describe( 'AMP Settings Screen Review section', () => {
 		await cleanUpSettings();
 	} );
 
+	async function clickBrowseSiteInTemplateMode( mode ) {
+		await clickMode( mode );
+		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
+		await page.waitForNavigation();
+	}
+
 	it( 'is present on the page', async () => {
 		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
 		await expect( page ).toMatchElement( 'h3', { text: 'Need help?' } );
@@ -153,36 +159,43 @@ describe( 'AMP Settings Screen Review section', () => {
 		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /how the PX plugin works/i } );
 	} );
 
-	it( 'can be dismissed', async () => {
-		await expect( page ).toMatchElement( 'button', { text: 'Dismiss' } );
-		await expect( page ).toClick( 'button', { text: 'Dismiss' } );
-		await expect( page ).not.toMatchElement( 'h2', { text: 'Review' } );
-	} );
-
 	it( 'button redirects to an AMP page in transitional mode', async () => {
-		await clickMode( 'transitional' );
-
-		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
-		await page.waitForNavigation();
+		await clickBrowseSiteInTemplateMode( 'transitional' );
 
+		await page.waitForSelector( 'html[amp]' );
 		await expect( page ).toMatchElement( 'html[amp]' );
 	} );
 
 	it( 'button redirects to an AMP page in reader mode', async () => {
-		await clickMode( 'reader' );
-
-		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
-		await page.waitForNavigation();
+		await clickBrowseSiteInTemplateMode( 'reader' );
 
+		await page.waitForSelector( 'html[amp]' );
 		await expect( page ).toMatchElement( 'html[amp]' );
 	} );
 
 	it( 'button redirects to an AMP page in standard mode', async () => {
+		await clickBrowseSiteInTemplateMode( 'standard' );
+
+		await page.waitForSelector( 'html[amp]' );
+		await expect( page ).toMatchElement( 'html[amp]' );
+	} );
+
+	it( 'can be dismissed and shows up again only after a template mode change', async () => {
+		await clickMode( 'transitional' );
+
+		await expect( page ).toMatchElement( 'button', { text: 'Dismiss' } );
+		await expect( page ).toClick( 'button', { text: 'Dismiss' } );
+		await expect( page ).not.toMatchElement( 'h2', { text: 'Review' } );
+
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
+
 		await clickMode( 'standard' );
 
-		await expect( page ).toClick( 'a', { text: 'Browse Site' } );
-		await page.waitForNavigation();
+		await expect( page ).toClick( 'button', { text: 'Save' } );
+		await page.waitForSelector( '.amp-save-success-notice' );
+		await expect( page ).toMatchElement( '.amp-save-success-notice', { text: 'Saved' } );
 
-		await expect( page ).toMatchElement( 'html[amp]' );
+		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
 	} );
 } );
diff --git a/tests/e2e/specs/amp-onboarding/summary.js b/tests/e2e/specs/amp-onboarding/summary.js
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/tests/e2e/utils/onboarding-wizard-utils.js b/tests/e2e/utils/onboarding-wizard-utils.js
index bfb6b80d10e..79332de76e3 100644
--- a/tests/e2e/utils/onboarding-wizard-utils.js
+++ b/tests/e2e/utils/onboarding-wizard-utils.js
@@ -124,7 +124,10 @@ export async function cleanUpSettings() {
 	await page.waitForSelector( '.amp-settings-nav' );
 	await page.evaluate( async () => {
 		await Promise.all( [
-			wp.apiFetch( { path: '/wp/v2/users/me', method: 'POST', data: { amp_dev_tools_enabled: true } } ),
+			wp.apiFetch( { path: '/wp/v2/users/me', method: 'POST', data: {
+				amp_dev_tools_enabled: true,
+				amp_review_panel_dismissed_for_template_mode: '',
+			} } ),
 			wp.apiFetch( { path: '/amp/v1/options', method: 'POST', data: {
 				mobile_redirect: false,
 				reader_theme: 'legacy',

From 3f19a1602bcef2432956f3917302291c29a0bf3d Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 6 Sep 2021 18:46:07 +0200
Subject: [PATCH 31/68] Make Review panel dismissal state property optional

---
 assets/src/components/user-context-provider/index.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/src/components/user-context-provider/index.js b/assets/src/components/user-context-provider/index.js
index 1da94f592b8..2d7c78c96a9 100644
--- a/assets/src/components/user-context-provider/index.js
+++ b/assets/src/components/user-context-provider/index.js
@@ -91,7 +91,10 @@ export function UserContextProvider( {
 
 				setOriginalDeveloperToolsOption( fetchedUser[ userOptionDeveloperTools ] );
 				setDeveloperToolsOption( fetchedUser[ userOptionDeveloperTools ] );
-				setReviewPanelDismissedForTemplateMode( fetchedUser[ userFieldReviewPanelDismissedForTemplateMode ] );
+
+				if ( userFieldReviewPanelDismissedForTemplateMode ) {
+					setReviewPanelDismissedForTemplateMode( fetchedUser[ userFieldReviewPanelDismissedForTemplateMode ] );
+				}
 			} catch ( e ) {
 				setAsyncError( e );
 				return;
@@ -140,7 +143,7 @@ export function UserContextProvider( {
 	 * the REST endpoint to be saved.
 	 */
 	const saveReviewPanelDismissedForTemplateMode = useCallback( async ( templateMode ) => {
-		if ( savingReviewPanelDismissedForTemplateMode ) {
+		if ( savingReviewPanelDismissedForTemplateMode || ! userFieldReviewPanelDismissedForTemplateMode ) {
 			return;
 		}
 
@@ -194,7 +197,7 @@ export function UserContextProvider( {
 UserContextProvider.propTypes = {
 	children: PropTypes.any,
 	onlyFetchIfPluginIsConfigured: PropTypes.bool,
-	userFieldReviewPanelDismissedForTemplateMode: PropTypes.string.isRequired,
+	userFieldReviewPanelDismissedForTemplateMode: PropTypes.string,
 	userOptionDeveloperTools: PropTypes.string.isRequired,
 	usersResourceRestPath: PropTypes.string.isRequired,
 };

From af4ae2765b530aa41bea0ae1b668e9c80aa8bf86 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 6 Sep 2021 18:52:43 +0200
Subject: [PATCH 32/68] Clean up and add unit tests

---
 .../onboarding-wizard/pages/review/index.js   |  2 +-
 src/Admin/OnboardingWizardSubmenuPage.php     | 19 +++++----
 .../Admin/OnboardingWizardSubmenuPageTest.php | 42 +++++++++++++++++++
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/review/index.js
index 3633ea0d802..9e38c65f379 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/review/index.js
@@ -77,7 +77,7 @@ export function Review() {
 	const { canGoForward, setCanGoForward } = useContext( Navigation );
 	const { downloadedTheme, downloadingTheme, downloadingThemeError } = useContext( ReaderThemes );
 	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== 'standard' );
-	const [ previewPageType, setPreviewPageType ] = useState( PREVIEW_URLS[ Object.keys( PREVIEW_URLS )[ 0 ] ].type );
+	const [ previewPageType, setPreviewPageType ] = useState( Object.keys( PREVIEW_URLS )[ 0 ] );
 
 	/**
 	 * Allow the finish button to be enabled.
diff --git a/src/Admin/OnboardingWizardSubmenuPage.php b/src/Admin/OnboardingWizardSubmenuPage.php
index 8a1f70ddc6b..1415827046a 100644
--- a/src/Admin/OnboardingWizardSubmenuPage.php
+++ b/src/Admin/OnboardingWizardSubmenuPage.php
@@ -249,7 +249,7 @@ public function enqueue_assets( $hook_suffix ) {
 			'USING_FALLBACK_READER_THEME'        => $this->reader_themes->using_fallback_theme(),
 			'SETTINGS_LINK'                      => $amp_settings_link,
 			'OPTIONS_REST_PATH'                  => '/amp/v1/options',
-			'PREVIEW_URLS'                       => $this->get_preview_urls(),
+			'PREVIEW_URLS'                       => $this->get_preview_urls( $this->scannable_url_provider->get_urls() ),
 			'READER_THEMES_REST_PATH'            => '/amp/v1/reader-themes',
 			'UPDATES_NONCE'                      => wp_create_nonce( 'updates' ),
 			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
@@ -314,17 +314,22 @@ public function get_close_link() {
 	}
 
 	/**
-	 * Get a list of preview URLs.
+	 * Add AMP URLs to the list of scannable URLs.
+	 *
+	 * @since 2.2
+	 *
+	 * @param array $scannable_urls Array of scannable URLs.
 	 *
 	 * @return array Preview URLs.
 	 */
-	protected function get_preview_urls() {
-		$preview_urls   = [];
-		$scannable_urls = $this->scannable_url_provider->get_urls();
+	public function get_preview_urls( $scannable_urls ) {
+		$preview_urls = [];
 
 		foreach ( $scannable_urls as $scannable_url ) {
-			$preview_urls[ $scannable_url['type'] ]            = $scannable_url;
-			$preview_urls[ $scannable_url['type'] ]['amp_url'] = amp_add_paired_endpoint( $scannable_url['url'] );
+			$preview_urls[ $scannable_url['type'] ] = [
+				'url'     => $scannable_url['url'],
+				'amp_url' => amp_add_paired_endpoint( $scannable_url['url'] ),
+			];
 		}
 
 		return $preview_urls;
diff --git a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
index a520f2d6367..ecca5962c60 100644
--- a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
+++ b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
@@ -167,4 +167,46 @@ public function test_get_close_link( $referrer_link_callback, $expected_referrer
 			$this->onboarding_wizard_submenu_page->get_close_link()
 		);
 	}
+
+	/**
+	 * Tests OnboardingWizardSubmenuPage::get_preview_urls()
+	 *
+	 * @covers ::get_preview_urls()
+	 */
+	public function test_get_preview_urls() {
+		$scannable_urls = [
+			[
+				'type' => 'home',
+				'url'  => 'https://example.com',
+			],
+			[
+				'type' => 'page',
+				'url'  => 'https://example.com/sample-page',
+			],
+			[
+				'type' => 'search',
+				'url'  => 'https://example.com/?s=foobar',
+			],
+		];
+
+		$expected_urls = [
+			'home'   => [
+				'url'     => 'https://example.com',
+				'amp_url' => amp_add_paired_endpoint( 'https://example.com' ),
+			],
+			'page'   => [
+				'url'     => 'https://example.com/sample-page',
+				'amp_url' => amp_add_paired_endpoint( 'https://example.com/sample-page' ),
+			],
+			'search' => [
+				'url'     => 'https://example.com/?s=foobar',
+				'amp_url' => amp_add_paired_endpoint( 'https://example.com/?s=foobar' ),
+			],
+		];
+
+		$this->assertEquals(
+			$expected_urls,
+			$this->onboarding_wizard_submenu_page->get_preview_urls( $scannable_urls ),
+		);
+	}
 }

From 675d471d81454c66b43288695128cd555cec90cd Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 6 Sep 2021 18:53:09 +0200
Subject: [PATCH 33/68] Remove unused components

---
 assets/src/onboarding-wizard/pages/summary/reader.js       | 0
 assets/src/onboarding-wizard/pages/summary/transitional.js | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/reader.js
 delete mode 100644 assets/src/onboarding-wizard/pages/summary/transitional.js

diff --git a/assets/src/onboarding-wizard/pages/summary/reader.js b/assets/src/onboarding-wizard/pages/summary/reader.js
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/assets/src/onboarding-wizard/pages/summary/transitional.js b/assets/src/onboarding-wizard/pages/summary/transitional.js
deleted file mode 100644
index e69de29bb2d..00000000000

From 1a2b37e6bed3b4824acb2f7d11a48a2f03eef0be Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 7 Sep 2021 15:29:26 +0200
Subject: [PATCH 34/68] Update copy and styles

---
 .../onboarding-wizard/pages/review/style.scss |  4 ++
 .../pages/technical-background/index.js       | 60 ++++---------------
 .../pages/technical-background/style.css      | 25 ++++----
 .../onboarding-wizard/pages/welcome/index.js  | 22 ++-----
 assets/src/onboarding-wizard/style.css        |  4 ++
 5 files changed, 38 insertions(+), 77 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/review/style.scss
index 9af23551951..0da67731cb3 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/review/style.scss
@@ -108,4 +108,8 @@
 	padding: 3rem;
 	text-align: center;
 	width: 100%;
+
+	h1 {
+		margin-top: 0.67em;
+	}
 }
diff --git a/assets/src/onboarding-wizard/pages/technical-background/index.js b/assets/src/onboarding-wizard/pages/technical-background/index.js
index 289fdcab669..a167a22637b 100644
--- a/assets/src/onboarding-wizard/pages/technical-background/index.js
+++ b/assets/src/onboarding-wizard/pages/technical-background/index.js
@@ -48,47 +48,11 @@ export function TechnicalBackground() {
 	return (
 		<div className="technical-background">
 			<div className="technical-background__header">
-				<svg width="130" height="136" viewBox="0 0 130 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<g clipPath="url(#clip-technical-background)">
-						<path d="M84.847 103.785H30.847C28.047 103.785 25.847 101.585 25.847 98.7852V45.7852C25.847 42.9852 28.047 40.7852 30.847 40.7852H89.847C92.647 40.7852 94.847 42.9852 94.847 45.7852V93.7852C94.847 99.2852 90.347 103.785 84.847 103.785Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M73.847 89.1867H46.847C44.047 89.1867 41.847 86.9867 41.847 84.1867V60.3867C41.847 57.5867 44.047 55.3867 46.847 55.3867H73.847C76.647 55.3867 78.847 57.5867 78.847 60.3867V84.1867C78.847 86.9867 76.647 89.1867 73.847 89.1867Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M60.847 40.7852V19.7852" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M37.847 40.7852V11.7852" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M26.247 72.7852H7.84698" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M62.847 104.086V126.786" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M84.847 103.785V128.785" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M95.147 76.7852H107.847" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M94.847 51.7852H116.847" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M82.847 40.3852V29.7852" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M37.847 104.086V119.786" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M37.847 129.785C40.6084 129.785 42.847 127.547 42.847 124.785C42.847 122.024 40.6084 119.785 37.847 119.785C35.0856 119.785 32.847 122.024 32.847 124.785C32.847 127.547 35.0856 129.785 37.847 129.785Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M6.84698 110.785C9.60841 110.785 11.847 108.547 11.847 105.785C11.847 103.024 9.60841 100.785 6.84698 100.785C4.08556 100.785 1.84698 103.024 1.84698 105.785C1.84698 108.547 4.08556 110.785 6.84698 110.785Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M37.847 11.7852C40.6084 11.7852 42.847 9.54658 42.847 6.78516C42.847 4.02373 40.6084 1.78516 37.847 1.78516C35.0856 1.78516 32.847 4.02373 32.847 6.78516C32.847 9.54658 35.0856 11.7852 37.847 11.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M82.847 29.7852C85.6084 29.7852 87.847 27.5466 87.847 24.7852C87.847 22.0237 85.6084 19.7852 82.847 19.7852C80.0856 19.7852 77.847 22.0237 77.847 24.7852C77.847 27.5466 80.0856 29.7852 82.847 29.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M123.847 81.7852C126.608 81.7852 128.847 79.5466 128.847 76.7852C128.847 74.0237 126.608 71.7852 123.847 71.7852C121.086 71.7852 118.847 74.0237 118.847 76.7852C118.847 79.5466 121.086 81.7852 123.847 81.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M121.847 56.7852C124.608 56.7852 126.847 54.5466 126.847 51.7852C126.847 49.0237 124.608 46.7852 121.847 46.7852C119.086 46.7852 116.847 49.0237 116.847 51.7852C116.847 54.5466 119.086 56.7852 121.847 56.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M60.847 19.7852C62.5038 19.7852 63.847 18.442 63.847 16.7852C63.847 15.1283 62.5038 13.7852 60.847 13.7852C59.1901 13.7852 57.847 15.1283 57.847 16.7852C57.847 18.442 59.1901 19.7852 60.847 19.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M84.847 134.785C86.5038 134.785 87.847 133.442 87.847 131.785C87.847 130.128 86.5038 128.785 84.847 128.785C83.1901 128.785 81.847 130.128 81.847 131.785C81.847 133.442 83.1901 134.785 84.847 134.785Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M110.847 79.7852C112.504 79.7852 113.847 78.442 113.847 76.7852C113.847 75.1283 112.504 73.7852 110.847 73.7852C109.19 73.7852 107.847 75.1283 107.847 76.7852C107.847 78.442 109.19 79.7852 110.847 79.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M86.847 50.2852C87.9516 50.2852 88.847 49.3897 88.847 48.2852C88.847 47.1806 87.9516 46.2852 86.847 46.2852C85.7424 46.2852 84.847 47.1806 84.847 48.2852C84.847 49.3897 85.7424 50.2852 86.847 50.2852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M33.847 50.2852C34.9516 50.2852 35.847 49.3897 35.847 48.2852C35.847 47.1806 34.9516 46.2852 33.847 46.2852C32.7424 46.2852 31.847 47.1806 31.847 48.2852C31.847 49.3897 32.7424 50.2852 33.847 50.2852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M86.847 98.2852C87.9516 98.2852 88.847 97.3897 88.847 96.2852C88.847 95.1806 87.9516 94.2852 86.847 94.2852C85.7424 94.2852 84.847 95.1806 84.847 96.2852C84.847 97.3897 85.7424 98.2852 86.847 98.2852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M33.847 98.2852C34.9516 98.2852 35.847 97.3897 35.847 96.2852C35.847 95.1806 34.9516 94.2852 33.847 94.2852C32.7424 94.2852 31.847 95.1806 31.847 96.2852C31.847 97.3897 32.7424 98.2852 33.847 98.2852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M4.84698 75.7852C6.50384 75.7852 7.84698 74.442 7.84698 72.7852C7.84698 71.1283 6.50384 69.7852 4.84698 69.7852C3.19013 69.7852 1.84698 71.1283 1.84698 72.7852C1.84698 74.442 3.19013 75.7852 4.84698 75.7852Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M62.847 132.785C64.5038 132.785 65.847 131.442 65.847 129.785C65.847 128.128 64.5038 126.785 62.847 126.785C61.1901 126.785 59.847 128.128 59.847 129.785C59.847 131.442 61.1901 132.785 62.847 132.785Z" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-						<path d="M25.547 86.5859H13.847L6.74701 93.6859V100.686" stroke="#2459E7" strokeWidth="2" strokeMiterlimit="10" />
-					</g>
-					<defs>
-						<clipPath id="clip-technical-background">
-							<rect width="129" height="135" fill="white" transform="translate(0.846985 0.785156)" />
-						</clipPath>
-					</defs>
-				</svg>
 				<h1>
-					{ __( 'Are you technical?', 'amp' ) }
+					{ __( 'Technical background', 'amp' ) }
 				</h1>
 				<p>
-					{ __( 'In order to recommend the best plugin configuration options for your site, please indicate your level of technical expertise.', 'amp' ) }
+					{ __( 'To recommend the best AMP experience we’d like to know if you’re a more technical user, or less technical.', 'amp' ) }
 				</p>
 			</div>
 			<form>
@@ -106,13 +70,11 @@ export function TechnicalBackground() {
 						</div>
 						<User1 />
 						<div className="technical-background-option__description">
-							<div>
-								<h2>
-									{ __( 'Developer or technically savvy', 'amp' ) }
-								</h2>
-							</div>
+							<h2>
+								{ __( 'Developer or Technically Savvy', 'amp' ) }
+							</h2>
 							<p>
-								{ __( 'I am a “Developer or technically savvy” user. I am familiar with HTML, CSS, JavaScript, and PHP. I am able to do WordPress development, including making changes to themes and plugins, as well as assembling full WordPress sites out of plugins and theme components. I can understand and address AMP validation issues.', 'amp' ) }
+								{ __( 'I can do WordPress development such as making changes to themes and plugins; I can build full WordPress sites out of plugins and themes and can address configuration issues and understand.', 'amp' ) }
 							</p>
 						</div>
 					</label>
@@ -132,13 +94,11 @@ export function TechnicalBackground() {
 						</div>
 						<User2 />
 						<div className="technical-background-option__description">
-							<div>
-								<h2>
-									{ __( 'Non-technically savvy or wanting a simpler setup', 'amp' ) }
-								</h2>
-							</div>
+							<h2>
+								{ __( 'Non-technical or Wanting a simpler setup', 'amp' ) }
+							</h2>
 							<p>
-								{ __( 'I am not a developer and I am not responsible for configuring and fixing issues on my site. I am a site owner and/or content creator who wants to take advantage of AMP to build user-first sites.', 'amp' ) }
+								{ __( 'I am not responsible for configuring and fixing issues on my site. I am a site owner and/or content creator who wants to take advantage of AMP performance.', 'amp' ) }
 							</p>
 						</div>
 					</label>
diff --git a/assets/src/onboarding-wizard/pages/technical-background/style.css b/assets/src/onboarding-wizard/pages/technical-background/style.css
index 871a8e8a0dc..7cce0ecff1a 100644
--- a/assets/src/onboarding-wizard/pages/technical-background/style.css
+++ b/assets/src/onboarding-wizard/pages/technical-background/style.css
@@ -1,15 +1,12 @@
 .technical-background__header {
 	margin-bottom: 1.75rem;
 	padding-bottom: 1.75rem;
-	padding-top: 2.25rem;
-	text-align: center;
 	border-bottom: 2px solid #d3d9dd;
 }
 
 .technical-background__header p {
-	font-size: 15px;
-	margin: 0 auto;
-	max-width: 540px;
+	font-size: 14px;
+	margin: 0;
 }
 
 .technical-background-option-container {
@@ -23,6 +20,7 @@
 	flex-wrap: wrap;
 
 	@media screen and (min-width: 783px) {
+		align-items: center;
 		flex-wrap: nowrap;
 	}
 }
@@ -34,8 +32,12 @@
 .technical-background-option svg {
 	flex-shrink: 0;
 	height: auto;
-	margin-bottom: 1.5rem;
+	margin-bottom: 1rem;
 	width: 66px;
+
+	@media screen and (min-width: 783px) {
+		margin-bottom: 0;
+	}
 }
 
 .technical-background-option__description {
@@ -47,8 +49,11 @@
 }
 
 .technical-background-option__description h2 {
-	font-size: 1.5rem;
-	line-height: 1.3;
-	margin-top: 0;
-	margin-bottom: 0;
+	font-family: "Noto Sans", sans-serif;
+	font-size: 1rem;
+	line-height: 1.5;
+
+	@media screen and (max-width: 782px) {
+		margin-top: 0;
+	}
 }
diff --git a/assets/src/onboarding-wizard/pages/welcome/index.js b/assets/src/onboarding-wizard/pages/welcome/index.js
index 21b63e32cc8..71a42569470 100644
--- a/assets/src/onboarding-wizard/pages/welcome/index.js
+++ b/assets/src/onboarding-wizard/pages/welcome/index.js
@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import './style.css';
+import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';
 
 /**
  * Welcome screen.
@@ -72,7 +73,7 @@ export function Welcome() {
 							{ __( 'AMP and WordPress', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'AMP provides support for building beautiful, fast, engaging, secure, and accessible sites, and the AMP plugin makes it easy for you to take advantage of AMP on WordPress.', 'amp' ) }
+							{ __( 'AMP provides support for building beautiful, fast, engaging, secure, and accessible sites, and the AMP plugin makes it easy to take advantage of AMP on WordPress.', 'amp' ) }
 							{ ' ' }
 							<a href="https://amp-wp.org/" target="_blank" rel="noreferrer noopener">
 								{ __( 'Learn more.', 'amp' ) }
@@ -109,7 +110,7 @@ export function Welcome() {
 							{ __( 'Configure your site with AMP', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'Regardless of technical expertise, the onboarding flow guides you through the configuration of the plugin in a few easy steps.', 'amp' ) }
+							{ __( 'Regardless of technical expertise, the onboarding flow guides you through configuring the plugin in a few easy steps.', 'amp' ) }
 						</p>
 					</div>
 
@@ -117,27 +118,14 @@ export function Welcome() {
 
 				<div className={ 'welcome__section' }>
 					<div className="welcome__section-icon">
-						<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<g clipPath="url(#clip-welcome-4)">
-								<path d="M20.1356 37.9038C19.5937 37.9038 19.0518 37.6326 18.6 37.2719L3.33683 21.6476C-0.908174 17.2219 -0.908174 10.3582 3.33683 5.93257C7.4912 1.68757 14.3556 1.68757 18.6 5.75194C18.6906 5.84257 18.6906 5.84257 18.7806 5.93257L20.1356 7.37757L21.4906 5.93257C25.555 1.68757 32.4187 1.59757 36.6637 5.66132C36.7543 5.75194 36.8443 5.84194 36.935 5.93257C40.4575 9.54507 41.18 15.0544 38.6512 19.3894C38.38 19.8413 37.8381 19.9313 37.3868 19.6601C36.9356 19.3888 36.845 18.8469 37.0256 18.4857C39.1031 14.8732 38.6512 10.2669 35.5806 7.19632C32.1487 3.67382 26.4587 3.58382 22.9362 7.01569C22.8456 7.10632 22.7556 7.10632 22.665 7.19632L20.0456 9.81569L17.4262 7.19632C14.0843 3.67382 8.30433 3.58382 4.78183 7.01569C4.69183 7.10632 4.69183 7.19632 4.6012 7.19632C0.988701 10.8994 0.988701 16.6794 4.6012 20.3826L19.8643 36.0069C19.955 36.0976 20.2256 36.0976 20.3162 36.0069L20.5875 35.7357C20.9487 35.3744 21.4906 35.3744 21.8518 35.7357C22.2131 36.0969 22.2131 36.6388 21.8518 37.0001L21.4906 37.3613C21.2193 37.7226 20.6775 37.9032 20.1356 37.9032V37.9038Z" fill="#005AF0" />
-								<path d="M29.1668 37.4481C23.6574 37.4481 19.2318 33.0225 19.2318 27.5131C19.2318 22.0037 23.6574 17.5781 29.1668 17.5781C34.6762 17.5781 39.1018 22.0037 39.1018 27.5131C39.1018 33.0225 34.6762 37.4481 29.1668 37.4481ZM29.1668 19.385C24.6512 19.385 21.0387 22.9975 21.0387 27.5137C21.0387 32.03 24.6512 35.6419 29.1668 35.6419C33.6824 35.6419 37.2949 32.0294 37.2949 27.5137C37.2949 22.9981 33.6824 19.3856 29.1668 19.3856V19.385Z" fill="#005AF0" />
-								<path d="M32.7799 27.5167C32.5087 27.5167 32.3281 27.4261 32.1481 27.2455L29.1674 24.2648L26.1868 27.2455C25.8256 27.6067 25.2837 27.6067 24.9224 27.2455C24.5612 26.8842 24.5612 26.3423 24.9224 25.9811L28.5349 22.3686C28.8962 22.0073 29.4381 22.0073 29.7993 22.3686L33.4118 25.9811C33.7731 26.3423 33.7731 26.8842 33.4118 27.2455C33.2312 27.4261 33.0506 27.5167 32.7799 27.5167Z" fill="#005AF0" />
-								<path d="M29.1668 32.9344C28.6249 32.9344 28.2637 32.5731 28.2637 32.0312V23.9031C28.2637 23.3612 28.6249 23 29.1668 23C29.7087 23 30.0699 23.3612 30.0699 23.9031V32.0312C30.0699 32.5731 29.7087 32.9344 29.1668 32.9344Z" fill="#005AF0" />
-							</g>
-							<defs>
-								<clipPath id="clip-welcome-4">
-									<rect width="40" height="40" fill="white" transform="translate(0.153076 0.289062)" />
-								</clipPath>
-							</defs>
-						</svg>
-
+						<IconLaptopSearch width="42" />
 					</div>
 					<div className="welcome__section-description">
 						<h4>
 							{ __( 'Site review', 'amp' ) }
 						</h4>
 						<p>
-							{ __( 'At the end of the onboarding flow the AMP plugin is fully configured, and your site is ready to start serving great experiences to your users.', 'amp' ) }
+							{ __( 'At the end of onboarding the AMP plugin is fully configured, and your site is ready to start serving great experiences to your users.', 'amp' ) }
 						</p>
 					</div>
 
diff --git a/assets/src/onboarding-wizard/style.css b/assets/src/onboarding-wizard/style.css
index dc959ab1a58..5797e48cf77 100644
--- a/assets/src/onboarding-wizard/style.css
+++ b/assets/src/onboarding-wizard/style.css
@@ -89,6 +89,10 @@ body {
 
 .amp-onboarding-wizard-panel h1 {
 	line-height: 1.1;
+
+	@media screen and (min-width: 783px) {
+		margin-top: 0;
+	}
 }
 
 /**

From 4bfcd7ce71f621fc6158cdc4a945f6482861076e Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 7 Sep 2021 15:52:19 +0200
Subject: [PATCH 35/68] Rename "Review" step to "Done" in OW and update copy

---
 ...template-mode-override-context-provider.js |  2 +-
 .../pages/{review => done}/index.js           | 43 ++++++-----
 .../pages/{review => done}/preview.js         |  2 +-
 .../pages/{review => done}/saving.js          |  0
 .../pages/{review => done}/style.scss         | 20 ++---
 assets/src/onboarding-wizard/pages/index.js   |  8 +-
 tests/e2e/specs/amp-onboarding/done.js        | 76 +++++++++++++++++++
 tests/e2e/specs/amp-onboarding/review.js      | 76 -------------------
 tests/e2e/utils/onboarding-wizard-utils.js    |  2 +-
 9 files changed, 118 insertions(+), 111 deletions(-)
 rename assets/src/onboarding-wizard/pages/{review => done}/index.js (80%)
 rename assets/src/onboarding-wizard/pages/{review => done}/preview.js (96%)
 rename assets/src/onboarding-wizard/pages/{review => done}/saving.js (100%)
 rename assets/src/onboarding-wizard/pages/{review => done}/style.scss (85%)
 create mode 100644 tests/e2e/specs/amp-onboarding/done.js
 delete mode 100644 tests/e2e/specs/amp-onboarding/review.js

diff --git a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
index 3a8cbd7fd0d..447b78a815a 100644
--- a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
+++ b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
@@ -61,7 +61,7 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 	 * Override with transitional if the user has selected reader mode and their currently active theme is the same as the selected reader theme.
 	 */
 	useEffect( () => {
-		if ( 'review' === currentPageSlug && 'reader' === themeSupport && selectedTheme.name === currentTheme.name ) {
+		if ( 'done' === currentPageSlug && 'reader' === themeSupport && selectedTheme.name === currentTheme.name ) {
 			if ( ! readerModeWasOverridden ) {
 				updateOptions( { theme_support: 'transitional' } );
 				setReaderModeWasOverridden( true );
diff --git a/assets/src/onboarding-wizard/pages/review/index.js b/assets/src/onboarding-wizard/pages/done/index.js
similarity index 80%
rename from assets/src/onboarding-wizard/pages/review/index.js
rename to assets/src/onboarding-wizard/pages/done/index.js
index 9e38c65f379..a1dce69bdfa 100644
--- a/assets/src/onboarding-wizard/pages/review/index.js
+++ b/assets/src/onboarding-wizard/pages/done/index.js
@@ -23,7 +23,6 @@ import { Navigation } from '../../components/navigation-context-provider';
 import { Options } from '../../../components/options-context-provider';
 import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import { User } from '../../../components/user-context-provider';
-import { Phone } from '../../../components/phone';
 import { RadioGroup } from '../../../components/radio-group/radio-group';
 import { Selectable } from '../../../components/selectable';
 import { IconLaptopToggles } from '../../../components/svg/icon-laptop-toggles';
@@ -64,7 +63,7 @@ const previewPageOptions = Object.keys( PREVIEW_URLS ).map( ( page ) => ( {
 /**
  * Final screen, where data is saved.
  */
-export function Review() {
+export function Done() {
 	const {
 		didSaveOptions,
 		editedOptions: { theme_support: themeSupport, reader_theme: readerTheme },
@@ -114,12 +113,12 @@ export function Review() {
 	}
 
 	return (
-		<div className="review">
-			<h1 className="review__heading">
-				{ __( 'Your site is live!', 'amp' ) }
+		<div className="done">
+			<h1 className="done__heading">
+				{ __( 'Done', 'amp' ) }
 			</h1>
-			<div className="review__content review__content--primary">
-				<h2 className="review__icon-title">
+			<div className="done__content done__content--primary">
+				<h2 className="done__icon-title">
 					<IconLaptopSearch />
 					{ __( 'Review', 'amp' ) }
 				</h2>
@@ -133,27 +132,35 @@ export function Review() {
 						{ __( 'Because you selected a Reader theme that is the same as your site\'s active theme, your site has automatically been switched to Transitional template mode.', 'amp' ) }
 					</AMPNotice>
 				) }
+				<p>
+					{ __( 'Your site is ready to bring great experiences to your users!', 'amp' ) }
+				</p>
 				{ 'standard' === themeSupport && (
 					<p>
-						{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single, AMP, version of your site. Browse your site by navigating through the links below and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
+						{ __( 'In Standard mode there is a single AMP version of your site. Browse your site below to ensure it meets your expectations.', 'amp' ) }
 					</p>
 				) }
 				{ 'transitional' === themeSupport && (
-					<p>
-						{ __( 'Your site is ready to bring great experiences to your users! In Transitional mode the AMP and non-AMP versions of your site are served using your currently active theme. Switch between “AMP” and “non-AMP” to browse your site and ensure both versions meet your expectations.', 'amp' ) }
-					</p>
+					<>
+						<p>
+							{ __( 'In Transitional mode AMP and non-AMP versions of your site are served using your currently active theme.', 'amp' ) }
+						</p>
+						<p>
+							{ __( 'Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
+						</p>
+					</>
 				) }
 				{ 'reader' === themeSupport && (
 					<>
 						<p>
-							{ __( 'You’re ready to bring great experiences to your users! In Reader mode the AMP version is served using the Reader theme you have selected, while pages for non-AMP version of your site will be served using your primary theme.', 'amp' ) }
+							{ __( 'In Reader mode AMP is served using your selected Reader theme, and pages for your non-AMP site are served using your primary theme. Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
 						</p>
 						<p>
-							{ __( 'Toggle “AMP” and “Non-AMP” to browse your site and ensure both versions meet your expectations. As a last step, make sure you tailor the Reader theme as needed using the Customizer.', 'amp' ) }
+							{ __( 'As a last step, use the Customizer to tailor the Reader theme as needed.', 'amp' ) }
 						</p>
 					</>
 				) }
-				<Selectable className="review__links-container">
+				<Selectable className="done__links-container">
 					<RadioGroup
 						options={ previewPageOptions }
 						selected={ previewPageType }
@@ -161,7 +168,7 @@ export function Review() {
 					/>
 				</Selectable>
 			</div>
-			<div className="review__preview-container">
+			<div className="done__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
 						{ __( 'There was an error downloading your Reader theme. As a result, your site is currently using the legacy reader theme. Please install your chosen theme manually.', 'amp' ) }
@@ -177,12 +184,12 @@ export function Review() {
 				) }
 				<Preview url={ PREVIEW_URLS[ previewPageType ][ isPreviewingAMP ? 'amp_url' : 'url' ] } />
 			</div>
-			<div className="review__content review__content--secondary">
-				<h2 className="review__icon-title">
+			<div className="done__content done__content--secondary">
+				<h2 className="done__icon-title">
 					<IconLaptopToggles />
 					{ __( 'Need help?', 'amp' ) }
 				</h2>
-				<ul className="review__list">
+				<ul className="done__list">
 					{ /* dangerouslySetInnerHTML reason: Injection of a link. */ }
 					<li dangerouslySetInnerHTML={ {
 						__html: sprintf(
diff --git a/assets/src/onboarding-wizard/pages/review/preview.js b/assets/src/onboarding-wizard/pages/done/preview.js
similarity index 96%
rename from assets/src/onboarding-wizard/pages/review/preview.js
rename to assets/src/onboarding-wizard/pages/done/preview.js
index 83671f00ebd..fe7e7aefa30 100644
--- a/assets/src/onboarding-wizard/pages/review/preview.js
+++ b/assets/src/onboarding-wizard/pages/done/preview.js
@@ -48,7 +48,7 @@ export function Preview( { url } ) {
 	return (
 		<Phone isLoading={ isLoading }>
 			<iframe
-				className="review__preview-iframe"
+				className="done__preview-iframe"
 				src={ url }
 				ref={ iframeRef }
 				title={ __( 'Site preview', 'amp' ) }
diff --git a/assets/src/onboarding-wizard/pages/review/saving.js b/assets/src/onboarding-wizard/pages/done/saving.js
similarity index 100%
rename from assets/src/onboarding-wizard/pages/review/saving.js
rename to assets/src/onboarding-wizard/pages/done/saving.js
diff --git a/assets/src/onboarding-wizard/pages/review/style.scss b/assets/src/onboarding-wizard/pages/done/style.scss
similarity index 85%
rename from assets/src/onboarding-wizard/pages/review/style.scss
rename to assets/src/onboarding-wizard/pages/done/style.scss
index 0da67731cb3..bfbd44bc568 100644
--- a/assets/src/onboarding-wizard/pages/review/style.scss
+++ b/assets/src/onboarding-wizard/pages/done/style.scss
@@ -1,4 +1,4 @@
-.review {
+.done {
 	display: grid;
 	grid-gap: 15px 45px;
 
@@ -8,7 +8,7 @@
 	}
 }
 
-.review__heading {
+.done__heading {
 	margin: 0;
 
 	@media screen and (min-width: 1280px) {
@@ -16,28 +16,28 @@
 	}
 }
 
-.review__content {
+.done__content {
 
 	@media screen and (min-width: 1280px) {
 		grid-column: 1 / 2;
 	}
 }
 
-.review__content--primary {
+.done__content--primary {
 
 	@media screen and (min-width: 1280px) {
 		grid-row: 2 / 3;
 	}
 }
 
-.review__content--secondary {
+.done__content--secondary {
 
 	@media screen and (min-width: 1280px) {
 		grid-row: 3 / 4;
 	}
 }
 
-.review__icon-title {
+.done__icon-title {
 	align-items: center;
 	display: flex;
 	flex-flow: row nowrap;
@@ -51,19 +51,19 @@
 	}
 }
 
-.review__links-container {
+.done__links-container {
 	margin: 25px auto;
 	max-width: 400px;
 }
 
-.review__list {
+.done__list {
 	font-size: var(--amp-settings-font-size);
 	list-style: disc;
 	padding-left: 30px;
 }
 
 // Preview container.
-.review__preview-container {
+.done__preview-container {
 	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
@@ -92,7 +92,7 @@
 	}
 }
 
-.review__preview-iframe {
+.done__preview-iframe {
 	height: 610px;
 	width: 400px;
 
diff --git a/assets/src/onboarding-wizard/pages/index.js b/assets/src/onboarding-wizard/pages/index.js
index 72003a26c02..8df208b24ab 100644
--- a/assets/src/onboarding-wizard/pages/index.js
+++ b/assets/src/onboarding-wizard/pages/index.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { TechnicalBackground } from './technical-background';
 import { TemplateMode } from './template-mode';
 import { ChooseReaderTheme } from './choose-reader-theme';
-import { Review } from './review';
+import { Done } from './done';
 import { Welcome } from './welcome';
 
 /**
@@ -39,9 +39,9 @@ export const PAGES = [
 		PageComponent: ChooseReaderTheme,
 	},
 	{
-		slug: 'review',
-		title: __( 'Review', 'amp' ),
-		PageComponent: Review,
+		slug: 'done',
+		title: __( 'Done', 'amp' ),
+		PageComponent: Done,
 		showTitle: false,
 	},
 ];
diff --git a/tests/e2e/specs/amp-onboarding/done.js b/tests/e2e/specs/amp-onboarding/done.js
new file mode 100644
index 00000000000..940c7e182a8
--- /dev/null
+++ b/tests/e2e/specs/amp-onboarding/done.js
@@ -0,0 +1,76 @@
+
+/**
+ * Internal dependencies
+ */
+import { testCloseButton, cleanUpSettings, moveToDoneScreen } from '../../utils/onboarding-wizard-utils';
+
+async function testCommonDoneStepElements() {
+	await expect( page ).toMatchElement( 'h1', { text: 'Done' } );
+	await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
+	await expect( page ).toMatchElement( 'h2', { text: 'Need help?' } );
+
+	await expect( page ).toMatchElement( '.done__list' );
+	await expect( '.done__list li' ).countToBe( 3 );
+	await expect( page ).toMatchElement( '.done__list li', { text: /support forums/i } );
+	await expect( page ).toMatchElement( '.done__list li', { text: /different template mode/i } );
+	await expect( page ).toMatchElement( '.done__list li', { text: /how the PX plugin works/i } );
+
+	await expect( page ).toMatchElement( '.done__preview-iframe' );
+
+	const optionsCount = await page.$$eval( '.done__links-container input[type="radio"]', ( e ) => e.length );
+	await expect( optionsCount ).not.toBe( 0 );
+
+	const originalIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+	await expect( page ).toClick( '.done__links-container input[type="radio"]:not(:checked)' );
+	const updatedIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+	expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
+}
+
+describe( 'Done', () => {
+	afterEach( async () => {
+		await cleanUpSettings();
+	} );
+
+	it( 'renders standard mode site review screen', async () => {
+		await moveToDoneScreen( { mode: 'standard' } );
+
+		testCloseButton( { exists: false } );
+
+		await testCommonDoneStepElements();
+
+		await expect( page ).toMatchElement( 'p', { text: /Standard mode/i } );
+		await expect( '.done__preview-container input[type="checkbox"]' ).countToBe( 0 );
+	} );
+
+	it( 'renders transitional mode site review screen', async () => {
+		await moveToDoneScreen( { mode: 'transitional' } );
+
+		testCloseButton( { exists: false } );
+
+		await testCommonDoneStepElements();
+
+		await expect( page ).toMatchElement( 'p', { text: /Transitional mode/i } );
+		await expect( '.done__preview-container input[type="checkbox"]:checked' ).countToBe( 1 );
+
+		await page.waitForSelector( '.done__preview-iframe' );
+		const originalIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+		await expect( page ).toClick( '.done__preview-container input[type="checkbox"]' );
+		await page.waitForSelector( '.done__preview-iframe' );
+		const updatedIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+		expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
+
+		await expect( '.done__preview-container input[type="checkbox"]:not(:checked)' ).countToBe( 1 );
+	} );
+
+	it( 'renders reader mode site review screen', async () => {
+		await moveToDoneScreen( { mode: 'reader' } );
+
+		testCloseButton( { exists: true } );
+
+		await testCommonDoneStepElements();
+
+		await expect( page ).toMatchElement( 'p', { text: /Reader mode/i } );
+		await expect( page ).toMatchElement( '.done__preview-iframe' );
+		await expect( '.done__preview-container input[type="checkbox"]' ).countToBe( 1 );
+	} );
+} );
diff --git a/tests/e2e/specs/amp-onboarding/review.js b/tests/e2e/specs/amp-onboarding/review.js
deleted file mode 100644
index 538e38a9a18..00000000000
--- a/tests/e2e/specs/amp-onboarding/review.js
+++ /dev/null
@@ -1,76 +0,0 @@
-
-/**
- * Internal dependencies
- */
-import { testCloseButton, cleanUpSettings, moveToDoneScreen } from '../../utils/onboarding-wizard-utils';
-
-async function testCommonReviewStepElements() {
-	await expect( page ).toMatchElement( 'h1', { text: 'Your site is live!' } );
-	await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
-	await expect( page ).toMatchElement( 'h2', { text: 'Need help?' } );
-
-	await expect( page ).toMatchElement( '.review__list' );
-	await expect( '.review__list li' ).countToBe( 3 );
-	await expect( page ).toMatchElement( '.review__list li', { text: /support forums/i } );
-	await expect( page ).toMatchElement( '.review__list li', { text: /different template mode/i } );
-	await expect( page ).toMatchElement( '.review__list li', { text: /how the PX plugin works/i } );
-
-	await expect( page ).toMatchElement( '.review__preview-iframe' );
-
-	const optionsCount = await page.$$eval( '.review__links-container input[type="radio"]', ( e ) => e.length );
-	await expect( optionsCount ).not.toBe( 0 );
-
-	const originalIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
-	await expect( page ).toClick( '.review__links-container input[type="radio"]:not(:checked)' );
-	const updatedIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
-	expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
-}
-
-describe( 'Review', () => {
-	afterEach( async () => {
-		await cleanUpSettings();
-	} );
-
-	it( 'renders standard mode site review screen', async () => {
-		await moveToDoneScreen( { mode: 'standard' } );
-
-		testCloseButton( { exists: false } );
-
-		await testCommonReviewStepElements();
-
-		await expect( page ).toMatchElement( 'p', { text: /standard mode/i } );
-		await expect( '.review__preview-container input[type="checkbox"]' ).countToBe( 0 );
-	} );
-
-	it( 'renders transitional mode site review screen', async () => {
-		await moveToDoneScreen( { mode: 'transitional' } );
-
-		testCloseButton( { exists: false } );
-
-		await testCommonReviewStepElements();
-
-		await expect( page ).toMatchElement( 'p', { text: /transitional mode/i } );
-		await expect( '.review__preview-container input[type="checkbox"]:checked' ).countToBe( 1 );
-
-		await page.waitForSelector( '.review__preview-iframe' );
-		const originalIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
-		await expect( page ).toClick( '.review__preview-container input[type="checkbox"]' );
-		await page.waitForSelector( '.review__preview-iframe' );
-		const updatedIframeSrc = await page.$eval( '.review__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
-		expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
-
-		await expect( '.review__preview-container input[type="checkbox"]:not(:checked)' ).countToBe( 1 );
-	} );
-
-	it( 'renders reader mode site review screen', async () => {
-		await moveToDoneScreen( { mode: 'reader' } );
-
-		testCloseButton( { exists: true } );
-
-		await testCommonReviewStepElements();
-
-		await expect( page ).toMatchElement( 'p', { text: /reader mode/i } );
-		await expect( page ).toMatchElement( '.review__preview-iframe' );
-		await expect( '.review__preview-container input[type="checkbox"]' ).countToBe( 1 );
-	} );
-} );
diff --git a/tests/e2e/utils/onboarding-wizard-utils.js b/tests/e2e/utils/onboarding-wizard-utils.js
index 79332de76e3..e9f8286a262 100644
--- a/tests/e2e/utils/onboarding-wizard-utils.js
+++ b/tests/e2e/utils/onboarding-wizard-utils.js
@@ -78,7 +78,7 @@ export async function moveToDoneScreen( { technical = true, mode, readerTheme =
 
 	await clickNextButton();
 
-	await page.waitForSelector( '.review' );
+	await page.waitForSelector( '.done' );
 }
 
 export async function completeWizard( { technical = true, mode, readerTheme = 'legacy' } ) {

From cfed26725bf8b3bdca3243ade4c23354121688ca Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 7 Sep 2021 19:08:04 +0200
Subject: [PATCH 36/68] Fix E2E tests

---
 assets/src/components/svg/icon-laptop-search.js       | 11 +++++++++--
 assets/src/components/svg/icon-laptop-toggles.js      | 11 +++++++++--
 tests/e2e/specs/admin/amp-options.js                  |  4 ++--
 .../e2e/specs/amp-onboarding/technical-background.js  | 10 +++++-----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/assets/src/components/svg/icon-laptop-search.js b/assets/src/components/svg/icon-laptop-search.js
index eea39f45c06..875fcdd4e56 100644
--- a/assets/src/components/svg/icon-laptop-search.js
+++ b/assets/src/components/svg/icon-laptop-search.js
@@ -1,7 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
 export function IconLaptopSearch( props ) {
+	const clipPathId = `clip-icon-laptop-search-${ useInstanceId( IconLaptopSearch ) }`;
+
 	return (
 		<svg viewBox="0 0 42 29" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
-			<g clipPath="url(#clip0)">
+			<g clipPath={ `url(#${ clipPathId })` }>
 				<path d="M9.102 6.577l-.017 3.95a1.89 1.89 0 001.882 1.897l15.76.066a1.89 1.89 0 001.898-1.882l.016-3.95a1.89 1.89 0 00-1.882-1.897L11 4.694a1.89 1.89 0 00-1.897 1.883z" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
 				<path d="M13.14 9.2a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3zM9.13 18.03a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3z" fill="#005AF0" />
 				<path d="M12.24 16.88h4.63M19.83 16.88h1.79M14.46 12.22l7.98-4.97 4.36 5.22" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -12,7 +19,7 @@ export function IconLaptopSearch( props ) {
 				<path d="M32.11 15.98a2.999 2.999 0 01-2.93 3.8" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
 			</g>
 			<defs>
-				<clipPath id="clip0">
+				<clipPath id={ clipPathId }>
 					<path fill="#fff" d="M0 0h41.21v28.96H0z" />
 				</clipPath>
 			</defs>
diff --git a/assets/src/components/svg/icon-laptop-toggles.js b/assets/src/components/svg/icon-laptop-toggles.js
index b5697bdbb0d..bc06a62d5a4 100644
--- a/assets/src/components/svg/icon-laptop-toggles.js
+++ b/assets/src/components/svg/icon-laptop-toggles.js
@@ -1,7 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
 export function IconLaptopToggles( props ) {
+	const clipPathId = `clip-icon-laptop-toggles-${ useInstanceId( IconLaptopToggles ) }`;
+
 	return (
 		<svg viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
-			<g clipPath="url(#clip0)" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+			<g clipPath={ `url(#${ clipPathId })` } stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 				<path d="M4.46 21.02V3.91A2.92 2.92 0 017.38 1h24.4a2.91 2.91 0 012.91 2.91v17.64M25.15 21.76v.88h-11v-.88H1v2.09a2.24 2.24 0 002.28 2.25h32.79a2.24 2.24 0 002.21-2.25v-2.09H25.15zM11.2 5.79v11.6" />
 				<path d="M11.2 14.06a2.47 2.47 0 100-4.94 2.47 2.47 0 000 4.94z" fill="#fff" />
 				<path d="M19.58 5.79v11.6" />
@@ -10,7 +17,7 @@ export function IconLaptopToggles( props ) {
 				<path d="M27.95 16.06a2.47 2.47 0 100-4.94 2.47 2.47 0 000 4.94z" fill="#fff" />
 			</g>
 			<defs>
-				<clipPath id="clip0">
+				<clipPath id={ clipPathId }>
 					<path fill="#fff" d="M0 0h39.31v27.09H0z" />
 				</clipPath>
 			</defs>
diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index cecb10f597b..43748125277 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -121,7 +121,7 @@ describe( 'Saving', () => {
 		await expect( page ).toMatchElement( 'button[disabled]', { text: 'Save' } );
 
 		// Toggle transitional mode.
-		await expect( page ).toClick( '#template-mode-transitional' );
+		await clickMode( 'transitional' );
 
 		// Button should be enabled.
 		await expect( page ).toMatchElement( 'button:not([disabled])', { text: 'Save' } );
@@ -129,7 +129,7 @@ describe( 'Saving', () => {
 		await testSave();
 
 		// Success notice should disappear on additional change.
-		await expect( page ).toClick( '#template-mode-standard' );
+		await clickMode( 'standard' );
 		await expect( page ).not.toMatchElement( '.amp-save-success-notice', { text: 'Saved' } );
 
 		await testSave();
diff --git a/tests/e2e/specs/amp-onboarding/technical-background.js b/tests/e2e/specs/amp-onboarding/technical-background.js
index f94fb0bf0ee..5d8e1c2d2d3 100644
--- a/tests/e2e/specs/amp-onboarding/technical-background.js
+++ b/tests/e2e/specs/amp-onboarding/technical-background.js
@@ -7,9 +7,9 @@ describe( 'Technical background', () => {
 	it( 'main components exist', async () => {
 		await moveToTechnicalScreen();
 
-		await testTitle( { text: 'Are you technical?' } );
+		await testTitle( { text: 'Technical background' } );
 
-		await expect( page ).toMatchElement( 'p', { text: /^In order to/ } );
+		await expect( page ).toMatchElement( 'p', { text: /^To recommend/ } );
 
 		testNextButton( { text: 'Next', disabled: true } );
 		testPreviousButton( { text: 'Previous' } );
@@ -27,10 +27,10 @@ describe( 'Technical background', () => {
 		await page.waitForSelector( '#technical-background-enable' );
 
 		await expect( page ).toClick( '#technical-background-enable' );
-		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Developer or technically savvy' } );
+		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Developer or Technically Savvy' } );
 
-		await expect( page ).toClick( 'label', { text: /Non-technically savvy/ } );
-		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Non-technically savvy or wanting a simpler setup' } );
+		await expect( page ).toClick( 'label', { text: /Non-technical/ } );
+		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Non-technical or Wanting a simpler setup' } );
 
 		testNextButton( { text: 'Next', disabled: false } );
 	} );

From 1c64c948fd18c1683eeca1eaaade6d0da7dd6874 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 10:13:26 +0200
Subject: [PATCH 37/68] Ensure stroke width is proportional to icon size

---
 .../src/components/svg/icon-laptop-search.js  | 29 ++++++++++++++-----
 .../onboarding-wizard/pages/welcome/index.js  |  2 +-
 assets/src/settings-page/site-review.js       |  2 +-
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/assets/src/components/svg/icon-laptop-search.js b/assets/src/components/svg/icon-laptop-search.js
index 875fcdd4e56..2dd0d4307fa 100644
--- a/assets/src/components/svg/icon-laptop-search.js
+++ b/assets/src/components/svg/icon-laptop-search.js
@@ -1,22 +1,32 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
 
-export function IconLaptopSearch( props ) {
+const INTRINSIC_ICON_WIDTH = 42;
+const INTRINSIC_ICON_HEIGHT = 29;
+const INTRINSIC_STROKE_WIDTH = 2;
+
+export function IconLaptopSearch( { width = INTRINSIC_ICON_WIDTH, ...props } ) {
 	const clipPathId = `clip-icon-laptop-search-${ useInstanceId( IconLaptopSearch ) }`;
+	const strokeWidth = INTRINSIC_STROKE_WIDTH * ( INTRINSIC_ICON_WIDTH / width );
 
 	return (
-		<svg viewBox="0 0 42 29" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+		<svg viewBox={ `0 0 ${ INTRINSIC_ICON_WIDTH } ${ INTRINSIC_ICON_HEIGHT }` } fill="none" xmlns="http://www.w3.org/2000/svg" width={ width } { ...props }>
 			<g clipPath={ `url(#${ clipPathId })` }>
-				<path d="M9.102 6.577l-.017 3.95a1.89 1.89 0 001.882 1.897l15.76.066a1.89 1.89 0 001.898-1.882l.016-3.95a1.89 1.89 0 00-1.882-1.897L11 4.694a1.89 1.89 0 00-1.897 1.883z" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M9.102 6.577l-.017 3.95a1.89 1.89 0 001.882 1.897l15.76.066a1.89 1.89 0 001.898-1.882l.016-3.95a1.89 1.89 0 00-1.882-1.897L11 4.694a1.89 1.89 0 00-1.897 1.883z" stroke="#005AF0" strokeWidth={ strokeWidth } strokeLinecap="round" strokeLinejoin="round" />
 				<path d="M13.14 9.2a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3zM9.13 18.03a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3z" fill="#005AF0" />
-				<path d="M12.24 16.88h4.63M19.83 16.88h1.79M14.46 12.22l7.98-4.97 4.36 5.22" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M4.24 19.65V3.71A2.71 2.71 0 016.95 1h22.74a2.71 2.71 0 012.72 2.71v16.43M23.5 20.35v.82H13.24v-.82H1v2a2.1 2.1 0 002.09 2h30.59a2.1 2.1 0 002.09-2.09v-2l-12.27.09z" stroke="#005AF0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M12.24 16.88h4.63M19.83 16.88h1.79M14.46 12.22l7.98-4.97 4.36 5.22" stroke="#005AF0" strokeWidth={ strokeWidth } strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M4.24 19.65V3.71A2.71 2.71 0 016.95 1h22.74a2.71 2.71 0 012.72 2.71v16.43M23.5 20.35v.82H13.24v-.82H1v2a2.1 2.1 0 002.09 2h30.59a2.1 2.1 0 002.09-2.09v-2l-12.27.09z" stroke="#005AF0" strokeWidth={ strokeWidth } strokeLinecap="round" strokeLinejoin="round" />
 				<path d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z" fill="#fff" />
-				<path d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M29.37 23.51a6.4 6.4 0 100-12.8 6.4 6.4 0 000 12.8z" fill="#fff" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
-				<path d="M32.11 15.98a2.999 2.999 0 01-2.93 3.8" stroke="#005AF0" strokeWidth="2.08" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z" stroke="#005AF0" strokeWidth={ strokeWidth } strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M29.37 23.51a6.4 6.4 0 100-12.8 6.4 6.4 0 000 12.8z" fill="#fff" stroke="#005AF0" strokeWidth={ strokeWidth } strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M32.11 15.98a2.999 2.999 0 01-2.93 3.8" stroke="#005AF0" strokeWidth={ strokeWidth } strokeLinecap="round" strokeLinejoin="round" />
 			</g>
 			<defs>
 				<clipPath id={ clipPathId }>
@@ -26,3 +36,6 @@ export function IconLaptopSearch( props ) {
 		</svg>
 	);
 }
+IconLaptopSearch.propTypes = {
+	width: PropTypes.number,
+};
diff --git a/assets/src/onboarding-wizard/pages/welcome/index.js b/assets/src/onboarding-wizard/pages/welcome/index.js
index 71a42569470..da479e55915 100644
--- a/assets/src/onboarding-wizard/pages/welcome/index.js
+++ b/assets/src/onboarding-wizard/pages/welcome/index.js
@@ -118,7 +118,7 @@ export function Welcome() {
 
 				<div className={ 'welcome__section' }>
 					<div className="welcome__section-icon">
-						<IconLaptopSearch width="42" />
+						<IconLaptopSearch />
 					</div>
 					<div className="welcome__section-description">
 						<h4>
diff --git a/assets/src/settings-page/site-review.js b/assets/src/settings-page/site-review.js
index c1eb7e90a19..18c05baacbb 100644
--- a/assets/src/settings-page/site-review.js
+++ b/assets/src/settings-page/site-review.js
@@ -45,7 +45,7 @@ export function SiteReview() {
 		<AMPDrawer
 			heading={ (
 				<>
-					<IconLaptopSearch />
+					<IconLaptopSearch width={ 55 } />
 					{ __( 'Review', 'amp' ) }
 				</>
 			) }

From f3dc3db863eec52c9e217f030ce88df647bd329f Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 15:11:09 +0200
Subject: [PATCH 38/68] Convert `RadioGroup` into `NavMenu`

---
 assets/src/components/nav-menu/index.js       |  54 +++++++++
 assets/src/components/nav-menu/style.scss     |  64 +++++++++++
 .../test/__snapshots__/nav-menu.js.snap       |  34 ++++++
 .../src/components/nav-menu/test/nav-menu.js  | 101 +++++++++++++++++
 .../src/components/radio-group/radio-group.js |  64 -----------
 assets/src/components/radio-group/style.scss  |  34 ------
 .../test/__snapshots__/radio-group.js.snap    |  48 --------
 .../radio-group/test/radio-group.js           | 106 ------------------
 .../src/onboarding-wizard/pages/done/index.js |  58 +++-------
 .../pages/done/use-preview.js                 |  70 ++++++++++++
 tests/e2e/specs/amp-onboarding/done.js        |  12 +-
 11 files changed, 347 insertions(+), 298 deletions(-)
 create mode 100644 assets/src/components/nav-menu/index.js
 create mode 100644 assets/src/components/nav-menu/style.scss
 create mode 100644 assets/src/components/nav-menu/test/__snapshots__/nav-menu.js.snap
 create mode 100644 assets/src/components/nav-menu/test/nav-menu.js
 delete mode 100644 assets/src/components/radio-group/radio-group.js
 delete mode 100644 assets/src/components/radio-group/style.scss
 delete mode 100644 assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
 delete mode 100644 assets/src/components/radio-group/test/radio-group.js
 create mode 100644 assets/src/onboarding-wizard/pages/done/use-preview.js

diff --git a/assets/src/components/nav-menu/index.js b/assets/src/components/nav-menu/index.js
new file mode 100644
index 00000000000..c834aaed921
--- /dev/null
+++ b/assets/src/components/nav-menu/index.js
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { Selectable } from '../selectable';
+
+/**
+ * Nav menu.
+ *
+ * @param {Object}   props         Component props.
+ * @param {Array}    props.links   List of links.
+ * @param {Function} props.onClick Click handler that receives the original event and a clicked link object.
+ */
+export function NavMenu( { links = [], onClick } ) {
+	return (
+		<Selectable
+			ElementName="nav"
+			className="nav-menu"
+		>
+			<ul className="nav-menu__list">
+				{ links.map( ( link ) => (
+					<li key={ link.url } className="nav-menu__item">
+						<a
+							className={ classnames( 'nav-menu__link', {
+								'nav-menu__link--active': link.isActive,
+							} ) }
+							href={ link.url }
+							onClick={ ( event ) => onClick( event, link ) }
+						>
+							{ link.text }
+						</a>
+					</li>
+				) ) }
+			</ul>
+		</Selectable>
+	);
+}
+
+NavMenu.propTypes = {
+	links: PropTypes.arrayOf(
+		PropTypes.shape( {
+			url: PropTypes.string,
+			text: PropTypes.string,
+			isActive: PropTypes.bool,
+		} ),
+	),
+	onClick: PropTypes.func,
+};
diff --git a/assets/src/components/nav-menu/style.scss b/assets/src/components/nav-menu/style.scss
new file mode 100644
index 00000000000..b572044f35d
--- /dev/null
+++ b/assets/src/components/nav-menu/style.scss
@@ -0,0 +1,64 @@
+.nav-menu__item {
+	margin: 0;
+
+	& + & {
+		border-top: 1px solid var(--amp-settings-color-border);
+	}
+}
+
+.amp .nav-menu__link {
+	align-items: center;
+	color: var(--amp-settings-color-muted);
+	display: flex;
+	flex-flow: row nowrap;
+	font-size: 14px;
+	justify-content: space-between;
+	padding: 0.75rem 1rem;
+	text-decoration: none;
+	transition: background-color 120ms ease;
+
+	&.nav-menu__link--active,
+	&:hover {
+		background-color: var(--very-light-gray);
+		color: var(--amp-settings-color-muted);
+	}
+
+	&:focus {
+		box-shadow: none;
+	}
+
+	&::after {
+		border: 2px solid;
+		border-bottom: none;
+		border-left: none;
+		content: "";
+		display: block;
+		flex: 0 0 auto;
+		height: 8px;
+		margin-left: 1rem;
+		transform: rotateZ(45deg);
+		width: 8px;
+	}
+}
+
+// Nav menu as a selectable component.
+.nav-menu.selectable {
+	padding: 0;
+
+	.nav-menu__list {
+		margin: 0;
+		padding: 0 1rem;
+	}
+
+	.nav-menu__link {
+		margin: 0 -1rem;
+	}
+
+	.nav-menu__item:first-child .nav-menu__link {
+		border-radius: 8px 8px 0 0;
+	}
+
+	.nav-menu__item:last-child .nav-menu__link {
+		border-radius: 0 0 8px 8px;
+	}
+}
diff --git a/assets/src/components/nav-menu/test/__snapshots__/nav-menu.js.snap b/assets/src/components/nav-menu/test/__snapshots__/nav-menu.js.snap
new file mode 100644
index 00000000000..182c4042302
--- /dev/null
+++ b/assets/src/components/nav-menu/test/__snapshots__/nav-menu.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavMenu matches the snapshot 1`] = `
+<nav
+  className="nav-menu selectable selectable--left"
+>
+  <ul
+    className="nav-menu__list"
+  >
+    <li
+      className="nav-menu__item"
+    >
+      <a
+        className="nav-menu__link"
+        href="https://example.com/foo"
+        onClick={[Function]}
+      >
+        Foo
+      </a>
+    </li>
+    <li
+      className="nav-menu__item"
+    >
+      <a
+        className="nav-menu__link nav-menu__link--active"
+        href="https://example.com/bar"
+        onClick={[Function]}
+      >
+        Bar
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
diff --git a/assets/src/components/nav-menu/test/nav-menu.js b/assets/src/components/nav-menu/test/nav-menu.js
new file mode 100644
index 00000000000..2dc319378f6
--- /dev/null
+++ b/assets/src/components/nav-menu/test/nav-menu.js
@@ -0,0 +1,101 @@
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+import { create } from 'react-test-renderer';
+
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { NavMenu } from '../index';
+
+let container;
+
+const links = [
+	{
+		url: 'https://example.com/foo',
+		text: 'Foo',
+		isActive: false,
+	},
+	{
+		url: 'https://example.com/bar',
+		text: 'Bar',
+		isActive: true,
+	},
+];
+
+describe( 'NavMenu', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'matches the snapshot', () => {
+		const wrapper = create( <NavMenu links={ links } /> );
+
+		expect( wrapper.toJSON() ).toMatchSnapshot();
+	} );
+
+	it( 'renders a nav menu with a list of links', () => {
+		act( () => {
+			render(
+				<NavMenu links={ links } />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'nav' ) ).not.toBeNull();
+		expect( container.querySelector( 'ul' ) ).not.toBeNull();
+		expect( container.querySelectorAll( 'li' ) ).toHaveLength( 2 );
+	} );
+
+	it( 'contains correct links', () => {
+		act( () => {
+			render(
+				<NavMenu links={ links } />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'nav' ).textContent ).toBe( 'FooBar' );
+		expect( container.querySelectorAll( 'a' ) ).toHaveLength( 2 );
+		expect( container.querySelectorAll( 'a[href="https://example.com/foo"]' ) ).toHaveLength( 1 );
+		expect( container.querySelectorAll( 'a[href="https://example.com/bar"]' ) ).toHaveLength( 1 );
+		expect( container.querySelectorAll( 'a[class*="--active"]' ) ).toHaveLength( 1 );
+		expect( container.querySelector( 'a[class*="--active"]' ).getAttribute( 'href' ) ).toBe( 'https://example.com/bar' );
+	} );
+
+	it( 'calls the handler function on click', () => {
+		const handler = jest.fn();
+
+		act( () => {
+			render(
+				<NavMenu links={ links } onClick={ handler } />,
+				container,
+			);
+		} );
+
+		act(
+			() => {
+				container.querySelector( 'a' ).click();
+			},
+		);
+
+		expect( handler ).toHaveBeenCalledTimes( 1 );
+
+		const [ event, link ] = handler.mock.calls[ 0 ];
+		expect( event.type ).toBe( 'click' );
+		expect( link ).toBe( links[ 0 ] );
+	} );
+} );
diff --git a/assets/src/components/radio-group/radio-group.js b/assets/src/components/radio-group/radio-group.js
deleted file mode 100644
index 46268880b49..00000000000
--- a/assets/src/components/radio-group/radio-group.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * Radio group.
- *
- * @param {Object}   props              Component props.
- * @param {Array}    props.options      List of option values and titles.
- * @param {Function} props.onChange     Change handler.
- * @param {string}   props.selected     Currently selected option.
- */
-export function RadioGroup( { options = [], onChange, selected } ) {
-	const htmlIdPrefix = `radio-group-${ useInstanceId( RadioGroup ) }`;
-
-	return (
-		<form className="radio-group">
-			{ options.map( ( { value, title } ) => (
-				<label
-					key={ value }
-					className={ classnames( 'radio-group__label', {
-						'radio-group__label--selected': selected === value,
-					} ) }
-					htmlFor={ `${ htmlIdPrefix }-${ value }` }
-				>
-					<div className="radio-group__input">
-						<input
-							type="radio"
-							id={ `${ htmlIdPrefix }-${ value }` }
-							checked={ selected === value }
-							onChange={ () => onChange( value ) }
-						/>
-					</div>
-					<p className="radio-group__title">
-						{ title }
-					</p>
-				</label>
-			) ) }
-		</form>
-	);
-}
-
-RadioGroup.propTypes = {
-	options: PropTypes.arrayOf(
-		PropTypes.shape( {
-			value: PropTypes.string,
-			title: PropTypes.string,
-		} ),
-	),
-	onChange: PropTypes.func,
-	selected: PropTypes.string,
-};
diff --git a/assets/src/components/radio-group/style.scss b/assets/src/components/radio-group/style.scss
deleted file mode 100644
index 04712b046ed..00000000000
--- a/assets/src/components/radio-group/style.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.radio-group__label {
-	align-items: baseline;
-	color: var(--amp-settings-color-muted);
-	display: flex;
-	flex-flow: row nowrap;
-	padding: 15px 0 14px;
-
-	& + & {
-		border-top: 1px solid var(--amp-settings-color-border);
-	}
-
-	&:first-child {
-		padding-top: 0;
-	}
-
-	&:last-child {
-		padding-bottom: 0;
-	}
-
-	&.radio-group__label--selected,
-	&:hover {
-		color: var(--amp-settings-color-black);
-	}
-}
-
-.radio-group__input {
-	margin-right: 20px;
-}
-
-.radio-group__title.radio-group__title {
-	color: inherit;
-	font-size: 14px;
-	margin: 0;
-}
diff --git a/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap b/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
deleted file mode 100644
index 851ed644ec0..00000000000
--- a/assets/src/components/radio-group/test/__snapshots__/radio-group.js.snap
+++ /dev/null
@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RadioGroup matches the snapshot 1`] = `
-<form
-  className="radio-group"
->
-  <label
-    className="radio-group__label"
-    htmlFor="radio-group-0-a"
-  >
-    <div
-      className="radio-group__input"
-    >
-      <input
-        checked={false}
-        id="radio-group-0-a"
-        onChange={[Function]}
-        type="radio"
-      />
-    </div>
-    <p
-      className="radio-group__title"
-    >
-      Foo
-    </p>
-  </label>
-  <label
-    className="radio-group__label"
-    htmlFor="radio-group-0-b"
-  >
-    <div
-      className="radio-group__input"
-    >
-      <input
-        checked={false}
-        id="radio-group-0-b"
-        onChange={[Function]}
-        type="radio"
-      />
-    </div>
-    <p
-      className="radio-group__title"
-    >
-      Bar
-    </p>
-  </label>
-</form>
-`;
diff --git a/assets/src/components/radio-group/test/radio-group.js b/assets/src/components/radio-group/test/radio-group.js
deleted file mode 100644
index f17d8b4792e..00000000000
--- a/assets/src/components/radio-group/test/radio-group.js
+++ /dev/null
@@ -1,106 +0,0 @@
-
-/**
- * External dependencies
- */
-import { act } from 'react-dom/test-utils';
-import { create } from 'react-test-renderer';
-
-/**
- * WordPress dependencies
- */
-import { render } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { RadioGroup } from '../radio-group';
-
-let container;
-
-const options = [
-	{
-		value: 'a',
-		title: 'Foo',
-	},
-	{
-		value: 'b',
-		title: 'Bar',
-	},
-];
-
-describe( 'RadioGroup', () => {
-	beforeEach( () => {
-		container = document.createElement( 'div' );
-		document.body.appendChild( container );
-	} );
-
-	afterEach( () => {
-		document.body.removeChild( container );
-		container = null;
-	} );
-
-	it( 'matches the snapshot', () => {
-		const wrapper = create( <RadioGroup options={ options } /> );
-
-		expect( wrapper.toJSON() ).toMatchSnapshot();
-	} );
-
-	it( 'renders radio buttons in a form element', () => {
-		act( () => {
-			render(
-				<RadioGroup options={ options } />,
-				container,
-			);
-		} );
-
-		expect( container.querySelector( 'form' ) ).not.toBeNull();
-		expect( container.querySelectorAll( 'input[type="radio"]' ) ).toHaveLength( 2 );
-		expect( container.querySelector( 'input[type="radio"]:checked' ) ).toBeNull();
-		expect( container.querySelector( 'form' ).textContent ).toBe( 'FooBar' );
-	} );
-
-	it( 'renders label with a matching for attribute', () => {
-		act( () => {
-			render(
-				<RadioGroup options={ options } />,
-				container,
-			);
-		} );
-
-		const forAttribute = container.querySelector( 'label:first-child' ).getAttribute( 'for' );
-		expect( container.querySelector( 'label:first-child input' ).getAttribute( 'id' ) ).toBe( forAttribute );
-	} );
-
-	it( 'renders an initially selected option', () => {
-		act( () => {
-			render(
-				<RadioGroup options={ options } selected="b" />,
-				container,
-			);
-		} );
-
-		expect( container.querySelector( 'input[type="radio"]:checked' ) ).not.toBeNull();
-		expect( container.querySelector( 'input[type="radio"]:checked' ).closest( 'label' ).textContent ).toBe( 'Bar' );
-		expect( container.querySelector( 'input[type="radio"]:not(checked)' ) ).not.toBeNull();
-	} );
-
-	it( 'calls the handler function on selection change', () => {
-		const handler = jest.fn();
-
-		act( () => {
-			render(
-				<RadioGroup options={ options } onChange={ handler } />,
-				container,
-			);
-		} );
-
-		act(
-			() => {
-				container.querySelector( 'label' ).dispatchEvent( new global.MouseEvent( 'click' ) );
-			},
-		);
-
-		expect( handler ).toHaveBeenCalledTimes( 1 );
-		expect( handler ).toHaveBeenCalledWith( 'a' );
-	} );
-} );
diff --git a/assets/src/onboarding-wizard/pages/done/index.js b/assets/src/onboarding-wizard/pages/done/index.js
index a1dce69bdfa..3cbe463ae19 100644
--- a/assets/src/onboarding-wizard/pages/done/index.js
+++ b/assets/src/onboarding-wizard/pages/done/index.js
@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useContext, useEffect, useState } from '@wordpress/element';
+import { useContext, useEffect } from '@wordpress/element';
 
 /**
  * External dependencies
  */
-import { PREVIEW_URLS, SETTINGS_LINK } from 'amp-settings'; // From WP inline script.
+import { SETTINGS_LINK } from 'amp-settings'; // From WP inline script.
 
 /**
  * Internal dependencies
@@ -23,42 +23,13 @@ import { Navigation } from '../../components/navigation-context-provider';
 import { Options } from '../../../components/options-context-provider';
 import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 import { User } from '../../../components/user-context-provider';
-import { RadioGroup } from '../../../components/radio-group/radio-group';
-import { Selectable } from '../../../components/selectable';
 import { IconLaptopToggles } from '../../../components/svg/icon-laptop-toggles';
 import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';
 import { AMPSettingToggle } from '../../../components/amp-setting-toggle';
+import { NavMenu } from '../../../components/nav-menu';
 import { Preview } from './preview';
 import { Saving } from './saving';
-
-/**
- * Gets the title for the preview page selector.
- *
- * @param {string} page The page type.
- */
-function getPreviewPageTitle( page ) {
-	switch ( page ) {
-		case 'home':
-			return __( 'Homepage', 'amp' );
-
-		case 'author':
-			return __( 'Author page', 'amp' );
-
-		case 'date':
-			return __( 'Archive page', 'amp' );
-
-		case 'search':
-			return __( 'Search results', 'amp' );
-
-		default:
-			return `${ page.charAt( 0 ).toUpperCase() }${ page.slice( 1 ) }`;
-	}
-}
-
-const previewPageOptions = Object.keys( PREVIEW_URLS ).map( ( page ) => ( {
-	value: page,
-	title: getPreviewPageTitle( page ),
-} ) );
+import { usePreview } from './use-preview';
 
 /**
  * Final screen, where data is saved.
@@ -75,8 +46,7 @@ export function Done() {
 	const { didSaveDeveloperToolsOption, saveDeveloperToolsOption, savingDeveloperToolsOption } = useContext( User );
 	const { canGoForward, setCanGoForward } = useContext( Navigation );
 	const { downloadedTheme, downloadingTheme, downloadingThemeError } = useContext( ReaderThemes );
-	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== 'standard' );
-	const [ previewPageType, setPreviewPageType ] = useState( Object.keys( PREVIEW_URLS )[ 0 ] );
+	const { previewLinks, setActivePreviewLink, previewUrl, isPreviewingAMP, toggleIsPreviewingAMP } = usePreview();
 
 	/**
 	 * Allow the finish button to be enabled.
@@ -160,13 +130,15 @@ export function Done() {
 						</p>
 					</>
 				) }
-				<Selectable className="done__links-container">
-					<RadioGroup
-						options={ previewPageOptions }
-						selected={ previewPageType }
-						onChange={ setPreviewPageType }
+				<div className="done__links-container">
+					<NavMenu
+						links={ previewLinks }
+						onClick={ ( e, link ) => {
+							e.preventDefault();
+							setActivePreviewLink( link );
+						} }
 					/>
-				</Selectable>
+				</div>
 			</div>
 			<div className="done__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
@@ -178,11 +150,11 @@ export function Done() {
 					<AMPSettingToggle
 						text={ __( 'AMP', 'amp' ) }
 						checked={ isPreviewingAMP }
-						onChange={ () => setIsPreviewingAMP( ( mode ) => ! mode ) }
+						onChange={ toggleIsPreviewingAMP }
 						compact={ true }
 					/>
 				) }
-				<Preview url={ PREVIEW_URLS[ previewPageType ][ isPreviewingAMP ? 'amp_url' : 'url' ] } />
+				<Preview url={ previewUrl } />
 			</div>
 			<div className="done__content done__content--secondary">
 				<h2 className="done__icon-title">
diff --git a/assets/src/onboarding-wizard/pages/done/use-preview.js b/assets/src/onboarding-wizard/pages/done/use-preview.js
new file mode 100644
index 00000000000..4e9b4b4fff6
--- /dev/null
+++ b/assets/src/onboarding-wizard/pages/done/use-preview.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
+
+/**
+ * Internal dependencies
+ */
+import { Options } from '../../../components/options-context-provider';
+
+/**
+ * Gets the title for the preview page selector.
+ *
+ * @param {string} type The page type.
+ */
+function getTitle( type ) {
+	switch ( type ) {
+		case 'home':
+			return __( 'Homepage', 'amp' );
+
+		case 'author':
+			return __( 'Author page', 'amp' );
+
+		case 'date':
+			return __( 'Archive page', 'amp' );
+
+		case 'search':
+			return __( 'Search results', 'amp' );
+
+		default:
+			return `${ type.charAt( 0 ).toUpperCase() }${ type.slice( 1 ) }`;
+	}
+}
+
+const links = Object.keys( PREVIEW_URLS ).map( ( type ) => ( {
+	type,
+	text: getTitle( type ),
+	url: PREVIEW_URLS[ type ].url,
+	ampUrl: PREVIEW_URLS[ type ].amp_url,
+} ) );
+
+export function usePreview() {
+	const { editedOptions: { theme_support: themeSupport } } = useContext( Options );
+	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== 'standard' );
+	const [ previewedPageType, setPreviewedPageType ] = useState( links[ 0 ].type );
+
+	const toggleIsPreviewingAMP = () => setIsPreviewingAMP( ( mode ) => ! mode );
+	const setActivePreviewLink = ( link ) => setPreviewedPageType( link.type );
+
+	const previewLinks = useMemo( () => links.map( ( { url, ampUrl, type, ...rest } ) => ( {
+		...rest,
+		type,
+		url: isPreviewingAMP ? ampUrl : url,
+		isActive: type === previewedPageType,
+	} ) ), [ isPreviewingAMP, previewedPageType ] );
+
+	return {
+		previewLinks,
+		setActivePreviewLink,
+		previewUrl: PREVIEW_URLS[ previewedPageType ][ isPreviewingAMP ? 'amp_url' : 'url' ],
+		isPreviewingAMP,
+		toggleIsPreviewingAMP,
+	};
+}
diff --git a/tests/e2e/specs/amp-onboarding/done.js b/tests/e2e/specs/amp-onboarding/done.js
index 940c7e182a8..3a9b717bd03 100644
--- a/tests/e2e/specs/amp-onboarding/done.js
+++ b/tests/e2e/specs/amp-onboarding/done.js
@@ -17,12 +17,14 @@ async function testCommonDoneStepElements() {
 
 	await expect( page ).toMatchElement( '.done__preview-iframe' );
 
-	const optionsCount = await page.$$eval( '.done__links-container input[type="radio"]', ( e ) => e.length );
-	await expect( optionsCount ).not.toBe( 0 );
+	await expect( '.done__links-container a' ).not.countToBe( 0 );
 
 	const originalIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
-	await expect( page ).toClick( '.done__links-container input[type="radio"]:not(:checked)' );
+
+	await expect( page ).toClick( '.done__links-container a:not([class*="--active"])' );
+
 	const updatedIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+
 	expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
 }
 
@@ -54,9 +56,12 @@ describe( 'Done', () => {
 
 		await page.waitForSelector( '.done__preview-iframe' );
 		const originalIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+
 		await expect( page ).toClick( '.done__preview-container input[type="checkbox"]' );
+
 		await page.waitForSelector( '.done__preview-iframe' );
 		const updatedIframeSrc = await page.$eval( '.done__preview-iframe', ( e ) => e.getAttribute( 'src' ) );
+
 		expect( updatedIframeSrc ).not.toBe( originalIframeSrc );
 
 		await expect( '.done__preview-container input[type="checkbox"]:not(:checked)' ).countToBe( 1 );
@@ -71,6 +76,7 @@ describe( 'Done', () => {
 
 		await expect( page ).toMatchElement( 'p', { text: /Reader mode/i } );
 		await expect( page ).toMatchElement( '.done__preview-iframe' );
+
 		await expect( '.done__preview-container input[type="checkbox"]' ).countToBe( 1 );
 	} );
 } );

From 3319a690939996906a610728285a2115efec8d94 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 15:11:21 +0200
Subject: [PATCH 39/68] Update snapshots

---
 .../amp-setting-toggle/test/__snapshots__/index.js.snap       | 4 ++--
 .../dev-tools-toggle/test/__snapshots__/index.js.snap         | 2 +-
 .../test/__snapshots__/redirect-toggle.js.snap                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap b/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap
index bd283ecbcc5..7f847c97b14 100644
--- a/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap
+++ b/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
 
 exports[`AMPSettingToggle matches snapshots 1`] = `
 <div
-  className="amp-setting-toggle "
+  className="amp-setting-toggle"
 >
   <div
     className="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
@@ -49,7 +49,7 @@ exports[`AMPSettingToggle matches snapshots 1`] = `
 
 exports[`AMPSettingToggle matches snapshots 2`] = `
 <div
-  className="amp-setting-toggle "
+  className="amp-setting-toggle"
 >
   <div
     className="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
diff --git a/assets/src/components/dev-tools-toggle/test/__snapshots__/index.js.snap b/assets/src/components/dev-tools-toggle/test/__snapshots__/index.js.snap
index ef447da2e34..a504a367dc0 100644
--- a/assets/src/components/dev-tools-toggle/test/__snapshots__/index.js.snap
+++ b/assets/src/components/dev-tools-toggle/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
 
 exports[`DevToolsToggle matches snapshot 1`] = `
 <div
-  className="amp-setting-toggle "
+  className="amp-setting-toggle"
 >
   <div
     className="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
diff --git a/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap b/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap
index e1911a5ef7b..fe49df26ef0 100644
--- a/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap
+++ b/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap
@@ -2,7 +2,7 @@
 
 exports[`RedirectToggle matches snapshot 1`] = `
 <div
-  className="amp-setting-toggle "
+  className="amp-setting-toggle"
 >
   <div
     className="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"

From a981978de4c255687b7366441a482eeb873586b5 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 15:37:39 +0200
Subject: [PATCH 40/68] Update copy in Review panel on AMP Settings screen

---
 assets/src/settings-page/site-review.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/assets/src/settings-page/site-review.js b/assets/src/settings-page/site-review.js
index 18c05baacbb..630a81f1549 100644
--- a/assets/src/settings-page/site-review.js
+++ b/assets/src/settings-page/site-review.js
@@ -18,6 +18,7 @@ import { AMPDrawer } from '../components/amp-drawer';
 import { IconLaptopSearch } from '../components/svg/icon-laptop-search';
 import { Options } from '../components/options-context-provider';
 import { User } from '../components/user-context-provider';
+import { READER, STANDARD, TRANSITIONAL } from '../common/constants';
 
 /**
  * Review component on the settings screen.
@@ -39,7 +40,7 @@ export function SiteReview() {
 		return null;
 	}
 
-	const previewPermalink = 'standard' === themeSupport ? HOME_URL : pairedUrlExamples[ pairedUrlStructure ][ 0 ];
+	const previewPermalink = STANDARD === themeSupport ? HOME_URL : pairedUrlExamples[ pairedUrlStructure ][ 0 ];
 
 	return (
 		<AMPDrawer
@@ -55,8 +56,28 @@ export function SiteReview() {
 		>
 			<div className="settings-site-review">
 				<p>
-					{ __( 'Your site is ready to bring great experiences to your users! In Standard mode there is a single AMP version of your site. Browse your site and ensure the functionality and look-and-feel are as expected.', 'amp' ) }
+					{ __( 'Your site is ready to bring great experiences to your users!', 'amp' ) }
 				</p>
+				{ STANDARD === themeSupport && (
+					<p>
+						{ __( 'In Standard mode there is a single AMP version of your site. Browse your site below to ensure it meets your expectations.', 'amp' ) }
+					</p>
+				) }
+				{ TRANSITIONAL === themeSupport && (
+					<>
+						<p>
+							{ __( 'In Transitional mode AMP and non-AMP versions of your site are served using your currently active theme.', 'amp' ) }
+						</p>
+						<p>
+							{ __( 'Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
+						</p>
+					</>
+				) }
+				{ READER === themeSupport && (
+					<p>
+						{ __( 'In Reader mode AMP is served using your selected Reader theme, and pages for your non-AMP site are served using your primary theme. Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
+					</p>
+				) }
 				<h3 className="settings-site-review__heading">
 					<IconLaptopToggles />
 					{ __( 'Need help?', 'amp' ) }

From 208c7abe00c47aa62fb119b92b923c700e2a540b Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 15:46:49 +0200
Subject: [PATCH 41/68] Use constants for checking theme support / template
 mode

---
 .../template-mode-override-context-provider.js      |  3 ++-
 assets/src/onboarding-wizard/pages/done/index.js    | 13 +++++++------
 .../src/onboarding-wizard/pages/done/use-preview.js |  3 ++-
 .../pages/template-mode/screen-ui.js                | 12 ++++++------
 assets/src/settings-page/mobile-redirection.js      |  3 ++-
 assets/src/settings-page/paired-url-structure.js    |  3 ++-
 assets/src/settings-page/settings-footer.js         |  3 ++-
 assets/src/settings-page/supported-templates.js     |  3 ++-
 8 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
index 447b78a815a..d0909656741 100644
--- a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
+++ b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
@@ -14,6 +14,7 @@ import { createContext, useState, useEffect, useContext } from '@wordpress/eleme
 import { Options } from '../../components/options-context-provider';
 import { ReaderThemes } from '../../components/reader-themes-context-provider';
 import { User } from '../../components/user-context-provider';
+import { READER } from '../../common/constants';
 import { Navigation } from './navigation-context-provider';
 
 export const TemplateModeOverride = createContext();
@@ -61,7 +62,7 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 	 * Override with transitional if the user has selected reader mode and their currently active theme is the same as the selected reader theme.
 	 */
 	useEffect( () => {
-		if ( 'done' === currentPageSlug && 'reader' === themeSupport && selectedTheme.name === currentTheme.name ) {
+		if ( 'done' === currentPageSlug && READER === themeSupport && selectedTheme.name === currentTheme.name ) {
 			if ( ! readerModeWasOverridden ) {
 				updateOptions( { theme_support: 'transitional' } );
 				setReaderModeWasOverridden( true );
diff --git a/assets/src/onboarding-wizard/pages/done/index.js b/assets/src/onboarding-wizard/pages/done/index.js
index 3cbe463ae19..a15ed69e662 100644
--- a/assets/src/onboarding-wizard/pages/done/index.js
+++ b/assets/src/onboarding-wizard/pages/done/index.js
@@ -27,6 +27,7 @@ import { IconLaptopToggles } from '../../../components/svg/icon-laptop-toggles';
 import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';
 import { AMPSettingToggle } from '../../../components/amp-setting-toggle';
 import { NavMenu } from '../../../components/nav-menu';
+import { READER, STANDARD, TRANSITIONAL } from '../../../common/constants';
 import { Preview } from './preview';
 import { Saving } from './saving';
 import { usePreview } from './use-preview';
@@ -92,7 +93,7 @@ export function Done() {
 					<IconLaptopSearch />
 					{ __( 'Review', 'amp' ) }
 				</h2>
-				{ 'reader' === themeSupport && downloadedTheme === readerTheme && (
+				{ READER === themeSupport && downloadedTheme === readerTheme && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
 						{ __( 'Your Reader theme was automatically installed', 'amp' ) }
 					</AMPNotice>
@@ -105,12 +106,12 @@ export function Done() {
 				<p>
 					{ __( 'Your site is ready to bring great experiences to your users!', 'amp' ) }
 				</p>
-				{ 'standard' === themeSupport && (
+				{ STANDARD === themeSupport && (
 					<p>
 						{ __( 'In Standard mode there is a single AMP version of your site. Browse your site below to ensure it meets your expectations.', 'amp' ) }
 					</p>
 				) }
-				{ 'transitional' === themeSupport && (
+				{ TRANSITIONAL === themeSupport && (
 					<>
 						<p>
 							{ __( 'In Transitional mode AMP and non-AMP versions of your site are served using your currently active theme.', 'amp' ) }
@@ -120,7 +121,7 @@ export function Done() {
 						</p>
 					</>
 				) }
-				{ 'reader' === themeSupport && (
+				{ READER === themeSupport && (
 					<>
 						<p>
 							{ __( 'In Reader mode AMP is served using your selected Reader theme, and pages for your non-AMP site are served using your primary theme. Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
@@ -141,12 +142,12 @@ export function Done() {
 				</div>
 			</div>
 			<div className="done__preview-container">
-				{ 'reader' === themeSupport && downloadingThemeError && (
+				{ READER === themeSupport && downloadingThemeError && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
 						{ __( 'There was an error downloading your Reader theme. As a result, your site is currently using the legacy reader theme. Please install your chosen theme manually.', 'amp' ) }
 					</AMPNotice>
 				) }
-				{ 'standard' !== themeSupport && (
+				{ STANDARD !== themeSupport && (
 					<AMPSettingToggle
 						text={ __( 'AMP', 'amp' ) }
 						checked={ isPreviewingAMP }
diff --git a/assets/src/onboarding-wizard/pages/done/use-preview.js b/assets/src/onboarding-wizard/pages/done/use-preview.js
index 4e9b4b4fff6..8df33b155dd 100644
--- a/assets/src/onboarding-wizard/pages/done/use-preview.js
+++ b/assets/src/onboarding-wizard/pages/done/use-preview.js
@@ -13,6 +13,7 @@ import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
  * Internal dependencies
  */
 import { Options } from '../../../components/options-context-provider';
+import { STANDARD } from '../../../common/constants';
 
 /**
  * Gets the title for the preview page selector.
@@ -47,7 +48,7 @@ const links = Object.keys( PREVIEW_URLS ).map( ( type ) => ( {
 
 export function usePreview() {
 	const { editedOptions: { theme_support: themeSupport } } = useContext( Options );
-	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== 'standard' );
+	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== STANDARD );
 	const [ previewedPageType, setPreviewedPageType ] = useState( links[ 0 ].type );
 
 	const toggleIsPreviewingAMP = () => setIsPreviewingAMP( ( mode ) => ! mode );
diff --git a/assets/src/onboarding-wizard/pages/template-mode/screen-ui.js b/assets/src/onboarding-wizard/pages/template-mode/screen-ui.js
index 2d61957e55b..6f1541a1039 100644
--- a/assets/src/onboarding-wizard/pages/template-mode/screen-ui.js
+++ b/assets/src/onboarding-wizard/pages/template-mode/screen-ui.js
@@ -66,8 +66,8 @@ export function ScreenUI( { currentThemeIsAmongReaderThemes, developerToolsOptio
 				details={ sectionText.standard.details }
 				detailsUrl="https://amp-wp.org/documentation/getting-started/standard/"
 				initialOpen={ true }
-				mode="standard"
-				previouslySelected={ savedCurrentMode === 'standard' && technicalQuestionChanged && ! firstTimeInWizard }
+				mode={ STANDARD }
+				previouslySelected={ savedCurrentMode === STANDARD && technicalQuestionChanged && ! firstTimeInWizard }
 			>
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ getRecommendationLevelType( recommendationLevels[ STANDARD ] ) }>
 					{ sectionText.standard.compatibility }
@@ -78,8 +78,8 @@ export function ScreenUI( { currentThemeIsAmongReaderThemes, developerToolsOptio
 				details={ sectionText.transitional.details }
 				detailsUrl="https://amp-wp.org/documentation/getting-started/transitional/"
 				initialOpen={ true }
-				mode="transitional"
-				previouslySelected={ savedCurrentMode === 'transitional' && technicalQuestionChanged && ! firstTimeInWizard }
+				mode={ TRANSITIONAL }
+				previouslySelected={ savedCurrentMode === TRANSITIONAL && technicalQuestionChanged && ! firstTimeInWizard }
 			>
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ getRecommendationLevelType( recommendationLevels[ TRANSITIONAL ] ) }>
 					{ sectionText.transitional.compatibility }
@@ -90,8 +90,8 @@ export function ScreenUI( { currentThemeIsAmongReaderThemes, developerToolsOptio
 				details={ sectionText.reader.details }
 				detailsUrl="https://amp-wp.org/documentation/getting-started/reader/"
 				initialOpen={ true }
-				mode="reader"
-				previouslySelected={ savedCurrentMode === 'reader' && technicalQuestionChanged && ! firstTimeInWizard }
+				mode={ READER }
+				previouslySelected={ savedCurrentMode === READER && technicalQuestionChanged && ! firstTimeInWizard }
 			>
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ getRecommendationLevelType( recommendationLevels[ READER ] ) }>
 					{ sectionText.reader.compatibility }
diff --git a/assets/src/settings-page/mobile-redirection.js b/assets/src/settings-page/mobile-redirection.js
index 5d064d804b7..119528aa250 100644
--- a/assets/src/settings-page/mobile-redirection.js
+++ b/assets/src/settings-page/mobile-redirection.js
@@ -8,6 +8,7 @@ import { useContext } from '@wordpress/element';
  */
 import { RedirectToggle } from '../components/redirect-toggle';
 import { Options } from '../components/options-context-provider';
+import { STANDARD } from '../common/constants';
 
 /**
  * Mobile redirection section of the settings page.
@@ -18,7 +19,7 @@ export function MobileRedirection() {
 	const { theme_support: themeSupport } = editedOptions || {};
 
 	// Don't show if the mode is standard or the themeSupport is not yet set.
-	if ( ! themeSupport || 'standard' === themeSupport ) {
+	if ( ! themeSupport || STANDARD === themeSupport ) {
 		return null;
 	}
 
diff --git a/assets/src/settings-page/paired-url-structure.js b/assets/src/settings-page/paired-url-structure.js
index b17bb506db1..6bf966808f8 100644
--- a/assets/src/settings-page/paired-url-structure.js
+++ b/assets/src/settings-page/paired-url-structure.js
@@ -15,6 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Options } from '../components/options-context-provider';
 import { AMPDrawer } from '../components/amp-drawer';
 import { AMPNotice, NOTICE_TYPE_INFO, NOTICE_SIZE_LARGE } from '../components/amp-notice';
+import { STANDARD } from '../common/constants';
 
 /**
  * @typedef {{name: string, slug: string, type: string}} Source
@@ -295,7 +296,7 @@ export function PairedUrlStructure( { focusedSection } ) {
 	const { theme_support: themeSupport } = editedOptions || {};
 
 	// Don't show if the mode is standard or the themeSupport is not yet set.
-	if ( ! themeSupport || 'standard' === themeSupport ) {
+	if ( ! themeSupport || STANDARD === themeSupport ) {
 		return null;
 	}
 
diff --git a/assets/src/settings-page/settings-footer.js b/assets/src/settings-page/settings-footer.js
index 51a4e237771..f89b615aaca 100644
--- a/assets/src/settings-page/settings-footer.js
+++ b/assets/src/settings-page/settings-footer.js
@@ -21,6 +21,7 @@ import { Options } from '../components/options-context-provider';
 import { ReaderThemes } from '../components/reader-themes-context-provider';
 import { ErrorContext } from '../components/error-context-provider';
 import { User } from '../components/user-context-provider';
+import { READER } from '../common/constants';
 
 /**
  * Renders an error notice.
@@ -60,7 +61,7 @@ export function SettingsFooter() {
 
 	const hasChanges = hasOptionsChanges || hasDeveloperToolsOptionChange;
 	const isBusy = savingOptions || downloadingTheme || savingDeveloperToolsOption;
-	const disabled = ! hasChanges || isBusy || ! themeSupport || ( 'reader' === themeSupport && ! readerTheme );
+	const disabled = ! hasChanges || isBusy || ! themeSupport || ( READER === themeSupport && ! readerTheme );
 
 	return (
 		<section className="amp-settings-nav">
diff --git a/assets/src/settings-page/supported-templates.js b/assets/src/settings-page/supported-templates.js
index 840a46a60f8..f34eb33b1ac 100644
--- a/assets/src/settings-page/supported-templates.js
+++ b/assets/src/settings-page/supported-templates.js
@@ -15,6 +15,7 @@ import { CheckboxControl } from '@wordpress/components';
  */
 import { SupportedTemplatesToggle } from '../components/supported-templates-toggle';
 import { Options } from '../components/options-context-provider';
+import { READER } from '../common/constants';
 
 /**
  * Determine whether the supportable templates include the static front page.
@@ -231,7 +232,7 @@ export function SupportedTemplatesFieldset() {
 		reader_theme: readerTheme,
 	} = editedOptions || {};
 
-	if ( ( 'reader' === themeSupport && 'legacy' === readerTheme ) || ! supportableTemplates?.length ) {
+	if ( ( READER === themeSupport && 'legacy' === readerTheme ) || ! supportableTemplates?.length ) {
 		return null;
 	}
 

From b36aefb523648b11e01a05f3210eef2e0e7380cd Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 19:37:09 +0200
Subject: [PATCH 42/68] Fix PHPCS issues

---
 src/Admin/OptionsMenu.php                               | 4 ++--
 tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index 7a4ca17b102..a7037ddcba6 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -350,7 +350,7 @@ public function register_rest_field() {
 	 * @return string Whether the panel is dismissed, or null if the option has not been set.
 	 */
 	public function rest_get_review_panel_dismissed_for_template_mode( $user ) {
-		return get_user_meta( $user['id'] , self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );
+		return get_user_meta( $user['id'], self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );
 	}
 
 	/**
@@ -361,7 +361,7 @@ public function rest_get_review_panel_dismissed_for_template_mode( $user ) {
 	 *
 	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
 	 */
-	public function rest_update_review_panel_dismissed_for_template_mode( string $template_mode, WP_User $user ) {
+	public function rest_update_review_panel_dismissed_for_template_mode( $template_mode, $user ) {
 		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
 			return new WP_Error(
 				'amp_rest_cannot_edit_user',
diff --git a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
index ecca5962c60..daa4d4c48fd 100644
--- a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
+++ b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
@@ -206,7 +206,7 @@ public function test_get_preview_urls() {
 
 		$this->assertEquals(
 			$expected_urls,
-			$this->onboarding_wizard_submenu_page->get_preview_urls( $scannable_urls ),
+			$this->onboarding_wizard_submenu_page->get_preview_urls( $scannable_urls )
 		);
 	}
 }

From 09495f4babefb12b7459fdcd4201206460536b49 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 19:38:16 +0200
Subject: [PATCH 43/68] Fix stylelint issues

---
 assets/src/css/variables.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/css/variables.css b/assets/src/css/variables.css
index 60673f6039e..3c906a1e4dd 100644
--- a/assets/src/css/variables.css
+++ b/assets/src/css/variables.css
@@ -5,7 +5,7 @@
  */
 :root {
 	--amp-settings-color-black: #212121;
-	--amp-settings-color-dark-gray: #333333;
+	--amp-settings-color-dark-gray: #333;
 	--amp-settings-color-brand: #2459e7;
 	--amp-settings-color-muted: #48525c;
 	--gray: #6c7781;

From 1ad8ddaf26f646df561b0bff6f2b493312343136 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 22:19:35 +0200
Subject: [PATCH 44/68] Move User REST extension to separate file; add tests

---
 .phpstorm.meta.php                            |   1 +
 src/Admin/OptionsMenu.php                     |  85 +-----------
 src/Admin/UserRESTEndpointExtension.php       | 121 ++++++++++++++++++
 src/AmpWpPlugin.php                           |   1 +
 .../Admin/UserRESTEndpointExtensionTest.php   | 106 +++++++++++++++
 5 files changed, 232 insertions(+), 82 deletions(-)
 create mode 100644 src/Admin/UserRESTEndpointExtension.php
 create mode 100644 tests/php/src/Admin/UserRESTEndpointExtensionTest.php

diff --git a/.phpstorm.meta.php b/.phpstorm.meta.php
index eaab4582520..ed02ec2d0e7 100644
--- a/.phpstorm.meta.php
+++ b/.phpstorm.meta.php
@@ -17,6 +17,7 @@
 			'admin.paired_browsing'              => \AmpProject\AmpWP\Admin\PairedBrowsing::class,
 			'admin.plugin_row_meta'              => \AmpProject\AmpWP\Admin\PluginRowMeta::class,
 			'admin.polyfills'                    => \AmpProject\AmpWP\Admin\Polyfills::class,
+			'admin.user_rest_endpoint_extension' => \AmpProject\AmpWP\Admin\UserRESTEndpointExtension::class,
 			'admin.validation_counts'            => \AmpProject\AmpWP\Admin\ValidationCounts::class,
 			'amp_slug_customization_watcher'     => \AmpProject\AmpWP\AmpSlugCustomizationWatcher::class,
 			'background_task_deactivator'        => \AmpProject\AmpWP\BackgroundTask\BackgroundTaskDeactivator::class,
diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index a7037ddcba6..fb82c5ca1cd 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -16,9 +16,7 @@
 use AmpProject\AmpWP\Infrastructure\Registerable;
 use AmpProject\AmpWP\Infrastructure\Service;
 use AmpProject\AmpWP\LoadingError;
-use AmpProject\AmpWP\Option;
-use WP_Error;
-use WP_User;
+
 /**
  * OptionsMenu class.
  *
@@ -42,15 +40,6 @@ class OptionsMenu implements Conditional, Service, Registerable {
 	 */
 	const ICON_BASE64_SVG = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIiIGhlaWdodD0iNjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQxLjYyODg2NjcgMjguMTYxNDMzM2wtMTMuMDA0NSAyMS42NDIxMzM0aC0yLjM1NmwyLjMyOTEzMzMtMTQuMTAxOS03LjIxMzcuMDA5M3MtLjA2ODIuMDAyMDY2Ni0uMTAwMjMzMy4wMDIwNjY2Yy0uNjQ5OTY2NyAwLTEuMTc1OTMzNC0uNTI1OTY2Ni0xLjE3NTkzMzQtMS4xNzU5MzMzIDAtLjI3OS4yNTkzNjY3LS43NTEyMzMzLjI1OTM2NjctLjc1MTIzMzNsMTIuOTYyMTMzMy0yMS42MTYzTDM1LjcyNDQgMTIuMTc5OWwtMi4zODgwMzMzIDE0LjEyMzYgNy4yNTA5LS4wMDkzcy4wNzc1LS4wMDEwMzMzLjExNDctLjAwMTAzMzNjLjY0OTk2NjYgMCAxLjE3NTkzMzMuNTI1OTY2NiAxLjE3NTkzMzMgMS4xNzU5MzMzIDAgLjI2MzUtLjEwMzMzMzMuNDk0OTY2Ny0uMjUwMDY2Ny42OTEzbC4wMDEwMzM0LjAwMTAzMzN6TTMxIDBDMTMuODc4NyAwIDAgMTMuODc5NzMzMyAwIDMxYzAgMTcuMTIxMyAxMy44Nzg3IDMxIDMxIDMxIDE3LjEyMDI2NjcgMCAzMS0xMy44Nzg3IDMxLTMxQzYyIDEzLjg3OTczMzMgNDguMTIwMjY2NyAwIDMxIDB6IiBmaWxsPSIjYTBhNWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=';
 
-	/**
-	 * User meta key that stores a template mode for which the "Review" panel was dismissed.
-	 *
-	 * @since 2.2
-	 *
-	 * @var string
-	 */
-	const USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_dismissed_for_template_mode';
-
 	/**
 	 * GoogleFonts instance.
 	 *
@@ -84,7 +73,7 @@ class OptionsMenu implements Conditional, Service, Registerable {
 	 * @return bool Whether the conditional object is needed.
 	 */
 	public static function is_needed() {
-		if ( ! is_admin() && ! wp_is_json_request() ) {
+		if ( ! is_admin() ) {
 			return false;
 		}
 
@@ -123,8 +112,6 @@ public function register() {
 		$plugin_file = preg_replace( '#.+/(?=.+?/.+?)#', '', AMP__FILE__ );
 		add_filter( "plugin_action_links_{$plugin_file}", [ $this, 'add_plugin_action_links' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );
-
-		add_action( 'rest_api_init', [ $this, 'register_rest_field' ] );
 	}
 
 	/**
@@ -259,7 +246,7 @@ public function enqueue_assets( $hook_suffix ) {
 			'THEME_SUPPORTS_READER_MODE'                          => AMP_Theme_Support::supports_reader_mode(),
 			'UPDATES_NONCE'                                       => wp_create_nonce( 'updates' ),
 			'USER_FIELD_DEVELOPER_TOOLS_ENABLED'                  => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
-			'USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE' => self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
+			'USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE' => UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
 			'USERS_RESOURCE_REST_PATH'                            => '/wp/v2/users',
 		];
 
@@ -324,70 +311,4 @@ protected function add_preload_rest_paths() {
 			$this->rest_preloader->add_preloaded_path( $path );
 		}
 	}
-
-	/**
-	 * Register REST field for storing a template mode for which the "Review" panel was dismissed.
-	 */
-	public function register_rest_field() {
-		register_rest_field(
-			'user',
-			self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
-			[
-				'get_callback'    => [ $this, 'rest_get_review_panel_dismissed_for_template_mode' ],
-				'update_callback' => [ $this, 'rest_update_review_panel_dismissed_for_template_mode' ],
-				'schema'          => [
-					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
-					'type'        => [ 'string', 'bool' ],
-				],
-			]
-		);
-	}
-
-	/**
-	 * Provides a template mode for which the "Review" panel has been dismissed by a user.
-	 *
-	 * @param array $user Array of user data prepared for REST.
-	 * @return string Whether the panel is dismissed, or null if the option has not been set.
-	 */
-	public function rest_get_review_panel_dismissed_for_template_mode( $user ) {
-		return get_user_meta( $user['id'], self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );
-	}
-
-	/**
-	 * Updates a user's setting determining for which template mode the "Review" panel was dismissed.
-	 *
-	 * @param string  $template_mode Template mode.
-	 * @param WP_User $user          The WP user to update.
-	 *
-	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
-	 */
-	public function rest_update_review_panel_dismissed_for_template_mode( $template_mode, $user ) {
-		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
-			return new WP_Error(
-				'amp_rest_cannot_edit_user',
-				__( 'Sorry, the current user is not allowed to make this change.', 'amp' ),
-				[ 'status' => rest_authorization_required_code() ]
-			);
-		}
-
-		if ( empty( $template_mode ) ) {
-			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
-		}
-
-		$allowed_template_modes = [
-			AMP_Theme_Support::READER_MODE_SLUG,
-			AMP_Theme_Support::STANDARD_MODE_SLUG,
-			AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
-		];
-
-		if ( ! in_array( $template_mode, $allowed_template_modes, true ) ) {
-			return new WP_Error(
-				'amp_rest_incorrect_template_mode',
-				__( 'Sorry, the template mode is incorrect.', 'amp' ),
-				[ 'status' => 400 ]
-			);
-		}
-
-		return (bool) update_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $template_mode );
-	}
 }
diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
new file mode 100644
index 00000000000..eb661d8c9a0
--- /dev/null
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -0,0 +1,121 @@
+<?php
+/**
+ * Class UserRESTEndpointExtension
+ *
+ * @package Ampproject\Ampwp
+ */
+
+namespace AmpProject\AmpWP\Admin;
+
+use AMP_Theme_Support;
+use AmpProject\AmpWP\Infrastructure\Registerable;
+use AmpProject\AmpWP\Infrastructure\Service;
+use WP_Error;
+use WP_User;
+/**
+ * UserRESTEndpointExtension class.
+ *
+ * @since 2.2
+ * @internal
+ */
+class UserRESTEndpointExtension implements Service, Registerable {
+
+	/**
+	 * User meta key that stores a template mode for which the "Review" panel was dismissed.
+	 *
+	 * @since 2.2
+	 *
+	 * @var string
+	 */
+	const USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_dismissed_for_template_mode';
+
+	/**
+	 * Adds hooks.
+	 */
+	public function register() {
+		add_action( 'rest_api_init', [ $this, 'register_rest_field' ] );
+	}
+
+	/**
+	 * Register REST field for storing a template mode for which the "Review" panel was dismissed.
+	 */
+	public function register_rest_field() {
+		register_rest_field(
+			'user',
+			self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
+			[
+				'get_callback'    => [ $this, 'get_review_panel_dismissed_for_template_mode' ],
+				'update_callback' => [ $this, 'update_review_panel_dismissed_for_template_mode' ],
+				'schema'          => [
+					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
+					'type'        => [ 'string', 'bool' ],
+				],
+			]
+		);
+	}
+
+	/**
+	 * Provides a template mode for which the "Review" panel has been dismissed by a user.
+	 *
+	 * @param array $user Array of user data prepared for REST.
+	 *
+	 * @return string|WP_Error Template mode fir which the panel is dismissed, empty string if the option has not been set, or WP_Error if the current user lacks permission.
+	 */
+	public function get_review_panel_dismissed_for_template_mode( $user ) {
+		if ( $user['id'] !== wp_get_current_user()->ID ) {
+			return new WP_Error(
+				'amp_rest_cannot_get_other_user',
+				__( 'Sorry, the current user is not allowed to get this data about other user.', 'amp' ),
+				[ 'status' => rest_authorization_required_code() ]
+			);
+		}
+
+		return get_user_meta( $user['id'], self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );
+	}
+
+	/**
+	 * Updates a user's setting determining for which template mode the "Review" panel was dismissed.
+	 *
+	 * @param string  $template_mode Template mode.
+	 * @param WP_User $user          The WP user to update.
+	 *
+	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
+	 */
+	public function update_review_panel_dismissed_for_template_mode( $template_mode, $user ) {
+		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
+			return new WP_Error(
+				'amp_rest_cannot_edit_user',
+				__( 'Sorry, the current user is not allowed to make this change.', 'amp' ),
+				[ 'status' => rest_authorization_required_code() ]
+			);
+		}
+
+		if ( $user->ID !== wp_get_current_user()->ID ) {
+			return new WP_Error(
+				'amp_rest_cannot_edit_other_user',
+				__( 'Sorry, the user is not allowed to make this change for other user.', 'amp' ),
+				[ 'status' => rest_authorization_required_code() ]
+			);
+		}
+
+		if ( empty( $template_mode ) ) {
+			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
+		}
+
+		$allowed_template_modes = [
+			AMP_Theme_Support::READER_MODE_SLUG,
+			AMP_Theme_Support::STANDARD_MODE_SLUG,
+			AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
+		];
+
+		if ( ! in_array( $template_mode, $allowed_template_modes, true ) ) {
+			return new WP_Error(
+				'amp_rest_incorrect_template_mode',
+				__( 'Sorry, the template mode is incorrect.', 'amp' ),
+				[ 'status' => 400 ]
+			);
+		}
+
+		return (bool) update_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $template_mode );
+	}
+}
diff --git a/src/AmpWpPlugin.php b/src/AmpWpPlugin.php
index 03586ccecfb..776cf25b6e5 100644
--- a/src/AmpWpPlugin.php
+++ b/src/AmpWpPlugin.php
@@ -79,6 +79,7 @@ final class AmpWpPlugin extends ServiceBasedPlugin {
 		'admin.support_screen'               => Admin\SupportScreen::class,
 		'admin.support'                      => Admin\SupportLink::class,
 		'admin.polyfills'                    => Admin\Polyfills::class,
+		'admin.user_rest_endpoint_extension' => Admin\UserRESTEndpointExtension::class,
 		'admin.validation_counts'            => Admin\ValidationCounts::class,
 		'amp_slug_customization_watcher'     => AmpSlugCustomizationWatcher::class,
 		'background_task_deactivator'        => BackgroundTaskDeactivator::class,
diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
new file mode 100644
index 00000000000..ec083caf907
--- /dev/null
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -0,0 +1,106 @@
+<?php
+/**
+ * Tests for UserRESTEndpointExtension class.
+ *
+ * @package AMP
+ */
+
+namespace AmpProject\AmpWP\Tests\Admin;
+
+use AMP_Theme_Support;
+use AmpProject\AmpWP\Admin\UserRESTEndpointExtension;
+use AmpProject\AmpWP\Tests\TestCase;
+
+/**
+ * Tests for UserRESTEndpointExtension class.
+ *
+ * @group options-menu
+ *
+ * @since 2.2
+ *
+ * @coversDefaultClass \AmpProject\AmpWP\Admin\UserRESTEndpointExtension
+ */
+class UserRESTEndpointExtensionTest extends TestCase {
+
+	/**
+	 * Test instance.
+	 *
+	 * @var UserRESTEndpointExtension
+	 */
+	private $user_rest_endpoint_extension;
+
+	public function setUp() {
+		parent::setUp();
+
+		$this->user_rest_endpoint_extension = new UserRESTEndpointExtension();
+	}
+
+	/**
+	 * Tests UserRESTEndpointExtension::register
+	 *
+	 * @covers ::register
+	 */
+	public function test_register() {
+		$this->user_rest_endpoint_extension->register();
+		$this->assertEquals( 10, has_action( 'rest_api_init', [ $this->user_rest_endpoint_extension, 'register_rest_field' ] ) );
+	}
+
+	/**
+	 * Tests UserRESTEndpointExtension::register_rest_field
+	 *
+	 * @covers ::register_rest_field
+	 */
+	public function test_register_rest_field() {
+		global $wp_rest_additional_fields;
+
+		$this->user_rest_endpoint_extension->register_rest_field();
+
+		$this->assertArrayHasKey( 'amp_review_panel_dismissed_for_template_mode', $wp_rest_additional_fields['user'] );
+	}
+
+	/**
+	 * Tests UserRESTEndpointExtension::update_review_panel_dismissed_for_template_mode
+	 *
+	 * @covers ::update_review_panel_dismissed_for_template_mode
+	 */
+	public function test_update_review_panel_dismissed_for_template_mode() {
+		$admin_user  = self::factory()->user->create_and_get( [ 'role' => 'administrator' ] );
+		$editor_user = self::factory()->user->create_and_get( [ 'role' => 'editor' ] );
+
+		wp_set_current_user( $editor_user->ID );
+		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::STANDARD_MODE_SLUG, $editor_user ) );
+		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::STANDARD_MODE_SLUG, $admin_user ) );
+
+		wp_set_current_user( $admin_user->ID );
+		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $admin_user ) );
+		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $editor_user ) );
+
+		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
+		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( '', $admin_user ) );
+		$this->assertEmpty( get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
+
+		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( 'foobar', $editor_user ) );
+	}
+
+	/**
+	 * Tests UserRESTEndpointExtension::get_review_panel_dismissed_for_template_mode
+	 *
+	 * @covers ::get_review_panel_dismissed_for_template_mode
+	 */
+	public function test_get_review_panel_dismissed_for_template_mode() {
+		$admin_user  = self::factory()->user->create_and_get( [ 'role' => 'administrator' ] );
+		$editor_user = self::factory()->user->create_and_get( [ 'role' => 'editor' ] );
+
+		wp_set_current_user( $editor_user->ID );
+		$this->assertEmpty( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
+		$this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::STANDARD_MODE_SLUG, $editor_user );
+		$this->assertEquals( AMP_Theme_Support::STANDARD_MODE_SLUG, $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
+		$this->assertWPError( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+
+		wp_set_current_user( $admin_user->ID );
+		$this->assertEmpty( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+		$this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $admin_user );
+		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+		$this->assertWPError( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
+	}
+}

From dc0c57cc3ed2a3229cec27988385a4b07b0585f4 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 22:21:25 +0200
Subject: [PATCH 45/68] Ensure site Review panel shows up before proceeding

---
 tests/e2e/specs/admin/amp-options.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index 43748125277..b535d3c802f 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -196,6 +196,7 @@ describe( 'AMP settings screen Review panel', () => {
 		await page.waitForSelector( '.amp-save-success-notice' );
 		await expect( page ).toMatchElement( '.amp-save-success-notice', { text: 'Saved' } );
 
+		await page.waitForSelector( '.settings-site-review' );
 		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
 	} );
 } );

From f27c3f8ddb1549c7bbb4a8fc836ba2da4cb3995a Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 8 Sep 2021 22:26:08 +0200
Subject: [PATCH 46/68] Fix phpcs issues

---
 src/Admin/OptionsMenu.php               | 28 ++++++++++++-------------
 src/Admin/UserRESTEndpointExtension.php |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
index fb82c5ca1cd..5e3eeaf56d4 100644
--- a/src/Admin/OptionsMenu.php
+++ b/src/Admin/OptionsMenu.php
@@ -223,31 +223,31 @@ public function enqueue_assets( $hook_suffix ) {
 		$is_reader_theme = $this->reader_themes->theme_data_exists( get_stylesheet() );
 
 		$js_data = [
-			'AMP_QUERY_VAR'                                       => amp_get_slug(),
-			'CURRENT_THEME'                                       => [
+			'AMP_QUERY_VAR'                      => amp_get_slug(),
+			'CURRENT_THEME'                      => [
 				'name'            => $theme->get( 'Name' ),
 				'description'     => $theme->get( 'Description' ),
 				'is_reader_theme' => $is_reader_theme,
 				'screenshot'      => $theme->get_screenshot() ?: null,
 				'url'             => $theme->get( 'ThemeURI' ),
 			],
-			'HAS_DEPENDENCY_SUPPORT'                              => $this->dependency_support->has_support(),
-			'HOME_URL'                                            => home_url( '/' ),
-			'OPTIONS_REST_PATH'                                   => '/amp/v1/options',
-			'READER_THEMES_REST_PATH'                             => '/amp/v1/reader-themes',
-			'IS_CORE_THEME'                                       => in_array(
+			'HAS_DEPENDENCY_SUPPORT'             => $this->dependency_support->has_support(),
+			'HOME_URL'                           => home_url( '/' ),
+			'OPTIONS_REST_PATH'                  => '/amp/v1/options',
+			'READER_THEMES_REST_PATH'            => '/amp/v1/reader-themes',
+			'IS_CORE_THEME'                      => in_array(
 				get_stylesheet(),
 				AMP_Core_Theme_Sanitizer::get_supported_themes(),
 				true
 			),
-			'LEGACY_THEME_SLUG'                                   => ReaderThemes::DEFAULT_READER_THEME,
-			'USING_FALLBACK_READER_THEME'                         => $this->reader_themes->using_fallback_theme(),
-			'THEME_SUPPORT_ARGS'                                  => AMP_Theme_Support::get_theme_support_args(),
-			'THEME_SUPPORTS_READER_MODE'                          => AMP_Theme_Support::supports_reader_mode(),
-			'UPDATES_NONCE'                                       => wp_create_nonce( 'updates' ),
-			'USER_FIELD_DEVELOPER_TOOLS_ENABLED'                  => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
+			'LEGACY_THEME_SLUG'                  => ReaderThemes::DEFAULT_READER_THEME,
+			'USING_FALLBACK_READER_THEME'        => $this->reader_themes->using_fallback_theme(),
+			'THEME_SUPPORT_ARGS'                 => AMP_Theme_Support::get_theme_support_args(),
+			'THEME_SUPPORTS_READER_MODE'         => AMP_Theme_Support::supports_reader_mode(),
+			'UPDATES_NONCE'                      => wp_create_nonce( 'updates' ),
+			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
 			'USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE' => UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
-			'USERS_RESOURCE_REST_PATH'                            => '/wp/v2/users',
+			'USERS_RESOURCE_REST_PATH'           => '/wp/v2/users',
 		];
 
 		wp_add_inline_script(
diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index eb661d8c9a0..320abafe4e2 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -62,7 +62,7 @@ public function register_rest_field() {
 	 * @return string|WP_Error Template mode fir which the panel is dismissed, empty string if the option has not been set, or WP_Error if the current user lacks permission.
 	 */
 	public function get_review_panel_dismissed_for_template_mode( $user ) {
-		if ( $user['id'] !== wp_get_current_user()->ID ) {
+		if ( wp_get_current_user()->ID !== $user['id'] ) {
 			return new WP_Error(
 				'amp_rest_cannot_get_other_user',
 				__( 'Sorry, the current user is not allowed to get this data about other user.', 'amp' ),
@@ -90,7 +90,7 @@ public function update_review_panel_dismissed_for_template_mode( $template_mode,
 			);
 		}
 
-		if ( $user->ID !== wp_get_current_user()->ID ) {
+		if ( wp_get_current_user()->ID !== $user->ID ) {
 			return new WP_Error(
 				'amp_rest_cannot_edit_other_user',
 				__( 'Sorry, the user is not allowed to make this change for other user.', 'amp' ),

From 7a788c6b8c6e2a0fb5bda78c3026a43fd3944cf7 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 15 Sep 2021 14:18:47 +0200
Subject: [PATCH 47/68] Try fixing flaky E2E test

---
 tests/e2e/specs/admin/amp-options.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index b535d3c802f..5cb8df8db19 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -152,6 +152,7 @@ describe( 'AMP settings screen Review panel', () => {
 	}
 
 	it( 'is present on the page', async () => {
+		await page.waitForSelector( '.settings-site-review' );
 		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
 		await expect( page ).toMatchElement( 'h3', { text: 'Need help?' } );
 		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /support forums/i } );
@@ -188,6 +189,8 @@ describe( 'AMP settings screen Review panel', () => {
 		await expect( page ).not.toMatchElement( 'h2', { text: 'Review' } );
 
 		await visitAdminPage( 'admin.php', 'page=amp-options' );
+
+		await page.waitForSelector( '.settings-site-review' );
 		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
 
 		await clickMode( 'standard' );

From 58014971f46f76790568952062b47545e6c4d3ef Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Mon, 27 Sep 2021 17:36:34 -0700
Subject: [PATCH 48/68] Delete amp_review_panel_dismissed_for_template_mode
 usermeta at uninstall

---
 includes/uninstall-functions.php        | 9 +++++++--
 src/Admin/UserRESTEndpointExtension.php | 3 +--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/includes/uninstall-functions.php b/includes/uninstall-functions.php
index a42207e5d9a..2b8ff94ca6a 100644
--- a/includes/uninstall-functions.php
+++ b/includes/uninstall-functions.php
@@ -39,8 +39,13 @@ function delete_options() {
  * @internal
  */
 function delete_user_metadata() {
-
-	delete_metadata( 'user', 0, 'amp_dev_tools_enabled', '', true );
+	$keys = [
+		'amp_dev_tools_enabled',
+		'amp_review_panel_dismissed_for_template_mode',
+	];
+	foreach ( $keys as $key ) {
+		delete_metadata( 'user', 0, $key, '', true );
+	}
 }
 
 /**
diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 320abafe4e2..873a6b137e0 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -12,6 +12,7 @@
 use AmpProject\AmpWP\Infrastructure\Service;
 use WP_Error;
 use WP_User;
+
 /**
  * UserRESTEndpointExtension class.
  *
@@ -23,8 +24,6 @@ class UserRESTEndpointExtension implements Service, Registerable {
 	/**
 	 * User meta key that stores a template mode for which the "Review" panel was dismissed.
 	 *
-	 * @since 2.2
-	 *
 	 * @var string
 	 */
 	const USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_dismissed_for_template_mode';

From 4ea2c30c953eb2928c33c6ea890168f52dcf5fcf Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Mon, 27 Sep 2021 17:41:59 -0700
Subject: [PATCH 49/68] Let UserRESTEndpointExtension be Delayed

---
 src/Admin/UserRESTEndpointExtension.php            | 14 ++++++++++++--
 .../src/Admin/UserRESTEndpointExtensionTest.php    | 10 +++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 873a6b137e0..4f318d277e2 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -8,6 +8,7 @@
 namespace AmpProject\AmpWP\Admin;
 
 use AMP_Theme_Support;
+use AmpProject\AmpWP\Infrastructure\Delayed;
 use AmpProject\AmpWP\Infrastructure\Registerable;
 use AmpProject\AmpWP\Infrastructure\Service;
 use WP_Error;
@@ -19,7 +20,7 @@
  * @since 2.2
  * @internal
  */
-class UserRESTEndpointExtension implements Service, Registerable {
+class UserRESTEndpointExtension implements Service, Registerable, Delayed {
 
 	/**
 	 * User meta key that stores a template mode for which the "Review" panel was dismissed.
@@ -28,11 +29,20 @@ class UserRESTEndpointExtension implements Service, Registerable {
 	 */
 	const USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE = 'amp_review_panel_dismissed_for_template_mode';
 
+	/**
+	 * Get registration action.
+	 *
+	 * @return string
+	 */
+	public static function get_registration_action() {
+		return 'rest_api_init';
+	}
+
 	/**
 	 * Adds hooks.
 	 */
 	public function register() {
-		add_action( 'rest_api_init', [ $this, 'register_rest_field' ] );
+		$this->register_rest_field();
 	}
 
 	/**
diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index ec083caf907..abc20e37beb 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -38,22 +38,22 @@ public function setUp() {
 	/**
 	 * Tests UserRESTEndpointExtension::register
 	 *
-	 * @covers ::register
+	 * @covers ::get_registration_action
 	 */
-	public function test_register() {
-		$this->user_rest_endpoint_extension->register();
-		$this->assertEquals( 10, has_action( 'rest_api_init', [ $this->user_rest_endpoint_extension, 'register_rest_field' ] ) );
+	public function test_get_registration_action() {
+		$this->assertEquals( 'rest_api_init', UserRESTEndpointExtension::get_registration_action() );
 	}
 
 	/**
 	 * Tests UserRESTEndpointExtension::register_rest_field
 	 *
+	 * @covers ::register
 	 * @covers ::register_rest_field
 	 */
 	public function test_register_rest_field() {
 		global $wp_rest_additional_fields;
 
-		$this->user_rest_endpoint_extension->register_rest_field();
+		$this->user_rest_endpoint_extension->register();
 
 		$this->assertArrayHasKey( 'amp_review_panel_dismissed_for_template_mode', $wp_rest_additional_fields['user'] );
 	}

From 7359d5513ae0f61dd245f98325207c33eaa2fb08 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <delawski@users.noreply.github.com>
Date: Tue, 28 Sep 2021 14:23:50 +0200
Subject: [PATCH 50/68] Apply suggestions from code review

Co-authored-by: Weston Ruter <westonruter@google.com>
---
 assets/src/onboarding-wizard/pages/done/index.js          | 8 ++++----
 .../onboarding-wizard/pages/technical-background/index.js | 8 ++++----
 assets/src/settings-page/site-review.js                   | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/done/index.js b/assets/src/onboarding-wizard/pages/done/index.js
index a15ed69e662..0b8c443f9d8 100644
--- a/assets/src/onboarding-wizard/pages/done/index.js
+++ b/assets/src/onboarding-wizard/pages/done/index.js
@@ -108,7 +108,7 @@ export function Done() {
 				</p>
 				{ STANDARD === themeSupport && (
 					<p>
-						{ __( 'In Standard mode there is a single AMP version of your site. Browse your site below to ensure it meets your expectations.', 'amp' ) }
+						{ __( 'In Standard mode there is a single AMP version of your site. Browse your site here to ensure it meets your expectations.', 'amp' ) }
 					</p>
 				) }
 				{ TRANSITIONAL === themeSupport && (
@@ -117,14 +117,14 @@ export function Done() {
 							{ __( 'In Transitional mode AMP and non-AMP versions of your site are served using your currently active theme.', 'amp' ) }
 						</p>
 						<p>
-							{ __( 'Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
+							{ __( 'Browse your site here to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
 						</p>
 					</>
 				) }
 				{ READER === themeSupport && (
 					<>
 						<p>
-							{ __( 'In Reader mode AMP is served using your selected Reader theme, and pages for your non-AMP site are served using your primary theme. Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
+							{ __( 'In Reader mode AMP is served using your selected Reader theme, and pages for your non-AMP site are served using your primary theme. Browse your site here to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
 						</p>
 						<p>
 							{ __( 'As a last step, use the Customizer to tailor the Reader theme as needed.', 'amp' ) }
@@ -183,7 +183,7 @@ export function Done() {
 					<li dangerouslySetInnerHTML={ {
 						__html: sprintf(
 							/* translators: placeholder is a link to the plugin site. */
-							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the PX plugin works', 'amp' ),
+							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the AMP plugin works', 'amp' ),
 							'https://amp-wp.org/documentation/how-the-plugin-works/',
 						),
 					} } />
diff --git a/assets/src/onboarding-wizard/pages/technical-background/index.js b/assets/src/onboarding-wizard/pages/technical-background/index.js
index a167a22637b..dc7c49a0fe2 100644
--- a/assets/src/onboarding-wizard/pages/technical-background/index.js
+++ b/assets/src/onboarding-wizard/pages/technical-background/index.js
@@ -49,7 +49,7 @@ export function TechnicalBackground() {
 		<div className="technical-background">
 			<div className="technical-background__header">
 				<h1>
-					{ __( 'Technical background', 'amp' ) }
+					{ __( 'Technical Background', 'amp' ) }
 				</h1>
 				<p>
 					{ __( 'To recommend the best AMP experience we’d like to know if you’re a more technical user, or less technical.', 'amp' ) }
@@ -71,10 +71,10 @@ export function TechnicalBackground() {
 						<User1 />
 						<div className="technical-background-option__description">
 							<h2>
-								{ __( 'Developer or Technically Savvy', 'amp' ) }
+								{ __( 'Developer or technically savvy', 'amp' ) }
 							</h2>
 							<p>
-								{ __( 'I can do WordPress development such as making changes to themes and plugins; I can build full WordPress sites out of plugins and themes and can address configuration issues and understand.', 'amp' ) }
+								{ __( 'I can do WordPress development by modifying themes and plugins. I am familiar with PHP, JavaScript, HTML, and CSS.', 'amp' ) }
 							</p>
 						</div>
 					</label>
@@ -95,7 +95,7 @@ export function TechnicalBackground() {
 						<User2 />
 						<div className="technical-background-option__description">
 							<h2>
-								{ __( 'Non-technical or Wanting a simpler setup', 'amp' ) }
+								{ __( 'Non-technical or wanting a simpler setup', 'amp' ) }
 							</h2>
 							<p>
 								{ __( 'I am not responsible for configuring and fixing issues on my site. I am a site owner and/or content creator who wants to take advantage of AMP performance.', 'amp' ) }
diff --git a/assets/src/settings-page/site-review.js b/assets/src/settings-page/site-review.js
index 630a81f1549..b4bf410a69b 100644
--- a/assets/src/settings-page/site-review.js
+++ b/assets/src/settings-page/site-review.js
@@ -103,7 +103,7 @@ export function SiteReview() {
 					<li dangerouslySetInnerHTML={ {
 						__html: sprintf(
 							/* translators: placeholder is a link to the plugin site. */
-							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the PX plugin works', 'amp' ),
+							__( '<a href="%s" target="_blank" rel="noreferrer noopener">Learn more</a> how the AMP plugin works', 'amp' ),
 							'https://amp-wp.org/documentation/how-the-plugin-works/',
 						),
 					} } />

From 28b4583415c4ffde7fa489ec35156308df126695 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 15:08:41 +0200
Subject: [PATCH 51/68] Bump selector specificity so that no space is reserved
 for admin bar

---
 includes/amp-helper-functions.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/amp-helper-functions.php b/includes/amp-helper-functions.php
index d7fbc6f0d4a..8b55fc2189a 100644
--- a/includes/amp-helper-functions.php
+++ b/includes/amp-helper-functions.php
@@ -202,7 +202,7 @@ function() {
 					/** @type {HTMLStyleElement} */
 					const style = document.createElement( 'style' );
 					style.setAttribute( 'type', 'text/css' );
-					style.appendChild( document.createTextNode( 'html { margin-top: 0 !important; } #wpadminbar { display: none !important; }' ) );
+					style.appendChild( document.createTextNode( 'html:not(#_) { margin-top: 0 !important; } #wpadminbar { display: none !important; }' ) );
 					document.head.appendChild( style );
 
 					document.addEventListener( 'DOMContentLoaded', function() {

From 680b74677bbc0dc26018c0ba54765ea0ba54ee28 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 16:02:39 +0200
Subject: [PATCH 52/68] Use `enum` for review panel dismissed for template mode
 REST param values

---
 src/Admin/UserRESTEndpointExtension.php       | 25 +++++--------------
 .../Admin/UserRESTEndpointExtensionTest.php   |  2 --
 2 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 4f318d277e2..784f1c9cdc4 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -57,7 +57,12 @@ public function register_rest_field() {
 				'update_callback' => [ $this, 'update_review_panel_dismissed_for_template_mode' ],
 				'schema'          => [
 					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
-					'type'        => [ 'string', 'bool' ],
+					'type'        => 'string',
+					'enum'        => [
+						AMP_Theme_Support::READER_MODE_SLUG,
+						AMP_Theme_Support::STANDARD_MODE_SLUG,
+						AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
+					],
 				],
 			]
 		);
@@ -107,24 +112,6 @@ public function update_review_panel_dismissed_for_template_mode( $template_mode,
 			);
 		}
 
-		if ( empty( $template_mode ) ) {
-			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
-		}
-
-		$allowed_template_modes = [
-			AMP_Theme_Support::READER_MODE_SLUG,
-			AMP_Theme_Support::STANDARD_MODE_SLUG,
-			AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
-		];
-
-		if ( ! in_array( $template_mode, $allowed_template_modes, true ) ) {
-			return new WP_Error(
-				'amp_rest_incorrect_template_mode',
-				__( 'Sorry, the template mode is incorrect.', 'amp' ),
-				[ 'status' => 400 ]
-			);
-		}
-
 		return (bool) update_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $template_mode );
 	}
 }
diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index abc20e37beb..8a6cfbbb4f3 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -76,8 +76,6 @@ public function test_update_review_panel_dismissed_for_template_mode() {
 		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $editor_user ) );
 
 		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
-		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( '', $admin_user ) );
-		$this->assertEmpty( get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
 
 		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( 'foobar', $editor_user ) );
 	}

From eca7274164fcf0668d6aae8eb9a936958e7d60b0 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 18:14:17 +0200
Subject: [PATCH 53/68] Determine preview pages labels on backend

---
 assets/src/components/nav-menu/index.js       |  4 +-
 .../pages/done/use-preview.js                 | 42 +++----------------
 src/Admin/OnboardingWizardSubmenuPage.php     | 11 ++---
 src/Validation/ScannableURLProvider.php       | 36 +++++++++-------
 4 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/assets/src/components/nav-menu/index.js b/assets/src/components/nav-menu/index.js
index c834aaed921..c3bc52db955 100644
--- a/assets/src/components/nav-menu/index.js
+++ b/assets/src/components/nav-menu/index.js
@@ -33,7 +33,7 @@ export function NavMenu( { links = [], onClick } ) {
 							href={ link.url }
 							onClick={ ( event ) => onClick( event, link ) }
 						>
-							{ link.text }
+							{ link.label }
 						</a>
 					</li>
 				) ) }
@@ -46,7 +46,7 @@ NavMenu.propTypes = {
 	links: PropTypes.arrayOf(
 		PropTypes.shape( {
 			url: PropTypes.string,
-			text: PropTypes.string,
+			label: PropTypes.string,
 			isActive: PropTypes.bool,
 		} ),
 	),
diff --git a/assets/src/onboarding-wizard/pages/done/use-preview.js b/assets/src/onboarding-wizard/pages/done/use-preview.js
index 8df33b155dd..1c2fd67a066 100644
--- a/assets/src/onboarding-wizard/pages/done/use-preview.js
+++ b/assets/src/onboarding-wizard/pages/done/use-preview.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useContext, useMemo, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * External dependencies
@@ -15,56 +14,27 @@ import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
 import { Options } from '../../../components/options-context-provider';
 import { STANDARD } from '../../../common/constants';
 
-/**
- * Gets the title for the preview page selector.
- *
- * @param {string} type The page type.
- */
-function getTitle( type ) {
-	switch ( type ) {
-		case 'home':
-			return __( 'Homepage', 'amp' );
-
-		case 'author':
-			return __( 'Author page', 'amp' );
-
-		case 'date':
-			return __( 'Archive page', 'amp' );
-
-		case 'search':
-			return __( 'Search results', 'amp' );
-
-		default:
-			return `${ type.charAt( 0 ).toUpperCase() }${ type.slice( 1 ) }`;
-	}
-}
-
-const links = Object.keys( PREVIEW_URLS ).map( ( type ) => ( {
-	type,
-	text: getTitle( type ),
-	url: PREVIEW_URLS[ type ].url,
-	ampUrl: PREVIEW_URLS[ type ].amp_url,
-} ) );
-
 export function usePreview() {
 	const { editedOptions: { theme_support: themeSupport } } = useContext( Options );
 	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== STANDARD );
-	const [ previewedPageType, setPreviewedPageType ] = useState( links[ 0 ].type );
+	const [ previewedPageType, setPreviewedPageType ] = useState( PREVIEW_URLS[ 0 ].type );
 
 	const toggleIsPreviewingAMP = () => setIsPreviewingAMP( ( mode ) => ! mode );
 	const setActivePreviewLink = ( link ) => setPreviewedPageType( link.type );
 
-	const previewLinks = useMemo( () => links.map( ( { url, ampUrl, type, ...rest } ) => ( {
-		...rest,
+	const previewLinks = useMemo( () => PREVIEW_URLS.map( ( { url, amp_url: ampUrl, type, label } ) => ( {
 		type,
+		label,
 		url: isPreviewingAMP ? ampUrl : url,
 		isActive: type === previewedPageType,
 	} ) ), [ isPreviewingAMP, previewedPageType ] );
 
+	const previewUrl = useMemo( () => previewLinks.find( ( link ) => link.isActive )?.url, [ previewLinks ] );
+
 	return {
 		previewLinks,
 		setActivePreviewLink,
-		previewUrl: PREVIEW_URLS[ previewedPageType ][ isPreviewingAMP ? 'amp_url' : 'url' ],
+		previewUrl,
 		isPreviewingAMP,
 		toggleIsPreviewingAMP,
 	};
diff --git a/src/Admin/OnboardingWizardSubmenuPage.php b/src/Admin/OnboardingWizardSubmenuPage.php
index 1415827046a..bbb4a105a09 100644
--- a/src/Admin/OnboardingWizardSubmenuPage.php
+++ b/src/Admin/OnboardingWizardSubmenuPage.php
@@ -323,15 +323,10 @@ public function get_close_link() {
 	 * @return array Preview URLs.
 	 */
 	public function get_preview_urls( $scannable_urls ) {
-		$preview_urls = [];
-
-		foreach ( $scannable_urls as $scannable_url ) {
-			$preview_urls[ $scannable_url['type'] ] = [
-				'url'     => $scannable_url['url'],
-				'amp_url' => amp_add_paired_endpoint( $scannable_url['url'] ),
-			];
+		foreach ( $scannable_urls as &$scannable_url ) {
+			$scannable_url['amp_url'] = amp_add_paired_endpoint( $scannable_url['url'] );
 		}
 
-		return $preview_urls;
+		return $scannable_urls;
 	}
 }
diff --git a/src/Validation/ScannableURLProvider.php b/src/Validation/ScannableURLProvider.php
index ba98e22f16a..a680ff6ecb2 100644
--- a/src/Validation/ScannableURLProvider.php
+++ b/src/Validation/ScannableURLProvider.php
@@ -51,8 +51,9 @@ public function get_urls( $offset = 0 ) {
 		 */
 		if ( 'posts' === get_option( 'show_on_front' ) && $this->is_template_supported( 'is_home' ) ) {
 			$urls[] = [
-				'url'  => home_url( '/' ),
-				'type' => 'home',
+				'url'   => home_url( '/' ),
+				'type'  => 'home',
+				'label' => __( 'Homepage', 'amp' ),
 			];
 		}
 
@@ -69,9 +70,11 @@ public function get_urls( $offset = 0 ) {
 			foreach ( $public_post_types as $post_type ) {
 				$post_ids = $this->get_posts_that_support_amp( $this->get_posts_by_type( $post_type, $i, 1 ) );
 				if ( ! empty( $post_ids[0] ) ) {
-					$urls[] = [
-						'url'  => get_permalink( $post_ids[0] ),
-						'type' => $post_type,
+					$post_type_object = get_post_type_object( $post_type );
+					$urls[]           = [
+						'url'   => get_permalink( $post_ids[0] ),
+						'type'  => $post_type,
+						'label' => empty( $post_type_object->labels->name ) ? $post_type : $post_type_object->labels->name,
 					];
 				}
 			}
@@ -80,9 +83,11 @@ public function get_urls( $offset = 0 ) {
 				$taxonomy_links = $this->get_taxonomy_links( $taxonomy, $i, 1 );
 				$link           = reset( $taxonomy_links );
 				if ( ! empty( $link ) ) {
-					$urls[] = [
-						'url'  => $link,
-						'type' => $taxonomy,
+					$taxonomy_object = get_taxonomy( $taxonomy );
+					$urls[]          = [
+						'url'   => $link,
+						'type'  => $taxonomy,
+						'label' => empty( $taxonomy_object->labels->name ) ? $taxonomy : $taxonomy_object->labels->name,
 					];
 				}
 			}
@@ -90,8 +95,9 @@ public function get_urls( $offset = 0 ) {
 			$author_page_urls = $this->get_author_page_urls( $i, 1 );
 			if ( ! empty( $author_page_urls[0] ) ) {
 				$urls[] = [
-					'url'  => $author_page_urls[0],
-					'type' => 'author',
+					'url'   => $author_page_urls[0],
+					'type'  => 'author',
+					'label' => __( 'Author Archive', 'amp' ),
 				];
 			}
 		}
@@ -100,15 +106,17 @@ public function get_urls( $offset = 0 ) {
 		$url = $this->get_date_page();
 		if ( $url ) {
 			$urls[] = [
-				'url'  => $url,
-				'type' => 'date',
+				'url'   => $url,
+				'type'  => 'date',
+				'label' => __( 'Date Archive', 'amp' ),
 			];
 		}
 		$url = $this->get_search_page();
 		if ( $url ) {
 			$urls[] = [
-				'url'  => $url,
-				'type' => 'search',
+				'url'   => $url,
+				'type'  => 'search',
+				'label' => __( 'Search Results Page', 'amp' ),
 			];
 		}
 

From 8797e8d2a73cf8afc0cf45f5eef0adaacac57f7c Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 18:58:33 +0200
Subject: [PATCH 54/68] Bring back ability to clear review panel dismissed for
 template mode flag

---
 src/Admin/UserRESTEndpointExtension.php               | 5 +++++
 tests/php/src/Admin/UserRESTEndpointExtensionTest.php | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 784f1c9cdc4..23cf5394702 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -59,6 +59,7 @@ public function register_rest_field() {
 					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
 					'type'        => 'string',
 					'enum'        => [
+						null,
 						AMP_Theme_Support::READER_MODE_SLUG,
 						AMP_Theme_Support::STANDARD_MODE_SLUG,
 						AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
@@ -112,6 +113,10 @@ public function update_review_panel_dismissed_for_template_mode( $template_mode,
 			);
 		}
 
+		if ( empty( $template_mode ) ) {
+			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
+		}
+
 		return (bool) update_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $template_mode );
 	}
 }
diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index 8a6cfbbb4f3..a9b58aad4d4 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -76,6 +76,8 @@ public function test_update_review_panel_dismissed_for_template_mode() {
 		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $editor_user ) );
 
 		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
+		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( null, $admin_user ) );
+		$this->assertEmpty( get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
 
 		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( 'foobar', $editor_user ) );
 	}

From 19fccbf059cd3275540bfec4308e22d733233c04 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 19:02:19 +0200
Subject: [PATCH 55/68] Update E2E tests

---
 tests/e2e/specs/admin/amp-options.js                   | 2 +-
 tests/e2e/specs/amp-onboarding/done.js                 | 2 +-
 tests/e2e/specs/amp-onboarding/technical-background.js | 6 +++---
 tests/e2e/utils/onboarding-wizard-utils.js             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index 5cb8df8db19..d32d97c0fd1 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -157,7 +157,7 @@ describe( 'AMP settings screen Review panel', () => {
 		await expect( page ).toMatchElement( 'h3', { text: 'Need help?' } );
 		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /support forums/i } );
 		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /different template mode/i } );
-		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /how the PX plugin works/i } );
+		await expect( page ).toMatchElement( '.settings-site-review__list li', { text: /how the AMP plugin works/i } );
 	} );
 
 	it( 'button redirects to an AMP page in transitional mode', async () => {
diff --git a/tests/e2e/specs/amp-onboarding/done.js b/tests/e2e/specs/amp-onboarding/done.js
index 3a9b717bd03..a053be31d16 100644
--- a/tests/e2e/specs/amp-onboarding/done.js
+++ b/tests/e2e/specs/amp-onboarding/done.js
@@ -13,7 +13,7 @@ async function testCommonDoneStepElements() {
 	await expect( '.done__list li' ).countToBe( 3 );
 	await expect( page ).toMatchElement( '.done__list li', { text: /support forums/i } );
 	await expect( page ).toMatchElement( '.done__list li', { text: /different template mode/i } );
-	await expect( page ).toMatchElement( '.done__list li', { text: /how the PX plugin works/i } );
+	await expect( page ).toMatchElement( '.done__list li', { text: /how the AMP plugin works/i } );
 
 	await expect( page ).toMatchElement( '.done__preview-iframe' );
 
diff --git a/tests/e2e/specs/amp-onboarding/technical-background.js b/tests/e2e/specs/amp-onboarding/technical-background.js
index 5d8e1c2d2d3..6115b0d7869 100644
--- a/tests/e2e/specs/amp-onboarding/technical-background.js
+++ b/tests/e2e/specs/amp-onboarding/technical-background.js
@@ -7,7 +7,7 @@ describe( 'Technical background', () => {
 	it( 'main components exist', async () => {
 		await moveToTechnicalScreen();
 
-		await testTitle( { text: 'Technical background' } );
+		await testTitle( { text: 'Technical Background' } );
 
 		await expect( page ).toMatchElement( 'p', { text: /^To recommend/ } );
 
@@ -27,10 +27,10 @@ describe( 'Technical background', () => {
 		await page.waitForSelector( '#technical-background-enable' );
 
 		await expect( page ).toClick( '#technical-background-enable' );
-		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Developer or Technically Savvy' } );
+		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Developer or technically savvy' } );
 
 		await expect( page ).toClick( 'label', { text: /Non-technical/ } );
-		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Non-technical or Wanting a simpler setup' } );
+		await expect( page ).toMatchElement( '.selectable--selected h2', { text: 'Non-technical or wanting a simpler setup' } );
 
 		testNextButton( { text: 'Next', disabled: false } );
 	} );
diff --git a/tests/e2e/utils/onboarding-wizard-utils.js b/tests/e2e/utils/onboarding-wizard-utils.js
index e9f8286a262..fca91f27fcb 100644
--- a/tests/e2e/utils/onboarding-wizard-utils.js
+++ b/tests/e2e/utils/onboarding-wizard-utils.js
@@ -126,7 +126,7 @@ export async function cleanUpSettings() {
 		await Promise.all( [
 			wp.apiFetch( { path: '/wp/v2/users/me', method: 'POST', data: {
 				amp_dev_tools_enabled: true,
-				amp_review_panel_dismissed_for_template_mode: '',
+				amp_review_panel_dismissed_for_template_mode: null,
 			} } ),
 			wp.apiFetch( { path: '/amp/v1/options', method: 'POST', data: {
 				mobile_redirect: false,

From 6cea32416ed81f931160a307ab32581585ffcb22 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 19:15:43 +0200
Subject: [PATCH 56/68] Update unit test

---
 assets/src/components/nav-menu/test/nav-menu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/src/components/nav-menu/test/nav-menu.js b/assets/src/components/nav-menu/test/nav-menu.js
index 2dc319378f6..78ba617d620 100644
--- a/assets/src/components/nav-menu/test/nav-menu.js
+++ b/assets/src/components/nav-menu/test/nav-menu.js
@@ -20,12 +20,12 @@ let container;
 const links = [
 	{
 		url: 'https://example.com/foo',
-		text: 'Foo',
+		label: 'Foo',
 		isActive: false,
 	},
 	{
 		url: 'https://example.com/bar',
-		text: 'Bar',
+		label: 'Bar',
 		isActive: true,
 	},
 ];

From c53e449894579e1736f40a80c8883ac8e99c21bd Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 19:18:28 +0200
Subject: [PATCH 57/68] Update unit test

---
 .../Admin/OnboardingWizardSubmenuPageTest.php | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
index daa4d4c48fd..fa0e56f9d97 100644
--- a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
+++ b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
@@ -176,31 +176,40 @@ public function test_get_close_link( $referrer_link_callback, $expected_referrer
 	public function test_get_preview_urls() {
 		$scannable_urls = [
 			[
-				'type' => 'home',
-				'url'  => 'https://example.com',
+				'type'  => 'home',
+				'url'   => 'https://example.com',
+				'label' => 'Homepage'
 			],
 			[
-				'type' => 'page',
-				'url'  => 'https://example.com/sample-page',
+				'type'  => 'page',
+				'url'   => 'https://example.com/sample-page',
+				'label' => 'Page'
 			],
 			[
-				'type' => 'search',
-				'url'  => 'https://example.com/?s=foobar',
+				'type'  => 'search',
+				'url'   => 'https://example.com/?s=foobar',
+				'label' => 'Search Results Page'
 			],
 		];
 
 		$expected_urls = [
-			'home'   => [
+			[
+				'type'    => 'home',
 				'url'     => 'https://example.com',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com' ),
+				'label'   => 'Homepage'
 			],
-			'page'   => [
+			[
+				'type'    => 'page',
 				'url'     => 'https://example.com/sample-page',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com/sample-page' ),
+				'label'   => 'Page'
 			],
-			'search' => [
+			[
+				'type'    => 'search',
 				'url'     => 'https://example.com/?s=foobar',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com/?s=foobar' ),
+				'label'   => 'Search Results Page'
 			],
 		];
 

From 308cd1fff1a15d832c99a7be415740c0255bff0f Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 28 Sep 2021 19:22:52 +0200
Subject: [PATCH 58/68] Fix PHPCS issues

---
 .../src/Admin/OnboardingWizardSubmenuPageTest.php    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
index fa0e56f9d97..565c7837bde 100644
--- a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
+++ b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
@@ -178,17 +178,17 @@ public function test_get_preview_urls() {
 			[
 				'type'  => 'home',
 				'url'   => 'https://example.com',
-				'label' => 'Homepage'
+				'label' => 'Homepage',
 			],
 			[
 				'type'  => 'page',
 				'url'   => 'https://example.com/sample-page',
-				'label' => 'Page'
+				'label' => 'Page',
 			],
 			[
 				'type'  => 'search',
 				'url'   => 'https://example.com/?s=foobar',
-				'label' => 'Search Results Page'
+				'label' => 'Search Results Page',
 			],
 		];
 
@@ -197,19 +197,19 @@ public function test_get_preview_urls() {
 				'type'    => 'home',
 				'url'     => 'https://example.com',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com' ),
-				'label'   => 'Homepage'
+				'label'   => 'Homepage',
 			],
 			[
 				'type'    => 'page',
 				'url'     => 'https://example.com/sample-page',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com/sample-page' ),
-				'label'   => 'Page'
+				'label'   => 'Page',
 			],
 			[
 				'type'    => 'search',
 				'url'     => 'https://example.com/?s=foobar',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com/?s=foobar' ),
-				'label'   => 'Search Results Page'
+				'label'   => 'Search Results Page',
 			],
 		];
 

From 7f82ec94032090bd67d1fa81648917f3a9b8b5d4 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <delawski@users.noreply.github.com>
Date: Wed, 29 Sep 2021 11:23:12 +0200
Subject: [PATCH 59/68] Apply suggestions from code review

Co-authored-by: Weston Ruter <westonruter@google.com>
---
 src/Admin/UserRESTEndpointExtension.php                 | 6 +++---
 src/Validation/ScannableURLProvider.php                 | 6 +++---
 tests/e2e/utils/onboarding-wizard-utils.js              | 2 +-
 tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php | 4 ++--
 tests/php/src/Admin/UserRESTEndpointExtensionTest.php   | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 23cf5394702..1909fa39e1b 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -59,7 +59,7 @@ public function register_rest_field() {
 					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
 					'type'        => 'string',
 					'enum'        => [
-						null,
+						'',
 						AMP_Theme_Support::READER_MODE_SLUG,
 						AMP_Theme_Support::STANDARD_MODE_SLUG,
 						AMP_Theme_Support::TRANSITIONAL_MODE_SLUG,
@@ -74,7 +74,7 @@ public function register_rest_field() {
 	 *
 	 * @param array $user Array of user data prepared for REST.
 	 *
-	 * @return string|WP_Error Template mode fir which the panel is dismissed, empty string if the option has not been set, or WP_Error if the current user lacks permission.
+	 * @return string|WP_Error Template mode for which the panel is dismissed, empty string if the option has not been set, or WP_Error if the current user lacks permission.
 	 */
 	public function get_review_panel_dismissed_for_template_mode( $user ) {
 		if ( wp_get_current_user()->ID !== $user['id'] ) {
@@ -91,7 +91,7 @@ public function get_review_panel_dismissed_for_template_mode( $user ) {
 	/**
 	 * Updates a user's setting determining for which template mode the "Review" panel was dismissed.
 	 *
-	 * @param string  $template_mode Template mode.
+	 * @param string  $template_mode Template mode or empty string.
 	 * @param WP_User $user          The WP user to update.
 	 *
 	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
diff --git a/src/Validation/ScannableURLProvider.php b/src/Validation/ScannableURLProvider.php
index a680ff6ecb2..1e3232b8c5f 100644
--- a/src/Validation/ScannableURLProvider.php
+++ b/src/Validation/ScannableURLProvider.php
@@ -74,7 +74,7 @@ public function get_urls( $offset = 0 ) {
 					$urls[]           = [
 						'url'   => get_permalink( $post_ids[0] ),
 						'type'  => $post_type,
-						'label' => empty( $post_type_object->labels->name ) ? $post_type : $post_type_object->labels->name,
+						'label' => $post_type_object->labels->singular_name ?: $post_type,
 					];
 				}
 			}
@@ -87,7 +87,7 @@ public function get_urls( $offset = 0 ) {
 					$urls[]          = [
 						'url'   => $link,
 						'type'  => $taxonomy,
-						'label' => empty( $taxonomy_object->labels->name ) ? $taxonomy : $taxonomy_object->labels->name,
+						'label' => $taxonomy_object->labels->singular_name ?: $taxonomy,
 					];
 				}
 			}
@@ -116,7 +116,7 @@ public function get_urls( $offset = 0 ) {
 			$urls[] = [
 				'url'   => $url,
 				'type'  => 'search',
-				'label' => __( 'Search Results Page', 'amp' ),
+				'label' => __( 'Search Results', 'amp' ),
 			];
 		}
 
diff --git a/tests/e2e/utils/onboarding-wizard-utils.js b/tests/e2e/utils/onboarding-wizard-utils.js
index fca91f27fcb..e9f8286a262 100644
--- a/tests/e2e/utils/onboarding-wizard-utils.js
+++ b/tests/e2e/utils/onboarding-wizard-utils.js
@@ -126,7 +126,7 @@ export async function cleanUpSettings() {
 		await Promise.all( [
 			wp.apiFetch( { path: '/wp/v2/users/me', method: 'POST', data: {
 				amp_dev_tools_enabled: true,
-				amp_review_panel_dismissed_for_template_mode: null,
+				amp_review_panel_dismissed_for_template_mode: '',
 			} } ),
 			wp.apiFetch( { path: '/amp/v1/options', method: 'POST', data: {
 				mobile_redirect: false,
diff --git a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
index 565c7837bde..e85a493979b 100644
--- a/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
+++ b/tests/php/src/Admin/OnboardingWizardSubmenuPageTest.php
@@ -188,7 +188,7 @@ public function test_get_preview_urls() {
 			[
 				'type'  => 'search',
 				'url'   => 'https://example.com/?s=foobar',
-				'label' => 'Search Results Page',
+				'label' => 'Search Results',
 			],
 		];
 
@@ -209,7 +209,7 @@ public function test_get_preview_urls() {
 				'type'    => 'search',
 				'url'     => 'https://example.com/?s=foobar',
 				'amp_url' => amp_add_paired_endpoint( 'https://example.com/?s=foobar' ),
-				'label'   => 'Search Results Page',
+				'label'   => 'Search Results',
 			],
 		];
 
diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index a9b58aad4d4..abc20e37beb 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -76,7 +76,7 @@ public function test_update_review_panel_dismissed_for_template_mode() {
 		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $editor_user ) );
 
 		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
-		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( null, $admin_user ) );
+		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( '', $admin_user ) );
 		$this->assertEmpty( get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
 
 		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( 'foobar', $editor_user ) );

From d4ff14be5bb5bcc40f644e71eeb0d701b021a1b3 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 29 Sep 2021 11:28:48 +0200
Subject: [PATCH 60/68] Unify code style

---
 assets/src/onboarding-wizard/pages/done/index.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/assets/src/onboarding-wizard/pages/done/index.js b/assets/src/onboarding-wizard/pages/done/index.js
index 0b8c443f9d8..525f4a6f0ab 100644
--- a/assets/src/onboarding-wizard/pages/done/index.js
+++ b/assets/src/onboarding-wizard/pages/done/index.js
@@ -52,14 +52,11 @@ export function Done() {
 	/**
 	 * Allow the finish button to be enabled.
 	 */
-	useEffect(
-		() => {
-			if ( ! canGoForward ) {
-				setCanGoForward( true );
-			}
-		},
-		[ setCanGoForward, canGoForward ],
-	);
+	useEffect( () => {
+		if ( ! canGoForward ) {
+			setCanGoForward( true );
+		}
+	}, [ setCanGoForward, canGoForward ] );
 
 	/**
 	 * Triggers saving of options on arrival to this screen.

From 16f67078b232a8f87395e051db394a05aa6bdd04 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 29 Sep 2021 13:07:05 +0200
Subject: [PATCH 61/68] Fix E2E test

---
 tests/e2e/specs/admin/amp-options.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/specs/admin/amp-options.js b/tests/e2e/specs/admin/amp-options.js
index d32d97c0fd1..4dadfb5f473 100644
--- a/tests/e2e/specs/admin/amp-options.js
+++ b/tests/e2e/specs/admin/amp-options.js
@@ -182,16 +182,18 @@ describe( 'AMP settings screen Review panel', () => {
 	} );
 
 	it( 'can be dismissed and shows up again only after a template mode change', async () => {
-		await clickMode( 'transitional' );
-
+		await page.waitForSelector( '.settings-site-review' );
 		await expect( page ).toMatchElement( 'button', { text: 'Dismiss' } );
 		await expect( page ).toClick( 'button', { text: 'Dismiss' } );
-		await expect( page ).not.toMatchElement( 'h2', { text: 'Review' } );
 
-		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		// Give the Review panel some time disappear.
+		await page.waitForTimeout( 100 );
+		await expect( page ).not.toMatchElement( '.settings-site-review' );
 
-		await page.waitForSelector( '.settings-site-review' );
-		await expect( page ).toMatchElement( 'h2', { text: 'Review' } );
+		// There should be no Review panel after page reload.
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		await page.waitForSelector( '#amp-settings-root' );
+		await expect( page ).not.toMatchElement( '.settings-site-review' );
 
 		await clickMode( 'standard' );
 

From 9ed10ff925000932079570d19e8cc4239b48ece2 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 10:46:59 -0700
Subject: [PATCH 62/68] Remove extraneous cap checks and update tests to use
 request dispatching

---
 src/Admin/UserRESTEndpointExtension.php       | 22 +-----
 .../Admin/UserRESTEndpointExtensionTest.php   | 73 ++++++++++++++-----
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 1909fa39e1b..3dde14caa26 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -56,7 +56,7 @@ public function register_rest_field() {
 				'get_callback'    => [ $this, 'get_review_panel_dismissed_for_template_mode' ],
 				'update_callback' => [ $this, 'update_review_panel_dismissed_for_template_mode' ],
 				'schema'          => [
-					'description' => __( 'For which template mode the Review panel on the Settings screen was dismissed by a user', 'amp' ),
+					'description' => __( 'The template mode for which the Review panel on the Settings screen was dismissed by a user.', 'amp' ),
 					'type'        => 'string',
 					'enum'        => [
 						'',
@@ -74,17 +74,9 @@ public function register_rest_field() {
 	 *
 	 * @param array $user Array of user data prepared for REST.
 	 *
-	 * @return string|WP_Error Template mode for which the panel is dismissed, empty string if the option has not been set, or WP_Error if the current user lacks permission.
+	 * @return string|null Template mode for which the panel is dismissed, empty string if the option has not been set.
 	 */
 	public function get_review_panel_dismissed_for_template_mode( $user ) {
-		if ( wp_get_current_user()->ID !== $user['id'] ) {
-			return new WP_Error(
-				'amp_rest_cannot_get_other_user',
-				__( 'Sorry, the current user is not allowed to get this data about other user.', 'amp' ),
-				[ 'status' => rest_authorization_required_code() ]
-			);
-		}
-
 		return get_user_meta( $user['id'], self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );
 	}
 
@@ -96,7 +88,7 @@ public function get_review_panel_dismissed_for_template_mode( $user ) {
 	 *
 	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
 	 */
-	public function update_review_panel_dismissed_for_template_mode( $template_mode, $user ) {
+	public function update_review_panel_dismissed_for_template_mode( $template_mode, WP_User $user ) {
 		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
 			return new WP_Error(
 				'amp_rest_cannot_edit_user',
@@ -105,14 +97,6 @@ public function update_review_panel_dismissed_for_template_mode( $template_mode,
 			);
 		}
 
-		if ( wp_get_current_user()->ID !== $user->ID ) {
-			return new WP_Error(
-				'amp_rest_cannot_edit_other_user',
-				__( 'Sorry, the user is not allowed to make this change for other user.', 'amp' ),
-				[ 'status' => rest_authorization_required_code() ]
-			);
-		}
-
 		if ( empty( $template_mode ) ) {
 			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
 		}
diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index abc20e37beb..f8cf4afb989 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -10,6 +10,7 @@
 use AMP_Theme_Support;
 use AmpProject\AmpWP\Admin\UserRESTEndpointExtension;
 use AmpProject\AmpWP\Tests\TestCase;
+use WP_REST_Request;
 
 /**
  * Tests for UserRESTEndpointExtension class.
@@ -64,22 +65,46 @@ public function test_register_rest_field() {
 	 * @covers ::update_review_panel_dismissed_for_template_mode
 	 */
 	public function test_update_review_panel_dismissed_for_template_mode() {
+		$server = rest_get_server();
+		$this->user_rest_endpoint_extension->register_rest_field();
+
 		$admin_user  = self::factory()->user->create_and_get( [ 'role' => 'administrator' ] );
 		$editor_user = self::factory()->user->create_and_get( [ 'role' => 'editor' ] );
 
+		$this->assertSame( '', $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+		$this->assertSame( '', $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
+
+		// Test that an editor can edit their own field.
 		wp_set_current_user( $editor_user->ID );
-		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::STANDARD_MODE_SLUG, $editor_user ) );
-		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::STANDARD_MODE_SLUG, $admin_user ) );
+		$request = new WP_REST_Request( 'PUT', "/wp/v2/users/{$editor_user->ID}" );
+		$request->set_body_params( [ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE => AMP_Theme_Support::STANDARD_MODE_SLUG ] );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertSame( AMP_Theme_Support::STANDARD_MODE_SLUG, $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
 
-		wp_set_current_user( $admin_user->ID );
-		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $admin_user ) );
-		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $editor_user ) );
+		// Test that an editor cannot edit another user's field.
+		wp_set_current_user( $editor_user->ID );
+		$request = new WP_REST_Request( 'PUT', "/wp/v2/users/{$admin_user->ID}" );
+		$request->set_body_params( [ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE => AMP_Theme_Support::STANDARD_MODE_SLUG ] );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 403, $response->get_status() );
+		$this->assertSame( '', $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
 
-		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
-		$this->assertTrue( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( '', $admin_user ) );
-		$this->assertEmpty( get_user_meta( $admin_user->ID, UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true ) );
+		// Test that admin user can edit another user's field.
+		wp_set_current_user( $admin_user->ID );
+		$request = new WP_REST_Request( 'PUT', "/wp/v2/users/{$editor_user->ID}" );
+		$request->set_body_params( [ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE => AMP_Theme_Support::TRANSITIONAL_MODE_SLUG ] );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertSame( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
 
-		$this->assertWPError( $this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( 'foobar', $editor_user ) );
+		// Test that admin user can edit their own field (to clear it out).
+		wp_set_current_user( $admin_user->ID );
+		$request = new WP_REST_Request( 'PUT', "/wp/v2/users/{$admin_user->ID}" );
+		$request->set_body_params( [ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE => '' ] );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertSame( '', $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
 	}
 
 	/**
@@ -88,19 +113,27 @@ public function test_update_review_panel_dismissed_for_template_mode() {
 	 * @covers ::get_review_panel_dismissed_for_template_mode
 	 */
 	public function test_get_review_panel_dismissed_for_template_mode() {
-		$admin_user  = self::factory()->user->create_and_get( [ 'role' => 'administrator' ] );
-		$editor_user = self::factory()->user->create_and_get( [ 'role' => 'editor' ] );
-
-		wp_set_current_user( $editor_user->ID );
-		$this->assertEmpty( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
-		$this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::STANDARD_MODE_SLUG, $editor_user );
-		$this->assertEquals( AMP_Theme_Support::STANDARD_MODE_SLUG, $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
-		$this->assertWPError( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+		$server = rest_get_server();
+		$this->user_rest_endpoint_extension->register_rest_field();
 
+		$admin_user = self::factory()->user->create_and_get( [ 'role' => 'administrator' ] );
 		wp_set_current_user( $admin_user->ID );
-		$this->assertEmpty( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+
+		// Check initial value.
+		$request  = new WP_REST_Request( 'GET', "/wp/v2/users/{$admin_user->ID}" );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 200, $response->get_status() );
+		$data = $response->get_data();
+		$this->assertArrayHasKey( UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $data );
+		$this->assertSame( '', $data[ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE ] );
+
+		// Check updated value.
 		$this->user_rest_endpoint_extension->update_review_panel_dismissed_for_template_mode( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $admin_user );
-		$this->assertEquals( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
-		$this->assertWPError( $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $editor_user->ID ] ) );
+		$request  = new WP_REST_Request( 'GET', "/wp/v2/users/{$admin_user->ID}" );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 200, $response->get_status() );
+		$data = $response->get_data();
+		$this->assertArrayHasKey( UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $data );
+		$this->assertSame( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $data[ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE ] );
 	}
 }

From adb6c0bde1042a7dc2ee08404be46e825fb2e22c Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 10:56:30 -0700
Subject: [PATCH 63/68] Add test assertion for enum

---
 tests/php/src/Admin/UserRESTEndpointExtensionTest.php | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index f8cf4afb989..d347f977311 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -105,6 +105,14 @@ public function test_update_review_panel_dismissed_for_template_mode() {
 		$response = $server->dispatch( $request );
 		$this->assertEquals( 200, $response->get_status() );
 		$this->assertSame( '', $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
+
+		// Test that a user user cannot update the value to be bogus.
+		wp_set_current_user( $admin_user->ID );
+		$request = new WP_REST_Request( 'PUT', "/wp/v2/users/{$admin_user->ID}" );
+		$request->set_body_params( [ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE => 'BOGUS' ] );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 400, $response->get_status() );
+		$this->assertSame( '', $this->user_rest_endpoint_extension->get_review_panel_dismissed_for_template_mode( [ 'id' => $admin_user->ID ] ) );
 	}
 
 	/**

From dcff59ae9a52f3f35a41a9afaee2194ccec3dc99 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 10:59:38 -0700
Subject: [PATCH 64/68] Fix phpdoc for
 get_review_panel_dismissed_for_template_mode return value

---
 src/Admin/UserRESTEndpointExtension.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 3dde14caa26..ce660f66674 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -74,7 +74,7 @@ public function register_rest_field() {
 	 *
 	 * @param array $user Array of user data prepared for REST.
 	 *
-	 * @return string|null Template mode for which the panel is dismissed, empty string if the option has not been set.
+	 * @return string Template mode for which the panel is dismissed, empty string if the option has not been set.
 	 */
 	public function get_review_panel_dismissed_for_template_mode( $user ) {
 		return get_user_meta( $user['id'], self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, true );

From a1f76832f167d6498558025c70a14052b6faf7b5 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 10:59:55 -0700
Subject: [PATCH 65/68] Remove extraneous edit_user cap check

---
 src/Admin/UserRESTEndpointExtension.php | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index ce660f66674..cdf14b1696b 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -89,14 +89,6 @@ public function get_review_panel_dismissed_for_template_mode( $user ) {
 	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
 	 */
 	public function update_review_panel_dismissed_for_template_mode( $template_mode, WP_User $user ) {
-		if ( ! current_user_can( 'edit_user', $user->ID ) ) {
-			return new WP_Error(
-				'amp_rest_cannot_edit_user',
-				__( 'Sorry, the current user is not allowed to make this change.', 'amp' ),
-				[ 'status' => rest_authorization_required_code() ]
-			);
-		}
-
 		if ( empty( $template_mode ) ) {
 			return delete_user_meta( $user->ID, self::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE );
 		}

From 128e491a94597cf37e1e388f9e50e752704ac11d Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 11:03:18 -0700
Subject: [PATCH 66/68] Fix phpdoc for
 update_review_panel_dismissed_for_template_mode after a1f76832

---
 src/Admin/UserRESTEndpointExtension.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index cdf14b1696b..8e958cd3f87 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -86,7 +86,7 @@ public function get_review_panel_dismissed_for_template_mode( $user ) {
 	 * @param string  $template_mode Template mode or empty string.
 	 * @param WP_User $user          The WP user to update.
 	 *
-	 * @return bool|WP_Error The result of update_user_meta, or WP_Error if the current user lacks permission.
+	 * @return bool The result of updating or deleting the user meta.
 	 */
 	public function update_review_panel_dismissed_for_template_mode( $template_mode, WP_User $user ) {
 		if ( empty( $template_mode ) ) {

From 2e61d15735ea6572ca968ceba3b501dff7419ac6 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 11:06:37 -0700
Subject: [PATCH 67/68] Verify that editor user cannot access another user

---
 tests/php/src/Admin/UserRESTEndpointExtensionTest.php | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
index d347f977311..a58c10707da 100644
--- a/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
+++ b/tests/php/src/Admin/UserRESTEndpointExtensionTest.php
@@ -143,5 +143,12 @@ public function test_get_review_panel_dismissed_for_template_mode() {
 		$data = $response->get_data();
 		$this->assertArrayHasKey( UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE, $data );
 		$this->assertSame( AMP_Theme_Support::TRANSITIONAL_MODE_SLUG, $data[ UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE ] );
+
+		// Verify the editor user cannot access another user.
+		$editor_user = self::factory()->user->create_and_get( [ 'role' => 'editor' ] );
+		wp_set_current_user( $editor_user->ID );
+		$request  = new WP_REST_Request( 'GET', "/wp/v2/users/{$admin_user->ID}" );
+		$response = $server->dispatch( $request );
+		$this->assertEquals( 403, $response->get_status() );
 	}
 }

From ce6c456f31c7fe9632cc58bcb410baf2c3ba180c Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Wed, 29 Sep 2021 11:09:47 -0700
Subject: [PATCH 68/68] Remove unused PHP import

---
 src/Admin/UserRESTEndpointExtension.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Admin/UserRESTEndpointExtension.php b/src/Admin/UserRESTEndpointExtension.php
index 8e958cd3f87..ebce7b5a14a 100644
--- a/src/Admin/UserRESTEndpointExtension.php
+++ b/src/Admin/UserRESTEndpointExtension.php
@@ -2,7 +2,8 @@
 /**
  * Class UserRESTEndpointExtension
  *
- * @package Ampproject\Ampwp
+ * @package AmpProject\AmpWP
+ * @since 2.2
  */
 
 namespace AmpProject\AmpWP\Admin;
@@ -11,11 +12,10 @@
 use AmpProject\AmpWP\Infrastructure\Delayed;
 use AmpProject\AmpWP\Infrastructure\Registerable;
 use AmpProject\AmpWP\Infrastructure\Service;
-use WP_Error;
 use WP_User;
 
 /**
- * UserRESTEndpointExtension class.
+ * Service which registers additional REST API fields for the user endpoint.
  *
  * @since 2.2
  * @internal
@@ -39,7 +39,7 @@ public static function get_registration_action() {
 	}
 
 	/**
-	 * Adds hooks.
+	 * Register.
 	 */
 	public function register() {
 		$this->register_rest_field();