Merge branch 'develop' into add/paired-browsing-template-include-filt…

…er-priority

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/__mocks__/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const ReaderThemes = createContext();
+
+/**
+ * MOCK.
+ *
+ * @param {Object} props
+ * @param {any} props.children Component children.
+ * @param {boolean} props.downloadingTheme Whether downloading a theme or not.
+ */
+export function ReaderThemesContextProvider( { children, downloadingTheme = false } ) {
+	return (
+		<ReaderThemes.Provider value={
+			{
+				downloadingTheme,
+			}
+		}>
+			{ children }
+		</ReaderThemes.Provider>
+	);
+}
+ReaderThemesContextProvider.propTypes = {
+	children: PropTypes.any,
+	downloadingTheme: PropTypes.bool,
+};

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/components/nav/test/index.js

@@ -17,9 +17,11 @@ import { Nav } from '..';
 import { NavigationContextProvider } from '../../navigation-context-provider';
 import { UserContextProvider } from '../../user-context-provider';
 import { OptionsContextProvider } from '../../../../components/options-context-provider';
+import { ReaderThemesContextProvider } from '../../../../components/reader-themes-context-provider';
 import { STANDARD, READER } from '../../../../common/constants';
 
 jest.mock( '../../../../components/options-context-provider' );
+jest.mock( '../../../../components/reader-themes-context-provider' );
 jest.mock( '../../user-context-provider' );
 
 let container;
@@ -35,11 +37,13 @@ const testPages = [
 	{ PageComponent: MyPageComponent, slug: 'slug-2', title: 'Page 1' },
 ];
 
-const Providers = ( { children, pages, themeSupport = READER } ) => (
+const Providers = ( { children, pages, themeSupport = READER, downloadingTheme = false } ) => (
 	<OptionsContextProvider themeSupport={ themeSupport }>
 		<UserContextProvider>
 			<NavigationContextProvider pages={ pages }>
-				{ children }
+				<ReaderThemesContextProvider downloadingTheme={ downloadingTheme }>
+					{ children }
+				</ReaderThemesContextProvider>
 			</NavigationContextProvider>
 		</UserContextProvider>
 	</OptionsContextProvider>
@@ -48,6 +52,7 @@ Providers.propTypes = {
 	children: PropTypes.any,
 	pages: PropTypes.array,
 	themeSupport: PropTypes.string,
+	downloadingTheme: PropTypes.bool,
 };
 
 describe( 'Nav', () => {

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,
 };