Refine subtitle typography in newsletters (#20321)
MOM-190 MOM-192 - The subtitle style (serif/sans) was tied to the body style which was misleading. It makes more sense to connect it to the title style both from the UX and the output POV. - Newsletter design preview was not updated according to subtitle styles. --------- Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
This commit is contained in:
Peter Zimon
GitHub
parent
952a89f673
commit
0efec254ec
@ -101,6 +101,18 @@ const NewsletterPreviewContent: React.FC<{
|
||||
<p className="leading-normal"><span className="font-semibold text-grey-900">To:</span> Jamie Larson jamie@example.com</p></>;
|
||||
}
|
||||
|
||||
let subtitleClasses = 'mb-5 text-pretty leading-[1.7] text-black';
|
||||
|
||||
if (titleFontCategory === 'serif' && bodyFontCategory === 'serif') {
|
||||
subtitleClasses = clsx(subtitleClasses, 'font-serif text-[1.8rem]');
|
||||
} else if (titleFontCategory !== 'serif' && bodyFontCategory === 'serif') {
|
||||
subtitleClasses = clsx(subtitleClasses, 'text-[1.7rem] tracking-tight');
|
||||
} else if (titleFontCategory === 'serif' && bodyFontCategory !== 'serif') {
|
||||
subtitleClasses = clsx(subtitleClasses, 'font-serif text-[1.8rem]');
|
||||
} else {
|
||||
subtitleClasses = clsx(subtitleClasses, 'text-[1.7rem] tracking-tight');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex grow flex-col">
|
||||
<div className="absolute inset-0 m-5 flex items-center justify-center">
|
||||
@ -122,7 +134,7 @@ const NewsletterPreviewContent: React.FC<{
|
||||
<div className="py-3" style={{borderColor: secondaryBorderColor}}>
|
||||
{headerIcon && <img alt="" className="mx-auto mb-2 h-10 w-10" role="presentation" src={headerIcon} />}
|
||||
{headerTitle && <h4 className="mb-1 text-center text-[1.6rem] font-bold uppercase leading-tight tracking-tight text-grey-900" style={{color: textColor}}>{headerTitle}</h4>}
|
||||
{headerSubtitle && <h5 className="mb-1 text-center text-md font-normal text-grey-700" style={{color: secondaryTextColor}}>{headerSubtitle}</h5>}
|
||||
{headerSubtitle && <h5 className="mb-1 text-center text-[1.3rem] font-normal text-grey-700" style={{color: secondaryTextColor}}>{headerSubtitle}</h5>}
|
||||
</div>
|
||||
)}
|
||||
{showPostTitleSection && (
|
||||
@ -135,20 +147,17 @@ const NewsletterPreviewContent: React.FC<{
|
||||
Your email newsletter
|
||||
</h2>
|
||||
{(hasNewsletterSubtitle && showSubtitle) && (
|
||||
<p className={clsx(
|
||||
'mb-5 text-pretty text-[1.6rem] leading-[1.7] text-black',
|
||||
bodyFontCategory === 'serif' && 'font-serif'
|
||||
)}>A subtitle to highlight key points and engage your readers</p>
|
||||
<p className={subtitleClasses}>A subtitle to highlight key points and engage your readers</p>
|
||||
)}
|
||||
<div className={clsx(
|
||||
'flex w-full justify-between text-center text-md leading-none text-grey-700',
|
||||
titleAlignment === 'center' ? 'flex-col' : 'flex-row'
|
||||
titleAlignment === 'center' ? 'flex-col gap-1' : 'flex-row'
|
||||
)}>
|
||||
<p className="pb-1" style={{color: secondaryTextColor}}>
|
||||
<p className="pb-1 text-[1.3rem]" style={{color: secondaryTextColor}}>
|
||||
By {authorPlaceholder}
|
||||
<span className="before:pl-0.5 before:pr-1 before:content-['•']">{currentDate}</span>
|
||||
</p>
|
||||
<p className="pb-1 underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
|
||||
<p className="pb-1 text-[1.3rem] underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -167,8 +176,8 @@ const NewsletterPreviewContent: React.FC<{
|
||||
)}
|
||||
|
||||
<div className={clsx(
|
||||
'max-w-[600px] border-b border-grey-200 pb-5 text-[1.6rem] leading-[1.7] text-black',
|
||||
bodyFontCategory === 'serif' && 'font-serif',
|
||||
'max-w-[600px] border-b border-grey-200 pb-5 leading-[1.7] text-black',
|
||||
bodyFontCategory === 'serif' ? 'font-serif text-[1.8rem]' : 'text-[1.7rem] tracking-tight',
|
||||
(showFeatureImage || showPostTitleSection) ? '' : 'pt-8'
|
||||
)} style={{borderColor: secondaryBorderColor}}>
|
||||
<p className="mb-5" style={{color: textColor}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
|
||||
@ -1017,6 +1017,16 @@ class EmailRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
let subtitleFontClass = '';
|
||||
const bodyFont = newsletter.get('body_font_category');
|
||||
const titleFont = newsletter.get('title_font_category');
|
||||
|
||||
if (titleFont === 'serif' && bodyFont === 'serif') {
|
||||
subtitleFontClass = 'post-subtitle-serif-serif';
|
||||
} else if (titleFont === 'serif' && bodyFont !== 'serif') {
|
||||
subtitleFontClass = 'post-subtitle-serif-sans';
|
||||
}
|
||||
|
||||
const data = {
|
||||
site: {
|
||||
title: this.#settingsCache.get('title'),
|
||||
@ -1080,7 +1090,7 @@ class EmailRenderer {
|
||||
classes: {
|
||||
title: 'post-title' + (newsletter.get('title_font_category') === 'serif' ? ` post-title-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-title-left` : ``),
|
||||
titleLink: 'post-title-link' + (newsletter.get('title_alignment') === 'left' ? ` post-title-link-left` : ``),
|
||||
subtitle: 'post-subtitle' + (newsletter.get('body_font_category') === 'serif' ? ` post-subtitle-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-subtitle-left` : ``),
|
||||
subtitle: 'post-subtitle' + ` ` + subtitleFontClass + (newsletter.get('title_alignment') === 'left' ? ` post-subtitle-left` : ``),
|
||||
meta: 'post-meta' + (newsletter.get('title_alignment') === 'left' ? ` post-meta-left` : ` post-meta-center`),
|
||||
body: newsletter.get('body_font_category') === 'sans_serif' ? `post-content-sans-serif` : `post-content`
|
||||
},
|
||||
|
||||
@ -387,13 +387,18 @@ figure blockquote p {
|
||||
padding-bottom: 20px;
|
||||
color: #15212A;
|
||||
font-size: 17px;
|
||||
line-height: 1.3em;
|
||||
line-height: 1.6em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-subtitle-serif {
|
||||
.post-subtitle-serif-serif {
|
||||
font-family: Georgia, serif;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-subtitle-serif-sans {
|
||||
font-size: 18px;
|
||||
font-family: Georgia, serif;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.post-subtitle-left {
|
||||
|
||||
@ -2073,11 +2073,28 @@ describe('Email renderer', function () {
|
||||
title: 'post-title post-title-serif post-title-left',
|
||||
titleLink: 'post-title-link post-title-link-left',
|
||||
meta: 'post-meta post-meta-left',
|
||||
subtitle: 'post-subtitle post-subtitle-left',
|
||||
subtitle: 'post-subtitle post-subtitle-serif-sans post-subtitle-left',
|
||||
body: 'post-content-sans-serif'
|
||||
});
|
||||
});
|
||||
|
||||
it('has correct subtitle classes for serif title+body', async function () {
|
||||
const html = '';
|
||||
const post = createModel({
|
||||
posts_meta: createModel({}),
|
||||
loaded: ['posts_meta'],
|
||||
published_at: new Date(0)
|
||||
});
|
||||
const newsletter = createModel({
|
||||
title_font_category: 'serif',
|
||||
title_alignment: 'left',
|
||||
body_font_category: 'serif',
|
||||
show_subtitle: true
|
||||
});
|
||||
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
|
||||
assert.equal(data.classes.subtitle, 'post-subtitle post-subtitle-serif-serif post-subtitle-left');
|
||||
});
|
||||
|
||||
it('show comment CTA is enabled if labs disabled', async function () {
|
||||
labsEnabled = false;
|
||||
settings.comments_enabled = 'all';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user