From b39d86e584dc1a32f5035c426d79fd065660deee Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Mon, 8 May 2023 12:25:06 +0200
Subject: [PATCH 01/15] Preview limited Global Styles by default

---
 .../editing-toolkit-plugin/wpcom-global-styles/index.php    | 6 +++---
 .../steps-repository/launchpad/launchpad-site-preview.tsx   | 3 ---
 client/landing/stepper/hooks/use-accent-color.ts            | 2 +-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
index 9b987c8002ca0b..1f453f1a957082 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
@@ -423,10 +423,10 @@ function wpcom_display_global_styles_launch_bar( $bar_controls ) {
 
 	if ( wpcom_is_previewing_global_styles() ) {
 		$preview_text     = __( 'Turn off preview', 'full-site-editing' );
-		$preview_location = remove_query_arg( 'preview-global-styles' );
+		$preview_location = add_query_arg( 'hide-global-styles', '' );
 	} else {
 		$preview_text     = __( 'Turn on preview', 'full-site-editing' );
-		$preview_location = add_query_arg( 'preview-global-styles', '' );
+		$preview_location = remove_query_arg( 'hide-global-styles' );
 	}
 
 	ob_start(); ?>
@@ -534,5 +534,5 @@ function wpcom_is_previewing_global_styles( ?int $user_id = null ) {
 	}
 
 	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
-	return isset( $_GET['preview-global-styles'] ) && user_can( $user_id, 'administrator' );
+	return ! isset( $_GET['hide-global-styles'] ) && user_can( $user_id, 'administrator' );
 }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/launchpad-site-preview.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/launchpad-site-preview.tsx
index ef4da3409def3e..4678eb5c13609b 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/launchpad-site-preview.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/launchpad-site-preview.tsx
@@ -15,7 +15,6 @@ import WebPreview from 'calypso/components/web-preview/component';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { useSitePreviewShareCode } from 'calypso/landing/stepper/hooks/use-site-preview-share-code';
 import { isVideoPressFlow } from 'calypso/signup/utils';
-import { usePremiumGlobalStyles } from 'calypso/state/sites/hooks/use-premium-global-styles';
 import PreviewToolbar from '../design-setup/preview-toolbar';
 import type { Device } from '@automattic/components';
 
@@ -45,7 +44,6 @@ const LaunchpadSitePreview = ( {
 } ) => {
 	const translate = useTranslate();
 	const site = useSite();
-	const { globalStylesInUse } = usePremiumGlobalStyles( site?.ID );
 	const isInVideoPressFlow = isVideoPressFlow( flow );
 	const enableEditOverlay = getEnableEditOverlay( flow );
 
@@ -93,7 +91,6 @@ const LaunchpadSitePreview = ( {
 			// hide cookies popup
 			preview: true,
 			do_preview_no_interactions: ! isInVideoPressFlow,
-			...( globalStylesInUse && { 'preview-global-styles': true } ),
 		} );
 	}
 
