Add LivePreviewUpgradeModal

apps/wpcom-block-editor/src/wpcom/editor.scss

@@ -1,5 +1,5 @@
 @import "./features/use-classic-block-guide";
-@import "./features/live-preview/upgrade-notice";
+@import "./features/live-preview";
 
 .blog-onboarding-hide {
 	.components-external-link, // "Connect an account" link in Jetpack sidebar

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

@@ -31,15 +31,14 @@ export const usePreviewingTheme = () => {
 	}, [] );
 	const [ previewingTheme, setPreviewingTheme ] = useState< Theme | undefined >( undefined );
 
+	const previewingThemeId =
+		( previewingThemeSlug as string )?.split( '/' )?.[ 1 ] || previewingThemeSlug;
 	const previewingThemeName = previewingTheme?.name || previewingThemeSlug;
 	const previewingThemeType = previewingTheme ? getThemeType( previewingTheme ) : undefined;
 	const previewingThemeTypeDisplay =
 		previewingThemeType === WOOCOMMERCE_THEME ? 'WooCommerce' : 'Premium';
 
 	useEffect( () => {
-		const previewingThemeId =
-			( previewingThemeSlug as string )?.split( '/' )?.[ 1 ] || previewingThemeSlug;
-
 		if ( previewingThemeId ) {
 			wpcom.req
 				.get( `/themes/${ previewingThemeId }`, { apiVersion: '1.2' } )
@@ -53,9 +52,10 @@ export const usePreviewingTheme = () => {
 			setPreviewingTheme( undefined );
 		}
 		return;
-	}, [ previewingThemeSlug ] );
+	}, [ previewingThemeId, previewingThemeSlug ] );
 
 	return {
+		id: previewingThemeId,
 		name: previewingThemeName,
 		type: previewingThemeType,
 		typeDisplay: previewingThemeTypeDisplay,

apps/wpcom-block-editor/src/wpcom/features/live-preview/index.scss

@@ -0,0 +1,2 @@
+@import "./upgrade-modal";
+@import "./upgrade-notice";

apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx

@@ -6,6 +6,7 @@ import { FC, useEffect } from 'react';
 import { useCanPreviewButNeedUpgrade } from './hooks/use-can-preview-but-need-upgrade';
 import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
+import { LivePreviewUpgradeModal } from './upgrade-modal';
 import { LivePreviewUpgradeNotice } from './upgrade-notice';
 import { getUnlock } from './utils';
 
@@ -77,7 +78,12 @@ const LivePreviewNoticePlugin = () => {
 	}
 
 	if ( canPreviewButNeedUpgrade ) {
-		return <LivePreviewUpgradeNotice { ...{ previewingTheme, upgradePlan, dashboardLink } } />;
+		return (
+			<>
+				<LivePreviewUpgradeModal { ...{ themeId: previewingTheme.id as string, upgradePlan } } />
+				<LivePreviewUpgradeNotice { ...{ previewingTheme, upgradePlan, dashboardLink } } />
+			</>
+		);
 	}
 	return <LivePreviewNotice { ...{ dashboardLink, previewingThemeName: previewingTheme.name } } />;
 };

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.scss

@@ -0,0 +1,36 @@
+@import "@automattic/typography/styles/variables";
+// stylelint-disable-next-line scss/at-import-no-partial-leading-underscore
+@import "calypso/assets/stylesheets/shared/mixins/_breakpoints";
+// stylelint-disable-next-line scss/at-import-no-partial-leading-underscore
+@import "calypso/assets/stylesheets/shared/_loading";
+
+// Overriding ..wp-core-ui styles
+.wpcom-live-preview-upgrade-modal {
+	&.card {
+		border: none;
+	}
+	.theme-upgrade-modal p {
+		font-size: $font-body;
+	}
+	.theme-upgrade-modal .theme-upgrade-modal__actions.bundle {
+		.button {
+			color: var(--color-neutral-70);
+			border-color: var(--color-neutral-10);
+			background-color: transparent;
+			font-size: $font-body-small;
+			line-height: 22px;
+			&.is-primary {
+				color: var(--color-text-inverted);
+				border-color: var(--color-primary);
+				background-color: var(--color-primary);
+			}
+		}
+	}
+	.theme-upgrade-modal__included h2 {
+		margin-top: 0;
+		line-height: 1.5;
+	}
+	.theme-upgrade-modal__close {
+		padding: 8px 14px;
+	}
+}

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.tsx

@@ -0,0 +1,53 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FC, useEffect, useState } from 'react';
+import { ThemeUpgradeModal } from 'calypso/components/theme-upgrade-modal';
+import './upgrade-modal.scss';
+
+export const LivePreviewUpgradeModal: FC< { themeId: string; upgradePlan: () => void } > = ( {
+	themeId,
+	upgradePlan,
+} ) => {
+	const [ isThemeUpgradeModalOpen, setIsThemeUpgradeModalOpen ] = useState( false );
+
+	/**
+	 * FIXME: This is only testing purpose to show the modal.
+	 * SaveButton customization should be changed to use https://github.com/WordPress/gutenberg/pull/56807.
+	 */
+	useEffect( () => {
+		const button = document.querySelector( '.edit-site-save-hub__button' );
+		button?.addEventListener( 'click', ( e ) => {
+			e.preventDefault();
+			setIsThemeUpgradeModalOpen( true );
+		} );
+	}, [] );
+
+	/**
+	 * Load SVG file for `Gridicon` in `@automattic/components`.
+	 */
+	useEffect( () => {
+		fetch( 'https://widgets.wp.com/wpcom-block-editor/images/gridicons-47c7fb356fcb2d963681.svg' )
+			.then( ( response ) => response.text() )
+			.then( ( svgData ) => {
+				const div = document.createElement( 'div' );
+				div.innerHTML = svgData;
+				div.style.display = 'none';
+				document.body.insertBefore( div, document.body.childNodes[ 0 ] );
+			} )
+			.catch( () => {
+				/** Do nothing */
+			} );
+	}, [] );
+
+	const queryClient = new QueryClient();
+	return (
+		<QueryClientProvider client={ queryClient }>
+			<ThemeUpgradeModal
+				additionalClassNames="wpcom-live-preview-upgrade-modal"
+				slug={ themeId }
+				isOpen={ isThemeUpgradeModalOpen }
+				closeModal={ () => setIsThemeUpgradeModalOpen( false ) }
+				checkout={ upgradePlan }
+			/>
+		</QueryClientProvider>
+	);
+};

apps/wpcom-block-editor/webpack.config.js

@@ -5,6 +5,7 @@
 const path = require( 'path' );
 const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const webpack = require( 'webpack' );
 
 /**
  * Internal variables
@@ -58,6 +59,12 @@ function getWebpackConfig(
 			...webpackConfig.plugins.filter(
 				( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
 			),
+			new webpack.DefinePlugin( {
+				'process.env.NODE_DEBUG': JSON.stringify( process.env.NODE_DEBUG || false ),
+			} ),
+			// Replace the `packages/components/src/gridicon/index.tsx` with a replacement that does not enqueue the SVG sprite.
+			new webpack.NormalModuleReplacementPlugin( /^\.\.\/gridicon$/, '../gridicon/no-asset' ),
+			new webpack.NormalModuleReplacementPlugin( /^\.\/gridicon$/, './gridicon/no-asset' ),
 			new DependencyExtractionWebpackPlugin( {
 				requestToExternal( request ) {
 					if ( request === 'tinymce/tinymce' ) {