Preview limited Global Styles by default

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 />
 			</>
 		),
 	} );

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(),
 		)
 	);
@@ -423,10 +419,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 +530,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' );
 }

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,27 +33,34 @@ 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' );
 	const { set: setPreference } = useDispatch( 'core/preferences' );
 
 	// 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;
 	}
 

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

@@ -1,98 +1,124 @@
 /* global wpcomGlobalStyles */
-import { ExternalLink, Notice } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { createInterpolateElement, render, useEffect, useState } from '@wordpress/element';
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import './notice.scss';
-import { recordUpgradePreSaveNoticeClick, recordUpgradeNoticePreSaveShow } from './tracks-events';
 import { useGlobalStylesConfig } from './use-global-styles-config';
+import './notice.scss';
 
-function GlobalStylesNoticeComponent() {
-	const { siteChanges, globalStylesInUse } = useGlobalStylesConfig();
+const NOTICE_ID = 'wpcom-global-styles/gating-notice';
 
-	// 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();
-		}
-	}, [ siteChanges ] );
+const GlobalStylesNotice = () => {
+	const { globalStylesInUse, globalStylesId } = useGlobalStylesConfig();
+	const { isSiteEditor, isPostEditor } = useSelect(
+		( select ) => ( {
+			isSiteEditor: !! select( 'core/edit-site' ),
+			isPostEditor: ! select( 'core/edit-site' ) && !! select( 'core/editor' ).getCurrentPostId(),
+		} ),
+		[]
+	);
 
-	useEffect( () => {
-		if ( globalStylesInUse ) {
-			recordUpgradeNoticePreSaveShow();
-		}
-	}, [ globalStylesInUse ] );
-
-	if ( ! globalStylesInUse ) {
-		return null;
-	}
-
-	return (
-		<Notice
-			status="warning"
-			isDismissible={ false }
-			className="wpcom-global-styles-notice notice-margin"
-		>
-			{ 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={ recordUpgradePreSaveNoticeClick }
-						/>
-					),
-				}
-			) }
-		</Notice>
+	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 ]
 	);
-}
 
-export default function GlobalStylesNotice() {
-	const { globalStylesConfig, isSaveViewOpened } = useSelect( ( select ) => ( {
-		globalStylesConfig: select( 'core' ).getEntityConfig( 'root', 'globalStyles' ),
-		isSaveViewOpened: select( 'core/edit-site' ).isSaveViewOpened(),
-	} ) );
+	const upgradePlan = useCallback( () => {
+		window.open( wpcomGlobalStyles.upgradeUrl, '_blank' ).focus();
+		trackEvent( 'calypso_global_styles_gating_notice_upgrade_click' );
+	}, [ trackEvent ] );
 
-	const [ isNoticeRendered, setIsNoticeRendered ] = useState( false );
+	const previewSite = useCallback( () => {
+		window.open( wpcomGlobalStyles.previewUrl, '_blank' ).focus();
+		trackEvent( 'calypso_global_styles_gating_notice_preview_click' );
+	}, [ trackEvent ] );
 
-	useEffect( () => {
-		if ( ! globalStylesConfig || ! isSaveViewOpened ) {
-			setIsNoticeRendered( false );
+	const resetGlobalStyles = useCallback( () => {
+		if ( ! globalStylesId ) {
 			return;
 		}
-		if ( isNoticeRendered ) {
-			return;
+
+		editEntityRecord( 'root', 'globalStyles', globalStylesId, {
+			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,
+			} );
 		}
 
-		const preSavePanelTitles = document.querySelectorAll(
-			'.entities-saved-states__panel .components-panel__body.is-opened .components-panel__body-title'
-		);
+		if ( isSiteEditor ) {
+			actions.push( {
+				label: __( 'Remove custom styles', 'full-site-editing' ),
+				onClick: resetGlobalStyles,
+				variant: 'link',
+				noDefaultClasses: true,
+			} );
+		}
 
-		for ( const entityTitle of preSavePanelTitles ) {
-			if ( entityTitle.textContent !== globalStylesConfig.label ) {
-				continue;
+		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,
+	] );
 
-			const noticeContainer = document.createElement( 'div' );
-			entityTitle.parentElement.append( noticeContainer );
-			render( <GlobalStylesNoticeComponent />, noticeContainer );
-			setIsNoticeRendered( true );
-			break;
+	useEffect( () => {
+		if ( ! isSiteEditor && ! isPostEditor ) {
+			return;
+		}
+
+		if ( globalStylesInUse ) {
+			showNotice();
+		} else {
+			removeNotice( NOTICE_ID );
 		}
-	}, [ globalStylesConfig, isNoticeRendered, isSaveViewOpened ] );
+
+		return () => removeNotice( NOTICE_ID );
+	}, [ globalStylesInUse, isSiteEditor, isPostEditor, removeNotice, showNotice ] );
 
 	return null;
-}
+};
+
+export default GlobalStylesNotice;