From 39a2ac48a78019a9a46d45bf41e8a2f340705f4f Mon Sep 17 00:00:00 2001 From: "okmttdhr, tada" Date: Wed, 6 Dec 2023 11:21:31 +0900 Subject: [PATCH] Live Preview: Add the upgrade notice on the sidebar for Premium and Woo themes (#84676) --- .../src/wpcom/features/live-preview/index.tsx | 29 +++-- .../features/live-preview/upgrade-notice.scss | 18 +++ .../features/live-preview/upgrade-notice.tsx | 115 +++++++++++++++--- .../src/wpcom/features/live-preview/utils.ts | 4 + 4 files changed, 136 insertions(+), 30 deletions(-) diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx index aa05292dab3b05..7f90649bad6135 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx +++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx @@ -21,7 +21,6 @@ const LivePreviewNotice: FC< { previewingThemeName?: string; } > = ( { previewingThemeName } ) => { const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' ); - const { set: setPreferences } = useDispatch( 'core/preferences' ); const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); const dashboardLink = @@ -39,10 +38,6 @@ const LivePreviewNotice: FC< { return; } - // Suppress the "Looking for template parts?" notice in the Site Editor sidebar. - // The preference name is defined in https://github.com/WordPress/gutenberg/blob/d47419499cd58e20db25c370cdbf02ddf7cffce0/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js#L9. - setPreferences( 'core', 'isTemplatePartMoveHintVisible', false ); - createWarningNotice( sprintf( // translators: %s: theme name @@ -65,22 +60,30 @@ const LivePreviewNotice: FC< { } ); return () => removeNotice( NOTICE_ID ); - }, [ - siteEditorStore, - dashboardLink, - setPreferences, - createWarningNotice, - removeNotice, - previewingThemeName, - ] ); + }, [ siteEditorStore, dashboardLink, createWarningNotice, removeNotice, previewingThemeName ] ); return null; }; const LivePreviewNoticePlugin = () => { + const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); const previewingTheme = usePreviewingTheme(); const { canPreviewButNeedUpgrade, upgradePlan } = useCanPreviewButNeedUpgrade( { previewingTheme, } ); + + const { set: setPreferences } = useDispatch( 'core/preferences' ); + useEffect( () => { + if ( ! siteEditorStore ) { + return; + } + if ( ! previewingTheme.name ) { + return; + } + // Suppress the "Looking for template parts?" notice in the Site Editor sidebar. + // The preference name is defined in https://github.com/WordPress/gutenberg/blob/d47419499cd58e20db25c370cdbf02ddf7cffce0/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js#L9. + setPreferences( 'core', 'isTemplatePartMoveHintVisible', false ); + }, [ previewingTheme.name, setPreferences, siteEditorStore ] ); + if ( canPreviewButNeedUpgrade ) { return ; } diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.scss b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.scss index 47d9a1b2db4140..3397369dbc3fd8 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.scss +++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.scss @@ -2,3 +2,21 @@ display: flex; align-items: center; } + +.wpcom-live-preview-upgrade-notice-view-container { + padding: 24px 24px 0; + border-top: 1px solid #2f2f2f; + .wpcom-live-preview-upgrade-notice-view { + margin: 0 0 24px; + color: var(--color-text); + + .components-notice__content { + margin-right: 0; + } + + .components-notice__action { + margin: 8px 0 0; + } + } +} + diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx index 25a7adce2070b8..dbee8a7c76f9ce 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx +++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx @@ -1,6 +1,8 @@ +import { Notice } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; +import { render } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { FC, useEffect } from 'react'; +import { FC, useEffect, useState } from 'react'; import { usePreviewingTheme } from './hooks/use-previewing-theme'; import { getUnlock, isPreviewingTheme } from './utils'; @@ -14,39 +16,74 @@ const UPGRADE_NOTICE_ID = 'wpcom-live-preview/notice/upgrade'; const unlock = getUnlock(); +const LivePreviewUpgradeNoticeView: FC< { + noticeText: string; + upgradePlan: () => void; +} > = ( { noticeText, upgradePlan } ) => { + return ( + + { noticeText } + + ); +}; + export const LivePreviewUpgradeNotice: FC< { previewingTheme: ReturnType< typeof usePreviewingTheme >; upgradePlan: () => void; } > = ( { previewingTheme, upgradePlan } ) => { - const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); + const [ isRendered, setIsRendered ] = useState( false ); const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' ); - + const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); + const canvasMode = useSelect( + ( select ) => + unlock && select( 'core/edit-site' ) && unlock( select( 'core/edit-site' ) ).getCanvasMode(), + [ siteEditorStore ] + ); const dashboardLink = unlock && siteEditorStore && unlock( siteEditorStore ).getSettings().__experimentalDashboardLink; + const noticeText = sprintf( + // translators: %1$s: The previewing theme name, %2$s: The theme type ('WooCommerce' or 'Premium') + __( + 'You are previewing %1$s, a %2$s theme. You can try out your own style customizations, which will only be saved if you upgrade and activate this theme.', + 'wpcom-live-preview' + ), + previewingTheme.name, + previewingTheme.typeDisplay + ); + + /** + * Show the notice when the canvas mode is 'edit'. + */ useEffect( () => { // Do nothing in the Post Editor context. if ( ! siteEditorStore ) { removeNotice( UPGRADE_NOTICE_ID ); return; } - + if ( canvasMode !== 'edit' ) { + removeNotice( UPGRADE_NOTICE_ID ); + return; + } if ( ! isPreviewingTheme() ) { removeNotice( UPGRADE_NOTICE_ID ); return; } - const noticeText = sprintf( - // translators: %1$s: The previewing theme name, %2$s: The theme type ('WooCommerce' or 'Premium') - __( - 'You are previewing %1$s, a %2$s theme. You can try out your own style customizations, which will only be saved if you upgrade and activate this theme.', - 'wpcom-live-preview' - ), - previewingTheme.name, - previewingTheme.typeDisplay - ); createWarningNotice( noticeText, { id: UPGRADE_NOTICE_ID, isDismissible: false, @@ -70,14 +107,58 @@ export const LivePreviewUpgradeNotice: FC< { } ); return () => removeNotice( UPGRADE_NOTICE_ID ); }, [ + canvasMode, createWarningNotice, + dashboardLink, + noticeText, + previewingTheme.name, + previewingTheme.type, + previewingTheme.typeDisplay, removeNotice, siteEditorStore, upgradePlan, - previewingTheme.type, - previewingTheme.name, - dashboardLink, - previewingTheme.typeDisplay, ] ); + + /** + * Show the notice when the canvas mode is 'view'. + */ + useEffect( () => { + // Do nothing in the Post Editor context. + if ( ! siteEditorStore ) { + return; + } + if ( canvasMode !== 'view' ) { + return; + } + if ( isRendered ) { + return; + } + if ( ! isPreviewingTheme() ) { + return; + } + + const SAVE_HUB_SELECTOR = '.edit-site-save-hub'; + const saveHub = document.querySelector( SAVE_HUB_SELECTOR ); + if ( ! saveHub ) { + return; + } + + // Insert the notice as a sibling of the save hub instead of as a child, + // to prevent our notice from breaking the flex styles of the hub. + const container = saveHub.parentNode; + const noticeContainer = document.createElement( 'div' ); + noticeContainer.classList.add( 'wpcom-live-preview-upgrade-notice-view-container' ); + if ( container ) { + container.insertBefore( noticeContainer, saveHub ); + } + + render( + , + noticeContainer + ); + + setIsRendered( true ); + }, [ canvasMode, isRendered, noticeText, previewingTheme, siteEditorStore, upgradePlan ] ); + return null; }; diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts b/apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts index dbff2310805f97..f3c0ad04ba20f5 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts +++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts @@ -4,6 +4,10 @@ import { getQueryArg } from '@wordpress/url'; export const WOOCOMMERCE_THEME = 'woocommerce'; export const PREMIUM_THEME = 'premium'; +/** + * Get unlock API from Gutenberg. + * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error. + */ export const getUnlock = () => { /** * Sometimes Gutenberg doesn't allow you to re-register the module and throws an error.