Fallback to AMP Legacy Reader theme if active Reader theme is unavailable

assets/src/components/phone/style.css

@@ -4,7 +4,7 @@
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 1rem;
-	max-height: 413px;
+	height: 413px;
 	min-height: 200px;
 	padding: 12px;
 	position: relative;
@@ -25,5 +25,8 @@
 }
 
 .phone-inner {
+	display: flex;
+	background-color: var(--color-gray-medium);
+	flex-grow: 1;
 	overflow: hidden;
 }

assets/src/components/reader-themes-context-provider/index.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { USING_FALLBACK_READER_THEME, LEGACY_THEME_SLUG } from 'amp-settings';
 
 /**
  * Internal dependencies
@@ -80,16 +81,20 @@ export function ReaderThemesContextProvider( { wpAjaxUrl, children, currentTheme
 	const [ downloadingThemeError, setDownloadingThemeError ] = useState( null );
 
 	/**
-	 * If the currently selected theme is unavailable and not installable, or the current theme is the active theme,
-	 * unset the reader theme option.
+	 * If the currently selected theme is not installable, is the active theme, or unavailable for selection, set the
+	 * Reader theme to AMP Legacy.
 	 */
 	useEffect( () => {
 		if ( themeWasOverridden ) { // Only do this once.
 			return;
 		}
 
-		if ( selectedTheme.availability === 'non-installable' || originalSelectedTheme.availability === 'active' ) {
-			updateOptions( { reader_theme: 'legacy' } );
+		if (
+			selectedTheme.availability === 'non-installable' ||
+			originalSelectedTheme.availability === 'active' ||
+			USING_FALLBACK_READER_THEME
+		) {
+			updateOptions( { reader_theme: LEGACY_THEME_SLUG } );
 			setThemeWasOverridden( true );
 		}
 	}, [ originalSelectedTheme.availability, selectedTheme.availability, themeWasOverridden, updateOptions ] );

assets/src/components/theme-card/index.js

@@ -14,10 +14,11 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
+import './style.css';
+import MobileIcon from '../svg/mobile-icon.svg';
 import { Options } from '../options-context-provider';
 import { Selectable } from '../selectable';
 import { Phone } from '../phone';
-import './style.css';
 
 /**
  * A selectable card showing a theme in a list of themes.
@@ -48,14 +49,18 @@ export function ThemeCard( { description, ElementName = 'li', homepage, screensh
 		>
 			<label htmlFor={ id } className="theme-card__label">
 				<Phone>
-					<img
-						src={ screenshotUrl }
-						alt={ name }
-						height="2165"
-						width="1000"
-						loading="lazy"
-						decoding="async"
-					/>
+					{
+						screenshotUrl ? (
+							<img
+								src={ screenshotUrl }
+								alt={ name }
+								height="2165"
+								width="1000"
+								loading="lazy"
+								decoding="async"
+							/>
+						) : <MobileIcon style={ { width: '100%' } } />
+					}
 					{ disabled && (
 						<div className="theme-card__disabled-overlay">
 							{ __( 'Unavailable', 'amp' ) }
@@ -96,7 +101,7 @@ ThemeCard.propTypes = {
 	description: PropTypes.string.isRequired,
 	ElementName: PropTypes.string,
 	homepage: PropTypes.string.isRequired,
-	screenshotUrl: PropTypes.string.isRequired,
+	screenshotUrl: PropTypes.string,
 	slug: PropTypes.string.isRequired,
 	name: PropTypes.string.isRequired,
 	disabled: PropTypes.bool,

assets/src/components/theme-card/style.css

@@ -48,13 +48,10 @@
 	}
 }
 
-.theme-card .phone-inner {
-	max-height: 307px; /* Make all images uniform height. */
-}
-
 .theme-card img {
 	height: auto;
 	width: 100%;
+	margin: auto;
 }
 
 p.theme-card__description {

assets/src/onboarding-wizard/components/nav/index.js

@@ -20,6 +20,7 @@ import './style.css';
 import { Options } from '../../../components/options-context-provider';
 import { User } from '../user-context-provider';
 import { READER } from '../../../common/constants';
+import { ReaderThemes } from '../../../components/reader-themes-context-provider';
 
 /**
  * Navigation component.
@@ -36,6 +37,7 @@ export function Nav( { closeLink, finishLink } ) {
 		originalOptions: { preview_permalink: previewPermalink, reader_theme: readerTheme },
 	} = useContext( Options );
 	const { savingDeveloperToolsOption } = useContext( User );
+	const { downloadingTheme } = useContext( ReaderThemes );
 
 	let nextText;
 	let nextLink;
@@ -97,7 +99,7 @@ export function Nav( { closeLink, finishLink } ) {
 					}
 
 					<Button
-						disabled={ ! canGoForward || savingOptions || savingDeveloperToolsOption }
+						disabled={ ! canGoForward || savingOptions || savingDeveloperToolsOption || downloadingTheme }
 						href={ nextLink }
 						id="next-button"
 						isPrimary

assets/src/onboarding-wizard/pages/summary/desktop-screenshot.js

@@ -12,21 +12,26 @@ 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>
-					<img
-						src={ screenshot }
-						alt={ name }
-						loading="lazy"
-						decoding="async"
-						height="900"
-						width="1200"
-					/>
+					{
+						screenshot ? (
+							<img
+								src={ screenshot }
+								alt={ name }
+								loading="lazy"
+								decoding="async"
+								height="900"
+								width="1200"
+							/>
+						) : <DesktopIcon />
+					}
 				</Desktop>
 				<div>
 					<h3>
@@ -50,6 +55,6 @@ export function DesktopScreenshot( { screenshot, name, description, url } ) {
 DesktopScreenshot.propTypes = {
 	description: PropTypes.string.isRequired,
 	name: PropTypes.string.isRequired,
-	screenshot: PropTypes.string.isRequired,
+	screenshot: PropTypes.string,
 	url: PropTypes.string.isRequired,
 };

assets/src/onboarding-wizard/pages/summary/reader.js

@@ -20,6 +20,8 @@ import { IconMobile } from '../../../components/svg/icon-mobile';
 import { Options } from '../../../components/options-context-provider';
 import { RedirectToggle } from '../../../components/redirect-toggle';
 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';
 
 /**
@@ -57,14 +59,18 @@ export function Reader( { currentTheme } ) {
 						</AMPInfo>
 
 						<Desktop>
-							<img
-								src={ currentTheme.screenshot }
-								alt={ currentTheme.name }
-								loading="lazy"
-								decoding="async"
-								height="900"
-								width="1200"
-							/>
+							{
+								currentTheme.screenshot ? (
+									<img
+										src={ currentTheme.screenshot }
+										alt={ currentTheme.name }
+										loading="lazy"
+										decoding="async"
+										height="900"
+										width="1200"
+									/>
+								) : <DesktopIcon />
+							}
 
 						</Desktop>
 
@@ -89,14 +95,18 @@ export function Reader( { currentTheme } ) {
 						</AMPInfo>
 
 						<Phone>
-							<img
-								src={ readerThemeData.screenshot_url }
-								alt={ readerThemeData.name }
-								loading="lazy"
-								decoding="async"
-								height="2165"
-								width="1000"
-							/>
+							{
+								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>

assets/src/onboarding-wizard/pages/summary/style.css

@@ -26,6 +26,7 @@
 .reader-summary__screens img {
 	width: 100%;
 	height: auto;
+	margin: auto;
 }
 
 .reader-summary__screens .selectable {

assets/src/onboarding-wizard/style.css

@@ -125,7 +125,7 @@ body {
 	position: relative;
 
 	@media screen and (min-width: 783px) {
-		padding: 15px 21px 8px 0;
+		padding: 15px 10px 8px 0;
 	}
 }
 

assets/src/settings-page/style.css

@@ -59,10 +59,6 @@
 	}
 }
 
-.amp-settings .theme-card .phone-inner {
-	max-height: 298px;
-}
-
 /* Supported templates section. */
 .supported-templates {
 	margin-bottom: 3rem;

includes/amp-helper-functions.php

@@ -364,11 +364,16 @@ function amp_is_canonical() {
  * @return bool
  */
 function amp_is_legacy() {
-	return (
-		AMP_Theme_Support::READER_MODE_SLUG === AMP_Options_Manager::get_option( Option::THEME_SUPPORT )
-		&&
-		ReaderThemes::DEFAULT_READER_THEME === AMP_Options_Manager::get_option( Option::READER_THEME )
-	);
+	if ( AMP_Theme_Support::READER_MODE_SLUG !== AMP_Options_Manager::get_option( Option::THEME_SUPPORT ) ) {
+		return false;
+	}
+
+	$reader_theme = AMP_Options_Manager::get_option( Option::READER_THEME );
+	if ( ReaderThemes::DEFAULT_READER_THEME === $reader_theme ) {
+		return true;
+	}
+
+	return ! wp_get_theme( $reader_theme )->exists();
 }
 
 /**