diff --git a/assets/src/setup/pages/choose-reader-theme/index.js b/assets/src/setup/pages/choose-reader-theme/index.js index 597cdc54a9b..444896851f1 100644 --- a/assets/src/setup/pages/choose-reader-theme/index.js +++ b/assets/src/setup/pages/choose-reader-theme/index.js @@ -1,9 +1,14 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useEffect, useContext, useMemo } from '@wordpress/element'; +/** + * External dependencies + */ +import { AMP_QUERY_VAR, DEFAULT_AMP_QUERY_VAR, LEGACY_THEME_SLUG, AMP_QUERY_VAR_CUSTOMIZED_LATE } from 'amp-setup'; // From WP inline script. + /** * Internal dependencies */ @@ -32,10 +37,15 @@ export function ChooseReaderTheme() { return; } - if ( themes && readerTheme && canGoForward === false ) { - if ( themes.map( ( { slug } ) => slug ).includes( readerTheme ) ) { - setCanGoForward( true ); - } + if ( + themes && + readerTheme && + canGoForward === false && + ! AMP_QUERY_VAR_CUSTOMIZED_LATE + ? themes.map( ( { slug } ) => slug ).includes( readerTheme ) + : readerTheme === LEGACY_THEME_SLUG + ) { + setCanGoForward( true ); } }, [ canGoForward, setCanGoForward, readerTheme, themes, themeSupport ] ); @@ -43,7 +53,7 @@ export function ChooseReaderTheme() { const { availableThemes, unavailableThemes } = useMemo( () => themes.reduce( ( collections, theme ) => { - if ( theme.availability === 'non-installable' ) { + if ( ( AMP_QUERY_VAR_CUSTOMIZED_LATE && theme.slug !== LEGACY_THEME_SLUG ) || theme.availability === 'non-installable' ) { collections.unavailableThemes.push( theme ); } else { collections.availableThemes.push( theme ); @@ -96,7 +106,23 @@ export function ChooseReaderTheme() { { __( 'Unavailable themes', 'amp' ) }

- { __( 'The following themes are compatible but cannot be installed automatically. Please install them manually, or contact your host if you are not able to do so.', 'amp' ) } + { AMP_QUERY_VAR_CUSTOMIZED_LATE + /* dangerouslySetInnerHTML reason: Injection of code tags. */ + ? ${ AMP_QUERY_VAR }`, + `${ DEFAULT_AMP_QUERY_VAR }`, + 'AMP_QUERY_VAR', + 'amp_query_var', + 'plugins_loaded', + ), + } } + /> + : __( 'The following themes are compatible but cannot be installed automatically. Please install them manually, or contact your host if you are not able to do so.', 'amp' ) + }