Live Preview: Fix the Save button wasn't overriden correctly (#95639)

* Live Preview: Fix the Save button wasn't overriden correctly * Check whether the editor is ready only for the upgrade button
Automattic · Oct 24, 2024 · 5fdb927 · 5fdb927
1 parent e5efbf3
commit 5fdb927
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
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
@@ -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 (
 			<>
-				<LivePreviewUpgradeButton { ...{ previewingTheme, upgradePlan } } />
+				{ isReady && <LivePreviewUpgradeButton { ...{ previewingTheme, upgradePlan } } /> }
 				<LivePreviewUpgradeNotice { ...{ previewingTheme, dashboardLink } } />
 			</>
 		);

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 ] );