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 8f984e932b74d..0000000000000 --- 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 ( - - { /* - 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 && ( -
- - { createInterpolateElement( - __( - 'Your changes include customized styles that will only be visible once you upgrade to a Premium plan.', - 'full-site-editing' - ), - { - a: ( - - ), - } - ) } - -
- ) } - - - ); -} 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 47dffcb1de668..525dd0b508cf8 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,9 +3,8 @@ 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 = () => { @@ -13,8 +12,7 @@ const showGlobalStylesComponents = () => { render: () => ( <> - - + ), } ); 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 e72afeeeae91c..c910c60aa05e9 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=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' ); } 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 3d5df490a926c..5794ce1b5db37 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,44 +2,34 @@ 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' ); @@ -47,8 +37,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 +57,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 deleted file mode 100644 index 2222da9a9f63b..0000000000000 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js +++ /dev/null @@ -1,98 +0,0 @@ -/* global wpcomGlobalStyles */ -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 { recordUpgradePreSaveNoticeClick, recordUpgradeNoticePreSaveShow } from './tracks-events'; -import { useGlobalStylesConfig } from './use-global-styles-config'; - -function GlobalStylesNoticeComponent() { - const { siteChanges, globalStylesInUse } = useGlobalStylesConfig(); - - // 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 ] ); - - useEffect( () => { - if ( globalStylesInUse ) { - recordUpgradeNoticePreSaveShow(); - } - }, [ globalStylesInUse ] ); - - if ( ! globalStylesInUse ) { - return null; - } - - return ( - - { createInterpolateElement( - __( - 'Your changes include customized styles that will only be visible once you upgrade to a Premium plan.', - 'full-site-editing' - ), - { - a: ( - - ), - } - ) } - - ); -} - -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; - } - - 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( , noticeContainer ); - setIsNoticeRendered( true ); - break; - } - }, [ globalStylesConfig, isNoticeRendered, isSaveViewOpened ] ); - - return null; -} 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 137c5dd966fce..1e170541dda33 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/notices.js b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js new file mode 100644 index 0000000000000..2e02ecd5ee0c1 --- /dev/null +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js @@ -0,0 +1,164 @@ +/* global wpcomGlobalStyles */ +import { recordTracksEvent } from '@automattic/calypso-analytics'; +import { ExternalLink, Notice } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +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 trackEvent = ( eventName, isSiteEditor = true ) => + recordTracksEvent( eventName, { + context: isSiteEditor ? 'site-editor' : 'post-editor', + blog_id: wpcomGlobalStyles.wpcomBlogId, + } ); + +function GlobalStylesWarningNotice() { + const { globalStylesInUse } = useGlobalStylesConfig(); + + useEffect( () => { + if ( globalStylesInUse ) { + trackEvent( 'calypso_global_styles_gating_notice_view_canvas_show' ); + } + }, [ globalStylesInUse ] ); + + if ( ! globalStylesInUse ) { + return null; + } + + return ( + + { createInterpolateElement( + __( + 'Your site includes customized styles that are only visible to visitors after upgrading to the Premium plan or higher.', + 'full-site-editing' + ), + { + a: ( + + trackEvent( 'calypso_global_styles_gating_notice_view_canvas_upgrade_click' ) + } + /> + ), + } + ) } + + ); +} + +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( , noticeContainer ); + }, [ canvas ] ); + + return null; +} + +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' ) && canvas === 'edit', + isPostEditor: ! select( 'core/edit-site' ) && !! select( 'core/editor' ).getCurrentPostId(), + } ), + [ canvas ] + ); + + const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' ); + const { editEntityRecord } = useDispatch( 'core' ); + + const upgradePlan = useCallback( () => { + window.open( wpcomGlobalStyles.upgradeUrl, '_blank' ).focus(); + trackEvent( 'calypso_global_styles_gating_notice_upgrade_click', isSiteEditor ); + }, [ isSiteEditor ] ); + + const resetGlobalStyles = useCallback( () => { + if ( ! globalStylesId ) { + return; + } + + editEntityRecord( 'root', 'globalStyles', globalStylesId, { + styles: {}, + settings: {}, + } ); + + trackEvent( 'calypso_global_styles_gating_notice_reset_click', isSiteEditor ); + }, [ editEntityRecord, globalStylesId, isSiteEditor ] ); + + const showNotice = useCallback( () => { + const actions = [ + { + label: __( 'Upgrade now', 'full-site-editing' ), + onClick: upgradePlan, + variant: 'primary', + noDefaultClasses: true, + }, + ]; + + if ( isSiteEditor ) { + actions.push( { + label: __( 'Remove custom styles', 'full-site-editing' ), + onClick: resetGlobalStyles, + variant: 'secondary', + 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, + actions: actions, + } + ); + + trackEvent( 'calypso_global_styles_gating_notice_show', isSiteEditor ); + }, [ createWarningNotice, isSiteEditor, resetGlobalStyles, upgradePlan ] ); + + useEffect( () => { + if ( ! isSiteEditor && ! isPostEditor ) { + return; + } + + if ( globalStylesInUse ) { + showNotice(); + } else { + removeNotice( NOTICE_ID ); + } + + return () => removeNotice( NOTICE_ID ); + }, [ globalStylesInUse, isSiteEditor, isPostEditor, removeNotice, showNotice ] ); + + return null; +} + +export default function GlobalStylesNotices() { + return ( + <> + + + + ); +} 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 ca64a5ae5b1fa..0000000000000 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts +++ /dev/null @@ -1,43 +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 from the pre-save panel. - */ -export function recordUpgradePreSaveNoticeClick(): void { - recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', { - context: 'site-editor', - blog_id: wpcomGlobalStyles.wpcomBlogId, - } ); -} - -/** - * Record an event when a user clicks on the notice from the Global Styles sidebar. - */ -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 { - 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', - blog_id: wpcomGlobalStyles.wpcomBlogId, - } ); -} 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 0000000000000..86464aa316bdc --- /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 }; +} 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 f6bf492b856cf..b5ede455c2e98 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, }; }, [] ); } 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 22794381e6c26..a4d9280f5f3a3 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 @@ -13,7 +13,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'; @@ -26,7 +25,6 @@ const LaunchpadSitePreview = ( { } ) => { const translate = useTranslate(); const site = useSite(); - const { globalStylesInUse } = usePremiumGlobalStyles( site?.ID ); const isInVideoPressFlow = isVideoPressFlow( flow ); let previewUrl = siteSlug ? 'https://' + siteSlug : null; @@ -73,7 +71,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 671fc99603832..0c34dc8c99a03 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 ) => { 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 92d070e352adb..fdd230204b2d7 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 516ec75cb8fd1..5bbc0468b84c9 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 64c12885700b3..291cecd6074ec 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 index 42545683950c3..bc954ff7ad6a1 100644 --- a/test/e2e/specs/fse/fse__limited-global-styles.ts +++ b/test/e2e/specs/fse/fse__limited-global-styles.ts @@ -26,42 +26,24 @@ describe( DataHelper.createSuiteTitle( 'Site Editor: Limited Global Styles' ), f 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(); + 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', async function () { + 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( '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(); + it( 'Reset styles to defaults and check that the save notice does not show up', async function () { 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 } ); - } ); } );