diff --git a/client/landing/stepper/hooks/use-accent-color.ts b/client/landing/stepper/hooks/use-accent-color.ts
index 671fc996038321..0c34dc8c99a03a 100644
--- a/client/landing/stepper/hooks/use-accent-color.ts
+++ b/client/landing/stepper/hooks/use-accent-color.ts
@@ -9,7 +9,7 @@ const useAccentColor = () => {
 	if ( ID ) {
 		wpcom.req
 			.get( {
-				path: `/sites/${ ID }/global-styles-variation/site-accent-color?preview-global-styles=true`,
+				path: `/sites/${ ID }/global-styles-variation/site-accent-color`,
 				apiNamespace: 'wpcom/v2',
 			} )
 			.then( ( color: string ) => {

From af9fcc740dc0ad2646a7d5a22011b35fb2f085e6 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 11 May 2023 17:44:12 +0200
Subject: [PATCH 02/15] Show global notice

---
 .../global-style-sidebar-notice.tsx           |  71 ---------
 .../wpcom-global-styles/index.js              |   2 -
 .../wpcom-global-styles/index.php             |   6 +-
 .../wpcom-global-styles/modal.js              |  22 ++-
 .../wpcom-global-styles/notice.js             | 146 ++++++++----------
 .../wpcom-global-styles/tracks-events.ts      |  32 +---
 .../use-global-styles-config.js               |   8 +-
 7 files changed, 93 insertions(+), 194 deletions(-)
 delete mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx
deleted file mode 100644
index 8f984e932b74df..00000000000000
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-declare const wpcomGlobalStyles: { upgradeUrl: string; blogId: string };
-
-import { ExternalLink, Fill, Notice } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { createInterpolateElement, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { recordUpgradeNoticeSidebarShow, recordUpgradeSidebarNoticeClick } from './tracks-events';
-import { useGlobalStylesConfig } from './use-global-styles-config';
-
-const GLOBAL_STYLES_SIDEBAR = 'edit-site/global-styles';
-
-type CoreInterfacePlaceholder = {
-	getActiveComplementaryArea: ( area: string ) => string;
-};
-
-export default function GlobalStylesSidebarNotice(): JSX.Element {
-	const area = useSelect(
-		( select ) =>
-			( select( 'core/interface' ) as CoreInterfacePlaceholder ).getActiveComplementaryArea(
-				'core/edit-site'
-			),
-		[]
-	);
-
-	const isGlobalStylesSidebar = GLOBAL_STYLES_SIDEBAR === area;
-
-	const globalStylesInUse = useGlobalStylesConfig().globalStylesInUse;
-
-	useEffect( () => {
-		if ( globalStylesInUse && isGlobalStylesSidebar ) {
-			recordUpgradeNoticeSidebarShow();
-		}
-	}, [ globalStylesInUse, isGlobalStylesSidebar ] );
-
-	return (
-		<Fill name="ComplementaryArea/core/edit-site">
-			{ /*
-			The fragment is needed in order to avoid a forceUpdate done by the slot-fill library.
-
-			When a forceUpdate is done, the local state of the components is cleared, which means that when the nudge is displayed/removed,
-			the state of GS is cleared, disrupting the UX, since the user will be redirected to the main GS root screen.
-			*/ }
-			<>
-				{ /*
-					We'll need to do the condition here because if we are doing an early return, the fill will be introduced at the bottom of the page, which means some additional CSS magic needs to be done.
-				*/ }
-				{ globalStylesInUse && isGlobalStylesSidebar && (
-					<div className="interface-complementary-area">
-						<Notice status="warning" isDismissible={ false } className="wpcom-global-styles-notice">
-							{ createInterpolateElement(
-								__(
-									'Your changes include customized styles that will only be visible once you <a>upgrade to a Premium plan</a>.',
-									'full-site-editing'
-								),
-								{
-									a: (
-										<ExternalLink
-											href={ wpcomGlobalStyles.upgradeUrl }
-											target="_blank"
-											onClick={ recordUpgradeSidebarNoticeClick }
-										/>
-									),
-								}
-							) }
-						</Notice>
-					</div>
-				) }
-			</>
-		</Fill>
-	);
-}
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js
index 47dffcb1de6680..20a48f424ae572 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js
@@ -3,7 +3,6 @@ import './public-path';
 
 import domReady from '@wordpress/dom-ready';
 import { registerPlugin } from '@wordpress/plugins';
-import GlobalStylesSidebarNotice from './global-style-sidebar-notice';
 import GlobalStylesModal from './modal';
 import GlobalStylesNotice from './notice';
 import './store';
@@ -14,7 +13,6 @@ const showGlobalStylesComponents = () => {
 			<>
 				<GlobalStylesModal />
 				<GlobalStylesNotice />
-				<GlobalStylesSidebarNotice />
 			</>
 		),
 	} );
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
index 1f453f1a957082..2098805d63ffce 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
@@ -103,11 +103,6 @@ function wpcom_global_styles_has_blog_sticker( $blog_sticker, $blog_id ) {
  * @return void
  */
 function wpcom_global_styles_enqueue_block_editor_assets() {
-	$screen = get_current_screen();
-	if ( ! $screen || 'site-editor' !== $screen->id ) {
-		return;
-	}
-
 	if ( ! wpcom_should_limit_global_styles() ) {
 		return;
 	}
@@ -153,6 +148,7 @@ function wpcom_global_styles_enqueue_block_editor_assets() {
 		array(
 			'assetsUrl'   => plugins_url( 'dist/', __FILE__ ),
 			'upgradeUrl'  => "$calypso_domain/plans/$site_slug?plan=value_bundle&feature=advanced-design-customization",
+			'previewUrl'  => add_query_arg( 'hide-global-styles', '', home_url() ),
 			'wpcomBlogId' => wpcom_global_styles_get_wpcom_current_blog_id(),
 		)
 	);
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js
index 3d5df490a926ce..72584aaf81feeb 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js
@@ -11,11 +11,16 @@ import image from './image.svg';
 import './modal.scss';
 
 const GlobalStylesModal = () => {
+	const isSiteEditor = useSelect( ( select ) => !! select( 'core/edit-site' ), [] );
 	const [ viewCanvasPath, setViewCanvasPath ] = useState();
 
 	// Since Gutenberg doesn't provide a stable selector to get the current path of
 	// the view canvas, we need to infer it from the URL.
 	useEffect( () => {
+		if ( ! isSiteEditor ) {
+			return;
+		}
+
 		const unsubscribe = subscribe( () => {
 			// Subscriber callbacks run before the URL actually changes, so we need
 			// to delay the execution.
@@ -28,18 +33,23 @@ const GlobalStylesModal = () => {
 		}, 'core/edit-site' );
 
 		return () => unsubscribe();
-	}, [] );
+	}, [ isSiteEditor ] );
 
 	const isVisible = useSelect(
 		( select ) => {
+			if ( ! isSiteEditor ) {
+				return false;
+			}
+
 			const currentSidebar =
 				select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-site' );
+
 			return select( 'automattic/wpcom-global-styles' ).isModalVisible(
 				currentSidebar,
 				viewCanvasPath
 			);
 		},
-		[ viewCanvasPath ]
+		[ viewCanvasPath, isSiteEditor ]
 	);
 
 	const { dismissModal } = useDispatch( 'automattic/wpcom-global-styles' );
@@ -47,8 +57,10 @@ const GlobalStylesModal = () => {
 
 	// Hide the welcome guide modal, so it doesn't conflict with our modal.
 	useEffect( () => {
-		setPreference( 'core/edit-site', 'welcomeGuideStyles', false );
-	}, [ setPreference ] );
+		if ( isSiteEditor ) {
+			setPreference( 'core/edit-site', 'welcomeGuideStyles', false );
+		}
+	}, [ setPreference, isSiteEditor ] );
 
 	useEffect( () => {
 		if ( isVisible ) {
@@ -65,7 +77,7 @@ const GlobalStylesModal = () => {
 		} );
 	};
 
-	if ( ! isVisible ) {
+	if ( ! isSiteEditor || ! isVisible ) {
 		return null;
 	}
 
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
index 2222da9a9f63b5..51cf7393aaa5fd 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
@@ -1,98 +1,86 @@
 /* global wpcomGlobalStyles */
-import { ExternalLink, Notice } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { createInterpolateElement, render, useEffect, useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import './notice.scss';
-import { recordUpgradePreSaveNoticeClick, recordUpgradeNoticePreSaveShow } from './tracks-events';
+import { recordUpgradeNoticeShow, recordUpgradeNoticeClick } from './tracks-events';
 import { useGlobalStylesConfig } from './use-global-styles-config';
 
-function GlobalStylesNoticeComponent() {
-	const { siteChanges, globalStylesInUse } = useGlobalStylesConfig();
+const GlobalStylesNotice = () => {
+	const { globalStylesInUse, globalStylesId } = useGlobalStylesConfig();
+	const editor = useSelect( ( select ) => {
+		if ( select( 'core/edit-site' ) ) {
+			return 'site-editor';
+		}
 
-	// Closes the sidebar if there are no more changes to be saved.
-	useEffect( () => {
-		if ( ! siteChanges.length ) {
-			/*
-			 * This uses a fragile CSS selector to target the cancel button which might be broken on
-			 * future releases of Gutenberg. Unfortunately, Gutenberg doesn't provide any mechanism
-			 * for closing the sidebar – everything is handled using an internal state that it is not
-			 * exposed publicly.
-			 *
-			 * See https://github.com/WordPress/gutenberg/blob/0b30a4cb34d39c9627b6a3795a18aee21019ce25/packages/edit-site/src/components/editor/index.js#L137-L138.
-			 */
-			document.querySelector( '.entities-saved-states__panel-header button:last-child' )?.click();
+		if ( select( 'core/edit-post' ) ) {
+			return 'post-editor';
 		}
-	}, [ siteChanges ] );
 
-	useEffect( () => {
-		if ( globalStylesInUse ) {
-			recordUpgradeNoticePreSaveShow();
+		return undefined;
+	}, [] );
+	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
+	const { editEntityRecord } = useDispatch( 'core' );
+
+	const resetGlobalStyles = () => {
+		if ( ! globalStylesId ) {
+			return;
 		}
-	}, [ globalStylesInUse ] );
 
-	if ( ! globalStylesInUse ) {
-		return null;
-	}
+		editEntityRecord( 'root', 'globalStyles', globalStylesId, {
+			styles: {},
+			settings: {},
+		} );
+	};
 
-	return (
-		<Notice
-			status="warning"
-			isDismissible={ false }
-			className="wpcom-global-styles-notice notice-margin"
-		>
-			{ createInterpolateElement(
+	useEffect( () => {
+		if ( globalStylesInUse ) {
+			recordUpgradeNoticeShow( editor );
+			createWarningNotice(
 				__(
-					'Your changes include customized styles that will only be visible once you <a>upgrade to a Premium plan</a>.',
+					'Your site includes customized styles that are only visible to visitors after upgrading to the Premium plan or higher.',
 					'full-site-editing'
 				),
 				{
-					a: (
-						<ExternalLink
-							href={ wpcomGlobalStyles.upgradeUrl }
-							target="_blank"
-							onClick={ recordUpgradePreSaveNoticeClick }
-						/>
-					),
+					id: 'wpcom-global-styles/gating-notice',
+					isDismissible: false,
+					actions: [
+						{
+							url: wpcomGlobalStyles.upgradeUrl,
+							label: __( 'Upgrade now', 'full-site-editing' ),
+							onClick: () => recordUpgradeNoticeClick( editor ),
+							variant: 'primary',
+							noDefaultClasses: true,
+						},
+						...( editor === 'post-editor'
+							? [
+									{
+										url: wpcomGlobalStyles.previewUrl,
+										label: __( 'Preview your site', 'full-site-editing' ),
+										variant: 'secondary',
+										noDefaultClasses: true,
+									},
+							  ]
+							: [] ),
+						...( editor === 'site-editor'
+							? [
+									{
+										label: __( 'Remove custom styles', 'full-site-editing' ),
+										onClick: resetGlobalStyles,
+										variant: 'link',
+										noDefaultClasses: true,
+									},
+							  ]
+							: [] ),
+					],
 				}
-			) }
-		</Notice>
-	);
-}
-
-export default function GlobalStylesNotice() {
-	const { globalStylesConfig, isSaveViewOpened } = useSelect( ( select ) => ( {
-		globalStylesConfig: select( 'core' ).getEntityConfig( 'root', 'globalStyles' ),
-		isSaveViewOpened: select( 'core/edit-site' ).isSaveViewOpened(),
-	} ) );
-
-	const [ isNoticeRendered, setIsNoticeRendered ] = useState( false );
-
-	useEffect( () => {
-		if ( ! globalStylesConfig || ! isSaveViewOpened ) {
-			setIsNoticeRendered( false );
-			return;
-		}
-		if ( isNoticeRendered ) {
-			return;
+			);
+		} else {
+			removeNotice( 'wpcom-global-styles/gating-notice' );
 		}
-
-		const preSavePanelTitles = document.querySelectorAll(
-			'.entities-saved-states__panel .components-panel__body.is-opened .components-panel__body-title'
-		);
-
-		for ( const entityTitle of preSavePanelTitles ) {
-			if ( entityTitle.textContent !== globalStylesConfig.label ) {
-				continue;
-			}
-
-			const noticeContainer = document.createElement( 'div' );
-			entityTitle.parentElement.append( noticeContainer );
-			render( <GlobalStylesNoticeComponent />, noticeContainer );
-			setIsNoticeRendered( true );
-			break;
-		}
-	}, [ globalStylesConfig, isNoticeRendered, isSaveViewOpened ] );
+	}, [ globalStylesInUse, editor, createWarningNotice, removeNotice, resetGlobalStyles ] );
 
 	return null;
-}
+};
+
+export default GlobalStylesNotice;
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts
index ca64a5ae5b1fa2..ccc6a6167bcfa8 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts
@@ -3,41 +3,21 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 declare const wpcomGlobalStyles: { upgradeUrl: string; wpcomBlogId: string | null };
 
 /**
- * Record an event when a user clicks on the notice from the pre-save panel.
+ * Record an event when a user clicks on the notice.
  */
-export function recordUpgradePreSaveNoticeClick(): void {
+export function recordUpgradeNoticeClick( context: string | undefined ): void {
 	recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', {
-		context: 'site-editor',
+		context,
 		blog_id: wpcomGlobalStyles.wpcomBlogId,
 	} );
 }
 
 /**
- * Record an event when a user clicks on the notice from the Global Styles sidebar.
+ * Record an event when the GS upgrade notice is shown.
  */
-export function recordUpgradeSidebarNoticeClick(): void {
-	recordTracksEvent( 'calypso_global_styles_gating_notice_sidebar_upgrade_click', {
-		context: 'site-editor',
-		blog_id: wpcomGlobalStyles.wpcomBlogId,
-	} );
-}
-
-/**
- * Record an event when the GS upgrade notice is shown in the pre-save screen.
- */
-export function recordUpgradeNoticePreSaveShow(): void {
+export function recordUpgradeNoticeShow( context: string | undefined ): void {
 	recordTracksEvent( 'calypso_global_styles_gating_notice_show', {
-		context: 'site-editor',
-		blog_id: wpcomGlobalStyles.wpcomBlogId,
-	} );
-}
-
-/**
- * Record an event when the GS upgrade notice is shown in the Global Styles sidebar.
- */
-export function recordUpgradeNoticeSidebarShow(): void {
-	recordTracksEvent( 'calypso_global_styles_gating_sidebar_notice_show', {
-		context: 'site-editor',
+		context,
 		blog_id: wpcomGlobalStyles.wpcomBlogId,
 	} );
 }
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js
index f6bf492b856cff..b5ede455c2e982 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js
@@ -2,11 +2,7 @@ import { useSelect } from '@wordpress/data';
 
 export function useGlobalStylesConfig() {
 	return useSelect( ( select ) => {
-		const {
-			getEditedEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetDirtyEntityRecords,
-		} = select( 'core' );
+		const { getEditedEntityRecord, __experimentalGetCurrentGlobalStylesId } = select( 'core' );
 
 		const _globalStylesId = __experimentalGetCurrentGlobalStylesId
 			? __experimentalGetCurrentGlobalStylesId()
@@ -26,7 +22,7 @@ export function useGlobalStylesConfig() {
 
 		return {
 			globalStylesInUse,
-			siteChanges: __experimentalGetDirtyEntityRecords ? __experimentalGetDirtyEntityRecords() : [],
+			globalStylesId: _globalStylesId,
 		};
 	}, [] );
 }

From bfd488275d88edd5096b36eaeed456583303bd88 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 11 May 2023 17:49:16 +0200
Subject: [PATCH 03/15] Use booleans

---
 .../wpcom-global-styles/notice.js             | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
index 51cf7393aaa5fd..d0b29706f3e71a 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
@@ -8,17 +8,13 @@ import { useGlobalStylesConfig } from './use-global-styles-config';
 
 const GlobalStylesNotice = () => {
 	const { globalStylesInUse, globalStylesId } = useGlobalStylesConfig();
-	const editor = useSelect( ( select ) => {
-		if ( select( 'core/edit-site' ) ) {
-			return 'site-editor';
-		}
-
-		if ( select( 'core/edit-post' ) ) {
-			return 'post-editor';
-		}
-
-		return undefined;
-	}, [] );
+	const { isSiteEditor, isPostEditor } = useSelect(
+		( select ) => ( {
+			isSiteEditor: !! select( 'core/edit-site' ),
+			isPostEditor: !! select( 'core/edit-post' ),
+		} ),
+		[]
+	);
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
 	const { editEntityRecord } = useDispatch( 'core' );
 
@@ -34,8 +30,12 @@ const GlobalStylesNotice = () => {
 	};
 
 	useEffect( () => {
+		if ( ! isSiteEditor && ! isPostEditor ) {
+			return;
+		}
+
 		if ( globalStylesInUse ) {
-			recordUpgradeNoticeShow( editor );
+			recordUpgradeNoticeShow( isSiteEditor ? 'site-editor' : 'post-editor' );
 			createWarningNotice(
 				__(
 					'Your site includes customized styles that are only visible to visitors after upgrading to the Premium plan or higher.',
@@ -48,11 +48,12 @@ const GlobalStylesNotice = () => {
 						{
 							url: wpcomGlobalStyles.upgradeUrl,
 							label: __( 'Upgrade now', 'full-site-editing' ),
-							onClick: () => recordUpgradeNoticeClick( editor ),
+							onClick: () =>
+								recordUpgradeNoticeClick( isSiteEditor ? 'site-editor' : 'post-editor' ),
 							variant: 'primary',
 							noDefaultClasses: true,
 						},
-						...( editor === 'post-editor'
+						...( isPostEditor
 							? [
 									{
 										url: wpcomGlobalStyles.previewUrl,
@@ -62,7 +63,7 @@ const GlobalStylesNotice = () => {
 									},
 							  ]
 							: [] ),
-						...( editor === 'site-editor'
+						...( isSiteEditor
 							? [
 									{
 										label: __( 'Remove custom styles', 'full-site-editing' ),
@@ -78,7 +79,14 @@ const GlobalStylesNotice = () => {
 		} else {
 			removeNotice( 'wpcom-global-styles/gating-notice' );
 		}
-	}, [ globalStylesInUse, editor, createWarningNotice, removeNotice, resetGlobalStyles ] );
+	}, [
+		globalStylesInUse,
+		isSiteEditor,
+		isPostEditor,
+		createWarningNotice,
+		removeNotice,
+		resetGlobalStyles,
+	] );
 
 	return null;
 };

From d411f400395dacfd47fe08f99377f24e97f2990c Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Fri, 12 May 2023 12:34:44 +0200
Subject: [PATCH 04/15] Open links in new tab and track all clicks

---
 .../wpcom-global-styles/notice.js             | 142 +++++++++++-------
 .../wpcom-global-styles/tracks-events.ts      |  23 ---
 2 files changed, 86 insertions(+), 79 deletions(-)
 delete mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
index d0b29706f3e71a..8951fd7b24f6c9 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
@@ -1,24 +1,46 @@
 /* global wpcomGlobalStyles */
+import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import './notice.scss';
-import { recordUpgradeNoticeShow, recordUpgradeNoticeClick } from './tracks-events';
 import { useGlobalStylesConfig } from './use-global-styles-config';
+import './notice.scss';
+
+const NOTICE_ID = 'wpcom-global-styles/gating-notice';
 
 const GlobalStylesNotice = () => {
 	const { globalStylesInUse, globalStylesId } = useGlobalStylesConfig();
 	const { isSiteEditor, isPostEditor } = useSelect(
 		( select ) => ( {
 			isSiteEditor: !! select( 'core/edit-site' ),
-			isPostEditor: !! select( 'core/edit-post' ),
+			isPostEditor: ! select( 'core/edit-site' ) && !! select( 'core/editor' ).getCurrentPostId(),
 		} ),
 		[]
 	);
+
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
 	const { editEntityRecord } = useDispatch( 'core' );
 
-	const resetGlobalStyles = () => {
+	const trackEvent = useCallback(
+		( eventName ) =>
+			recordTracksEvent( eventName, {
+				context: isSiteEditor ? 'site-editor' : 'post-editor',
+				blog_id: wpcomGlobalStyles.wpcomBlogId,
+			} ),
+		[ isSiteEditor ]
+	);
+
+	const upgradePlan = useCallback( () => {
+		window.open( wpcomGlobalStyles.upgradeUrl, '_blank' ).focus();
+		trackEvent( 'calypso_global_styles_gating_notice_upgrade_click' );
+	}, [ trackEvent ] );
+
+	const previewSite = useCallback( () => {
+		window.open( wpcomGlobalStyles.previewUrl, '_blank' ).focus();
+		trackEvent( 'calypso_global_styles_gating_notice_preview_click' );
+	}, [ trackEvent ] );
+
+	const resetGlobalStyles = useCallback( () => {
 		if ( ! globalStylesId ) {
 			return;
 		}
@@ -27,7 +49,60 @@ const GlobalStylesNotice = () => {
 			styles: {},
 			settings: {},
 		} );
-	};
+
+		trackEvent( 'calypso_global_styles_gating_notice_reset_click' );
+	}, [ editEntityRecord, globalStylesId, trackEvent ] );
+
+	const showNotice = useCallback( () => {
+		const actions = [
+			{
+				label: __( 'Upgrade now', 'full-site-editing' ),
+				onClick: upgradePlan,
+				variant: 'primary',
+				noDefaultClasses: true,
+			},
+		];
+
+		if ( isPostEditor ) {
+			actions.push( {
+				label: __( 'Preview your site', 'full-site-editing' ),
+				onClick: previewSite,
+				variant: 'secondary',
+				noDefaultClasses: true,
+			} );
+		}
+
+		if ( isSiteEditor ) {
+			actions.push( {
+				label: __( 'Remove custom styles', 'full-site-editing' ),
+				onClick: resetGlobalStyles,
+				variant: 'link',
+				noDefaultClasses: true,
+			} );
+		}
+
+		createWarningNotice(
+			__(
+				'Your site includes customized styles that are only visible to visitors after upgrading to the Premium plan or higher.',
+				'full-site-editing'
+			),
+			{
+				id: NOTICE_ID,
+				isDismissible: false,
+				actions: actions,
+			}
+		);
+
+		trackEvent( 'calypso_global_styles_gating_notice_show' );
+	}, [
+		createWarningNotice,
+		isPostEditor,
+		isSiteEditor,
+		previewSite,
+		resetGlobalStyles,
+		trackEvent,
+		upgradePlan,
+	] );
 
 	useEffect( () => {
 		if ( ! isSiteEditor && ! isPostEditor ) {
@@ -35,58 +110,13 @@ const GlobalStylesNotice = () => {
 		}
 
 		if ( globalStylesInUse ) {
-			recordUpgradeNoticeShow( isSiteEditor ? 'site-editor' : 'post-editor' );
-			createWarningNotice(
-				__(
-					'Your site includes customized styles that are only visible to visitors after upgrading to the Premium plan or higher.',
-					'full-site-editing'
-				),
-				{
-					id: 'wpcom-global-styles/gating-notice',
-					isDismissible: false,
-					actions: [
-						{
-							url: wpcomGlobalStyles.upgradeUrl,
-							label: __( 'Upgrade now', 'full-site-editing' ),
-							onClick: () =>
-								recordUpgradeNoticeClick( isSiteEditor ? 'site-editor' : 'post-editor' ),
-							variant: 'primary',
-							noDefaultClasses: true,
-						},
-						...( isPostEditor
-							? [
-									{
-										url: wpcomGlobalStyles.previewUrl,
-										label: __( 'Preview your site', 'full-site-editing' ),
-										variant: 'secondary',
-										noDefaultClasses: true,
-									},
-							  ]
-							: [] ),
-						...( isSiteEditor
-							? [
-									{
-										label: __( 'Remove custom styles', 'full-site-editing' ),
-										onClick: resetGlobalStyles,
-										variant: 'link',
-										noDefaultClasses: true,
-									},
-							  ]
-							: [] ),
-					],
-				}
-			);
+			showNotice();
 		} else {
-			removeNotice( 'wpcom-global-styles/gating-notice' );
+			removeNotice( NOTICE_ID );
 		}
-	}, [
-		globalStylesInUse,
-		isSiteEditor,
-		isPostEditor,
-		createWarningNotice,
-		removeNotice,
-		resetGlobalStyles,
-	] );
+
+		return () => removeNotice( NOTICE_ID );
+	}, [ globalStylesInUse, isSiteEditor, isPostEditor, removeNotice, showNotice ] );
 
 	return null;
 };
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts
deleted file mode 100644
index ccc6a6167bcfa8..00000000000000
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { recordTracksEvent } from '@automattic/calypso-analytics';
-
-declare const wpcomGlobalStyles: { upgradeUrl: string; wpcomBlogId: string | null };
-
-/**
- * Record an event when a user clicks on the notice.
- */
-export function recordUpgradeNoticeClick( context: string | undefined ): void {
-	recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', {
-		context,
-		blog_id: wpcomGlobalStyles.wpcomBlogId,
-	} );
-}
-
-/**
- * Record an event when the GS upgrade notice is shown.
- */
-export function recordUpgradeNoticeShow( context: string | undefined ): void {
-	recordTracksEvent( 'calypso_global_styles_gating_notice_show', {
-		context,
-		blog_id: wpcomGlobalStyles.wpcomBlogId,
-	} );
-}

From ace3829a0b4b1aaad09e2af5d30dd28651a69656 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Fri, 12 May 2023 13:16:47 +0200
Subject: [PATCH 05/15] Remove E2E test

---
 .../specs/fse/fse__limited-global-styles.ts   | 67 -------------------
 1 file changed, 67 deletions(-)
 delete mode 100644 test/e2e/specs/fse/fse__limited-global-styles.ts

diff --git a/test/e2e/specs/fse/fse__limited-global-styles.ts b/test/e2e/specs/fse/fse__limited-global-styles.ts
deleted file mode 100644
index 42545683950c38..00000000000000
--- a/test/e2e/specs/fse/fse__limited-global-styles.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * @group gutenberg
- */
-
-import { DataHelper, TestAccount, FullSiteEditorPage } from '@automattic/calypso-e2e';
-import { Browser, Page } from 'playwright';
-
-declare const browser: Browser;
-
-describe( DataHelper.createSuiteTitle( 'Site Editor: Limited Global Styles' ), function () {
-	let page: Page;
-	let fullSiteEditorPage: FullSiteEditorPage;
-	let testAccount: TestAccount;
-
-	beforeAll( async () => {
-		page = await browser.newPage();
-
-		testAccount = new TestAccount( 'simpleSiteFreePlanUser' );
-		await testAccount.authenticate( page );
-
-		fullSiteEditorPage = new FullSiteEditorPage( page );
-	} );
-
-	it( 'Visit the site editor', async function () {
-		await fullSiteEditorPage.visit( testAccount.getSiteURL( { protocol: true } ) );
-		await fullSiteEditorPage.prepareForInteraction( { leaveWithoutSaving: true } );
-
-		await fullSiteEditorPage.ensureNavigationTopLevel();
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Templates' );
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Page' );
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Edit' );
-	} );
-
-	it( 'Open site styles', async function () {
-		await fullSiteEditorPage.openSiteStyles();
-	} );
-
-	it( 'Select the "Try it out" option in the upgrade modal', async function () {
-		await fullSiteEditorPage.tryGlobalStyles();
-	} );
-
-	it( 'Pick a non-default style variation', async function () {
-		// The primary site of the `simpleSiteFreePlanUser` account has the Twenty Twenty-Two
-		// theme which includes a "Blue" style variation. If the active theme on the site
-		// ever changes, we'll need to update the name of this style variation.
-		await fullSiteEditorPage.setStyleVariation( 'Blue' );
-	} );
-
-	it( 'Save the styles and check that the pre-save notice shows up', async function () {
-		// On mobile, the styles is a popover panel that hides the success notification
-		// checked by the "save" method, so let's always close it first to be safe. :)
-		await fullSiteEditorPage.closeSiteStyles();
-		await fullSiteEditorPage.save( { checkPreSaveNotices: true } );
-	} );
-
-	it( 'Reset styles to defaults', async function () {
-		await fullSiteEditorPage.openSiteStyles();
-		await fullSiteEditorPage.setStyleVariation( 'Default' );
-	} );
-
-	it( 'Save the styles and check that the pre-save notice does not show up', async function () {
-		// On mobile, the styles is a popover panel that hides the success notification
-		// checked by the "save" method, so let's always close it first to be safe. :)
-		await fullSiteEditorPage.closeSiteStyles();
-		await fullSiteEditorPage.save( { checkPreSaveNotices: true } );
-	} );
-} );

From 18acc7dc0071a3d27f726160fed6d1362a275a9c Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Mon, 15 May 2023 12:40:41 +0200
Subject: [PATCH 06/15] Better wording

---
 .../editing-toolkit-plugin/wpcom-global-styles/notice.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
index 8951fd7b24f6c9..5359baf61d7d7a 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
@@ -65,7 +65,7 @@ const GlobalStylesNotice = () => {
 
 		if ( isPostEditor ) {
 			actions.push( {
-				label: __( 'Preview your site', 'full-site-editing' ),
+				label: __( 'Preview without custom styles', 'full-site-editing' ),
 				onClick: previewSite,
 				variant: 'secondary',
 				noDefaultClasses: true,

From 8911cbc5539335ca91986f99b9dadce50c2c8bc7 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Mon, 15 May 2023 12:41:10 +0200
Subject: [PATCH 07/15] Show action as button

---
 .../editing-toolkit-plugin/wpcom-global-styles/notice.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
index 5359baf61d7d7a..94e9ad70218808 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
@@ -76,7 +76,7 @@ const GlobalStylesNotice = () => {
 			actions.push( {
 				label: __( 'Remove custom styles', 'full-site-editing' ),
 				onClick: resetGlobalStyles,
-				variant: 'link',
+				variant: 'secondary',
 				noDefaultClasses: true,
 			} );
 		}

From f42369a6287fc90e32dacfb0353d341a5a3fcd17 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Mon, 15 May 2023 16:11:36 +0200
Subject: [PATCH 08/15] Show toggle

---
 .../wpcom-global-styles/index.php             |  7 +-
 .../wpcom-global-styles-view.js               |  6 ++
 .../wpcom-global-styles-view.scss             | 78 +++++++++++++++----
 3 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
index 2098805d63ffce..8d3ebb39131c52 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
@@ -418,10 +418,8 @@ function wpcom_display_global_styles_launch_bar( $bar_controls ) {
 	$upgrade_url = 'https://wordpress.com/plans/' . $site_slug . '?plan=value_bundle&feature=advanced-design-customization';
 
 	if ( wpcom_is_previewing_global_styles() ) {
-		$preview_text     = __( 'Turn off preview', 'full-site-editing' );
 		$preview_location = add_query_arg( 'hide-global-styles', '' );
 	} else {
-		$preview_text     = __( 'Turn on preview', 'full-site-editing' );
 		$preview_location = remove_query_arg( 'hide-global-styles' );
 	}
 
@@ -476,10 +474,11 @@ function wpcom_display_global_styles_launch_bar( $bar_controls ) {
 					class="launch-bar-global-styles-upgrade"
 					href="<?php echo esc_url( $upgrade_url ); ?>"
 				>
-					<?php echo esc_html__( 'Upgrade your plan', 'full-site-editing' ); ?>
+					<?php echo esc_html__( 'Upgrade now', 'full-site-editing' ); ?>
 				</a>
 				<a class="launch-bar-global-styles-preview" href="<?php echo esc_url( $preview_location ); ?>">
-					<?php echo esc_html( $preview_text ); ?>
+					<label><input type="checkbox" <?php echo wpcom_is_previewing_global_styles() ? 'checked' : ''; ?>><span></span></label>
+					<?php echo esc_html__( 'Preview custom styles', 'full-site-editing' ); ?>
 				</a>
 			</div>
 			<a class="launch-bar-global-styles-toggle" href="#">
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js
index 26e6a697c7a4f6..1d73e73efec0af 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js
@@ -58,6 +58,12 @@ document.addEventListener( 'DOMContentLoaded', () => {
 
 	previewButton?.addEventListener( 'click', ( event ) => {
 		event.preventDefault();
+
+		const checkbox = previewButton.querySelector( 'input[type="checkbox"]' );
+		if ( checkbox ) {
+			checkbox.checked = ! checkbox.checked;
+		}
+
 		recordEvent( 'wpcom_global_styles_gating_notice_preview' );
 		window.location = previewButton.href;
 	} );
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss
index 98d8869a2a54dc..b2c1afadf2494f 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss
@@ -12,7 +12,7 @@
 	left: 50%;
 	transform: translateX(-50%);
 	background-color: #fff;
-	padding: 24px;
+	padding: 24px 24px 0;
 	line-height: 20px;
 	color: #2c3338;
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -35,33 +35,85 @@
 		transform: translateX(-50%);
 	}
 
-	.launch-bar-global-styles-upgrade,
-	.launch-bar-global-styles-preview {
+	.launch-bar-global-styles-upgrade {
 		min-height: 28px;
 		box-sizing: border-box;
 		border-radius: 2px;
 		width: 100%;
 		justify-content: center;
 		height: auto;
-		border: 1px solid;
-	}
-
-	.launch-bar-global-styles-upgrade {
 		background: #0675c4;
-		border-color: #0675c4;
+		border: 1px solid #0675c4;
 		color: #fff;
 
 		&:hover {
 			background: #006ba1;
 		}
 	}
+}
 
-	.launch-bar-global-styles-preview {
-		border-color: #c3c4c7;
-		color: #3c434a;
+.launch-banner-content .launch-bar-global-styles-preview {
+	border-top: 1px solid #c3c4c7;
+	width: calc(100% + 48px);
+	margin: 12px -24px 0;
+	box-sizing: border-box;
+	padding: 12px 24px;
+	font-size: 13px;
+	line-height: 17px;
+	color: inherit;
 
-		&:hover {
-			background: #f6f7f7;
+	&:hover {
+		background: none;
+	}
+
+	label {
+		position: relative;
+		display: inline-block;
+		width: 36px;
+		height: 18px;
+		margin-right: 8px;
+
+		span {
+			position: absolute;
+			cursor: pointer;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: #ccc;
+			transition: 0.4s;
+			/* stylelint-disable-next-line scales/radii */
+			border-radius: 18px;
+
+			&::before {
+				position: absolute;
+				content: "";
+				height: 12px;
+				width: 12px;
+				left: 3px;
+				bottom: 3px;
+				background-color: #fff;
+				transition: 0.4s;
+				border-radius: 50%;
+			}
+		}
+
+		input {
+			opacity: 0;
+			width: 0;
+			height: 0;
+
+			&:checked + span {
+				background-color: #0675c4;
+
+				&::before {
+					transform: translateX(18px);
+				}
+			}
+
+			&:focus + span {
+				box-shadow: 0 0 1px #2196f3;
+			}
 		}
 	}
 }

From 071b2a64971ef825ef22d6cc1d8a39f715c62a83 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Tue, 16 May 2023 10:38:06 +0200
Subject: [PATCH 09/15] Move toggle switch to separate PR

---
 .../wpcom-global-styles/index.php             |  7 +-
 .../wpcom-global-styles-view.js               |  6 --
 .../wpcom-global-styles-view.scss             | 78 ++++---------------
 3 files changed, 17 insertions(+), 74 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
index 8d3ebb39131c52..2098805d63ffce 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php
@@ -418,8 +418,10 @@ function wpcom_display_global_styles_launch_bar( $bar_controls ) {
 	$upgrade_url = 'https://wordpress.com/plans/' . $site_slug . '?plan=value_bundle&feature=advanced-design-customization';
 
 	if ( wpcom_is_previewing_global_styles() ) {
+		$preview_text     = __( 'Turn off preview', 'full-site-editing' );
 		$preview_location = add_query_arg( 'hide-global-styles', '' );
 	} else {
+		$preview_text     = __( 'Turn on preview', 'full-site-editing' );
 		$preview_location = remove_query_arg( 'hide-global-styles' );
 	}
 
@@ -474,11 +476,10 @@ function wpcom_display_global_styles_launch_bar( $bar_controls ) {
 					class="launch-bar-global-styles-upgrade"
 					href="<?php echo esc_url( $upgrade_url ); ?>"
 				>
-					<?php echo esc_html__( 'Upgrade now', 'full-site-editing' ); ?>
+					<?php echo esc_html__( 'Upgrade your plan', 'full-site-editing' ); ?>
 				</a>
 				<a class="launch-bar-global-styles-preview" href="<?php echo esc_url( $preview_location ); ?>">
-					<label><input type="checkbox" <?php echo wpcom_is_previewing_global_styles() ? 'checked' : ''; ?>><span></span></label>
-					<?php echo esc_html__( 'Preview custom styles', 'full-site-editing' ); ?>
+					<?php echo esc_html( $preview_text ); ?>
 				</a>
 			</div>
 			<a class="launch-bar-global-styles-toggle" href="#">
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js
index 1d73e73efec0af..26e6a697c7a4f6 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.js
@@ -58,12 +58,6 @@ document.addEventListener( 'DOMContentLoaded', () => {
 
 	previewButton?.addEventListener( 'click', ( event ) => {
 		event.preventDefault();
-
-		const checkbox = previewButton.querySelector( 'input[type="checkbox"]' );
-		if ( checkbox ) {
-			checkbox.checked = ! checkbox.checked;
-		}
-
 		recordEvent( 'wpcom_global_styles_gating_notice_preview' );
 		window.location = previewButton.href;
 	} );
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss
index b2c1afadf2494f..98d8869a2a54dc 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/wpcom-global-styles-view.scss
@@ -12,7 +12,7 @@
 	left: 50%;
 	transform: translateX(-50%);
 	background-color: #fff;
-	padding: 24px 24px 0;
+	padding: 24px;
 	line-height: 20px;
 	color: #2c3338;
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -35,85 +35,33 @@
 		transform: translateX(-50%);
 	}
 
-	.launch-bar-global-styles-upgrade {
+	.launch-bar-global-styles-upgrade,
+	.launch-bar-global-styles-preview {
 		min-height: 28px;
 		box-sizing: border-box;
 		border-radius: 2px;
 		width: 100%;
 		justify-content: center;
 		height: auto;
+		border: 1px solid;
+	}
+
+	.launch-bar-global-styles-upgrade {
 		background: #0675c4;
-		border: 1px solid #0675c4;
+		border-color: #0675c4;
 		color: #fff;
 
 		&:hover {
 			background: #006ba1;
 		}
 	}
-}
 
-.launch-banner-content .launch-bar-global-styles-preview {
-	border-top: 1px solid #c3c4c7;
-	width: calc(100% + 48px);
-	margin: 12px -24px 0;
-	box-sizing: border-box;
-	padding: 12px 24px;
-	font-size: 13px;
-	line-height: 17px;
-	color: inherit;
-
-	&:hover {
-		background: none;
-	}
+	.launch-bar-global-styles-preview {
+		border-color: #c3c4c7;
+		color: #3c434a;
 
-	label {
-		position: relative;
-		display: inline-block;
-		width: 36px;
-		height: 18px;
-		margin-right: 8px;
-
-		span {
-			position: absolute;
-			cursor: pointer;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background-color: #ccc;
-			transition: 0.4s;
-			/* stylelint-disable-next-line scales/radii */
-			border-radius: 18px;
-
-			&::before {
-				position: absolute;
-				content: "";
-				height: 12px;
-				width: 12px;
-				left: 3px;
-				bottom: 3px;
-				background-color: #fff;
-				transition: 0.4s;
-				border-radius: 50%;
-			}
-		}
-
-		input {
-			opacity: 0;
-			width: 0;
-			height: 0;
-
-			&:checked + span {
-				background-color: #0675c4;
-
-				&::before {
-					transform: translateX(18px);
-				}
-			}
-
-			&:focus + span {
-				box-shadow: 0 0 1px #2196f3;
-			}
+		&:hover {
+			background: #f6f7f7;
 		}
 	}
 }

From 7006ed9f7ae418ff8bd7674eb6f377a048ad6c06 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Tue, 16 May 2023 15:46:50 +0200
Subject: [PATCH 10/15] Show notice in view canvas

---
 .../wpcom-global-styles/index.js              |   4 +-
 .../wpcom-global-styles/modal.js              |  28 +----
 .../wpcom-global-styles/notice.scss           |  19 +---
 .../{notice.js => notices.js}                 | 105 ++++++++++++++----
 .../wpcom-global-styles/use-canvas.js         |  33 ++++++
 5 files changed, 124 insertions(+), 65 deletions(-)
 rename apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/{notice.js => notices.js} (55%)
 create mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-canvas.js

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js
index 20a48f424ae572..525dd0b508cf8c 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js
@@ -4,7 +4,7 @@ import './public-path';
 import domReady from '@wordpress/dom-ready';
 import { registerPlugin } from '@wordpress/plugins';
 import GlobalStylesModal from './modal';
-import GlobalStylesNotice from './notice';
+import GlobalStylesNotices from './notices';
 import './store';
 
 const showGlobalStylesComponents = () => {
@@ -12,7 +12,7 @@ const showGlobalStylesComponents = () => {
 		render: () => (
 			<>
 				<GlobalStylesModal />
-				<GlobalStylesNotice />
+				<GlobalStylesNotices />
 			</>
 		),
 	} );
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js
index 72584aaf81feeb..5794ce1b5db371 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/modal.js
@@ -2,38 +2,18 @@
 
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Button, Modal } from '@wordpress/components';
-import { subscribe, useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
 import image from './image.svg';
+import { useCanvas } from './use-canvas';
 
 import './modal.scss';
 
 const GlobalStylesModal = () => {
 	const isSiteEditor = useSelect( ( select ) => !! select( 'core/edit-site' ), [] );
-	const [ viewCanvasPath, setViewCanvasPath ] = useState();
-
-	// Since Gutenberg doesn't provide a stable selector to get the current path of
-	// the view canvas, we need to infer it from the URL.
-	useEffect( () => {
-		if ( ! isSiteEditor ) {
-			return;
-		}
-
-		const unsubscribe = subscribe( () => {
-			// Subscriber callbacks run before the URL actually changes, so we need
-			// to delay the execution.
-			setTimeout( () => {
-				const params = new URLSearchParams( window.location.search );
-
-				const canvasMode = params.get( 'canvas' ) ?? 'view';
-				setViewCanvasPath( canvasMode === 'view' ? params.get( 'path' ) : undefined );
-			}, 0 );
-		}, 'core/edit-site' );
-
-		return () => unsubscribe();
-	}, [ isSiteEditor ] );
+	const { viewCanvasPath } = useCanvas();
 
 	const isVisible = useSelect(
 		( select ) => {
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.scss b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.scss
index 137c5dd966fcef..1e170541dda337 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.scss
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.scss
@@ -1,23 +1,8 @@
 .wpcom-global-styles-notice {
-	margin: 0 0 0 0;
-
-	.notice-margin {
-		margin: 16px 0 0;
-	}
+	margin: 0 0 12px;
+	color: var(--color-text);
 
 	.components-notice__content {
 		margin-right: 0;
 	}
-
-	a {
-		display: inline;
-	}
-
-	.components-button.is-link {
-		color: var(--color-link);
-
-		&:hover {
-			color: var(--color-link-light);
-		}
-	}
 }
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
similarity index 55%
rename from apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
rename to apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
index 94e9ad70218808..ebfc038f170669 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
@@ -1,14 +1,78 @@
 /* global wpcomGlobalStyles */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { ExternalLink, Notice } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useCallback } from '@wordpress/element';
+import { createInterpolateElement, render, useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useCanvas } from './use-canvas';
 import { useGlobalStylesConfig } from './use-global-styles-config';
 import './notice.scss';
 
-const NOTICE_ID = 'wpcom-global-styles/gating-notice';
+const trackEvent = ( eventName, isSiteEditor = true ) =>
+	recordTracksEvent( eventName, {
+		context: isSiteEditor ? 'site-editor' : 'post-editor',
+		blog_id: wpcomGlobalStyles.wpcomBlogId,
+	} );
 
-const GlobalStylesNotice = () => {
+function GlobalStylesWarningNotice() {
+	const { globalStylesInUse } = useGlobalStylesConfig();
+
+	useEffect( () => {
+		if ( globalStylesInUse ) {
+			trackEvent( 'calypso_global_styles_gating_notice_view_canvas_show' );
+		}
+	}, [ globalStylesInUse ] );
+
+	if ( ! globalStylesInUse ) {
+		return null;
+	}
+
+	return (
+		<Notice status="warning" isDismissible={ false } className="wpcom-global-styles-notice">
+			{ createInterpolateElement(
+				__(
+					'Your site includes customized styles that are only visible to visitors after <a>upgrading to the Premium plan or higher</a>.',
+					'full-site-editing'
+				),
+				{
+					a: (
+						<ExternalLink
+							href={ wpcomGlobalStyles.upgradeUrl }
+							target="_blank"
+							onClick={ () =>
+								trackEvent( 'calypso_global_styles_gating_notice_view_canvas_upgrade_click' )
+							}
+						/>
+					),
+				}
+			) }
+		</Notice>
+	);
+}
+
+function GlobalStylesViewNotice() {
+	const { canvas } = useCanvas();
+
+	useEffect( () => {
+		if ( canvas !== 'view' ) {
+			return;
+		}
+
+		const footer = document.querySelector( '.edit-site-sidebar__footer' );
+		if ( ! footer ) {
+			return;
+		}
+
+		const noticeContainer = document.createElement( 'div' );
+		footer.prepend( noticeContainer );
+		render( <GlobalStylesWarningNotice />, noticeContainer );
+	}, [ canvas ] );
+
+	return null;
+}
+
+function GlobalStylesEditNotice() {
+	const NOTICE_ID = 'wpcom-global-styles/gating-notice';
 	const { globalStylesInUse, globalStylesId } = useGlobalStylesConfig();
 	const { isSiteEditor, isPostEditor } = useSelect(
 		( select ) => ( {
@@ -21,24 +85,15 @@ const GlobalStylesNotice = () => {
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
 	const { editEntityRecord } = useDispatch( 'core' );
 
-	const trackEvent = useCallback(
-		( eventName ) =>
-			recordTracksEvent( eventName, {
-				context: isSiteEditor ? 'site-editor' : 'post-editor',
-				blog_id: wpcomGlobalStyles.wpcomBlogId,
-			} ),
-		[ isSiteEditor ]
-	);
-
 	const upgradePlan = useCallback( () => {
 		window.open( wpcomGlobalStyles.upgradeUrl, '_blank' ).focus();
-		trackEvent( 'calypso_global_styles_gating_notice_upgrade_click' );
-	}, [ trackEvent ] );
+		trackEvent( 'calypso_global_styles_gating_notice_upgrade_click', isSiteEditor );
+	}, [ isSiteEditor ] );
 
 	const previewSite = useCallback( () => {
 		window.open( wpcomGlobalStyles.previewUrl, '_blank' ).focus();
-		trackEvent( 'calypso_global_styles_gating_notice_preview_click' );
-	}, [ trackEvent ] );
+		trackEvent( 'calypso_global_styles_gating_notice_preview_click', isSiteEditor );
+	}, [ isSiteEditor ] );
 
 	const resetGlobalStyles = useCallback( () => {
 		if ( ! globalStylesId ) {
@@ -50,8 +105,8 @@ const GlobalStylesNotice = () => {
 			settings: {},
 		} );
 
-		trackEvent( 'calypso_global_styles_gating_notice_reset_click' );
-	}, [ editEntityRecord, globalStylesId, trackEvent ] );
+		trackEvent( 'calypso_global_styles_gating_notice_reset_click', isSiteEditor );
+	}, [ editEntityRecord, globalStylesId, isSiteEditor ] );
 
 	const showNotice = useCallback( () => {
 		const actions = [
@@ -100,7 +155,6 @@ const GlobalStylesNotice = () => {
 		isSiteEditor,
 		previewSite,
 		resetGlobalStyles,
-		trackEvent,
 		upgradePlan,
 	] );
 
@@ -119,6 +173,13 @@ const GlobalStylesNotice = () => {
 	}, [ globalStylesInUse, isSiteEditor, isPostEditor, removeNotice, showNotice ] );
 
 	return null;
-};
-
-export default GlobalStylesNotice;
+}
+
+export default function GlobalStylesNotices() {
+	return (
+		<>
+			<GlobalStylesViewNotice />
+			<GlobalStylesEditNotice />
+		</>
+	);
+}
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-canvas.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-canvas.js
new file mode 100644
index 00000000000000..86464aa316bdc3
--- /dev/null
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-canvas.js
@@ -0,0 +1,33 @@
+import { subscribe, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+export function useCanvas() {
+	const [ canvas, setCanvas ] = useState();
+	const [ viewCanvasPath, setViewCanvasPath ] = useState();
+
+	const isSiteEditor = useSelect( ( select ) => !! select( 'core/edit-site' ), [] );
+
+	// Since Gutenberg doesn't provide a stable selector to get canvas data,
+	// we need to infer it from the URL.
+	useEffect( () => {
+		if ( ! isSiteEditor ) {
+			return;
+		}
+
+		const unsubscribe = subscribe( () => {
+			// Subscriber callbacks run before the URL actually changes, so we need
+			// to delay the execution.
+			setTimeout( () => {
+				const params = new URLSearchParams( window.location.search );
+
+				const _canvas = params.get( 'canvas' ) ?? 'view';
+				setCanvas( _canvas );
+				setViewCanvasPath( _canvas === 'view' ? params.get( 'path' ) : undefined );
+			}, 0 );
+		}, 'core/edit-site' );
+
+		return () => unsubscribe();
+	}, [ isSiteEditor ] );
+
+	return { canvas, viewCanvasPath };
+}

From c39776fe1b0341716c424c95e842642b1f876216 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Tue, 16 May 2023 16:14:35 +0200
Subject: [PATCH 11/15] Add back E2E test

---
 .../editor-site-styles-component.ts           | 14 ------
 .../full-side-editor-nav-sidebar-component.ts | 13 +++++
 .../src/lib/pages/full-site-editor-page.ts    | 35 +++++--------
 .../specs/fse/fse__limited-global-styles.ts   | 49 +++++++++++++++++++
 4 files changed, 74 insertions(+), 37 deletions(-)
 create mode 100644 test/e2e/specs/fse/fse__limited-global-styles.ts

diff --git a/packages/calypso-e2e/src/lib/components/editor-site-styles-component.ts b/packages/calypso-e2e/src/lib/components/editor-site-styles-component.ts
index 92d070e352adb7..fdd230204b2d72 100644
--- a/packages/calypso-e2e/src/lib/components/editor-site-styles-component.ts
+++ b/packages/calypso-e2e/src/lib/components/editor-site-styles-component.ts
@@ -132,20 +132,6 @@ export class EditorSiteStylesComponent {
 		await this.editorDimensionsComponent.resetAll();
 	}
 
-	/**
-	 * Sets a style variation for the site.
-	 * This auto-handles returning to top menu and navigating down.
-	 *
-	 * @param {string} styleVariationName The name of the style variation to set.
-	 */
-	async setStyleVariation( styleVariationName: string ): Promise< void > {
-		await this.returnToTopMenu();
-		await this.clickMenuButton( 'Browse styles' );
-		const editorParent = await this.editor.parent();
-		const locator = editorParent.locator( selectors.styleVariation( styleVariationName ) );
-		await locator.click();
-	}
-
 	/**
 	 * Clicks a menu button in the site styles sidebar/panel.
 	 *
diff --git a/packages/calypso-e2e/src/lib/components/full-side-editor-nav-sidebar-component.ts b/packages/calypso-e2e/src/lib/components/full-side-editor-nav-sidebar-component.ts
index 516ec75cb8fd17..5bbc0468b84c92 100644
--- a/packages/calypso-e2e/src/lib/components/full-side-editor-nav-sidebar-component.ts
+++ b/packages/calypso-e2e/src/lib/components/full-side-editor-nav-sidebar-component.ts
@@ -6,6 +6,8 @@ const selectors = {
 	templatePartsItem: 'button[id="/wp_template_part"]',
 	manageAllTemplatePartsItem: 'button:text("Manage all template parts")',
 	navigationScreenTitle: '.edit-site-sidebar-navigation-screen__title',
+	styleVariation: ( styleVariationName: string ) =>
+		`.edit-site-global-styles-variations_item[aria-label="${ styleVariationName }"]`,
 };
 
 /**
@@ -91,4 +93,15 @@ export class FullSiteEditorNavSidebarComponent {
 		const editorParent = await this.editor.parent();
 		await editorParent.getByRole( 'button', { name: text, exact: true } ).click();
 	}
+
+	/**
+	 * Sets a style variation for the site.
+	 *
+	 * @param {string} styleVariationName The name of the style variation to set.
+	 */
+	async setStyleVariation( styleVariationName: string ): Promise< void > {
+		const editorParent = await this.editor.parent();
+		const locator = editorParent.locator( selectors.styleVariation( styleVariationName ) );
+		await locator.click();
+	}
 }
diff --git a/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts b/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts
index 64c12885700b3b..291cecd6074ec3 100644
--- a/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts
+++ b/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts
@@ -37,7 +37,7 @@ const selectors = {
 	confirmationToast: ( text: string ) => `.components-snackbar:has-text('${ text }')`,
 	focusedBlock: ( blockSelector: string ) => `${ blockSelector }.is-selected`,
 	parentOfFocusedBlock: ( blockSelector: string ) => `${ blockSelector }.has-child-selected`,
-	limitedGlobalStylesPreSaveNotice: '.wpcom-global-styles-notice',
+	limitedGlobalStylesNotice: '.wpcom-global-styles-notice',
 };
 
 /**
@@ -60,8 +60,6 @@ export class FullSiteEditorPage {
 	private templatePartListComponent: TemplatePartListComponent;
 	private cookieBannerComponent: CookieBannerComponent;
 
-	private hasCustomStyles = false;
-
 	/**
 	 * Constructs an instance of the page POM class.
 	 *
@@ -374,27 +372,10 @@ export class FullSiteEditorPage {
 
 	/**
 	 * Save the changes in the full site editor (equivalent of publish).
-	 *
-	 * @param {Object} param0 Keyed options parameter.
-	 * @param {boolean} param0.checkPreSaveNotices Whether the presence of the pre-save notices should be checked.
 	 */
-	async save(
-		{ checkPreSaveNotices }: { checkPreSaveNotices: boolean } = { checkPreSaveNotices: false }
-	): Promise< void > {
-		const editorParent = await this.editor.parent();
+	async save(): Promise< void > {
 		await this.clearExistingSaveConfirmationToast();
 		await this.editorToolbarComponent.saveSiteEditor();
-		if ( checkPreSaveNotices ) {
-			const limitedGlobalStylesPreSaveNotice = editorParent.locator(
-				selectors.limitedGlobalStylesPreSaveNotice
-			);
-			if ( this.hasCustomStyles ) {
-				await limitedGlobalStylesPreSaveNotice.waitFor();
-			} else {
-				const count = await limitedGlobalStylesPreSaveNotice.count();
-				assert.equal( count, 0 );
-			}
-		}
 		await this.fullSiteEditorSavePanelComponent.confirmSave();
 		await this.waitForConfirmationToast( 'Site updated.' );
 	}
@@ -577,8 +558,16 @@ export class FullSiteEditorPage {
 	 * @param {string} styleVariationName The name of the style variation to set.
 	 */
 	async setStyleVariation( styleVariationName: string ): Promise< void > {
-		await this.editorSiteStylesComponent.setStyleVariation( styleVariationName );
-		this.hasCustomStyles = styleVariationName !== 'Default';
+		await this.fullSiteEditorNavSidebarComponent.setStyleVariation( styleVariationName );
+		const hasCustomStyles = styleVariationName !== 'Default';
+		const editorParent = await this.editor.parent();
+		const limitedGlobalStylesNotice = editorParent.locator( selectors.limitedGlobalStylesNotice );
+		if ( hasCustomStyles ) {
+			await limitedGlobalStylesNotice.waitFor();
+		} else {
+			const count = await limitedGlobalStylesNotice.count();
+			assert.equal( count, 0 );
+		}
 	}
 
 	//#endregion
diff --git a/test/e2e/specs/fse/fse__limited-global-styles.ts b/test/e2e/specs/fse/fse__limited-global-styles.ts
new file mode 100644
index 00000000000000..bc954ff7ad6a19
--- /dev/null
+++ b/test/e2e/specs/fse/fse__limited-global-styles.ts
@@ -0,0 +1,49 @@
+/**
+ * @group gutenberg
+ */
+
+import { DataHelper, TestAccount, FullSiteEditorPage } from '@automattic/calypso-e2e';
+import { Browser, Page } from 'playwright';
+
+declare const browser: Browser;
+
+describe( DataHelper.createSuiteTitle( 'Site Editor: Limited Global Styles' ), function () {
+	let page: Page;
+	let fullSiteEditorPage: FullSiteEditorPage;
+	let testAccount: TestAccount;
+
+	beforeAll( async () => {
+		page = await browser.newPage();
+
+		testAccount = new TestAccount( 'simpleSiteFreePlanUser' );
+		await testAccount.authenticate( page );
+
+		fullSiteEditorPage = new FullSiteEditorPage( page );
+	} );
+
+	it( 'Visit the site editor', async function () {
+		await fullSiteEditorPage.visit( testAccount.getSiteURL( { protocol: true } ) );
+		await fullSiteEditorPage.prepareForInteraction( { leaveWithoutSaving: true } );
+
+		await fullSiteEditorPage.ensureNavigationTopLevel();
+	} );
+
+	it( 'Open site styles', async function () {
+		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Styles' );
+	} );
+
+	it( 'Select the "Try it out" option in the upgrade modal', async function () {
+		await fullSiteEditorPage.tryGlobalStyles();
+	} );
+
+	it( 'Pick a non-default style variation and check that the save notice shows up', async function () {
+		// The primary site of the `simpleSiteFreePlanUser` account has the Twenty Twenty-Two
+		// theme which includes a "Blue" style variation. If the active theme on the site
+		// ever changes, we'll need to update the name of this style variation.
+		await fullSiteEditorPage.setStyleVariation( 'Blue' );
+	} );
+
+	it( 'Reset styles to defaults and check that the save notice does not show up', async function () {
+		await fullSiteEditorPage.setStyleVariation( 'Default' );
+	} );
+} );

From f199e38dc3733a233b49ce861bca04bfff52d627 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Tue, 16 May 2023 16:44:42 +0200
Subject: [PATCH 12/15] Ensure the notice of the edit mode is not tracked when
 on the view mode

---
 .../editing-toolkit-plugin/wpcom-global-styles/notices.js    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
index ebfc038f170669..0a34ef04c03a67 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
@@ -74,12 +74,13 @@ function GlobalStylesViewNotice() {
 function GlobalStylesEditNotice() {
 	const NOTICE_ID = 'wpcom-global-styles/gating-notice';
 	const { globalStylesInUse, globalStylesId } = useGlobalStylesConfig();
+	const { canvas } = useCanvas();
 	const { isSiteEditor, isPostEditor } = useSelect(
 		( select ) => ( {
-			isSiteEditor: !! select( 'core/edit-site' ),
+			isSiteEditor: !! select( 'core/edit-site' ) && canvas === 'edit',
 			isPostEditor: ! select( 'core/edit-site' ) && !! select( 'core/editor' ).getCurrentPostId(),
 		} ),
-		[]
+		[ canvas ]
 	);
 
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );

From 4ed46614aeef43214ed45dfb6a0e0db5038452e6 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Tue, 16 May 2023 16:55:00 +0200
Subject: [PATCH 13/15] Add missing isSiteEditor argument

---
 .../editing-toolkit-plugin/wpcom-global-styles/notices.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
index 0a34ef04c03a67..19278e7ad4f974 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
@@ -149,7 +149,7 @@ function GlobalStylesEditNotice() {
 			}
 		);
 
-		trackEvent( 'calypso_global_styles_gating_notice_show' );
+		trackEvent( 'calypso_global_styles_gating_notice_show', isSiteEditor );
 	}, [
 		createWarningNotice,
 		isPostEditor,

From 473a599407b881bfbb6aad33bdbe524727658e8e Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Wed, 17 May 2023 10:55:07 +0200
Subject: [PATCH 14/15] Remove preview action

---
 .../wpcom-global-styles/notices.js            | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
index 19278e7ad4f974..8da5abf5aafa9b 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
@@ -91,11 +91,6 @@ function GlobalStylesEditNotice() {
 		trackEvent( 'calypso_global_styles_gating_notice_upgrade_click', isSiteEditor );
 	}, [ isSiteEditor ] );
 
-	const previewSite = useCallback( () => {
-		window.open( wpcomGlobalStyles.previewUrl, '_blank' ).focus();
-		trackEvent( 'calypso_global_styles_gating_notice_preview_click', isSiteEditor );
-	}, [ isSiteEditor ] );
-
 	const resetGlobalStyles = useCallback( () => {
 		if ( ! globalStylesId ) {
 			return;
@@ -119,15 +114,6 @@ function GlobalStylesEditNotice() {
 			},
 		];
 
-		if ( isPostEditor ) {
-			actions.push( {
-				label: __( 'Preview without custom styles', 'full-site-editing' ),
-				onClick: previewSite,
-				variant: 'secondary',
-				noDefaultClasses: true,
-			} );
-		}
-
 		if ( isSiteEditor ) {
 			actions.push( {
 				label: __( 'Remove custom styles', 'full-site-editing' ),
@@ -150,14 +136,7 @@ function GlobalStylesEditNotice() {
 		);
 
 		trackEvent( 'calypso_global_styles_gating_notice_show', isSiteEditor );
-	}, [
-		createWarningNotice,
-		isPostEditor,
-		isSiteEditor,
-		previewSite,
-		resetGlobalStyles,
-		upgradePlan,
-	] );
+	}, [ createWarningNotice, isPostEditor, isSiteEditor, resetGlobalStyles, upgradePlan ] );
 
 	useEffect( () => {
 		if ( ! isSiteEditor && ! isPostEditor ) {

From d627869c549f5a4530521bd1d3ed30ad6bd860f4 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 18 May 2023 11:06:48 +0200
Subject: [PATCH 15/15] Make notice dismissible

---
 .../editing-toolkit-plugin/wpcom-global-styles/notices.js      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
index 8da5abf5aafa9b..2e02ecd5ee0c19 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
@@ -130,13 +130,12 @@ function GlobalStylesEditNotice() {
 			),
 			{
 				id: NOTICE_ID,
-				isDismissible: false,
 				actions: actions,
 			}
 		);
 
 		trackEvent( 'calypso_global_styles_gating_notice_show', isSiteEditor );
-	}, [ createWarningNotice, isPostEditor, isSiteEditor, resetGlobalStyles, upgradePlan ] );
+	}, [ createWarningNotice, isSiteEditor, resetGlobalStyles, upgradePlan ] );
 
 	useEffect( () => {
 		if ( ! isSiteEditor && ! isPostEditor ) {