From d41a6b904ea776c7a74edaff64147c288fcc0b35 Mon Sep 17 00:00:00 2001 From: arthur Date: Thu, 24 Oct 2024 11:31:13 +0800 Subject: [PATCH 1/2] Live Preview: Fix the Save button wasn't overriden correctly --- .../src/wpcom/features/live-preview/index.tsx | 6 ++++++ .../features/live-preview/upgrade-button.tsx | 18 +++++++++++------- 2 files changed, 17 insertions(+), 7 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 a65f7a4b9ed35..3da5972fea0eb 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 @@ -5,6 +5,7 @@ import { usePreviewingThemeSlug } from './hooks/use-previewing-theme'; import LivePreviewNoticePlugin from './live-preview-notice-plugin'; const LivePreviewPlugin = () => { + const isReady = useSelect( ( select ) => select( 'core/editor' ).__unstableIsEditorReady() ); const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); const previewingThemeSlug = usePreviewingThemeSlug(); @@ -13,6 +14,11 @@ const LivePreviewPlugin = () => { return null; } + // Don't render until the editor is ready + if ( ! isReady ) { + return null; + } + // Don't render unless the user is previewing a theme. if ( ! previewingThemeSlug ) { return null; diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-button.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-button.tsx index 677f3f89d41c0..348df25488bbd 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-button.tsx +++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-button.tsx @@ -102,17 +102,21 @@ export const LivePreviewUpgradeButton: FC< { } ); }; - if ( canvasMode === 'view' ) { - overrideSaveButtonClick( SAVE_HUB_SAVE_BUTTON_SELECTOR ); - overrideSaveButtonHover( SAVE_HUB_SAVE_BUTTON_SELECTOR ); - } else if ( canvasMode === 'edit' ) { - overrideSaveButtonClick( HEADER_SAVE_BUTTON_SELECTOR ); - overrideSaveButtonHover( HEADER_SAVE_BUTTON_SELECTOR ); - } + // Delay it to ensure the element is visible. + const timeout = window.setTimeout( () => { + if ( canvasMode === 'view' ) { + overrideSaveButtonClick( SAVE_HUB_SAVE_BUTTON_SELECTOR ); + overrideSaveButtonHover( SAVE_HUB_SAVE_BUTTON_SELECTOR ); + } else if ( canvasMode === 'edit' ) { + overrideSaveButtonClick( HEADER_SAVE_BUTTON_SELECTOR ); + overrideSaveButtonHover( HEADER_SAVE_BUTTON_SELECTOR ); + } + }, 0 ); return () => { resetSaveButton(); resetSaveButtonHover(); + clearTimeout( timeout ); }; }, [ canvasMode, previewingTheme.id, previewingTheme.type, upgradePlan ] ); From dd6137c2f51a75b3bd6864afdbc85d257e34aa25 Mon Sep 17 00:00:00 2001 From: arthur Date: Thu, 24 Oct 2024 14:16:02 +0800 Subject: [PATCH 2/2] Check whether the editor is ready only for the upgrade button --- .../src/wpcom/features/live-preview/index.tsx | 6 ------ .../features/live-preview/live-preview-notice-plugin.tsx | 3 ++- 2 files changed, 2 insertions(+), 7 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 3da5972fea0eb..a65f7a4b9ed35 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 @@ -5,7 +5,6 @@ import { usePreviewingThemeSlug } from './hooks/use-previewing-theme'; import LivePreviewNoticePlugin from './live-preview-notice-plugin'; const LivePreviewPlugin = () => { - const isReady = useSelect( ( select ) => select( 'core/editor' ).__unstableIsEditorReady() ); const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); const previewingThemeSlug = usePreviewingThemeSlug(); @@ -14,11 +13,6 @@ const LivePreviewPlugin = () => { return null; } - // Don't render until the editor is ready - if ( ! isReady ) { - return null; - } - // Don't render unless the user is previewing a theme. if ( ! previewingThemeSlug ) { return null; diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx index a64b63ef029ec..981227a78aefd 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx +++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/live-preview-notice-plugin.tsx @@ -53,6 +53,7 @@ const LivePreviewNotice: FC< { }; const LivePreviewNoticePlugin = () => { + const isReady = useSelect( ( select ) => select( 'core/editor' ).__unstableIsEditorReady() ); const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] ); const previewingTheme = usePreviewingTheme(); const { canPreviewButNeedUpgrade, upgradePlan } = useCanPreviewButNeedUpgrade( previewingTheme ); @@ -72,7 +73,7 @@ const LivePreviewNoticePlugin = () => { if ( canPreviewButNeedUpgrade ) { return ( <> - + { isReady && } );