From d41a6b904ea776c7a74edaff64147c288fcc0b35 Mon Sep 17 00:00:00 2001 From: arthur Date: Thu, 24 Oct 2024 11:31:13 +0800 Subject: [PATCH] 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 a65f7a4b9ed35d..3da5972fea0eba 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 677f3f89d41c02..348df25488bbd3 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 ] );