Repository: Automattic/wp-calypso
Pull request #102810: Live Preview: Remove notices
Author: login: taipeicoder
Created: 2025-04-24T01:28:06Z | Merged: 2025-04-24T02:30:35Z

Ref DOTCOM-568

## Proposed Changes

This PR removes Live Preview notices to make the experience more consistent with core.

Upgrade needed:
![Screenshot 2025-04-24 at 9 23 34 AM](https://github.com/user-attachments/assets/45a6e07d-095e-4a3d-a2cb-ebb197e8c7e0)

Upgrade not needed:
![Screenshot 2025-04-24 at 9 24 34 AM](https://github.com/user-attachments/assets/3554010e-1f17-4967-b256-8b30a3920097)


## Why are these changes being made?
<!--
It's easy to see what a PR does but much harder to find out why it was made,
particularly when researching old changes in history. Record an explanation of
the motivation behind this change and how it will help.
-->

Contributes to the overall WP.com polish.

## Testing Instructions

<!--
Add as many details as possible to help others reproduce the issue and test the fix.
"Before / After" screenshots can also be very helpful when the change is visual.
-->

* Head to Theme Showcase
* Select a theme that needs plan upgrade, such as Amulet
* In the Theme Details page, click on "Preview" and then "Try and Customize"
* In the Site Editor, click the canvas and ensure that the notice is no longer displayed.
* Head back to the Theme Showcase and follow the steps above but with a theme that doesn't need a plan upgrade. 

## Pre-merge Checklist

<!--
Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.
-->

- [x] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [x] [Have you written new tests](https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md) for your changes?
- [x] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- [x] Have you checked for TypeScript, React or other console errors?
- [x] Have you used memoizing on expensive computations? More info in [Memoizing with create-selector](https://github.com/Automattic/wp-calypso/blob/trunk/packages/state-utils/src/create-selector/README.md) and [Using memoizing selectors](https://react-redux.js.org/api/hooks#using-memoizing-selectors) and [Our Approach to Data](https://github.com/Automattic/wp-calypso/blob/trunk/docs/our-approach-to-data.md)
- [x] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    - [x] For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages. 
- [x] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?



Diff:
diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx
index f6842f57e779..5c151167663b 100644
--- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx
+++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx
@@ -1,84 +1,23 @@
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { FC, useEffect } from 'react';
-import { getUnlock } from '../../utils';
-import { NOTICE_ID } from './constants';
+import { useSelect } from '@wordpress/data';
 import { useCanPreviewButNeedUpgrade } from './hooks/use-can-preview-but-need-upgrade';
-import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
 import { LivePreviewUpgradeButton } from './upgrade-button';
-import { LivePreviewUpgradeNotice } from './upgrade-notice';
-
-const unlock = getUnlock();
-
-/**
- * This is an interim solution to clarify to users that they are currently live previewing a theme.
- * And this should be moved to jetpack-mu-wpcom.
- * @see https://github.com/Automattic/wp-calypso/issues/82218
- */
-const LivePreviewNotice: FC< {
-	dashboardLink?: string;
-	previewingThemeName?: string;
-} > = ( { dashboardLink, previewingThemeName } ) => {
-	const { createInfoNotice, removeNotice } = useDispatch( 'core/notices' );
-
-	useHideTemplatePartHint();
-
-	useEffect( () => {
-		createInfoNotice(
-			sprintf(
-				// translators: %s: theme name
-				__(
-					'You are previewing the %s theme. You can try out your own style customizations, which will only be saved if you activate this theme.',
-					'wpcom-live-preview'
-				),
-				previewingThemeName
-			),
-			{
-				id: NOTICE_ID,
-				isDismissible: false,
-				actions: dashboardLink && [
-					{
-						label: __( 'Back to themes', 'wpcom-live-preview' ),
-						url: dashboardLink,
-						variant: 'secondary',
-						className: 'wpcom-live-preview-action',
-					},
-				],
-			}
-		);
-		return () => removeNotice( NOTICE_ID );
-	}, [ dashboardLink, createInfoNotice, removeNotice, previewingThemeName ] );
-	return null;
-};
 
 const LivePreviewNoticePlugin = () => {
 	const isReady = useSelect( ( select ) => select( 'core/editor' ).__unstableIsEditorReady() );
-	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
 	const previewingTheme = usePreviewingTheme();
 	const { canPreviewButNeedUpgrade, upgradePlan } = useCanPreviewButNeedUpgrade( previewingTheme );
-	const dashboardLink = useSelect(
-		( select ) =>
-			unlock &&
-			select( 'core/edit-site' ) &&
-			unlock( siteEditorStore ).getSettings().__experimentalDashboardLink,
-		[ siteEditorStore ]
-	);
 
 	// Do nothing if the user is NOT previewing a theme.
 	if ( ! previewingTheme.name ) {
 		return null;
 	}
 
-	if ( canPreviewButNeedUpgrade ) {
-		return (
-			<>
-				{ isReady && <LivePreviewUpgradeButton { ...{ previewingTheme, upgradePlan } } /> }
-				<LivePreviewUpgradeNotice { ...{ previewingTheme, dashboardLink } } />
-			</>
-		);
+	if ( canPreviewButNeedUpgrade && isReady ) {
+		return <LivePreviewUpgradeButton { ...{ previewingTheme, upgradePlan } } />;
 	}
-	return <LivePreviewNotice { ...{ dashboardLink, previewingThemeName: previewingTheme.name } } />;
+
+	return null;
 };
 
 export default LivePreviewNoticePlugin;
diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx
deleted file mode 100644
index a8bdaa8b1c3d..000000000000
--- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { FC, useEffect } from 'react';
-import { UPGRADE_NOTICE_ID } from './constants';
-import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
-import { usePreviewingTheme } from './hooks/use-previewing-theme';
-import { useSidebarNotice } from './hooks/use-sidebar-notice';
-
-declare global {
-	interface Window {
-		_currentSiteId: number;
-	}
-}
-
-export const LivePreviewUpgradeNotice: FC< {
-	dashboardLink?: string;
-	previewingTheme: ReturnType< typeof usePreviewingTheme >;
-} > = ( { dashboardLink, previewingTheme } ) => {
-	const { createInfoNotice, removeNotice } = useDispatch( 'core/notices' );
-	useHideTemplatePartHint();
-
-	const noticeText = sprintf(
-		// translators: %s: plan name (e.g. Starter, Explorer).
-		__(
-			'Get access to this theme, and a ton of other features, with a subscription to the %s plan.',
-			'wpcom-live-preview'
-		),
-		previewingTheme.plan
-	);
-
-	/**
-	 * Show the notice when the canvas mode is 'edit'.
-	 */
-	useEffect( () => {
-		createInfoNotice( noticeText, {
-			id: UPGRADE_NOTICE_ID,
-			isDismissible: false,
-			__unstableHTML: true,
-			actions: [
-				...( dashboardLink
-					? [
-							{
-								label: __( 'Back to themes', 'wpcom-live-preview' ),
-								url: dashboardLink,
-								variant: 'secondary',
-								className: 'wpcom-live-preview-action',
-							},
-					  ]
-					: [] ),
-			],
-		} );
-		return () => {
-			removeNotice( UPGRADE_NOTICE_ID );
-		};
-	}, [ createInfoNotice, dashboardLink, noticeText, removeNotice ] );
-
-	/**
-	 * Show the notice when the canvas mode is 'view'.
-	 */
-	useSidebarNotice( {
-		noticeProps: {
-			status: 'info',
-			isDismissible: false,
-			children: noticeText,
-		},
-	} );
-
-	return null;
-};


Reviews:
user: login: fushar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T02:41:01Z
user: login: taipeicoder
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T03:01:53Z
user: login: jameskoster
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-25T13:10:35Z

Review comments:
diff_hunk: @@ -1,69 +0,0 @@
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { FC, useEffect } from 'react';
-import { UPGRADE_NOTICE_ID } from './constants';
-import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
-import { usePreviewingTheme } from './hooks/use-previewing-theme';
-import { useSidebarNotice } from './hooks/use-sidebar-notice';
-
-declare global {
-	interface Window {
-		_currentSiteId: number;
-	}
-}
-
-export const LivePreviewUpgradeNotice: FC< {
-	dashboardLink?: string;
-	previewingTheme: ReturnType< typeof usePreviewingTheme >;
-} > = ( { dashboardLink, previewingTheme } ) => {
-	const { createInfoNotice, removeNotice } = useDispatch( 'core/notices' );
-	useHideTemplatePartHint();
-
-	const noticeText = sprintf(
-		// translators: %s: plan name (e.g. Starter, Explorer).
-		__(
-			'Get access to this theme, and a ton of other features, with a subscription to the %s plan.',
path: apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx
user: login: fushar
body: In case of previewing a paid theme, would it be confusing if this notice is not there? The CTA button just says `Upgrade now` without any explanation on why we should upgrade 🤔 

<img width="382" alt="image" src="https://github.com/user-attachments/assets/58a38a67-cad1-4c22-bd88-cdae1b133a8a" />

cc: @jameskoster 

Maybe we can adjust the copy to something like this

<img width="246" alt="image" src="https://github.com/user-attachments/assets/ca8c4481-e124-4ce2-97c5-15cc56235215" />

created_at: 2025-04-24T02:41:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,69 +0,0 @@
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { FC, useEffect } from 'react';
-import { UPGRADE_NOTICE_ID } from './constants';
-import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
-import { usePreviewingTheme } from './hooks/use-previewing-theme';
-import { useSidebarNotice } from './hooks/use-sidebar-notice';
-
-declare global {
-	interface Window {
-		_currentSiteId: number;
-	}
-}
-
-export const LivePreviewUpgradeNotice: FC< {
-	dashboardLink?: string;
-	previewingTheme: ReturnType< typeof usePreviewingTheme >;
-} > = ( { dashboardLink, previewingTheme } ) => {
-	const { createInfoNotice, removeNotice } = useDispatch( 'core/notices' );
-	useHideTemplatePartHint();
-
-	const noticeText = sprintf(
-		// translators: %s: plan name (e.g. Starter, Explorer).
-		__(
-			'Get access to this theme, and a ton of other features, with a subscription to the %s plan.',
path: apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx
user: login: taipeicoder
body: Good point, I'll proceed with this change if James doesn't have any concerns 🙂
created_at: 2025-04-24T03:01:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,69 +0,0 @@
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { FC, useEffect } from 'react';
-import { UPGRADE_NOTICE_ID } from './constants';
-import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
-import { usePreviewingTheme } from './hooks/use-previewing-theme';
-import { useSidebarNotice } from './hooks/use-sidebar-notice';
-
-declare global {
-	interface Window {
-		_currentSiteId: number;
-	}
-}
-
-export const LivePreviewUpgradeNotice: FC< {
-	dashboardLink?: string;
-	previewingTheme: ReturnType< typeof usePreviewingTheme >;
-} > = ( { dashboardLink, previewingTheme } ) => {
-	const { createInfoNotice, removeNotice } = useDispatch( 'core/notices' );
-	useHideTemplatePartHint();
-
-	const noticeText = sprintf(
-		// translators: %s: plan name (e.g. Starter, Explorer).
-		__(
-			'Get access to this theme, and a ton of other features, with a subscription to the %s plan.',
path: apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx
user: login: jameskoster
body: I guess the user will have entered this flow with the understanding that they're previewing a premium theme, so with that in mind would something shorter work? "Upgrade and activate"?<br><br>Not a big deal, but the label is a little bit long otherwise.
created_at: 2025-04-25T13:10:35Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-24T01:28:18Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141398">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-141398%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141398">https://calypso.live?image=registry.a8c.com/calypso/app:build-141398</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141398&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-141398%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141398&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-141398&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141398&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-141398%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141398&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-141398&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-04-24T01:32:32Z
body: <!-- icfy-watermark: c52822 -->
This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-04-24T01:35:10Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* wpcom-block-editor

To test WordPress.com changes, run `install-plugin.sh $pluginSlug remove/DOTCOM-568-live-preview-notices` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: taipeicoder
created_at: 2025-04-24T02:30:26Z
body: Should a straightforward change. Merging!
author_association: CONTRIBUTOR