-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a GS limit notice in the Global Styles sidebar (#74510)
* 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. * Moved useGlobalStylesConfig in a js file so we can bypass the TS errors without using ts-ignore. * Add the upgrade nudge using the ComplementaryArea slot. * Added comment explaining why we are doing the condition check inside the fill component. * 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 * Add blog_id property in the tracks events. * Remove redundant else branch. * Rename the event functions and change copy * Add return type and make the component default. * Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php Co-authored-by: Miguel Torres <[email protected]> * Fix the Fill hard reset when the nudge appears and disappears the first time. * Add docblock explaining why we need the fragment. * Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx Co-authored-by: Miguel Torres <[email protected]> * Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.js Co-authored-by: Miguel Torres <[email protected]> * Changed the background color in the test trying to fix the failure. * Try to fix the failing test (take 2). * Remove filter * Add cache clear. * Pass the theme directly. * Try to fix the failing test. * Fix unit test --------- Co-authored-by: Miguel Torres <[email protected]>
- Loading branch information
1 parent
cfa1d33
commit 529f46e
Showing
8 changed files
with
196 additions
and
55 deletions.
There are no files selected for viewing
71 changes: 71 additions & 0 deletions
71
...diting-toolkit/editing-toolkit-plugin/wpcom-global-styles/global-style-sidebar-notice.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| 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 ( | ||
| <Fill name="ComplementaryArea/core/edit-site"> | ||
| { /* | ||
| 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 && ( | ||
| <div className="interface-complementary-area"> | ||
| <Notice status="warning" isDismissible={ false } className="wpcom-global-styles-notice"> | ||
| { createInterpolateElement( | ||
| __( | ||
| 'Your changes include customized styles that will only be visible once you <a>upgrade to a Premium plan</a>.', | ||
| 'full-site-editing' | ||
| ), | ||
| { | ||
| a: ( | ||
| <ExternalLink | ||
| href={ wpcomGlobalStyles.upgradeUrl } | ||
| target="_blank" | ||
| onClick={ recordUpgradeSidebarNoticeClick } | ||
| /> | ||
| ), | ||
| } | ||
| ) } | ||
| </Notice> | ||
| </div> | ||
| ) } | ||
| </> | ||
| </Fill> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 5 additions & 1 deletion
6
apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/tracks-events.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| 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, | ||
| } ); | ||
| } |
32 changes: 32 additions & 0 deletions
32
apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/use-global-styles-config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ?? {}, | ||
| }; | ||
|
|
||
| // Determine if the global Styles are in use on the current site. | ||
| const globalStylesInUse = !! ( | ||
| Object.keys( globalStylesConfig.styles ).length || | ||
| Object.keys( globalStylesConfig.settings ).length | ||
| ); | ||
|
|
||
| return { | ||
| globalStylesInUse, | ||
| siteChanges: __experimentalGetDirtyEntityRecords ? __experimentalGetDirtyEntityRecords() : [], | ||
| }; | ||
| }, [] ); | ||
| } |