Combine the copies

apps/wpcom-block-editor/src/wpcom/editor.scss

@@ -1,4 +1,5 @@
 @import "./features/use-classic-block-guide";
+@import "./features/live-preview/upgrade-notice";
 
 .blog-onboarding-hide {
 	.components-external-link, // "Connect an account" link in Jetpack sidebar

apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx

@@ -2,27 +2,13 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import domReady from '@wordpress/dom-ready';
 import { __, sprintf } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import { FC, useEffect } from 'react';
 import { useCanPreviewButNeedUpgrade } from './hooks/use-can-preview-but-need-upgrade';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
 import { LivePreviewUpgradeNotice } from './upgrade-notice';
-import { isPreviewingTheme } from './utils';
+import { getUnlock, isPreviewingTheme } from './utils';
 
-/**
- * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let unlock: ( object: any ) => any | undefined;
-try {
-	unlock = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
-		'@wordpress/edit-site'
-	).unlock;
-} catch ( error ) {
-	// eslint-disable-next-line no-console
-	console.error( 'Error: Unable to get the unlock api. Reason: %s', error );
-}
+const unlock = getUnlock();
 
 const NOTICE_ID = 'wpcom-live-preview/notice';
 
@@ -99,9 +85,7 @@ const LivePreviewNoticePlugin = () => {
 			<LivePreviewNotice
 				{ ...{ canPreviewButNeedUpgrade, previewingThemeName: previewingTheme.name } }
 			/>
-			<LivePreviewUpgradeNotice
-				{ ...{ canPreviewButNeedUpgrade, previewingThemeType: previewingTheme.type } }
-			/>
+			<LivePreviewUpgradeNotice { ...{ canPreviewButNeedUpgrade, previewingTheme } } />
 		</>
 	);
 };

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.scss

@@ -0,0 +1,4 @@
+.components-notice-list .components-notice__action.components-button {
+	display: flex;
+	align-items: center;
+}

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx

@@ -3,7 +3,7 @@ import { getCalypsoUrl } from '@automattic/calypso-url';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { FC, useCallback, useEffect } from 'react';
-import { WOOCOMMERCE_THEME, isPreviewingTheme } from './utils';
+import { WOOCOMMERCE_THEME, getUnlock, isPreviewingTheme } from './utils';
 
 declare global {
 	interface Window {
@@ -13,13 +13,20 @@ declare global {
 
 const UPGRADE_NOTICE_ID = 'wpcom-live-preview/notice/upgrade';
 
+const unlock = getUnlock();
+
 export const LivePreviewUpgradeNotice: FC< {
 	canPreviewButNeedUpgrade: boolean;
-	previewingThemeType?: string;
-} > = ( { canPreviewButNeedUpgrade, previewingThemeType } ) => {
+	previewingTheme: { name: string; type?: string };
+} > = ( { canPreviewButNeedUpgrade, previewingTheme } ) => {
 	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
 
+	const dashboardLink =
+		unlock &&
+		siteEditorStore &&
+		unlock( siteEditorStore ).getSettings().__experimentalDashboardLink;
+
 	const upgradePlan = useCallback( () => {
 		const generateCheckoutUrl = ( plan: string ) => {
 			return `${ getCalypsoUrl() }/checkout/${
@@ -29,13 +36,13 @@ export const LivePreviewUpgradeNotice: FC< {
 			) }&checkoutBackUrl=${ encodeURIComponent( window.location.href ) }`;
 		};
 		const link =
-			previewingThemeType === WOOCOMMERCE_THEME
+			previewingTheme.type === WOOCOMMERCE_THEME
 				? generateCheckoutUrl( PLAN_BUSINESS ) // For a Woo Commerce theme, the users should have the Business plan or higher.
 				: generateCheckoutUrl( PLAN_PREMIUM ); // For a Premium theme, the users should have the Premium plan or higher.
 		window.location.href = link;
 
 		// TODO: Add the track event.
-	}, [ previewingThemeType ] );
+	}, [ previewingTheme.type ] );
 
 	useEffect( () => {
 		// Do nothing in the Post Editor context.
@@ -50,15 +57,16 @@ export const LivePreviewUpgradeNotice: FC< {
 		}
 
 		if ( canPreviewButNeedUpgrade ) {
-			const type = previewingThemeType === WOOCOMMERCE_THEME ? 'Woo Commerce' : 'Premium';
+			const requiredPlan = previewingTheme.type === WOOCOMMERCE_THEME ? 'Business' : 'Premium';
 			createWarningNotice(
 				sprintf(
-					// translators: %s: The theme type ('Woo Commerce' or 'Premium')
+					// translators: %1$s: The previewing theme name, %2$s: The required plan name ('Business' or 'Premium')
 					__(
-						'You are previewing the %s theme that are only available after upgrading to the Premium plan or higher.',
+						'You are previewing the %1$s theme. You can try out your own style customizations, which will only be saved if you activate this theme. This theme can be activated after upgrading to the %2$s plan or higher.',
 						'wpcom-live-preview'
 					),
-					type
+					previewingTheme.name,
+					requiredPlan
 				),
 				{
 					id: UPGRADE_NOTICE_ID,
@@ -69,6 +77,15 @@ export const LivePreviewUpgradeNotice: FC< {
 							onClick: upgradePlan,
 							variant: 'primary',
 						},
+						...( dashboardLink
+							? [
+									{
+										label: __( 'Back to themes', 'wpcom-live-preview' ),
+										url: dashboardLink,
+										variant: 'secondary',
+									},
+							  ]
+							: [] ),
 					],
 				}
 			);
@@ -79,8 +96,10 @@ export const LivePreviewUpgradeNotice: FC< {
 		createWarningNotice,
 		removeNotice,
 		siteEditorStore,
-		previewingThemeType,
 		upgradePlan,
+		previewingTheme.type,
+		previewingTheme.name,
+		dashboardLink,
 	] );
 	return null;
 };

apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts

@@ -1,8 +1,28 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import { getQueryArg } from '@wordpress/url';
 
 export const WOOCOMMERCE_THEME = 'woocommerce';
 export const PREMIUM_THEME = 'premium';
 
+export const getUnlock = () => {
+	/**
+	 * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let unlock: ( object: any ) => any | undefined;
+	try {
+		unlock = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+			'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+			'@wordpress/edit-site'
+		).unlock;
+		return unlock;
+	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.error( 'Error: Unable to get the unlock api. Reason: %s', error );
+		return undefined;
+	}
+};
+
 /**
  * Return true if the user is currently previewing a theme.
  * FIXME: This is copied from Gutenberg; we should be creating a selector for the `core/edit-site` store.