Settings screen updates

assets/src/components/amp-setting-toggle/index.js

@@ -18,15 +18,16 @@ import './style.css';
  *
  * @param {Object} props Component props.
  * @param {boolean} props.checked Whether the toggle is on.
+ * @param {boolean} props.disabled Whether the toggle is disabled.
  * @param {Function} props.onChange Change handler.
  * @param {?string} props.text Toggle text.
  * @param {string} props.title Toggle title.
  */
-export function AMPSettingToggle( { checked, onChange, text, title } ) {
+export function AMPSettingToggle( { checked, disabled = false, onChange, text, title } ) {
 	return (
-		<div className="amp-setting-toggle">
+		<div className={ `amp-setting-toggle ${ disabled ? 'amp-setting-toggle--disabled' : '' }` }>
 			<ToggleControl
-				checked={ checked }
+				checked={ ! disabled && checked }
 				label={ (
 					<div className="amp-setting-toggle__label-text">
 						<h3>
@@ -45,6 +46,7 @@ export function AMPSettingToggle( { checked, onChange, text, title } ) {
 }
 AMPSettingToggle.propTypes = {
 	checked: PropTypes.bool.isRequired,
+	disabled: PropTypes.bool,
 	onChange: PropTypes.func.isRequired,
 	text: PropTypes.string,
 	title: PropTypes.string.isRequired,

assets/src/components/amp-setting-toggle/style.css

@@ -42,3 +42,8 @@
 .amp-setting-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
 	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--brand);
 }
+
+.amp-setting-toggle--disabled .components-form-toggle {
+	pointer-events: none;
+	opacity: 0.5;
+}

assets/src/components/reader-theme-selection/index.js

@@ -16,16 +16,36 @@ import { useContext, useMemo } from '@wordpress/element';
 import { ReaderThemes } from '../reader-themes-context-provider';
 import { Loading } from '../loading';
 import './style.css';
+import { AMPNotice } from '../amp-notice';
 import { ThemeCard } from './theme-card';
 
 /**
  * Component for selecting a reader theme.
  *
  * @param {Object} props Component props.
- * @param {boolean} props.disableCurrentlyActiveTheme Whether the currently active theme should be unselectable.
+ * @param {boolean} props.hideCurrentlyActiveTheme Whether the currently active theme should be unselectable.
  */
-export function ReaderThemeSelection( { disableCurrentlyActiveTheme = false } ) {
-	const { currentTheme, fetchingThemes, themes } = useContext( ReaderThemes );
+export function ReaderThemeSelection( { hideCurrentlyActiveTheme = false } ) {
+	const { currentTheme, fetchingThemes, themes: unprocessedThemes } = useContext( ReaderThemes );
+
+	const { activeTheme, themes } = useMemo( () => {
+		let active, processedThemes;
+
+		if ( hideCurrentlyActiveTheme ) {
+			processedThemes = ( unprocessedThemes || [] ).filter( ( theme ) => {
+				if ( 'active' === theme.availability ) {
+					active = theme;
+					return false;
+				}
+				return true;
+			} );
+		} else {
+			active = null;
+			processedThemes = unprocessedThemes;
+		}
+
+		return { activeTheme: active, themes: processedThemes };
+	}, [ hideCurrentlyActiveTheme, unprocessedThemes ] );
 
 	// Separate available themes (both installed and installable) from those that need to be installed manually.
 	const { availableThemes, unavailableThemes } = useMemo(
@@ -48,6 +68,10 @@ export function ReaderThemeSelection( { disableCurrentlyActiveTheme = false } )
 		return <Loading />;
 	}
 
+	if ( activeTheme && hideCurrentlyActiveTheme ) {
+
+	}
+
 	return (
 		<div className="reader-theme-selection">
 			<p>
@@ -56,17 +80,25 @@ export function ReaderThemeSelection( { disableCurrentlyActiveTheme = false } )
 					__( 'Select the theme template for mobile visitors', 'amp' )
 				}
 			</p>
+			{ activeTheme && hideCurrentlyActiveTheme && (
+				<AMPNotice>
+					{
+						sprintf(
+							// Translators: placeholder is the name of a WordPress theme.
+							__( 'Your active theme "%s" is not available as a reader theme. If you wish to use it, Transitional mode may be the best option for you', 'amp' ),
+							activeTheme.name,
+						)
+					}
+				</AMPNotice>
+			) }
 			<div>
 				{ 0 < availableThemes.length && (
 					<ul className="choose-reader-theme__grid">
 						{ availableThemes.map( ( theme ) => {
-							const disabled = disableCurrentlyActiveTheme && currentTheme.name === theme.name;
-							const currentlyActiveThemeNotice = disabled ? __( 'This is the active theme on your site. We recommend transitional mode.', 'amp' ) : null;
+							const disabled = hideCurrentlyActiveTheme && currentTheme.name === theme.name;
 
-							return (
+							return ! disabled && (
 								<ThemeCard
-									currentlyActiveThemeNotice={ currentlyActiveThemeNotice }
-									disabled={ disabled }
 									key={ `theme-card-${ theme.slug }` }
 									screenshotUrl={ theme.screenshot_url }
 									{ ...theme }
@@ -118,5 +150,5 @@ export function ReaderThemeSelection( { disableCurrentlyActiveTheme = false } )
 }
 
 ReaderThemeSelection.propTypes = {
-	disableCurrentlyActiveTheme: PropTypes.bool,
+	hideCurrentlyActiveTheme: PropTypes.bool,
 };

assets/src/components/reader-theme-selection/style.css

@@ -41,11 +41,12 @@
 	display: flex;
 }
 
-.theme-card__label-header > * {
+.theme-card__label-header > input {
 	flex-shrink: 0;
 }
 
 .theme-card__label-header h3 {
+	line-height: 1.3;
 	margin-left: 5px;
 	margin-top: 0.75em;
 }

assets/src/components/reader-theme-selection/theme-card.js

@@ -17,28 +17,26 @@ import PropTypes from 'prop-types';
 import { Options } from '../options-context-provider';
 import { Selectable } from '../selectable';
 import { Phone } from '../phone';
-import { AMPNotice, NOTICE_TYPE_WARNING, NOTICE_SIZE_SMALL } from '../amp-notice';
 
 /**
  * A selectable card showing a theme in a list of themes.
  *
  * @param {Object} props Component props.
  * @param {string} props.description Theme description.
- * @param {string} props.currentlyActiveThemeNotice The notice to show if the theme is unselectable.
  * @param {string} props.homepage Link to view more information about the theme.
  * @param {string} props.screenshotUrl URL for screenshot of theme.
  * @param {string} props.slug Theme slug.
  * @param {string} props.name Theme name.
  * @param {boolean} props.disabled Whether the theme is not automatically installable in the current environment.
  */
-export function ThemeCard( { currentlyActiveThemeNotice, description, homepage, screenshotUrl, slug, name, disabled } ) {
+export function ThemeCard( { description, homepage, screenshotUrl, slug, name, disabled } ) {
 	const { editedOptions, updateOptions } = useContext( Options );
 	const { reader_theme: readerTheme } = editedOptions;
 
 	const id = `theme-card__${ slug }`;
 
 	return (
-		<Selectable className={ `theme-card` } direction="bottom" HTMLElement="li" selected={ readerTheme === slug }>
+		<Selectable className={ `theme-card` } direction="bottom" ElementName="li" selected={ readerTheme === slug }>
 			<label htmlFor={ id } className="theme-card__label">
 				<Phone>
 					<img
@@ -66,12 +64,6 @@ export function ThemeCard( { currentlyActiveThemeNotice, description, homepage,
 
 				</div>
 
-				{ disabled && currentlyActiveThemeNotice && (
-					<AMPNotice type={ NOTICE_TYPE_WARNING } size={ NOTICE_SIZE_SMALL }>
-						{ currentlyActiveThemeNotice }
-					</AMPNotice>
-				) }
-
 				<p className="theme-card__description">
 					{ decodeEntities( description ) }
 
@@ -87,7 +79,6 @@ export function ThemeCard( { currentlyActiveThemeNotice, description, homepage,
 }
 
 ThemeCard.propTypes = {
-	currentlyActiveThemeNotice: PropTypes.string,
 	description: PropTypes.string.isRequired,
 	homepage: PropTypes.string.isRequired,
 	screenshotUrl: PropTypes.string.isRequired,

assets/src/components/selectable/index.js

@@ -15,28 +15,28 @@ import './style.css';
  * @param {any} props.children Component children.
  * @param {string} props.className Extra classes to add to the element.
  * @param {string} props.direction The direction in which the visual treatment of the selectable element will orient.
- * @param {string} props.HTMLElement The HTML element to serve as the selectable wrapper.
+ * @param {string} props.ElementName The HTML element to serve as the selectable wrapper.
  * @param {boolean} props.selected Whether the element is selected.
  */
-export function Selectable( { children, className = '', direction = 'left', HTMLElement = 'div', selected = false, ...props } ) {
+export function Selectable( { children, className = '', direction = 'left', ElementName = 'div', selected = false, ...props } ) {
 	const classNames = [ className, 'selectable', ( selected ? 'selectable--selected' : '' ), `selectable--${ direction }` ]
 		.filter( ( name ) => name )
 		.join( ' ' );
 
 	return (
-		<HTMLElement
+		<ElementName
 			className={ classNames }
 			{ ...props }
 		>
 			{ children }
-		</HTMLElement>
+		</ElementName>
 	);
 }
 
 Selectable.propTypes = {
 	children: PropTypes.any,
 	className: PropTypes.string,
 	direction: PropTypes.oneOf( [ 'top', 'right', 'bottom', 'left' ] ),
-	HTMLElement: PropTypes.node,
+	ElementName: PropTypes.node,
 	selected: PropTypes.bool,
 };

assets/src/components/selectable/test/index.js

@@ -39,7 +39,7 @@ describe( 'Selectable', () => {
 		expect( wrapper.toJSON() ).toMatchSnapshot();
 
 		wrapper = create(
-			<Selectable selected={ true } HTMLElement="section" className="my-cool-class" direction="top">
+			<Selectable selected={ true } ElementName="section" className="my-cool-class" direction="top">
 				<div>
 					{ 'Component children' }
 				</div>
@@ -51,7 +51,7 @@ describe( 'Selectable', () => {
 	it( 'has correct classes', () => {
 		act( () => {
 			render(
-				<Selectable selected={ true } HTMLElement="section" className="my-cool-class" direction="top">
+				<Selectable selected={ true } ElementName="section" className="my-cool-class" direction="top">
 					<div>
 						{ 'children' }
 					</div>
@@ -64,7 +64,7 @@ describe( 'Selectable', () => {
 
 		act( () => {
 			render(
-				<Selectable selected={ false } HTMLElement="section">
+				<Selectable selected={ false } ElementName="section">
 					<div>
 						{ 'children' }
 					</div>

assets/src/components/supported-templates-toggle/index.js

@@ -9,20 +9,34 @@ import { __ } from '@wordpress/i18n';
  */
 import { Options } from '../options-context-provider';
 import { AMPSettingToggle } from '../amp-setting-toggle';
+import { AMPNotice } from '../amp-notice';
 
 export function SupportedTemplatesToggle() {
 	const { editedOptions, updateOptions } = useContext( Options );
 
-	const { all_templates_supported: allTemplatesSupported, theme_support: themeSupport } = editedOptions;
+	const { all_templates_supported: allTemplatesSupported, reader_theme: readerTheme, theme_support: themeSupport } = editedOptions;
 
-	return [ 'standard', 'transitional' ].includes( themeSupport ) ? (
-		<AMPSettingToggle
-			checked={ true === allTemplatesSupported }
-			text={ __( 'This will allow all of the URLs on your site to be served as AMP by default.', 'amp' ) }
-			title={ __( 'Serve all templates as AMP regardless of what is being queried.', 'amp' ) }
-			onChange={ () => {
-				updateOptions( { all_templates_supported: ! allTemplatesSupported } );
-			} }
-		/>
-	) : null;
+	const isReaderMode = 'reader' === themeSupport;
+	const isLegacy = isReaderMode && 'legacy' === readerTheme;
+
+	return (
+		<>
+			{ isLegacy && (
+				<AMPNotice>
+					<p>
+						{ __( 'This setting is not available when the legacy Reader theme is selected.', 'amp' ) }
+					</p>
+				</AMPNotice>
+			) }
+			<AMPSettingToggle
+				checked={ true === allTemplatesSupported }
+				disabled={ isLegacy }
+				text={ __( 'This will allow all of the URLs on your site to be served as AMP by default.', 'amp' ) }
+				title={ __( 'Serve all templates as AMP regardless of what is being queried.', 'amp' ) }
+				onChange={ () => {
+					updateOptions( { all_templates_supported: ! allTemplatesSupported } );
+				} }
+			/>
+		</>
+	);
 }

assets/src/components/template-mode-option/index.js

@@ -70,7 +70,7 @@ function getTitle( mode ) {
  *
  * @param {Object} props Component props.
  * @param {string|Object} props.children Section content.
- * @param {any} props.details Mode details.
+ * @param {string} props.details Mode details.
  * @param {string} props.mode The template mode.
  * @param {boolean} props.previouslySelected Optional. Whether the option was selected previously.
  */
@@ -125,7 +125,7 @@ export function TemplateModeOption( { children, details, mode, previouslySelecte
 
 TemplateModeOption.propTypes = {
 	children: PropTypes.any,
-	details: PropTypes.node.isRequired,
+	details: PropTypes.string.isRequired,
 	mode: PropTypes.string.isRequired,
 	previouslySelected: PropTypes.bool,
 };

assets/src/onboarding-wizard/index.js

@@ -36,7 +36,7 @@ import { NavigationContextProvider } from './components/navigation-context-provi
 import { UserContextProvider } from './components/user-context-provider';
 import { ErrorScreen } from './components/error-screen';
 import { SiteScanContextProvider } from './components/site-scan-context-provider';
-import { ReaderModeOverrideContextProvider } from './components/reader-mode-override';
+import { ReaderModeOverrideContextProvider } from './components/reader-mode-override-context-provider';
 
 const { ajaxurl: wpAjaxUrl } = global;
 

assets/src/onboarding-wizard/pages/save/index.js

@@ -18,7 +18,7 @@ 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_WARNING, NOTICE_TYPE_SUCCESS } 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';
 
@@ -209,7 +209,7 @@ export function Save() {
 			</div>
 			<div className="done__preview-container">
 				{ 'reader' === themeSupport && downloadingThemeError && (
-					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_WARNING }>
+					<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>
 				) }

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

@@ -17,7 +17,7 @@
 }
 
 .done__link-buttons a:not(:last-child) {
-	margin-right: 5px;
+	margin-right: 15px;
 }
 
 

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

@@ -15,7 +15,7 @@ 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 { RedirectToggle } from '../../../components/redirect-toggle';
-import { ReaderModeOverride } from '../../components/reader-mode-override';
+import { ReaderModeOverride } from '../../components/reader-mode-override-context-provider';
 import { SummaryHeader } from './summary-header';
 import { DesktopScreenshot } from './desktop-screenshot';
 

assets/src/onboarding-wizard/style.css

@@ -9,7 +9,7 @@ body {
 .amp-settings-container {
 	margin: 0 auto;
 	max-width: calc(var(--stepper-max-width) + var(--setup-page-max-width));
-	padding: 20px 20px 12rem;
+	padding: 20px 20px 3rem;
 	width: 100%;
 }