Add a GS limit notice in the Global Styles sidebar

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx

@@ -0,0 +1,52 @@
+declare const wpcomGlobalStyles: { upgradeUrl: string };
+
+import { ExternalLink, Fill, Notice } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStylesConfig } from './use-global-styles-config';
+import { recordUpgradeNoticeClick, recordUpgradeNoticeShow } from './utils';
+
+const GLOBAL_STYLES_SIDEBAR = 'edit-site/global-styles';
+
+export function GlobalStylesSidebarNotice() {
+	const area = useSelect(
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		( select ) => select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-site' ),
+		[]
+	);
+
+	const isGlobalStylesSidebar = GLOBAL_STYLES_SIDEBAR === area;
+
+	const isVisible = useGlobalStylesConfig().isVisible;
+
+	useEffect( () => {
+		if ( isVisible && isGlobalStylesSidebar ) {
+			recordUpgradeNoticeShow( GLOBAL_STYLES_SIDEBAR );
+		}
+	}, [ isVisible, isGlobalStylesSidebar ] );
+
+	return (
+		<Fill name="ComplementaryArea/core/edit-site">
+			{ !! isVisible && isGlobalStylesSidebar && (
+				<div className="interface-complementary-area">
+					<Notice status="warning" isDismissible={ false } className="wpcom-global-styles-notice">
+						{ createInterpolateElement(
+							__( '<a>Upgrade your plan</a> to keep your style changes.', 'full-site-editing' ),
+							{
+								a: (
+									<ExternalLink
+										href={ wpcomGlobalStyles.upgradeUrl }
+										target="_blank"
+										onClick={ () => recordUpgradeNoticeClick( GLOBAL_STYLES_SIDEBAR ) }
+									/>
+								),
+							}
+						) }
+					</Notice>
+				</div>
+			) }
+		</Fill>
+	);
+}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.js

@@ -3,6 +3,7 @@ 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';
@@ -13,6 +14,7 @@ const showGlobalStylesComponents = () => {
 			<>
 				<GlobalStylesModal />
 				<GlobalStylesNotice />
+				<GlobalStylesSidebarNotice />
 			</>
 		),
 	} );

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js

@@ -1,38 +1,14 @@
 /* global wpcomGlobalStyles */
-import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { ExternalLink, Notice } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement, render, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
 import './notice.scss';
+import { useGlobalStylesConfig } from './use-global-styles-config';
+import { recordUpgradeNoticeClick, recordUpgradeNoticeShow } from './utils';
 
 function GlobalStylesNoticeComponent() {
-	const { globalStylesConfig, siteChanges } = useSelect( ( select ) => {
-		const {
-			getEditedEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetDirtyEntityRecords,
-		} = select( 'core' );
-
-		const _globalStylesId = __experimentalGetCurrentGlobalStylesId
-			? __experimentalGetCurrentGlobalStylesId()
-			: null;
-		const globalStylesRecord = getEditedEntityRecord( 'root', 'globalStyles', _globalStylesId );
-
-		return {
-			globalStylesConfig: {
-				styles: globalStylesRecord?.styles ?? {},
-				settings: globalStylesRecord?.settings ?? {},
-			},
-			siteChanges: __experimentalGetDirtyEntityRecords ? __experimentalGetDirtyEntityRecords() : [],
-		};
-	}, [] );
-
-	// Do not show the notice if the use is trying to save the default styles.
-	const isVisible =
-		Object.keys( globalStylesConfig.styles ).length ||
-		Object.keys( globalStylesConfig.settings ).length;
+	const { siteChanges, isVisible } = useGlobalStylesConfig();
 
 	// Closes the sidebar if there are no more changes to be saved.
 	useEffect( () => {
@@ -51,9 +27,7 @@ function GlobalStylesNoticeComponent() {
 
 	useEffect( () => {
 		if ( isVisible ) {
-			recordTracksEvent( 'calypso_global_styles_gating_notice_show', {
-				context: 'site-editor',
-			} );
+			recordUpgradeNoticeShow( 'site-editor' );
 		}
 	}, [ isVisible ] );
 
@@ -73,11 +47,7 @@ function GlobalStylesNoticeComponent() {
 						<ExternalLink
 							href={ wpcomGlobalStyles.upgradeUrl }
 							target="_blank"
-							onClick={ () =>
-								recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', {
-									context: 'site-editor',
-								} )
-							}
+							onClick={ () => recordUpgradeNoticeClick( 'site-editor' ) }
 						/>
 					),
 				}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js

@@ -0,0 +1,32 @@
+import { useSelect } from '@wordpress/data';
+
+export function useGlobalStylesConfig() {
+	return useSelect( ( select ) => {
+		const {
+			getEditedEntityRecord,
+			__experimentalGetCurrentGlobalStylesId,
+			__experimentalGetDirtyEntityRecords,
+		} = select( 'core' );
+
+		const _globalStylesId = __experimentalGetCurrentGlobalStylesId
+			? __experimentalGetCurrentGlobalStylesId()
+			: null;
+		const globalStylesRecord = getEditedEntityRecord( 'root', 'globalStyles', _globalStylesId );
+
+		const globalStylesConfig = {
+			styles: globalStylesRecord?.styles ?? {},
+			settings: globalStylesRecord?.settings ?? {},
+		};
+
+		// Do not show the notice if the use is trying to save the default styles.
+		const isVisible =
+			Object.keys( globalStylesConfig.styles ).length ||
+			Object.keys( globalStylesConfig.settings ).length;
+
+		return {
+			globalStylesConfig,
+			isVisible,
+			siteChanges: __experimentalGetDirtyEntityRecords ? __experimentalGetDirtyEntityRecords() : [],
+		};
+	}, [] );
+}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts

@@ -0,0 +1,13 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+
+export function recordUpgradeNoticeClick( context: string ): void {
+	recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', {
+		context,
+	} );
+}
+
+export function recordUpgradeNoticeShow( context: string ): void {
+	recordTracksEvent( 'calypso_global_styles_gating_notice_show', {
+		context,
+	} );
+}