Rename the event functions and change copy

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

@@ -9,11 +9,16 @@ import { useGlobalStylesConfig } from './use-global-styles-config';
 
 const GLOBAL_STYLES_SIDEBAR = 'edit-site/global-styles';
 
+type CoreInterfacePlaceholder = {
+	getActiveComplementaryArea: ( area: string ) => string;
+};
+
 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' ),
+		( select ) =>
+			( select( 'core/interface' ) as CoreInterfacePlaceholder ).getActiveComplementaryArea(
+				'core/edit-site'
+			),
 		[]
 	);
 
@@ -36,7 +41,10 @@ export function GlobalStylesSidebarNotice() {
 				<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' ),
+							__(
+								'Your changes include customized styles that will only be visible once you <a>upgrade to a Premium plan</a>.',
+								'full-site-editing'
+							),
 							{
 								a: (
 									<ExternalLink

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

@@ -4,10 +4,7 @@ import { useSelect } from '@wordpress/data';
 import { createInterpolateElement, render, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import './notice.scss';
-import {
-	recordUpgradePrePublishNoticeClick,
-	recordUpgradeNoticePrePublishShow,
-} from './tracks-events';
+import { recordUpgradePreSaveNoticeClick, recordUpgradeNoticePreSaveShow } from './tracks-events';
 import { useGlobalStylesConfig } from './use-global-styles-config';
 
 function GlobalStylesNoticeComponent() {
@@ -30,7 +27,7 @@ function GlobalStylesNoticeComponent() {
 
 	useEffect( () => {
 		if ( globalStylesInUse ) {
-			recordUpgradeNoticePrePublishShow();
+			recordUpgradeNoticePreSaveShow();
 		}
 	}, [ globalStylesInUse ] );
 
@@ -54,7 +51,7 @@ function GlobalStylesNoticeComponent() {
 						<ExternalLink
 							href={ wpcomGlobalStyles.upgradeUrl }
 							target="_blank"
-							onClick={ () => recordUpgradePrePublishNoticeClick() }
+							onClick={ () => recordUpgradePreSaveNoticeClick() }
 						/>
 					),
 				}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts

@@ -3,9 +3,9 @@ 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 PrePublish panel.
+ * Record an event when a user clicks on the notice from the pre-save panel.
  */
-export function recordUpgradePrePublishNoticeClick(): void {
+export function recordUpgradePreSaveNoticeClick(): void {
 	recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', {
 		context: 'site-editor',
 		blog_id: wpcomGlobalStyles.wpcomBlogId,
@@ -23,9 +23,9 @@ export function recordUpgradeSidebarNoticeClick(): void {
 }
 
 /**
- * Record an event when the GS upgrade notice is shown in the Pre Publish screen.
+ * Record an event when the GS upgrade notice is shown in the pre-save screen.
  */
-export function recordUpgradeNoticePrePublishShow(): void {
+export function recordUpgradeNoticePreSaveShow(): void {
 	recordTracksEvent( 'calypso_global_styles_gating_notice_show', {
 		context: 'site-editor',
 		blog_id: wpcomGlobalStyles.wpcomBlogId,