Live Preview: Add the upgrade notice on the sidebar for Premium and W…

…oo themes (#84676)

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

@@ -21,7 +21,6 @@ const LivePreviewNotice: FC< {
 	previewingThemeName?: string;
 } > = ( { previewingThemeName } ) => {
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
-	const { set: setPreferences } = useDispatch( 'core/preferences' );
 
 	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
 	const dashboardLink =
@@ -39,10 +38,6 @@ const LivePreviewNotice: FC< {
 			return;
 		}
 
-		// Suppress the "Looking for template parts?" notice in the Site Editor sidebar.
-		// The preference name is defined in https://github.com/WordPress/gutenberg/blob/d47419499cd58e20db25c370cdbf02ddf7cffce0/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js#L9.
-		setPreferences( 'core', 'isTemplatePartMoveHintVisible', false );
-
 		createWarningNotice(
 			sprintf(
 				// translators: %s: theme name
@@ -65,22 +60,30 @@ const LivePreviewNotice: FC< {
 			}
 		);
 		return () => removeNotice( NOTICE_ID );
-	}, [
-		siteEditorStore,
-		dashboardLink,
-		setPreferences,
-		createWarningNotice,
-		removeNotice,
-		previewingThemeName,
-	] );
+	}, [ siteEditorStore, dashboardLink, createWarningNotice, removeNotice, previewingThemeName ] );
 	return null;
 };
 
 const LivePreviewNoticePlugin = () => {
+	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
 	const previewingTheme = usePreviewingTheme();
 	const { canPreviewButNeedUpgrade, upgradePlan } = useCanPreviewButNeedUpgrade( {
 		previewingTheme,
 	} );
+
+	const { set: setPreferences } = useDispatch( 'core/preferences' );
+	useEffect( () => {
+		if ( ! siteEditorStore ) {
+			return;
+		}
+		if ( ! previewingTheme.name ) {
+			return;
+		}
+		// Suppress the "Looking for template parts?" notice in the Site Editor sidebar.
+		// The preference name is defined in https://github.com/WordPress/gutenberg/blob/d47419499cd58e20db25c370cdbf02ddf7cffce0/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js#L9.
+		setPreferences( 'core', 'isTemplatePartMoveHintVisible', false );
+	}, [ previewingTheme.name, setPreferences, siteEditorStore ] );
+
 	if ( canPreviewButNeedUpgrade ) {
 		return <LivePreviewUpgradeNotice { ...{ previewingTheme, upgradePlan } } />;
 	}

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

@@ -2,3 +2,21 @@
 	display: flex;
 	align-items: center;
 }
+
+.wpcom-live-preview-upgrade-notice-view-container {
+	padding: 24px 24px 0;
+	border-top: 1px solid #2f2f2f;
+	.wpcom-live-preview-upgrade-notice-view {
+		margin: 0 0 24px;
+		color: var(--color-text);
+
+		.components-notice__content {
+			margin-right: 0;
+		}
+
+		.components-notice__action {
+			margin: 8px 0 0;
+		}
+	}
+}
+

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

@@ -1,6 +1,8 @@
+import { Notice } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { render } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
 import { getUnlock, isPreviewingTheme } from './utils';
 
@@ -14,39 +16,74 @@ const UPGRADE_NOTICE_ID = 'wpcom-live-preview/notice/upgrade';
 
 const unlock = getUnlock();
 
