Add the “Live Preview” button on the Theme Detail page

client/my-sites/theme/live-preview-button/index.jsx

@@ -0,0 +1,140 @@
+import { Button } from '@automattic/components';
+
+/**
+ * Hardcoded list of themes that are not compatible with Block Theme Previews.
+ * This list should be removed once they are retired.
+ *
+ * @see pekYwv-284-p2
+ */
+const NOT_COMPATIBLE_THEMES = [
+	'premium/alonso',
+	'premium/baxter',
+	'premium/byrne',
+	'premium/kerr',
+	'premium/munchies',
+	'premium/payton',
+	'premium/skivers',
+	'premium/thriving-artist',
+	'pub/ames',
+	'pub/antonia',
+	'pub/appleton',
+	'pub/arbutus',
+	'pub/attar',
+	'pub/barnett',
+	'pub/bennett',
+	'pub/calvin',
+	'pub/calyx',
+	'pub/course',
+	'pub/dorna',
+	'pub/farrow',
+	'pub/geologist-blue',
+	'pub/geologist-cream',
+	'pub/geologist-slate',
+	'pub/geologist-yellow',
+	'pub/hari',
+	'pub/heiwa',
+	'pub/jackson',
+	'pub/kingsley',
+	'pub/marl',
+	'pub/meraki',
+	'pub/quadrat-black',
+	'pub/quadrat-green',
+	'pub/quadrat-red',
+	'pub/quadrat-white',
+	'pub/quadrat-yellow',
+	'pub/quadrat',
+	'pub/russell',
+	'pub/seedlet-blocks',
+	'pub/winkel',
+];
+
+const isNotCompatibleThemes = ( stylesheet ) => {
+	return NOT_COMPATIBLE_THEMES.includes( stylesheet );
+};
+
+/**
+ * Live Preview leveraging Gutenberg's Block Theme Previews
+ *
+ * The scenarios where the Live Preview does NOT support;
+ * - On both Simple and Atomic sites;
+ *   - If the theme is users' active theme.
+ *   - If the theme is not FullSiteEditing compatible.
+ *   - If the theme has a static page as a homepage.
+ * - On Atomic sites;
+ *   - If the theme is not installed on Atomic sites.
+ * - On Simple sites;
+ *   - If the theme is a 3rd party theme.
+ *   - If the theme is not included in a plan.
+ *
+ * @see pbxlJb-3Uv-p2
+ */
+export const LivePreviewButton = ( {
+	canUseTheme,
+	isActive,
+	isAtomic,
+	isExternallyManagedTheme,
+	isFullSiteEditingTheme,
+	isSimple,
+	isThemeInstalledOnAtomicSite,
+	isWporg,
+	siteSlug,
+	stylesheet,
+	themeId,
+	translate,
+} ) => {
+	// A user doesn't want to preview the active theme.
+	if ( isActive ) {
+		return null;
+	}
+
+	// A theme should be FullSiteEditing compatible to use Block Theme Previews.
+	if ( ! isFullSiteEditingTheme ) {
+		return null;
+	}
+
+	/**
+	 * Block Theme Previews do not support themes with a static page as a homepage
+	 * as the Site Editor cannot control Reading Settings.
+	 *
+	 * @see pekYwv-284-p2#background
+	 */
+	if ( isNotCompatibleThemes( stylesheet ) ) {
+		return null;
+	}
+
+	// Block Theme Previews need the theme installed on Atomic sites.
+	if ( isAtomic && ! isThemeInstalledOnAtomicSite ) {
+		return null;
+	}
+
+	if ( isSimple ) {
+		/**
+		 * Disable Live Preview for 3rd party themes, as Block Theme Previews need a theme installed.
+		 * Note that BTP works on Atomic sites if a theme is installed.
+		 */
+		if ( isExternallyManagedTheme || isWporg ) {
+			return null;
+		}
+
+		/**
+		 * Disable Live Preview for themes that are not included in a plan.
+		 * This should be updated as we implement the flow for them.
+		 * Note that BTP works on Atomic sites if a theme is installed.
+		 *
+		 * @see https://github.com/Automattic/wp-calypso/issues/79223
+		 */
+		if ( ! canUseTheme ) {
+			return null;
+		}
+	}
+
+	const themePath = isAtomic ? themeId : stylesheet;
+
+	return (
+		<Button
+			href={ `https://${ siteSlug }/wp-admin/site-editor.php?wp_theme_preview=${ themePath }` }
+		>
+			{ translate( 'Live Preview' ) }
+		</Button>
+	);
+};

client/my-sites/theme/main.jsx

@@ -34,6 +34,7 @@ import QueryCanonicalTheme from 'calypso/components/data/query-canonical-theme';
 import QueryProductsList from 'calypso/components/data/query-products-list';
 import QuerySitePlans from 'calypso/components/data/query-site-plans';
 import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
+import QueryTheme from 'calypso/components/data/query-theme';
 import QueryUserPurchases from 'calypso/components/data/query-user-purchases';
 import SyncActiveTheme from 'calypso/components/data/sync-active-theme';
 import HeaderCake from 'calypso/components/header-cake';
