Add/newsletter preview menu item (#39782)

projects/plugins/jetpack/changelog/add-newsletter-preview-menu-item

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Newsletter: Add Preview Email to the Preview Menu 

projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js

@@ -1,13 +1,17 @@
-import { registerJetpackPlugin } from '@automattic/jetpack-shared-extension-utils';
+import { registerJetpackPlugin, useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
+import { PluginPreviewMenuItem } from '@wordpress/editor';
+import { useState, useCallback } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import { atSymbol } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { atSymbol, send } from '@wordpress/icons';
 import { registerJetpackBlockFromMetadata } from '../../shared/register-jetpack-block';
 import metadata from './block.json';
 import CommandPalette from './command-palette';
 import deprecated from './deprecated';
 import edit from './edit';
+import { NewsletterPreviewModal } from './email-preview';
 import NewsletterMenu from './menu';
 import SubscribePanels from './panel';
 
@@ -71,17 +75,58 @@ const shouldShowNewsletterMenu = () => {
 	return isPost;
 };
 
-// Registers slot/fill panels defined via settings.render and command palette commands
+const useNewsletterPreview = () => {
+	const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false );
+	const postId = select( 'core/editor' ).getCurrentPostId();
+	const { tracks } = useAnalytics();
+
+	const openPreviewModal = useCallback(
+		source => {
+			setIsPreviewModalOpen( true );
+			tracks.recordEvent( 'jetpack_newsletter_preview_opened', { source } );
+		},
+		[ tracks ]
+	);
+
+	const closePreviewModal = useCallback( () => {
+		setIsPreviewModalOpen( false );
+	}, [] );
+
+	return { isPreviewModalOpen, openPreviewModal, closePreviewModal, postId };
+};
+
+const NewsletterEditor = () => {
+	const { isPreviewModalOpen, openPreviewModal, closePreviewModal, postId } =
+		useNewsletterPreview();
+
+	return (
+		<>
+			<SubscribePanels />
+			{ shouldShowNewsletterMenu() && (
+				<>
+					{ PluginPreviewMenuItem ? (
+						<PluginPreviewMenuItem
+							onClick={ () => openPreviewModal( 'preview_menu' ) }
+							icon={ send }
+						>
+							{ __( 'Email preview', 'jetpack' ) }
+						</PluginPreviewMenuItem>
+					) : null }
+					<NewsletterPreviewModal
+						isOpen={ isPreviewModalOpen }
+						onClose={ closePreviewModal }
+						postId={ postId }
+					/>
+					<NewsletterMenu openPreviewModal={ () => openPreviewModal( 'newsletter_menu' ) } />
+				</>
+			) }
+			<CommandPalette />
+		</>
+	);
+};
+
 registerJetpackPlugin( blockName, {
-	render: () => {
-		return (
-			<>
-				<SubscribePanels />
-				{ shouldShowNewsletterMenu() && <NewsletterMenu /> }
-				<CommandPalette />
-			</>
-		);
-	},
+	render: () => <NewsletterEditor />,
 	icon: shouldShowNewsletterMenu() ? atSymbol : undefined,
 } );
 

projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js

@@ -9,11 +9,10 @@ import { META_NAME_FOR_POST_DONT_EMAIL_TO_SUBS } from '../../shared/memberships/
 import { useAccessLevel } from '../../shared/memberships/edit';
 import { NewsletterEmailDocumentSettings } from '../../shared/memberships/settings';
 import SubscribersAffirmation from '../../shared/memberships/subscribers-affirmation';
-import { NewsletterPreviewModal, NewsletterTestEmailModal } from './email-preview';
+import { NewsletterTestEmailModal } from './email-preview';
 import { SendIcon } from './icons';
 
-const NewsletterMenu = () => {
-	const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false );
+const NewsletterMenu = ( { openPreviewModal } ) => {
 	const [ isTestEmailModalOpen, setIsTestEmailModalOpen ] = useState( false );
 
 	const { postId, postType, postStatus, meta } = useSelect(
@@ -34,8 +33,6 @@ const NewsletterMenu = () => {
 	const connectUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?page=my-jetpack#/connection`;
 	const shouldPromptForConnection = ! isSimpleSite() && ! isUserConnected;
 
-	const openPreviewModal = () => setIsPreviewModalOpen( true );
-	const closePreviewModal = () => setIsPreviewModalOpen( false );
 	const openTestEmailModal = () => setIsTestEmailModalOpen( true );
 	const closeTestEmailModal = () => setIsTestEmailModalOpen( false );
 
@@ -74,11 +71,6 @@ const NewsletterMenu = () => {
 										{ __( 'Send test email', 'jetpack' ) }
 									</Button>
 								</HStack>
-								<NewsletterPreviewModal
-									isOpen={ isPreviewModalOpen }
-									onClose={ closePreviewModal }
-									postId={ postId }
-								/>
 								<NewsletterTestEmailModal
 									isOpen={ isTestEmailModalOpen }
 									onClose={ closeTestEmailModal }