diff --git a/projects/plugins/jetpack/changelog/add-newsletter-preview-menu-item b/projects/plugins/jetpack/changelog/add-newsletter-preview-menu-item
new file mode 100644
index 0000000000000..5f502c0b91c70
--- /dev/null
+++ b/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
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js
index a3fc6085dde1c..550df4f693c8e 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js
+++ b/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 (
+ <>
+
+ { shouldShowNewsletterMenu() && (
+ <>
+ { PluginPreviewMenuItem ? (
+ openPreviewModal( 'preview_menu' ) }
+ icon={ send }
+ >
+ { __( 'Email preview', 'jetpack' ) }
+
+ ) : null }
+
+ openPreviewModal( 'newsletter_menu' ) } />
+ >
+ ) }
+
+ >
+ );
+};
+
registerJetpackPlugin( blockName, {
- render: () => {
- return (
- <>
-
- { shouldShowNewsletterMenu() && }
-
- >
- );
- },
+ render: () => ,
icon: shouldShowNewsletterMenu() ? atSymbol : undefined,
} );
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js
index 1a59b55f49177..0258842d68005 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js
+++ b/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' ) }
-