Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Move current MailPoet specific information on the sidebar to an extension point

Browse Source 
MAILPOET-6431
This commit is contained in:
Oluwaseun Olorunsola
2025-01-31 08:53:46 +01:00
committed by Oluwaseun Olorunsola
parent 7c425cb04d
commit 4b917dd1b3
3 changed files with 171 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
mailpoet/assets/js/src/mailpoet-email-editor-integration/email-sidebar-extension.tsx Normal file
View File

@@ -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<Attachment<any>>'.
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 <bestPracticeLink>best practices</bestPracticeLink> and using <emojiLink>emoji in subject lines</emojiLink>.',
'mailpoet',
),
{
bestPracticeLink: (
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
<a
href="https://www.mailpoet.com/blog/17-email-subject-line-best-practices-to-boost-engagement/"
target="_blank"
rel="noopener noreferrer"
/>
),
emojiLink: (
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
<a
href="https://www.mailpoet.com/blog/tips-using-emojis-in-subject-lines/"
target="_blank"
rel="noopener noreferrer"
/>
),
},
);
const subjectLabel = (
<>
<span>{__('Subject', 'mailpoet')}</span>
<ExternalLink href="https://kb.mailpoet.com/article/215-personalize-newsletter-with-shortcodes#list">
{__('Shortcode guide', 'mailpoet')}
</ExternalLink>
</>
);
const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0;
const preheaderLabel = (
<>
<span>{__('Preview text', 'mailpoet')}</span>
<span
className={classnames('mailpoet-settings-panel__preview-text-length', {
'mailpoet-settings-panel__preview-text-length-warning':
previewTextLength > previewTextRecommendedLength,
'mailpoet-settings-panel__preview-text-length-error':
previewTextLength > previewTextMaxLength,
})}
>
{previewTextLength}/{previewTextMaxLength}
</span>
</>
);
return (
<>
<TextareaControl
className="mailpoet-settings-panel__subject"
label={subjectLabel}
placeholder={__('Eg. The summer sale is here!', 'mailpoet')}
value={mailpoetEmailData?.subject ?? ''}
onChange={(value) => updateEmailMailPoetProperty('subject', value)}
data-automation-id="email_subject"
/>
<div className="mailpoet-settings-panel__help">
<Text>{subjectHelp}</Text>
</div>
<TextareaControl
className="mailpoet-settings-panel__preview-text"
label={preheaderLabel}
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"
/>
<div className="mailpoet-settings-panel__help">
<Text>
{createInterpolateElement(
__(
'<link>This text</link> 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
<a
href={new URL(
'article/418-preview-text',
'https://kb.mailpoet.com/',
).toString()}
key="preview-text-kb"
target="_blank"
rel="noopener noreferrer"
/>
),
},
)}
</Text>
</div>
</>
);
}

8
mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts
View File

@@ -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,
);

132
packages/js/email-editor/src/components/sidebar/details-panel.tsx
View File

@@ -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',
<br />
) 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 <bestPracticeLink>best practices</bestPracticeLink> and using <emojiLink>emoji in subject lines</emojiLink>.',
'mailpoet'
),
{
bestPracticeLink: (
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
<a
href="https://www.mailpoet.com/blog/17-email-subject-line-best-practices-to-boost-engagement/"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
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
<a
href="https://www.mailpoet.com/blog/tips-using-emojis-in-subject-lines/"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
recordEvent(
'details_panel_subject_help_emoji_in_subject_lines_link_clicked'
)
}
/>
),
}
);
const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0;
const preheaderHelp = createInterpolateElement(
__(
'<link>This text</link> 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
<a
href={ new URL(
'article/418-preview-text',
'https://kb.mailpoet.com/'
).toString() }
key="preview-text-kb"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
recordEvent(
'details_panel_preheader_help_text_link_clicked'
)
}
/>
),
}
);
return (
<PanelBody
title={ __( 'Details', 'mailpoet' ) }
@@ -95,50 +24,13 @@ export function DetailsPanel() {
recordEvent( 'details_panel_body_toggle', { opened: data } )
}
>
<RichTextWithButton
attributeName="subject"
label={ __( 'Subject', 'mailpoet' ) }
labelSuffix={
<ExternalLink
href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list"
onClick={ () =>
recordEvent(
'details_panel_personalisation_tags_guide_link_clicked'
)
}
>
{ __( 'Guide', 'mailpoet' ) }
</ExternalLink>
<>
{
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
<SidebarExtensionComponent />
}
help={ subjectHelp }
placeholder={ __( 'Eg. The summer sale is here!', 'mailpoet' ) }
/>
<RichTextWithButton
attributeName="preheader"
label={ __( 'Preview text', 'mailpoet' ) }
labelSuffix={
<span
className={ classnames(
'mailpoet-settings-panel__preview-text-length',
{
'mailpoet-settings-panel__preview-text-length-warning':
previewTextLength >
previewTextRecommendedLength,
'mailpoet-settings-panel__preview-text-length-error':
previewTextLength > previewTextMaxLength,
}
) }
>
{ previewTextLength }/{ previewTextMaxLength }
</span>
}
help={ preheaderHelp }
placeholder={ __(
"Add a preview text to capture subscribers' attention and increase open rates.",
'mailpoet'
) }
/>
</>
</PanelBody>
);
}