+const LivePreviewUpgradeNoticeView: FC< {
+	noticeText: string;
+	upgradePlan: () => void;
+} > = ( { noticeText, upgradePlan } ) => {
+	return (
+		<Notice
+			status="warning"
+			isDismissible={ false }
+			className="wpcom-live-preview-upgrade-notice-view"
+			actions={ [
+				{
+					// TODO: Add the tracking event.
+					label: __( 'Upgrade now', 'wpcom-live-preview' ),
+					onClick: upgradePlan,
+					variant: 'primary',
+				},
+			] }
+		>
+			{ noticeText }
+		</Notice>
+	);
+};
+
 export const LivePreviewUpgradeNotice: FC< {
 	previewingTheme: ReturnType< typeof usePreviewingTheme >;
 	upgradePlan: () => void;
 } > = ( { previewingTheme, upgradePlan } ) => {
-	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
+	const [ isRendered, setIsRendered ] = useState( false );
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
-
+	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
+	const canvasMode = useSelect(
+		( select ) =>
+			unlock && select( 'core/edit-site' ) && unlock( select( 'core/edit-site' ) ).getCanvasMode(),
+		[ siteEditorStore ]
+	);
 	const dashboardLink =
 		unlock &&
 		siteEditorStore &&
 		unlock( siteEditorStore ).getSettings().__experimentalDashboardLink;
 
+	const noticeText = sprintf(
+		// translators: %1$s: The previewing theme name, %2$s: The theme type ('WooCommerce' or 'Premium')
+		__(
+			'You are previewing %1$s, a %2$s theme. You can try out your own style customizations, which will only be saved if you upgrade and activate this theme.',
+			'wpcom-live-preview'
+		),
+		previewingTheme.name,
+		previewingTheme.typeDisplay
+	);
+
+	/**
+	 * Show the notice when the canvas mode is 'edit'.
+	 */
 	useEffect( () => {
 		// Do nothing in the Post Editor context.
 		if ( ! siteEditorStore ) {
 			removeNotice( UPGRADE_NOTICE_ID );
 			return;
 		}
-
+		if ( canvasMode !== 'edit' ) {
+			removeNotice( UPGRADE_NOTICE_ID );
+			return;
+		}
 		if ( ! isPreviewingTheme() ) {
 			removeNotice( UPGRADE_NOTICE_ID );
 			return;
 		}
 
-		const noticeText = sprintf(
-			// translators: %1$s: The previewing theme name, %2$s: The theme type ('WooCommerce' or 'Premium')
-			__(
-				'You are previewing %1$s, a %2$s theme. You can try out your own style customizations, which will only be saved if you upgrade and activate this theme.',
-				'wpcom-live-preview'
-			),
-			previewingTheme.name,
-			previewingTheme.typeDisplay
-		);
 		createWarningNotice( noticeText, {
 			id: UPGRADE_NOTICE_ID,
 			isDismissible: false,
@@ -70,14 +107,58 @@ export const LivePreviewUpgradeNotice: FC< {
 		} );
 		return () => removeNotice( UPGRADE_NOTICE_ID );
 	}, [
+		canvasMode,
 		createWarningNotice,
+		dashboardLink,
+		noticeText,
+		previewingTheme.name,
+		previewingTheme.type,
+		previewingTheme.typeDisplay,
 		removeNotice,
 		siteEditorStore,
 		upgradePlan,
-		previewingTheme.type,
-		previewingTheme.name,
-		dashboardLink,
-		previewingTheme.typeDisplay,
 	] );
+
+	/**
+	 * Show the notice when the canvas mode is 'view'.
+	 */
+	useEffect( () => {
+		// Do nothing in the Post Editor context.
+		if ( ! siteEditorStore ) {
+			return;
+		}
+		if ( canvasMode !== 'view' ) {
+			return;
+		}
+		if ( isRendered ) {
+			return;
+		}
+		if ( ! isPreviewingTheme() ) {
+			return;
+		}
+
+		const SAVE_HUB_SELECTOR = '.edit-site-save-hub';
+		const saveHub = document.querySelector( SAVE_HUB_SELECTOR );
+		if ( ! saveHub ) {
+			return;
+		}
+
+		// Insert the notice as a sibling of the save hub instead of as a child,
+		// to prevent our notice from breaking the flex styles of the hub.
+		const container = saveHub.parentNode;
+		const noticeContainer = document.createElement( 'div' );
+		noticeContainer.classList.add( 'wpcom-live-preview-upgrade-notice-view-container' );
+		if ( container ) {
+			container.insertBefore( noticeContainer, saveHub );
+		}
+
+		render(
+			<LivePreviewUpgradeNoticeView noticeText={ noticeText } upgradePlan={ upgradePlan } />,
+			noticeContainer
+		);
+
+		setIsRendered( true );
+	}, [ canvasMode, isRendered, noticeText, previewingTheme, siteEditorStore, upgradePlan ] );
+
 	return null;
 };

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

@@ -4,6 +4,10 @@ import { getQueryArg } from '@wordpress/url';
 export const WOOCOMMERCE_THEME = 'woocommerce';
 export const PREMIUM_THEME = 'premium';
 
+/**
+ * Get unlock API from Gutenberg.
+ * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.
+ */
 export const getUnlock = () => {
 	/**
 	 * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.