diff --git a/mailpoet/assets/js/src/mailpoet-email-editor-integration/email-sidebar-extension.tsx b/mailpoet/assets/js/src/mailpoet-email-editor-integration/email-sidebar-extension.tsx new file mode 100644 index 0000000000..f76c2ae77e --- /dev/null +++ b/mailpoet/assets/js/src/mailpoet-email-editor-integration/email-sidebar-extension.tsx @@ -0,0 +1,151 @@ +import { + ExternalLink, + __experimentalText as Text, // eslint-disable-line + TextareaControl, +} from '@wordpress/components'; +import { select, dispatch } from '@wordpress/data'; +import { store as coreDataStore, useEntityProp } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; +import { createInterpolateElement } from '@wordpress/element'; +import classnames from 'classnames'; + +const previewTextMaxLength = 150; +const previewTextRecommendedLength = 80; + +export function EmailSidebarExtension() { + const [mailpoetEmailData] = useEntityProp( + 'postType', + 'mailpoet_email', + 'mailpoet_data', + ); + + const updateEmailMailPoetProperty = (name: string, value: string) => { + const postId = select(editorStore).getCurrentPostId(); + const currentPostType = 'mailpoet_email'; // only for mailpoet_email post-type + + const editedPost = select(coreDataStore).getEditedEntityRecord( + 'postType', + currentPostType, + postId, + ); + + // @ts-expect-error Property 'mailpoet_data' does not exist on type 'Updatable>'. + const mailpoetData = editedPost?.mailpoet_data || {}; + void dispatch(coreDataStore).editEntityRecord( + 'postType', + currentPostType, + postId, + { + mailpoet_data: { + ...mailpoetData, + [name]: value, + }, + }, + ); + }; + + const subjectHelp = createInterpolateElement( + __( + 'Use shortcodes to personalize your email, or learn more about best practices and using emoji in subject lines.', + 'mailpoet', + ), + { + bestPracticeLink: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label + + ), + emojiLink: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label + + ), + }, + ); + + const subjectLabel = ( + <> + {__('Subject', 'mailpoet')} + + {__('Shortcode guide', 'mailpoet')} + + + ); + + const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0; + + const preheaderLabel = ( + <> + {__('Preview text', 'mailpoet')} + previewTextRecommendedLength, + 'mailpoet-settings-panel__preview-text-length-error': + previewTextLength > previewTextMaxLength, + })} + > + {previewTextLength}/{previewTextMaxLength} + + + ); + + return ( + <> + updateEmailMailPoetProperty('subject', value)} + data-automation-id="email_subject" + /> +
+ {subjectHelp} +
+ + updateEmailMailPoetProperty('preheader', value)} + data-automation-id="email_preview_text" + /> +
+ + {createInterpolateElement( + __( + 'This text will appear in the inbox, underneath the subject line.', + 'mailpoet', + ), + { + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label + + ), + }, + )} + +
+ + ); +} diff --git a/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts b/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts index 34949dd688..a3dd70da96 100644 --- a/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts +++ b/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts @@ -5,6 +5,7 @@ import { addFilter, addAction } from '@wordpress/hooks'; import { MailPoet } from 'mailpoet'; import { withSatismeterSurvey } from './satismeter-survey'; +import { EmailSidebarExtension } from './email-sidebar-extension'; import './index.scss'; import { useValidationRules } from './validate-email-content'; @@ -53,3 +54,10 @@ addFilter( 'mailpoet', () => !!window.mailpoet_analytics_enabled, ); + +// integration point for settings sidebar +addFilter( + 'mailpoet_email_editor_setting_sidebar_extension_component', + 'mailpoet', + () => EmailSidebarExtension, +); diff --git a/packages/js/email-editor/src/components/sidebar/details-panel.tsx b/packages/js/email-editor/src/components/sidebar/details-panel.tsx index 54ab008aac..e6780c7e25 100644 --- a/packages/js/email-editor/src/components/sidebar/details-panel.tsx +++ b/packages/js/email-editor/src/components/sidebar/details-panel.tsx @@ -1,92 +1,21 @@ /** * External dependencies */ -import { ExternalLink, PanelBody } from '@wordpress/components'; -import { useEntityProp } from '@wordpress/core-data'; +import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { createInterpolateElement } from '@wordpress/element'; -import classnames from 'classnames'; +import { applyFilters } from '@wordpress/hooks'; /** * Internal dependencies */ -import { editorCurrentPostType } from '../../store'; import { recordEvent } from '../../events'; -import { RichTextWithButton } from '../personalization-tags/rich-text-with-button'; -const previewTextMaxLength = 150; -const previewTextRecommendedLength = 80; +const SidebarExtensionComponent = applyFilters( + 'mailpoet_email_editor_setting_sidebar_extension_component', +
+) as JSX.Element; export function DetailsPanel() { - const [ mailpoetEmailData ] = useEntityProp( - 'postType', - editorCurrentPostType, - 'mailpoet_data' - ); - - const subjectHelp = createInterpolateElement( - __( - 'Use personalization tags to personalize your email, or learn more about best practices and using emoji in subject lines.', - 'mailpoet' - ), - { - bestPracticeLink: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label - - recordEvent( - 'details_panel_subject_help_best_practice_link_clicked' - ) - } - /> - ), - emojiLink: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label - - recordEvent( - 'details_panel_subject_help_emoji_in_subject_lines_link_clicked' - ) - } - /> - ), - } - ); - - const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0; - - const preheaderHelp = createInterpolateElement( - __( - 'This text will appear in the inbox, underneath the subject line.', - 'mailpoet' - ), - { - link: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label - - recordEvent( - 'details_panel_preheader_help_text_link_clicked' - ) - } - /> - ), - } - ); - return ( - - recordEvent( - 'details_panel_personalisation_tags_guide_link_clicked' - ) - } - > - { __( 'Guide', 'mailpoet' ) } - + <> + { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + } - help={ subjectHelp } - placeholder={ __( 'Eg. The summer sale is here!', 'mailpoet' ) } - /> - - - previewTextRecommendedLength, - 'mailpoet-settings-panel__preview-text-length-error': - previewTextLength > previewTextMaxLength, - } - ) } - > - { previewTextLength }/{ previewTextMaxLength } - - } - help={ preheaderHelp } - placeholder={ __( - "Add a preview text to capture subscribers' attention and increase open rates.", - 'mailpoet' - ) } - /> + ); }