From 479612f3da471d40cadb92e0e9f8528e9cd4aa3c Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Tue, 15 Oct 2024 23:03:23 -0300 Subject: [PATCH 1/7] working version --- .../extensions/blocks/subscriptions/editor.js | 41 +++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js index a3fc6085dde1c..f4f7b71c7f0a7 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 } 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,13 +75,44 @@ const shouldShowNewsletterMenu = () => { return isPost; }; +const SubscriptionsEditorAdditions = () => { + const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false ); + const { tracks } = useAnalytics(); + + const postId = select( 'core/editor' ).getCurrentPostId(); + + return ( + <> + { + tracks.recordEvent( 'jetpack_newsletter_preview_menu_item_click' ); + setIsPreviewModalOpen( true ); + } } + icon={ send } + > + { __( 'Email Preview', 'jetpack' ) } + + setIsPreviewModalOpen( false ) } + postId={ postId } + /> + + ); +}; + // Registers slot/fill panels defined via settings.render and command palette commands registerJetpackPlugin( blockName, { render: () => { return ( <> - { shouldShowNewsletterMenu() && } + { shouldShowNewsletterMenu() && ( + <> + + + + ) } ); From 415bb2340561e62fedd6ebc606ce1af5311aed8b Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Tue, 15 Oct 2024 23:04:49 -0300 Subject: [PATCH 2/7] changelog --- .../jetpack/changelog/add-newsletter-preview-menu-item | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-newsletter-preview-menu-item 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 From 56a80638acae8c4259d6e724333ff2277bdbbdcc Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Wed, 16 Oct 2024 15:27:16 -0300 Subject: [PATCH 3/7] pass openPreviewModal --- .../extensions/blocks/subscriptions/editor.js | 68 +++++++++---------- .../extensions/blocks/subscriptions/menu.js | 12 +--- 2 files changed, 36 insertions(+), 44 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js index f4f7b71c7f0a7..4119d90f2219b 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js @@ -1,8 +1,8 @@ -import { registerJetpackPlugin, useAnalytics } from '@automattic/jetpack-shared-extension-utils'; +import { registerJetpackPlugin } from '@automattic/jetpack-shared-extension-utils'; import { createBlock } from '@wordpress/blocks'; import { select } from '@wordpress/data'; import { PluginPreviewMenuItem } from '@wordpress/editor'; -import { useState } from '@wordpress/element'; +import { useState, useCallback } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; import { atSymbol, send } from '@wordpress/icons'; @@ -75,48 +75,48 @@ const shouldShowNewsletterMenu = () => { return isPost; }; -const SubscriptionsEditorAdditions = () => { +const useNewsletterPreview = () => { const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false ); - const { tracks } = useAnalytics(); - const postId = select( 'core/editor' ).getCurrentPostId(); + const openPreviewModal = useCallback( () => { + setIsPreviewModalOpen( true ); + }, [] ); + + const closePreviewModal = useCallback( () => { + setIsPreviewModalOpen( false ); + }, [] ); + + return { isPreviewModalOpen, openPreviewModal, closePreviewModal, postId }; +}; + +const NewsletterEditor = () => { + const { isPreviewModalOpen, openPreviewModal, closePreviewModal, postId } = + useNewsletterPreview(); + return ( <> - { - tracks.recordEvent( 'jetpack_newsletter_preview_menu_item_click' ); - setIsPreviewModalOpen( true ); - } } - icon={ send } - > - { __( 'Email Preview', 'jetpack' ) } - - setIsPreviewModalOpen( false ) } - postId={ postId } - /> + + { shouldShowNewsletterMenu() && ( + <> + + { __( 'Email Preview', 'jetpack' ) } + + + + + ) } + ); }; -// Registers slot/fill panels defined via settings.render and command palette commands 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' ) } - Date: Wed, 16 Oct 2024 15:33:01 -0300 Subject: [PATCH 4/7] add tracks --- .../jetpack/extensions/blocks/subscriptions/editor.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js index 4119d90f2219b..70a805edd879b 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js @@ -1,3 +1,4 @@ +import { recordTracksEvent } from '@automattic/jetpack-analytics'; import { registerJetpackPlugin } from '@automattic/jetpack-shared-extension-utils'; import { createBlock } from '@wordpress/blocks'; import { select } from '@wordpress/data'; @@ -79,8 +80,10 @@ const useNewsletterPreview = () => { const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false ); const postId = select( 'core/editor' ).getCurrentPostId(); - const openPreviewModal = useCallback( () => { + const openPreviewModal = useCallback( source => { setIsPreviewModalOpen( true ); + // Add tracking event + recordTracksEvent( 'jetpack_newsletter_preview_opened', { source } ); }, [] ); const closePreviewModal = useCallback( () => { @@ -99,7 +102,7 @@ const NewsletterEditor = () => { { shouldShowNewsletterMenu() && ( <> - + openPreviewModal( 'preview_menu' ) } icon={ send }> { __( 'Email Preview', 'jetpack' ) } { onClose={ closePreviewModal } postId={ postId } /> - + openPreviewModal( 'newsletter_menu' ) } /> ) } From 4987cf9f0344cb9335d405e00120cda28de58ad9 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Wed, 16 Oct 2024 15:44:09 -0300 Subject: [PATCH 5/7] hmm --- .../extensions/blocks/subscriptions/editor.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js index 70a805edd879b..6b0410df5eab3 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js @@ -1,5 +1,4 @@ -import { recordTracksEvent } from '@automattic/jetpack-analytics'; -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'; @@ -79,12 +78,15 @@ const shouldShowNewsletterMenu = () => { const useNewsletterPreview = () => { const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false ); const postId = select( 'core/editor' ).getCurrentPostId(); + const { tracks } = useAnalytics(); - const openPreviewModal = useCallback( source => { - setIsPreviewModalOpen( true ); - // Add tracking event - recordTracksEvent( 'jetpack_newsletter_preview_opened', { source } ); - }, [] ); + const openPreviewModal = useCallback( + source => { + setIsPreviewModalOpen( true ); + tracks.recordEvent( 'jetpack_newsletter_preview_opened', { source } ); + }, + [ tracks ] + ); const closePreviewModal = useCallback( () => { setIsPreviewModalOpen( false ); From c2e8a651a49c453c1893d067fdc955419e32635f Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Wed, 16 Oct 2024 15:47:22 -0300 Subject: [PATCH 6/7] check if PluginPreviewMenuItem is available --- .../jetpack/extensions/blocks/subscriptions/editor.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js index 6b0410df5eab3..23a3ce8b95c28 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js @@ -104,9 +104,14 @@ const NewsletterEditor = () => { { shouldShowNewsletterMenu() && ( <> - openPreviewModal( 'preview_menu' ) } icon={ send }> - { __( 'Email Preview', 'jetpack' ) } - + { PluginPreviewMenuItem ? ( + openPreviewModal( 'preview_menu' ) } + icon={ send } + > + { __( 'Email Preview', 'jetpack' ) } + + ) : null } Date: Wed, 16 Oct 2024 15:57:00 -0300 Subject: [PATCH 7/7] Sentence case --- .../plugins/jetpack/extensions/blocks/subscriptions/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js index 23a3ce8b95c28..550df4f693c8e 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/editor.js @@ -109,7 +109,7 @@ const NewsletterEditor = () => { onClick={ () => openPreviewModal( 'preview_menu' ) } icon={ send } > - { __( 'Email Preview', 'jetpack' ) } + { __( 'Email preview', 'jetpack' ) } ) : null }