Move current MailPoet specific information on the sidebar to an extension point
MAILPOET-6431
This commit is contained in:
Oluwaseun Olorunsola
committed by
Oluwaseun Olorunsola
Oluwaseun Olorunsola
parent
7c425cb04d
commit
4b917dd1b3
@@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,6 +5,7 @@
|
|||||||
import { addFilter, addAction } from '@wordpress/hooks';
|
import { addFilter, addAction } from '@wordpress/hooks';
|
||||||
import { MailPoet } from 'mailpoet';
|
import { MailPoet } from 'mailpoet';
|
||||||
import { withSatismeterSurvey } from './satismeter-survey';
|
import { withSatismeterSurvey } from './satismeter-survey';
|
||||||
|
import { EmailSidebarExtension } from './email-sidebar-extension';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
import { useValidationRules } from './validate-email-content';
|
import { useValidationRules } from './validate-email-content';
|
||||||
|
|
||||||
@@ -53,3 +54,10 @@ addFilter(
|
|||||||
'mailpoet',
|
'mailpoet',
|
||||||
() => !!window.mailpoet_analytics_enabled,
|
() => !!window.mailpoet_analytics_enabled,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// integration point for settings sidebar
|
||||||
|
addFilter(
|
||||||
|
'mailpoet_email_editor_setting_sidebar_extension_component',
|
||||||
|
'mailpoet',
|
||||||
|
() => EmailSidebarExtension,
|
||||||
|
);
|
||||||
|
|||||||
@@ -1,92 +1,21 @@
|
|||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { ExternalLink, PanelBody } from '@wordpress/components';
|
import { PanelBody } from '@wordpress/components';
|
||||||
import { useEntityProp } from '@wordpress/core-data';
|
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { createInterpolateElement } from '@wordpress/element';
|
import { applyFilters } from '@wordpress/hooks';
|
||||||
import classnames from 'classnames';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { editorCurrentPostType } from '../../store';
|
|
||||||
import { recordEvent } from '../../events';
|
import { recordEvent } from '../../events';
|
||||||
import { RichTextWithButton } from '../personalization-tags/rich-text-with-button';
|
|
||||||
|
|
||||||
const previewTextMaxLength = 150;
|
const SidebarExtensionComponent = applyFilters(
|
||||||
const previewTextRecommendedLength = 80;
|
'mailpoet_email_editor_setting_sidebar_extension_component',
|
||||||
|
<br />
|
||||||
|
) as JSX.Element;
|
||||||
|
|
||||||
export function DetailsPanel() {
|
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 (
|
return (
|
||||||
<PanelBody
|
<PanelBody
|
||||||
title={ __( 'Details', 'mailpoet' ) }
|
title={ __( 'Details', 'mailpoet' ) }
|
||||||
@@ -95,50 +24,13 @@ export function DetailsPanel() {
|
|||||||
recordEvent( 'details_panel_body_toggle', { opened: data } )
|
recordEvent( 'details_panel_body_toggle', { opened: data } )
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<RichTextWithButton
|
<>
|
||||||
attributeName="subject"
|
{
|
||||||
label={ __( 'Subject', 'mailpoet' ) }
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
labelSuffix={
|
// @ts-ignore
|
||||||
<ExternalLink
|
<SidebarExtensionComponent />
|
||||||
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>
|
|
||||||
}
|
}
|
||||||
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>
|
</PanelBody>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user