Preview limited Global Styles by default (#76661)

- Custom styles are previewed by default, so there is less confusion around the site-editor and the front-end not matching up.
- Both the site editor and the post editor display now a global notice when Global Styles are limited. Previous sidebar notices in the site editor have been removed. This notice has the following actions:
  - Upgrade now (primary): Visible in both editors – It opens the Plans page in a new tab.
  - Remove custom styles (link): Visible in the site editor only – It resets the styles to defaults (it’s easy and safe to do so in the editor). Once we have a support page explaining how to remove custom styles, we can show it in the post editor too.
- Add a new notice to the view canvas.
- Updates the E2E test to use the view canvas mode since that's the only place where we have a fragile CSS selector.

Author: mmtr

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

@@ -3,18 +3,16 @@ 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 GlobalStylesNotices from './notices';
 import './store';
 
 const showGlobalStylesComponents = () => {
 	registerPlugin( 'wpcom-global-styles', {
 		render: () => (
 			<>
 				<GlobalStylesModal />
-				<GlobalStylesNotice />
-				<GlobalStylesSidebarNotice />
+				<GlobalStylesNotices />
 			</>
 		),
 	} );

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

@@ -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=style-customization",
+			'previewUrl'  => add_query_arg( 'hide-global-styles', '', home_url() ),
 			'wpcomBlogId' => wpcom_global_styles_get_wpcom_current_blog_id(),
 		)
 	);
@@ -422,9 +418,9 @@ function wpcom_display_global_styles_launch_bar( $bar_controls ) {
 	$upgrade_url = 'https://wordpress.com/plans/' . $site_slug . '?plan=value_bundle&feature=style-customization';
 
 	if ( wpcom_is_previewing_global_styles() ) {
-		$preview_location = remove_query_arg( 'preview-global-styles' );
+		$preview_location = add_query_arg( 'hide-global-styles', '' );
 	} else {
-		$preview_location = add_query_arg( 'preview-global-styles', '' );
+		$preview_location = remove_query_arg( 'hide-global-styles' );
 	}
 
 	ob_start(); ?>
@@ -533,5 +529,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/index.php

@@ -2,53 +2,45 @@
 
 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 [ 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( () => {
-		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();
-	}, [] );
+	const isSiteEditor = useSelect( ( select ) => !! select( 'core/edit-site' ), [] );
+	const { viewCanvasPath } = useCanvas();
 
 	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 +57,7 @@ const GlobalStylesModal = () => {
 		} );
 	};
 
-	if ( ! isVisible ) {
+	if ( ! isSiteEditor || ! isVisible ) {
 		return null;
 	}
 

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

@@ -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);
-		}
-	}
 }