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' ) } -