@@ -66,12 +67,13 @@ import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams';
 import isVipSite from 'calypso/state/selectors/is-vip-site';
 import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { useSiteGlobalStylesStatus } from 'calypso/state/sites/hooks/use-site-global-styles-status';
-import { getSiteSlug, isJetpackSite } from 'calypso/state/sites/selectors';
+import { getSiteSlug, isJetpackSite, isSimpleSite } from 'calypso/state/sites/selectors';
 import {
 	setThemePreviewOptions,
 	themeStartActivationSync as themeStartActivationSyncAction,
 } from 'calypso/state/themes/actions';
 import {
+	canUseTheme as getCanUseTheme,
 	doesThemeBundleSoftwareSet,
 	isThemeActive,
 	isThemePremium,
@@ -81,55 +83,30 @@ import {
 	isWporgTheme,
 	getCanonicalTheme,
 	getPremiumThemePrice,
+	getThemeDemoUrl,
 	getThemeDetailsUrl,
-	getThemeRequestErrors,
 	getThemeForumUrl,
-	getThemeDemoUrl,
+	getThemeRequestErrors,
 	shouldShowTryAndCustomize,
 	isExternallyManagedTheme as getIsExternallyManagedTheme,
 	isSiteEligibleForManagedExternalThemes as getIsSiteEligibleForManagedExternalThemes,
 	isMarketplaceThemeSubscribed as getIsMarketplaceThemeSubscribed,
 	isThemeActivationSyncStarted as getIsThemeActivationSyncStarted,
+	isFullSiteEditingTheme as getIsFullSiteEditingTheme,
 } from 'calypso/state/themes/selectors';
 import { getIsLoadingCart } from 'calypso/state/themes/selectors/get-is-loading-cart';
 import { getBackPath } from 'calypso/state/themes/themes-ui/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import { getTheme } from '../../state/themes/selectors';
 import EligibilityWarningModal from '../themes/atomic-transfer-dialog';
+import { LivePreviewButton } from './live-preview-button';
 import ThemeDownloadCard from './theme-download-card';
 import ThemeFeaturesCard from './theme-features-card';
 import ThemeNotFoundError from './theme-not-found-error';
 import ThemeStyleVariations from './theme-style-variations';
 
 import './style.scss';
 
-const LivePreviewButton = ( {
-	isActive,
-	isAtomic,
-	isExternallyManagedTheme,
-	isWporg,
-	showTryAndCustomize,
-	siteSlug,
-	stylesheet,
-} ) => {
-	if ( isActive ) {
-		return null;
-	}
-	if ( showTryAndCustomize ) {
-		return null;
-	}
-	if ( isAtomic ) {
-		return null;
-	}
-	if ( isExternallyManagedTheme || isWporg ) {
-		return null;
-	}
-	return (
-		<Button href={ `https://${ siteSlug }/wp-admin/site-editor.php?theme_preview=${ stylesheet }` }>
-			Live Preview (PoC)
-		</Button>
-	);
-};
-
 const noop = () => {};
 
 class ThemeSheet extends Component {
@@ -648,6 +625,11 @@ class ThemeSheet extends Component {
 			isExternallyManagedTheme,
 			isWporg,
 			isLoggedIn,
+			canUseTheme,
+			isFullSiteEditingTheme,
+			isSimple,
+			isThemeInstalledOnAtomicSite,
+			themeId,
 		} = this.props;
 		const placeholder = <span className="theme__sheet-placeholder">loading.....</span>;
 		const title = name || placeholder;
@@ -671,21 +653,27 @@ class ThemeSheet extends Component {
 						<span className="theme__sheet-main-info-tag">{ tag }</span>
 					</div>
 					<div className="theme__sheet-main-actions">
-						{ config.isEnabled( 'themes/block-theme-previews-poc' ) && (
+						{ shouldRenderButton &&
+							( this.shouldRenderUnlockStyleButton()
+								? this.renderUnlockStyleButton()
+								: this.renderButton() ) }
+						{ config.isEnabled( 'themes/block-theme-previews' ) && (
 							<LivePreviewButton
+								canUseTheme={ canUseTheme }
 								isActive={ isActive }
 								isAtomic={ isAtomic }
 								isExternallyManagedTheme={ isExternallyManagedTheme }
+								isFullSiteEditingTheme={ isFullSiteEditingTheme }
+								isSimple={ isSimple }
+								isThemeInstalledOnAtomicSite={ isThemeInstalledOnAtomicSite }
 								isWporg={ isWporg }
 								showTryAndCustomize={ showTryAndCustomize }
 								siteSlug={ siteSlug }
 								stylesheet={ stylesheet }
+								themeId={ themeId }
+								translate={ translate }
 							></LivePreviewButton>
 						) }
-						{ shouldRenderButton &&
-							( this.shouldRenderUnlockStyleButton()
-								? this.renderUnlockStyleButton()
-								: this.renderButton() ) }
 						{ this.shouldRenderPreviewButton() && (
 							<Button
 								onClick={ ( e ) => {
@@ -1389,6 +1377,7 @@ class ThemeSheet extends Component {
 		return (
 			<Main className={ className }>
 				<QueryCanonicalTheme themeId={ this.props.themeId } siteId={ siteId } />
+				<QueryTheme themeId={ this.props.themeId } siteId={ siteId } />
 				<QueryProductsList />
 				<QueryUserPurchases />
 				{
@@ -1575,6 +1564,12 @@ export default connect(
 		const isMarketplaceThemeSubscribed =
 			isExternallyManagedTheme && getIsMarketplaceThemeSubscribed( state, theme?.id, siteId );
 
+		const isThemeInstalledOnAtomicSite = isAtomic && !! getTheme( state, siteId, themeId );
+
+		const isFullSiteEditingTheme = config.isEnabled( 'themes/block-theme-previews' )
+			? getIsFullSiteEditingTheme( state, themeId )
+			: undefined;
+
 		return {
 			...theme,
 			themeId,
@@ -1592,15 +1587,19 @@ export default connect(
 			isActive: isThemeActive( state, themeId, siteId ),
 			isJetpack,
 			isAtomic,
+			isFullSiteEditingTheme,
 			isStandaloneJetpack,
 			isVip: isVipSite( state, siteId ),
 			isPremium: isThemePremium( state, themeId ),
+			isThemeInstalledOnAtomicSite,
 			isThemePurchased: isPremiumThemeAvailable( state, themeId, siteId ),
 			isBundledSoftwareSet: doesThemeBundleSoftwareSet( state, themeId ),
+			isSimple: isSimpleSite( state, siteId ),
 			isSiteBundleEligible: isSiteEligibleForBundledSoftware( state, siteId ),
 			forumUrl: getThemeForumUrl( state, themeId, siteId ),
 			hasUnlimitedPremiumThemes: siteHasFeature( state, siteId, WPCOM_FEATURES_PREMIUM_THEMES ),
 			showTryAndCustomize: shouldShowTryAndCustomize( state, themeId, siteId ),
+			canUseTheme: getCanUseTheme( state, siteId, themeId ),
 			canUserUploadThemes: siteHasFeature( state, siteId, FEATURE_UPLOAD_THEMES ),
 			// Remove the trailing slash because the page URL doesn't have one either.
 			canonicalUrl: localizeUrl( englishUrl, getLocaleSlug(), false ).replace( /\/$/, '' ),

client/my-sites/theme/style.scss

@@ -197,7 +197,7 @@ $theme-sheet-content-max-width: 1462px;
 			width: 100%;
 		}
 
-		button {
+		.button {
 			border-radius: 4px;
 
 			@include breakpoint-deprecated( "<960px" ) {

client/state/themes/selectors/is-full-site-editing-theme.ts

@@ -11,7 +11,7 @@ export function isFullSiteEditingTheme(
 	if ( ! themeId ) {
 		return false;
 	}
-	const theme = getTheme( state, 'wpcom', themeId );
+	const theme = getTheme( state, 'wpcom', themeId ) || getTheme( state, 'wporg', themeId );
 	if ( ! theme ) {
 		return false;
 	}

config/development.json

@@ -197,7 +197,6 @@
 		"subscription-management/comments-list-controls": true,
 		"subscription-management-redirect-following": true,
 		"themes/atomic-homepage-replace": true,
-		"themes/block-theme-previews-poc": true,
 		"themes/block-theme-previews": true,
 		"themes/display-thank-you-page-for-woo": true,
 		"themes/premium": true,

config/horizon.json

@@ -134,7 +134,6 @@
 		"subscription-management/comments-list-controls": true,
 		"subscription-management-redirect-following": true,
 		"themes/atomic-homepage-replace": true,
-		"themes/block-theme-previews-poc": true,
 		"themes/block-theme-previews": true,
 		"themes/display-thank-you-page-for-woo": true,
 		"themes/premium": true,

config/production.json

@@ -161,7 +161,6 @@
 		"subscription-management/comments-list-controls": true,
 		"subscription-management-redirect-following": true,
 		"themes/atomic-homepage-replace": true,
-		"themes/block-theme-previews-poc": false,
 		"themes/block-theme-previews": false,
 		"themes/display-thank-you-page-for-woo": true,
 		"themes/premium": true,

config/stage.json

@@ -154,7 +154,6 @@
 		"subscription-management/comments-list-controls": true,
 		"subscription-management-redirect-following": true,
 		"themes/atomic-homepage-replace": true,
-		"themes/block-theme-previews-poc": false,
 		"themes/block-theme-previews": false,
 		"themes/display-thank-you-page-for-woo": true,
 		"themes/premium": true,

config/wpcalypso.json

@@ -166,7 +166,6 @@
 		"subscription-management/comments-list-controls": true,
 		"subscription-management-redirect-following": true,
 		"themes/atomic-homepage-replace": true,
-		"themes/block-theme-previews-poc": true,
 		"themes/block-theme-previews": true,
 		"themes/display-thank-you-page-for-woo": true,
 		"themes/premium": true,