From 1fee10822f843c52017596fc696762108ff0f419 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Thu, 16 Mar 2023 15:14:20 +0200 Subject: [PATCH 01/21] Add a GS limit notice in the Global Styles Root Screen Just like the other Global Styles limit notices, the new notice is shown only for free and personal plans. The implementation is based on the existing noticed by refactoring the logic we used in the pre-save GS notice. --- .../wpcom-global-styles/index.js | 2 + .../wpcom-global-styles/notice.js | 39 ++-------------- .../screen-root-notice.tsx | 41 +++++++++++++++++ .../wpcom-global-styles/utils.ts | 45 +++++++++++++++++++ 4 files changed, 92 insertions(+), 35 deletions(-) create mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx create mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts 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 20a48f424ae57..b0c25a353da5c 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 @@ -6,6 +6,7 @@ import { registerPlugin } from '@wordpress/plugins'; import GlobalStylesModal from './modal'; import GlobalStylesNotice from './notice'; import './store'; +import { GlobalStylesScreenRootNotice } from './screen-root-notice'; const showGlobalStylesComponents = () => { registerPlugin( 'wpcom-global-styles', { @@ -13,6 +14,7 @@ const showGlobalStylesComponents = () => { <> + ), } ); 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 index 7d4e76fd03597..8bd766e6ec642 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js @@ -1,38 +1,13 @@ /* 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 { recordUpgradeNoticeClick, recordUpgradeNoticeShow, useGlobalStylesConfig } 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 +26,7 @@ function GlobalStylesNoticeComponent() { useEffect( () => { if ( isVisible ) { - recordTracksEvent( 'calypso_global_styles_gating_notice_show', { - context: 'site-editor', - } ); + recordUpgradeNoticeShow( 'site-editor' ); } }, [ isVisible ] ); @@ -73,11 +46,7 @@ function GlobalStylesNoticeComponent() { - recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', { - context: 'site-editor', - } ) - } + onClick={ () => recordUpgradeNoticeClick( 'site-editor' ) } /> ), } diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx new file mode 100644 index 0000000000000..41b52a6545d76 --- /dev/null +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx @@ -0,0 +1,41 @@ +declare const wpcomGlobalStyles: { upgradeUrl: string }; + +import { ExternalLink, Fill, Notice } from '@wordpress/components'; +import { createInterpolateElement, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { recordUpgradeNoticeClick, recordUpgradeNoticeShow, useGlobalStylesConfig } from './utils'; + +const GLOBAL_STYLES_SCREEN_ROOT_CONTEXT = 'global-styles-screen-root'; + +export function GlobalStylesScreenRootNotice() { + const { isVisible } = useGlobalStylesConfig(); + + useEffect( () => { + if ( isVisible ) { + recordUpgradeNoticeShow( GLOBAL_STYLES_SCREEN_ROOT_CONTEXT ); + } + }, [ isVisible ] ); + + if ( ! isVisible ) { + return; + } + + return ( + + + { createInterpolateElement( + __( 'Upgrade your plan to keep your style changes.', 'full-site-editing' ), + { + a: ( + recordUpgradeNoticeClick( GLOBAL_STYLES_SCREEN_ROOT_CONTEXT ) } + /> + ), + } + ) } + + + ); +} diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts new file mode 100644 index 0000000000000..8e4cb051a826c --- /dev/null +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts @@ -0,0 +1,45 @@ +import { recordTracksEvent } from '@automattic/calypso-analytics'; +import { useSelect } from '@wordpress/data'; + +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, + } ); +} + +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() : [], + }; + }, [] ); +} From b804958caacd0213d83d7b413b833d2b64b4b92f Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 20 Mar 2023 11:45:57 +0200 Subject: [PATCH 02/21] Moved useGlobalStylesConfig in a js file so we can bypass the TS errors without using ts-ignore. --- .../wpcom-global-styles/notice.js | 3 +- .../screen-root-notice.tsx | 3 +- .../use-global-styles-config.js | 32 +++++++++++++++++++ .../wpcom-global-styles/utils.ts | 32 ------------------- 4 files changed, 36 insertions(+), 34 deletions(-) create mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js 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 index 8bd766e6ec642..252fd00c79222 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js @@ -4,7 +4,8 @@ import { useSelect } from '@wordpress/data'; import { createInterpolateElement, render, useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import './notice.scss'; -import { recordUpgradeNoticeClick, recordUpgradeNoticeShow, useGlobalStylesConfig } from './utils'; +import { useGlobalStylesConfig } from './use-global-styles-config'; +import { recordUpgradeNoticeClick, recordUpgradeNoticeShow } from './utils'; function GlobalStylesNoticeComponent() { const { siteChanges, isVisible } = useGlobalStylesConfig(); diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx index 41b52a6545d76..a50659b5cf2fe 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx @@ -3,7 +3,8 @@ declare const wpcomGlobalStyles: { upgradeUrl: string }; import { ExternalLink, Fill, Notice } from '@wordpress/components'; import { createInterpolateElement, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { recordUpgradeNoticeClick, recordUpgradeNoticeShow, useGlobalStylesConfig } from './utils'; +import { useGlobalStylesConfig } from './use-global-styles-config'; +import { recordUpgradeNoticeClick, recordUpgradeNoticeShow } from './utils'; const GLOBAL_STYLES_SCREEN_ROOT_CONTEXT = 'global-styles-screen-root'; 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 new file mode 100644 index 0000000000000..0734f4819a925 --- /dev/null +++ b/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() : [], + }; + }, [] ); +} diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts index 8e4cb051a826c..74f5a47c67a8d 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts @@ -1,5 +1,4 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; -import { useSelect } from '@wordpress/data'; export function recordUpgradeNoticeClick( context: string ): void { recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', { @@ -12,34 +11,3 @@ export function recordUpgradeNoticeShow( context: string ): void { context, } ); } - -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() : [], - }; - }, [] ); -} From 302cad508e470c05d20e7d8b4934ebd98aaaf00d Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Thu, 23 Mar 2023 16:40:43 +0200 Subject: [PATCH 03/21] Add the upgrade nudge using the ComplementaryArea slot. --- .../global-style-sidebar-notice.tsx | 52 +++++++++++++++++++ .../wpcom-global-styles/index.js | 4 +- .../screen-root-notice.tsx | 42 --------------- 3 files changed, 54 insertions(+), 44 deletions(-) create mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx delete mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx 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 new file mode 100644 index 0000000000000..21e3f5c51fe1a --- /dev/null +++ b/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 ( + + { !! isVisible && isGlobalStylesSidebar && ( +
+ + { createInterpolateElement( + __( 'Upgrade your plan to keep your style changes.', 'full-site-editing' ), + { + a: ( + recordUpgradeNoticeClick( GLOBAL_STYLES_SIDEBAR ) } + /> + ), + } + ) } + +
+ ) } + + ); +} 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 b0c25a353da5c..85bdd491f508c 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,10 +3,10 @@ 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'; -import { GlobalStylesScreenRootNotice } from './screen-root-notice'; const showGlobalStylesComponents = () => { registerPlugin( 'wpcom-global-styles', { @@ -14,7 +14,7 @@ const showGlobalStylesComponents = () => { <> - + ), } ); diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx deleted file mode 100644 index a50659b5cf2fe..0000000000000 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/screen-root-notice.tsx +++ /dev/null @@ -1,42 +0,0 @@ -declare const wpcomGlobalStyles: { upgradeUrl: string }; - -import { ExternalLink, Fill, Notice } from '@wordpress/components'; -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_SCREEN_ROOT_CONTEXT = 'global-styles-screen-root'; - -export function GlobalStylesScreenRootNotice() { - const { isVisible } = useGlobalStylesConfig(); - - useEffect( () => { - if ( isVisible ) { - recordUpgradeNoticeShow( GLOBAL_STYLES_SCREEN_ROOT_CONTEXT ); - } - }, [ isVisible ] ); - - if ( ! isVisible ) { - return; - } - - return ( - - - { createInterpolateElement( - __( 'Upgrade your plan to keep your style changes.', 'full-site-editing' ), - { - a: ( - recordUpgradeNoticeClick( GLOBAL_STYLES_SCREEN_ROOT_CONTEXT ) } - /> - ), - } - ) } - - - ); -} From 22ec7301bad7e7ed074a941b1ece05425722fe35 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 24 Mar 2023 18:44:55 +0200 Subject: [PATCH 04/21] Added comment explaining why we are doing the condition check inside the fill component. --- .../wpcom-global-styles/global-style-sidebar-notice.tsx | 3 +++ 1 file changed, 3 insertions(+) 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 index 21e3f5c51fe1a..4be58a5a8bc59 100644 --- 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 @@ -29,6 +29,9 @@ export function GlobalStylesSidebarNotice() { return ( + { /* + 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. + */ } { !! isVisible && isGlobalStylesSidebar && (
From 86c882c60912aacf8d24d873cbb18b1632af4047 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 13:29:55 +0300 Subject: [PATCH 05/21] Refactor the implementation based on code review feedback. - Add dedicated tracking events for the sidebar notice and add a blog_id parameter (which will help to get some stats about the sites that upgrade) - Rename isVisible property to globalStylesInUse - Rename utils.ts to tracks-events.ts for better visibility - Removed a property since from the use function since it's not needed - Fixed CSS margin issues in the sidebar --- .../global-style-sidebar-notice.tsx | 16 +++---- .../wpcom-global-styles/index.php | 1 + .../wpcom-global-styles/notice.js | 23 ++++++---- .../wpcom-global-styles/notice.scss | 6 ++- .../wpcom-global-styles/tracks-events.ts | 43 +++++++++++++++++++ .../use-global-styles-config.js | 10 ++--- .../wpcom-global-styles/utils.ts | 13 ------ 7 files changed, 77 insertions(+), 35 deletions(-) create mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts delete mode 100644 apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts 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 index 4be58a5a8bc59..b15e810febbe0 100644 --- 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 @@ -1,11 +1,11 @@ -declare const wpcomGlobalStyles: { upgradeUrl: string }; +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'; -import { recordUpgradeNoticeClick, recordUpgradeNoticeShow } from './utils'; const GLOBAL_STYLES_SIDEBAR = 'edit-site/global-styles'; @@ -19,20 +19,20 @@ export function GlobalStylesSidebarNotice() { const isGlobalStylesSidebar = GLOBAL_STYLES_SIDEBAR === area; - const isVisible = useGlobalStylesConfig().isVisible; + const globalStylesInUse = useGlobalStylesConfig().globalStylesInUse; useEffect( () => { - if ( isVisible && isGlobalStylesSidebar ) { - recordUpgradeNoticeShow( GLOBAL_STYLES_SIDEBAR ); + if ( globalStylesInUse && isGlobalStylesSidebar ) { + recordUpgradeNoticeSidebarShow(); } - }, [ isVisible, isGlobalStylesSidebar ] ); + }, [ globalStylesInUse, isGlobalStylesSidebar ] ); return ( { /* 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. */ } - { !! isVisible && isGlobalStylesSidebar && ( + { globalStylesInUse && isGlobalStylesSidebar && (
{ createInterpolateElement( @@ -42,7 +42,7 @@ export function GlobalStylesSidebarNotice() { recordUpgradeNoticeClick( GLOBAL_STYLES_SIDEBAR ) } + onClick={ () => recordUpgradeSidebarNoticeClick() } /> ), } 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 181219e485e62..ef55e42e8c9f4 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 @@ -126,6 +126,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", + 'blogId' => get_current_blog_id(), ) ); wp_enqueue_style( 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 index 252fd00c79222..c535fe909d84a 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js @@ -4,11 +4,14 @@ 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 { useGlobalStylesConfig } from './use-global-styles-config'; -import { recordUpgradeNoticeClick, recordUpgradeNoticeShow } from './utils'; function GlobalStylesNoticeComponent() { - const { siteChanges, isVisible } = useGlobalStylesConfig(); + const { siteChanges, globalStylesInUse } = useGlobalStylesConfig(); // Closes the sidebar if there are no more changes to be saved. useEffect( () => { @@ -26,17 +29,21 @@ function GlobalStylesNoticeComponent() { }, [ siteChanges ] ); useEffect( () => { - if ( isVisible ) { - recordUpgradeNoticeShow( 'site-editor' ); + if ( globalStylesInUse ) { + recordUpgradeNoticePrePublishShow(); } - }, [ isVisible ] ); + }, [ globalStylesInUse ] ); - if ( ! isVisible ) { + if ( ! globalStylesInUse ) { return null; } return ( - + { createInterpolateElement( __( 'Your changes include customized styles that will only be visible once you upgrade to a Premium plan.', @@ -47,7 +54,7 @@ function GlobalStylesNoticeComponent() { recordUpgradeNoticeClick( 'site-editor' ) } + onClick={ () => recordUpgradePrePublishNoticeClick() } /> ), } 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 9f54b6752e5e9..137c5dd966fce 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,5 +1,9 @@ .wpcom-global-styles-notice { - margin: 16px 0 0; + margin: 0 0 0 0; + + .notice-margin { + margin: 16px 0 0; + } .components-notice__content { margin-right: 0; 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 new file mode 100644 index 0000000000000..32ee4b8813cff --- /dev/null +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts @@ -0,0 +1,43 @@ +import { recordTracksEvent } from '@automattic/calypso-analytics'; + +declare const wpcomGlobalStyles: { upgradeUrl: string; blogId: string }; + +/** + * Record an event when a user clicks on the notice from the PrePublish panel. + */ +export function recordUpgradePrePublishNoticeClick(): void { + recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', { + context: 'site-editor', + blog_id: wpcomGlobalStyles.blogId, + } ); +} + +/** + * 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.blogId, + } ); +} + +/** + * Record an event when the GS upgrade notice is shown in the Pre Publish screen. + */ +export function recordUpgradeNoticePrePublishShow(): void { + recordTracksEvent( 'calypso_global_styles_gating_notice_show', { + context: 'site-editor', + blog_id: wpcomGlobalStyles.blogId, + } ); +} + +/** + * 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.blogId, + } ); +} 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 0734f4819a925..f6bf492b856cf 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 @@ -18,14 +18,14 @@ export function useGlobalStylesConfig() { settings: globalStylesRecord?.settings ?? {}, }; - // Do not show the notice if the use is trying to save the default styles. - const isVisible = + // Determine if the global Styles are in use on the current site. + const globalStylesInUse = !! ( Object.keys( globalStylesConfig.styles ).length || - Object.keys( globalStylesConfig.settings ).length; + Object.keys( globalStylesConfig.settings ).length + ); return { - globalStylesConfig, - isVisible, + globalStylesInUse, siteChanges: __experimentalGetDirtyEntityRecords ? __experimentalGetDirtyEntityRecords() : [], }; }, [] ); diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts deleted file mode 100644 index 74f5a47c67a8d..0000000000000 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/utils.ts +++ /dev/null @@ -1,13 +0,0 @@ -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, - } ); -} From a81ba6a64184d8750d75872c5793a33daa6c5cfa Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 13:52:59 +0300 Subject: [PATCH 06/21] Add blog_id property in the tracks events. --- .../wpcom-global-styles/index.php | 28 +++++++++++++++++-- .../wpcom-global-styles/tracks-events.ts | 10 +++---- 2 files changed, 30 insertions(+), 8 deletions(-) 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 925ef53664c93..675f0e2c0b30b 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 @@ -60,6 +60,28 @@ function wpcom_should_limit_global_styles( $blog_id = 0 ) { return true; } +/** + * Get the WPCOM blog id of the current site for tracking purposes. + */ +function wpcom_global_styles_get_wpcom_current_blog_id() { + if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) { + return get_current_blog_id(); + } elseif ( defined( 'IS_ATOMIC' ) && IS_ATOMIC ) { + /* + * Atomic sites have the WP.com blog ID stored as a Jetpack option. This code deliberately + * doesn't use `Jetpack_Options::get_option` so it works even when Jetpack has not been loaded. + */ + $jetpack_options = get_option( 'jetpack_options' ); + if ( is_array( $jetpack_options ) && isset( $jetpack_options['id'] ) ) { + return (int) $jetpack_options['id']; + } else { + return null; + } + } + + return null; +} + /** * Wrapper to test a blog sticker on both Simple and Atomic sites at once. * @@ -131,9 +153,9 @@ function wpcom_global_styles_enqueue_block_editor_assets() { 'wpcom-global-styles-editor', 'wpcomGlobalStyles', array( - 'assetsUrl' => plugins_url( 'dist/', __FILE__ ), - 'upgradeUrl' => "$calypso_domain/plans/$site_slug?plan=value_bundle&feature=advanced-design-customization", - 'blogId' => get_current_blog_id(), + 'assetsUrl' => plugins_url( 'dist/', __FILE__ ), + 'upgradeUrl' => "$calypso_domain/plans/$site_slug?plan=value_bundle&feature=advanced-design-customization", + 'wpcomBlogId' => wpcom_global_styles_get_wpcom_current_blog_id(), ) ); wp_enqueue_style( 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 index 32ee4b8813cff..cc066ebb1df83 100644 --- 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 @@ -1,6 +1,6 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; -declare const wpcomGlobalStyles: { upgradeUrl: string; blogId: string }; +declare const wpcomGlobalStyles: { upgradeUrl: string; wpcomBlogId: string | null }; /** * Record an event when a user clicks on the notice from the PrePublish panel. @@ -8,7 +8,7 @@ declare const wpcomGlobalStyles: { upgradeUrl: string; blogId: string }; export function recordUpgradePrePublishNoticeClick(): void { recordTracksEvent( 'calypso_global_styles_gating_notice_upgrade_click', { context: 'site-editor', - blog_id: wpcomGlobalStyles.blogId, + blog_id: wpcomGlobalStyles.wpcomBlogId, } ); } @@ -18,7 +18,7 @@ export function recordUpgradePrePublishNoticeClick(): void { export function recordUpgradeSidebarNoticeClick(): void { recordTracksEvent( 'calypso_global_styles_gating_notice_sidebar_upgrade_click', { context: 'site-editor', - blog_id: wpcomGlobalStyles.blogId, + blog_id: wpcomGlobalStyles.wpcomBlogId, } ); } @@ -28,7 +28,7 @@ export function recordUpgradeSidebarNoticeClick(): void { export function recordUpgradeNoticePrePublishShow(): void { recordTracksEvent( 'calypso_global_styles_gating_notice_show', { context: 'site-editor', - blog_id: wpcomGlobalStyles.blogId, + blog_id: wpcomGlobalStyles.wpcomBlogId, } ); } @@ -38,6 +38,6 @@ export function recordUpgradeNoticePrePublishShow(): void { export function recordUpgradeNoticeSidebarShow(): void { recordTracksEvent( 'calypso_global_styles_gating_sidebar_notice_show', { context: 'site-editor', - blog_id: wpcomGlobalStyles.blogId, + blog_id: wpcomGlobalStyles.wpcomBlogId, } ); } From 222b376c06eb8c4c7d10342e6580f39f1dafc622 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 13:53:47 +0300 Subject: [PATCH 07/21] Remove redundant else branch. --- .../editing-toolkit-plugin/wpcom-global-styles/index.php | 2 -- 1 file changed, 2 deletions(-) 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 675f0e2c0b30b..e4967727a07d3 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 @@ -74,8 +74,6 @@ function wpcom_global_styles_get_wpcom_current_blog_id() { $jetpack_options = get_option( 'jetpack_options' ); if ( is_array( $jetpack_options ) && isset( $jetpack_options['id'] ) ) { return (int) $jetpack_options['id']; - } else { - return null; } } From f3e0d79d103ca80094adc3c64025195354aede2a Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 16:54:12 +0300 Subject: [PATCH 08/21] Rename the event functions and change copy --- .../global-style-sidebar-notice.tsx | 16 ++++++++++++---- .../wpcom-global-styles/notice.js | 9 +++------ .../wpcom-global-styles/tracks-events.ts | 8 ++++---- 3 files changed, 19 insertions(+), 14 deletions(-) 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 index b15e810febbe0..5da8d97861706 100644 --- 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 @@ -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() {
{ createInterpolateElement( - __( 'Upgrade your plan to keep your style changes.', 'full-site-editing' ), + __( + 'Your changes include customized styles that will only be visible once you upgrade to a Premium plan.', + 'full-site-editing' + ), { a: ( { if ( globalStylesInUse ) { - recordUpgradeNoticePrePublishShow(); + recordUpgradeNoticePreSaveShow(); } }, [ globalStylesInUse ] ); @@ -54,7 +51,7 @@ function GlobalStylesNoticeComponent() { recordUpgradePrePublishNoticeClick() } + onClick={ () => recordUpgradePreSaveNoticeClick() } /> ), } 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 index cc066ebb1df83..ca64a5ae5b1fa 100644 --- 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 @@ -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, From b979e46c8bd1ccef26f0143283be1e279d888b6e Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 17:00:36 +0300 Subject: [PATCH 09/21] Add return type and make the component default. --- .../wpcom-global-styles/global-style-sidebar-notice.tsx | 2 +- .../editing-toolkit-plugin/wpcom-global-styles/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index 5da8d97861706..aaa10472ef1f1 100644 --- 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 @@ -13,7 +13,7 @@ type CoreInterfacePlaceholder = { getActiveComplementaryArea: ( area: string ) => string; }; -export function GlobalStylesSidebarNotice() { +export default function GlobalStylesSidebarNotice(): JSX.Element { const area = useSelect( ( select ) => ( select( 'core/interface' ) as CoreInterfacePlaceholder ).getActiveComplementaryArea( 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 85bdd491f508c..47dffcb1de668 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,7 +3,7 @@ import './public-path'; import domReady from '@wordpress/dom-ready'; import { registerPlugin } from '@wordpress/plugins'; -import { GlobalStylesSidebarNotice } from './global-style-sidebar-notice'; +import GlobalStylesSidebarNotice from './global-style-sidebar-notice'; import GlobalStylesModal from './modal'; import GlobalStylesNotice from './notice'; import './store'; From 06eefdf0e6ee8c089856b8cde7edfdc80350bda0 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 18:11:29 +0300 Subject: [PATCH 10/21] Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php Co-authored-by: Miguel Torres --- .../editing-toolkit-plugin/wpcom-global-styles/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e4967727a07d3..1bc0d3d3f0702 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 @@ -77,7 +77,7 @@ function wpcom_global_styles_get_wpcom_current_blog_id() { } } - return null; + return null; } /** From 4dfc39d59aa59e7c0ea2679f889116bc38a9f5a2 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 18:50:56 +0300 Subject: [PATCH 11/21] Fix the Fill hard reset when the nudge appears and disappears the first time. --- .../global-style-sidebar-notice.tsx | 48 ++++++++++--------- 1 file changed, 25 insertions(+), 23 deletions(-) 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 index aaa10472ef1f1..20fd2c18c3457 100644 --- 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 @@ -34,30 +34,32 @@ export default function GlobalStylesSidebarNotice(): JSX.Element { return ( - { /* - 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: ( - recordUpgradeSidebarNoticeClick() } - /> + <> + { /* + 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: ( + recordUpgradeSidebarNoticeClick() } + /> + ), + } + ) } + +
+ ) } + ); } From 3eced058256a04bb3c54b43b4d5c00fd932366af Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Fri, 31 Mar 2023 19:09:57 +0300 Subject: [PATCH 12/21] Add docblock explaining why we need the fragment. --- .../wpcom-global-styles/global-style-sidebar-notice.tsx | 6 ++++++ 1 file changed, 6 insertions(+) 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 index 20fd2c18c3457..1a718b34a3fb8 100644 --- 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 @@ -34,6 +34,12 @@ export default function GlobalStylesSidebarNotice(): JSX.Element { 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. From e8c08ba9f8cda10e6c98d77398b689f173aa5098 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 12:32:26 +0300 Subject: [PATCH 13/21] Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx Co-authored-by: Miguel Torres --- .../wpcom-global-styles/global-style-sidebar-notice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 1a718b34a3fb8..8f984e932b74d 100644 --- 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 @@ -57,7 +57,7 @@ export default function GlobalStylesSidebarNotice(): JSX.Element { recordUpgradeSidebarNoticeClick() } + onClick={ recordUpgradeSidebarNoticeClick } /> ), } From 8318b9ceaca06a2606fb852c05bcd7c11251f503 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 12:32:37 +0300 Subject: [PATCH 14/21] Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js Co-authored-by: Miguel Torres --- .../editing-toolkit-plugin/wpcom-global-styles/notice.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index b1b684189aaae..2222da9a9f63b 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js @@ -51,7 +51,7 @@ function GlobalStylesNoticeComponent() { recordUpgradePreSaveNoticeClick() } + onClick={ recordUpgradePreSaveNoticeClick } /> ), } From 946907a86a445d10cb9e363cfd2cba3b64bef37e Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 12:40:30 +0300 Subject: [PATCH 15/21] Changed the background color in the test trying to fix the failure. --- .../test/class-wpcom-global-styles-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index 346535d0717e6..2690edc8a0cae 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -23,11 +23,11 @@ public function test_wpcom_block_global_styles_frontend() { unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); $config = $decoded_data; - $config['styles']['color']['background'] = 'hotpink'; + $config['styles']['color']['background'] = '#000000'; $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data( $config, 'custom' ) ); - $this->assertEquals( 'hotpink', $theme_json->get_data()['styles']['color']['background'] ); + $this->assertEquals( '#000000', $theme_json->get_data()['styles']['color']['background'] ); add_filter( 'wpcom_force_limit_global_styles', '__return_true' ); From 05269ff9dbb2d4cc0a8f53f1206aa39a2564e658 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 12:51:31 +0300 Subject: [PATCH 16/21] Try to fix the failing test (take 2). --- .../test/class-wpcom-global-styles-test.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index 2690edc8a0cae..b88706e0f6534 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -17,17 +17,19 @@ class WPCOM_Global_Styles_Test extends TestCase { * Tests that Global Styles are blocked in the frontend. */ public function test_wpcom_block_global_styles_frontend() { + add_filter( 'wpcom_force_limit_global_styles', '__return_false' ); + switch_theme( 'twentytwentythree' ); $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme(), true ); $decoded_data = json_decode( $user_cpt['post_content'], true ); unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); $config = $decoded_data; - $config['styles']['color']['background'] = '#000000'; + $config['styles']['color']['background'] = 'hotpink'; $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data( $config, 'custom' ) ); - $this->assertEquals( '#000000', $theme_json->get_data()['styles']['color']['background'] ); + $this->assertEquals( 'hotpink', $theme_json->get_data()['styles']['color']['background'] ); add_filter( 'wpcom_force_limit_global_styles', '__return_true' ); From dddc04bb228f9951364d39c581f1cc390ca6a18e Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 13:05:09 +0300 Subject: [PATCH 17/21] Remove filter --- .../wpcom-global-styles/test/class-wpcom-global-styles-test.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index b88706e0f6534..346535d0717e6 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -17,8 +17,6 @@ class WPCOM_Global_Styles_Test extends TestCase { * Tests that Global Styles are blocked in the frontend. */ public function test_wpcom_block_global_styles_frontend() { - add_filter( 'wpcom_force_limit_global_styles', '__return_false' ); - switch_theme( 'twentytwentythree' ); $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme(), true ); $decoded_data = json_decode( $user_cpt['post_content'], true ); From 76a813180e472ea6e4c8986512d7ac5a64c1f9bd Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 13:20:51 +0300 Subject: [PATCH 18/21] Add cache clear. --- .../wpcom-global-styles/test/class-wpcom-global-styles-test.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index 346535d0717e6..7d483557832b5 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -18,6 +18,8 @@ class WPCOM_Global_Styles_Test extends TestCase { */ public function test_wpcom_block_global_styles_frontend() { switch_theme( 'twentytwentythree' ); + WP_Theme_JSON_Resolver::clean_cached_data(); + $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme(), true ); $decoded_data = json_decode( $user_cpt['post_content'], true ); unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); From ff9f7ec120bd47eaaf8e75c36696c50ec816101a Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 13:30:09 +0300 Subject: [PATCH 19/21] Pass the theme directly. --- .../test/class-wpcom-global-styles-test.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index 7d483557832b5..4382f609e7f63 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -18,9 +18,8 @@ class WPCOM_Global_Styles_Test extends TestCase { */ public function test_wpcom_block_global_styles_frontend() { switch_theme( 'twentytwentythree' ); - WP_Theme_JSON_Resolver::clean_cached_data(); - $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme(), true ); + $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme( 'twentytwentythree' ), true ); $decoded_data = json_decode( $user_cpt['post_content'], true ); unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); $config = $decoded_data; From eb5d52034168765e09c8a524cba13b3713cf85b5 Mon Sep 17 00:00:00 2001 From: Bogdan Ungureanu Date: Mon, 3 Apr 2023 13:55:08 +0300 Subject: [PATCH 20/21] Try to fix the failing test. --- .../test/class-wpcom-global-styles-test.php | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index 4382f609e7f63..42f13faf63852 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -19,6 +19,12 @@ class WPCOM_Global_Styles_Test extends TestCase { public function test_wpcom_block_global_styles_frontend() { switch_theme( 'twentytwentythree' ); + $disable_caching = function ( $wp_query ) { + $wp_query->query_vars['cache_results'] = false; + }; + + add_action( 'parse_query', $disable_caching ); + $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme( 'twentytwentythree' ), true ); $decoded_data = json_decode( $user_cpt['post_content'], true ); unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); @@ -37,5 +43,6 @@ public function test_wpcom_block_global_styles_frontend() { $this->assertEmpty( $theme_json->get_data()['styles']['color']['background'] ); remove_filter( 'wpcom_force_limit_global_styles', '__return_true' ); + remove_action( 'parse_query', $disable_caching ); } } From f9c8484c3bc7af0d4180bdd3f52420ffa844bd94 Mon Sep 17 00:00:00 2001 From: mmtr Date: Mon, 3 Apr 2023 13:25:46 +0200 Subject: [PATCH 21/21] Fix unit test --- .../test/class-wpcom-global-styles-test.php | 28 +++++-------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php index 42f13faf63852..23651d430505e 100644 --- a/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php +++ b/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/test/class-wpcom-global-styles-test.php @@ -17,32 +17,18 @@ class WPCOM_Global_Styles_Test extends TestCase { * Tests that Global Styles are blocked in the frontend. */ public function test_wpcom_block_global_styles_frontend() { - switch_theme( 'twentytwentythree' ); - - $disable_caching = function ( $wp_query ) { - $wp_query->query_vars['cache_results'] = false; - }; - - add_action( 'parse_query', $disable_caching ); - - $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme( 'twentytwentythree' ), true ); - $decoded_data = json_decode( $user_cpt['post_content'], true ); - unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); - $config = $decoded_data; - - $config['styles']['color']['background'] = 'hotpink'; - - $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data( $config, 'custom' ) ); + $theme_json_resolver = new WP_Theme_JSON_Resolver(); + $user_data = $theme_json_resolver->get_user_data()->get_data(); + $user_data['styles']['color']['background'] = 'hotpink'; + // Check that the custom color is kept when Global Styles are available. + $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data( $user_data, 'custom' ) ); $this->assertEquals( 'hotpink', $theme_json->get_data()['styles']['color']['background'] ); + // Check that the custom color is blocked when Global Styles are limited. add_filter( 'wpcom_force_limit_global_styles', '__return_true' ); - - $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data( $config, 'custom' ) ); - + $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data( $user_data, 'custom' ) ); $this->assertEmpty( $theme_json->get_data()['styles']['color']['background'] ); - remove_filter( 'wpcom_force_limit_global_styles', '__return_true' ); - remove_action( 'parse_query', $disable_caching ); } }