Block Theme Previews: show education modal when previewing theme

projects/packages/jetpack-mu-wpcom/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+	extends: [ require.resolve( 'jetpack-js-tools/eslintrc/react' ) ],
+	parserOptions: {
+		requireConfigFile: false,
+		babelOptions: {
+			configFile: require.resolve( './babel.config.js' ),
+		},
+	},
+	rules: {
+		'jsdoc/require-returns': 0,
+		'@wordpress/i18n-text-domain': [
+			'error',
+			{
+				allowedTextDomain: 'jetpack-mu-wpcom',
+			},
+		],
+	},
+};

projects/packages/jetpack-mu-wpcom/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [ [ '@automattic/jetpack-webpack-config/babel/preset' ] ],
+};

projects/packages/jetpack-mu-wpcom/changelog/block-theme-previews-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Block theme previews: show an education modal when previewing a theme.

projects/packages/jetpack-mu-wpcom/composer.json

@@ -49,7 +49,7 @@
 		},
 		"autotagger": true,
 		"branch-alias": {
-			"dev-trunk": "5.8.x-dev"
+			"dev-trunk": "5.9.x-dev"
 		},
 		"textdomain": "jetpack-mu-wpcom",
 		"version-constants": {

projects/packages/jetpack-mu-wpcom/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-mu-wpcom",
-	"version": "5.8.2-alpha",
+	"version": "5.9.0-alpha",
 	"description": "Enhances your site with features powered by WordPress.com",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/jetpack-mu-wpcom/#readme",
 	"bugs": {
@@ -27,13 +27,26 @@
 	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@babel/core": "7.23.5",
+		"@babel/preset-react": "7.23.3",
+		"sass": "1.64.1",
+		"sass-loader": "12.4.0",
 		"typescript": "^5.0.4",
 		"webpack": "5.76.0",
 		"webpack-cli": "4.9.1"
 	},
 	"dependencies": {
+		"@automattic/typography": "1.0.0",
 		"@sentry/browser": "7.80.1",
 		"@wordpress/api-fetch": "6.45.0",
-		"@wordpress/hooks": "3.48.0"
+		"@wordpress/base-styles": "4.39.0",
+		"@wordpress/components": "25.14.0",
+		"@wordpress/dom-ready": "^3.48.0",
+		"@wordpress/data": "9.18.0",
+		"@wordpress/element": "5.25.0",
+		"@wordpress/hooks": "3.48.0",
+		"@wordpress/i18n": "4.48.0",
+		"@wordpress/plugins": "6.16.0",
+		"@wordpress/url": "3.49.0"
 	}
 }

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -14,7 +14,7 @@
  */
 class Jetpack_Mu_Wpcom {
 
-	const PACKAGE_VERSION = '5.8.2-alpha';
+	const PACKAGE_VERSION = '5.9.0-alpha';
 	const PKG_DIR         = __DIR__ . '/../';
 	const BASE_DIR        = __DIR__ . '/';
 	const BASE_FILE       = __FILE__;

projects/packages/jetpack-mu-wpcom/src/features/block-theme-previews/block-theme-previews.php

@@ -5,6 +5,8 @@
  * @package automattic/jetpack-mu-wpcom
  */
 
+use Automattic\Jetpack\Jetpack_Mu_Wpcom;
+
 /**
  * Always show the correct homepage when previewing a theme in the Site Editor
  *
@@ -17,3 +19,25 @@ function () {
 		return 'posts';
 	}
 );
+
+/**
+ * Enqueue JS and CSS assets for this feature.
+ */
+function wpcom_enqueue_block_theme_previews_assets() {
+	$asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/block-theme-previews/block-theme-previews.asset.php';
+
+	wp_enqueue_script(
+		'wpcom-block-theme-previews',
+		plugins_url( 'build/block-theme-previews/block-theme-previews.js', Jetpack_Mu_Wpcom::BASE_FILE ),
+		$asset_file['dependencies'] ?? array(),
+		$asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/block-theme-previews/block-theme-previews.js' ),
+		true
+	);
+	wp_enqueue_style(
+		'wpcom-block-theme-previews',
+		plugins_url( 'build/block-theme-previews/block-theme-previews.css', Jetpack_Mu_Wpcom::BASE_FILE ),
+		array(),
+		filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/block-theme-previews/block-theme-previews.css' )
+	);
+}
+add_action( 'enqueue_block_editor_assets', 'wpcom_enqueue_block_theme_previews_assets' );

projects/packages/jetpack-mu-wpcom/src/features/block-theme-previews/index.js

@@ -0,0 +1,10 @@
+import domReady from '@wordpress/dom-ready';
+import { registerPlugin } from '@wordpress/plugins';
+import BlockThemePreviewsModal from './modal';
+import './store';
+
+domReady( () => {
+	registerPlugin( 'wpcom-block-theme-previews', {
+		render: BlockThemePreviewsModal,
+	} );
+} );

projects/packages/jetpack-mu-wpcom/src/features/block-theme-previews/modal.jsx

@@ -0,0 +1,82 @@
+import { Button, Modal } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import React from 'react';
+import { getPreviewedThemeStylesheet } from './utils';
+
+import './modal.scss';
+
+/**
+ * The modal that shows in the Site Editor the first time a user previews a block theme.
+ */
+export default function BlockThemePreviewsModal() {
+	const stylesheet = getPreviewedThemeStylesheet();
+	const theme = useSelect( select => select( 'core' ).getTheme( stylesheet ), [ stylesheet ] );
+
+	const isInSiteEditor = useSelect( select => !! select( 'core/edit-site' ), [] );
+	const isModalVisible = useSelect(
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		select => select( 'automattic/wpcom-block-theme-previews' ).isModalVisible(),
+		[]
+	);
+	const { dismissModal } = useDispatch( 'automattic/wpcom-block-theme-previews' );
+	const { suppressLivePreviewModal } = useDispatch( 'automattic/wpcom-welcome-guide' );
+
+	useEffect( () => {
+		if ( isInSiteEditor ) {
+			// Hide the legacy modal from the WordPress Editing Toolkit plugin.
+			suppressLivePreviewModal?.();
+		}
+	}, [ isInSiteEditor, suppressLivePreviewModal ] );
+
+	if ( ! isInSiteEditor || ! isModalVisible ) {
+		return null;
+	}
+	return (
+		<Modal
+			className="wpcom-block-theme-previews-modal"
+			onRequestClose={ dismissModal }
+			shouldCloseOnClickOutside={ false }
+		>
+			<div className="wpcom-block-theme-previews-modal__content">
+				<div className="wpcom-block-theme-previews-modal__text">
+					<h1 className="wpcom-block-theme-previews-modal__heading">
+						{ sprintf(
+							// translators: %s: theme name
+							__( 'You’re previewing %s', 'jetpack-mu-wpcom' ),
+							theme?.name?.rendered || stylesheet
+						) }
+					</h1>
+					<div className="wpcom-block-theme-previews-modal__description">
+						<p>
+							{ __(
+								'Changes you make in the editor won’t be applied to your site until you activate the theme.',
+								'jetpack-mu-wpcom'
+							) }
+						</p>
+						<p>
+							{ __(
+								'Try customizing your theme styles to get your site looking just right.',
+								'jetpack-mu-wpcom'
+							) }
+						</p>
+					</div>
+					<div className="wpcom-block-theme-previews-modal__actions">
+						<Button variant="primary" onClick={ dismissModal }>
+							{ __( 'Start customizing', 'jetpack-mu-wpcom' ) }
+						</Button>
+					</div>
+				</div>
+				<div className="wpcom-block-theme-previews-modal__video">
+					<video autoPlay loop muted>
+						<source
+							src="https://videos.files.wordpress.com/gTXUlIAB/wpcom-block-theme-previews-modal.mp4"
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+		</Modal>
+	);
+}

projects/packages/jetpack-mu-wpcom/src/features/block-theme-previews/modal.scss

@@ -0,0 +1,90 @@
+@import "@automattic/typography/styles/fonts";
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.wpcom-block-theme-previews-modal {
+	&.components-modal__frame {
+		margin: auto;
+	}
+
+	.components-modal__content {
+		padding: 0;
+		margin-top: 0;
+	}
+
+	.components-modal__header {
+		height: auto;
+		position: absolute;
+		border-bottom-width: 0;
+	}
+
+	.wpcom-block-theme-previews-modal__content {
+		display: flex;
+		flex-direction: column-reverse;
+		justify-content: flex-end;
+
+		@include break-small {
+			@media (min-width: #{ ($break-small) }) {
+				flex-direction: row;
+				align-items: stretch;
+			}
+		}
+	}
+
+	.wpcom-block-theme-previews-modal__text {
+		display: flex;
+		flex-direction: column;
+		padding: 48px;
+
+		@include break-small {
+			@media (min-width: #{ ($break-small) }) {
+				max-width: 400px;
+			}
+		}
+	}
+
+	.wpcom-block-theme-previews-modal__heading {
+		margin-top: 0;
+		font-family: $brand-serif;
+		font-weight: 400;
+		font-size: 32px;
+		line-height: 40px;
+		margin-bottom: 16px;
+	}
+
+	.wpcom-block-theme-previews-modal__description {
+		margin-top: 0;
+		margin-bottom: 16px;
+
+		p {
+			font-size: 16px;
+			line-height: 24px;
+			text-wrap: pretty;
+		}
+	}
+
+	.wpcom-block-theme-previews-modal__actions {
+		width: unset;
+	}
+
+	.wpcom-block-theme-previews-modal__video {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		background-color: rgba(56, 88, 233, 0.40);
+		padding-left: 48px;
+		overflow: hidden;
+
+		@include break-small {
+			@media (min-width: #{ ($break-small) }) {
+				max-width: 500px;
+			}
+		}
+
+		video {
+			max-width: unset;
+			width: 526px;
+			border-radius: 6px 0px 0px 0px;
+		}
+	}
+}

projects/packages/jetpack-mu-wpcom/src/features/block-theme-previews/store.js

@@ -0,0 +1,27 @@
+import { registerStore } from '@wordpress/data';
+
+const DEFAULT_STATE = {
+	isModalVisible: true,
+};
+
+registerStore( 'automattic/wpcom-block-theme-previews', {
+	reducer: ( state = DEFAULT_STATE, action ) => {
+		switch ( action.type ) {
+			case 'DISMISS_MODAL':
+				return {
+					...state,
+					isModalVisible: false,
+				};
+		}
+		return state;
+	},
+	actions: {
+		dismissModal: () => ( {
+			type: 'DISMISS_MODAL',
+		} ),
+	},
+	selectors: {
+		isModalVisible: state => state.isModalVisible,
+	},
+	persist: true,
+} );