Live Preview: Fix the Save button wasn't overriden correctly

Automattic · Oct 24, 2024 · d41a6b9 · d41a6b9
1 parent df4754b
commit d41a6b9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -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
@@ -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 ] );