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 index f76c2ae77e..9da9f4e64f 100644 --- 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 @@ -1,8 +1,4 @@ -import { - ExternalLink, - __experimentalText as Text, // eslint-disable-line - TextareaControl, -} from '@wordpress/components'; +import { ExternalLink } 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'; @@ -13,7 +9,7 @@ import classnames from 'classnames'; const previewTextMaxLength = 150; const previewTextRecommendedLength = 80; -export function EmailSidebarExtension() { +export function EmailSidebarExtensionBody({ RichTextWithButton }) { const [mailpoetEmailData] = useEntityProp( 'postType', 'mailpoet_email', @@ -47,7 +43,7 @@ export function EmailSidebarExtension() { const subjectHelp = createInterpolateElement( __( - 'Use shortcodes to personalize your email, or learn more about best practices and using emoji in subject lines.', + 'Use personalization tags to personalize your email, or learn more about best practices and using emoji in subject lines.', 'mailpoet', ), { @@ -57,6 +53,7 @@ export function EmailSidebarExtension() { href="https://www.mailpoet.com/blog/17-email-subject-line-best-practices-to-boost-engagement/" target="_blank" rel="noopener noreferrer" + onClick={() => {}} /> ), emojiLink: ( @@ -65,87 +62,87 @@ export function EmailSidebarExtension() { href="https://www.mailpoet.com/blog/tips-using-emojis-in-subject-lines/" target="_blank" rel="noopener noreferrer" + onClick={() => {}} /> ), }, ); - 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} - - + 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 + {}} + /> + ), + }, ); return ( <> - {}} + > + {__('Guide', 'mailpoet')} + + } + help={subjectHelp} placeholder={__('Eg. The summer sale is here!', 'mailpoet')} - value={mailpoetEmailData?.subject ?? ''} - onChange={(value) => updateEmailMailPoetProperty('subject', value)} - data-automation-id="email_subject" /> -
- {subjectHelp} -
- + + 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', )} - value={mailpoetEmailData?.preheader ?? ''} - onChange={(value) => 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 - - ), - }, - )} - -
); } + +export function EmailSidebarExtension(RichTextWithButton: JSX.Element) { + return ; +} 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 a3dd70da96..9d26a0e14d 100644 --- a/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts +++ b/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts @@ -59,5 +59,6 @@ addFilter( addFilter( 'mailpoet_email_editor_setting_sidebar_extension_component', 'mailpoet', - () => EmailSidebarExtension, + // eslint-disable-next-line @typescript-eslint/no-unsafe-return + (RichTextWithButton) => EmailSidebarExtension.bind(null, RichTextWithButton), ); 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 e6780c7e25..87a4552ef6 100644 --- a/packages/js/email-editor/src/components/sidebar/details-panel.tsx +++ b/packages/js/email-editor/src/components/sidebar/details-panel.tsx @@ -9,10 +9,11 @@ import { applyFilters } from '@wordpress/hooks'; * Internal dependencies */ import { recordEvent } from '../../events'; +import { RichTextWithButton } from '../personalization-tags/rich-text-with-button'; const SidebarExtensionComponent = applyFilters( 'mailpoet_email_editor_setting_sidebar_extension_component', -
+ RichTextWithButton ) as JSX.Element; export function DetailsPanel() { diff --git a/packages/js/email-editor/src/store/types.ts b/packages/js/email-editor/src/store/types.ts index b8106b40c2..cd6786299f 100644 --- a/packages/js/email-editor/src/store/types.ts +++ b/packages/js/email-editor/src/store/types.ts @@ -210,13 +210,6 @@ export type State = { }; }; -export type MailPoetEmailData = { - id: number; - subject: string; - preheader: string; - preview_url: string; -}; - export type EmailTemplate = { id: string; slug: string;