From 73a88d0c13b642afbbd42cc5e481ab97be8ad022 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 19 Jun 2024 11:57:29 +0200 Subject: [PATCH] Refined newsletter typography (#20406) DES-459 The font size of subtitles/excerpts in newsletters was similar to the body font size which doesn't reflect the content hierarchy appropriately. Also, the spacing should be adjusted to represent that the title and the subtitle belong together. --- .../newsletters/NewsletterPreviewContent.tsx | 20 +++++++++---- .../__snapshots__/email-previews.test.js.snap | 20 ++++++------- .../__snapshots__/batch-sending.test.js.snap | 30 +++++++++---------- .../__snapshots__/cards.test.js.snap | 6 ++-- ghost/email-service/lib/EmailRenderer.js | 4 +-- .../email-templates/partials/styles-old.hbs | 27 +++++++++++++---- .../email-service/test/email-renderer.test.js | 6 ++-- 7 files changed, 68 insertions(+), 45 deletions(-) diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx index af6b10886d..e5f4642296 100644 --- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx +++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx @@ -104,13 +104,20 @@ const NewsletterPreviewContent: React.FC<{ let excerptClasses = 'mb-5 text-pretty leading-[1.7] text-black'; if (titleFontCategory === 'serif' && bodyFontCategory === 'serif') { - excerptClasses = clsx(excerptClasses, 'font-serif text-[1.8rem]'); + excerptClasses = clsx(excerptClasses, 'mb-8 font-serif text-[2.0rem] leading-tight'); } else if (titleFontCategory !== 'serif' && bodyFontCategory === 'serif') { - excerptClasses = clsx(excerptClasses, 'text-[1.7rem] tracking-tight'); + excerptClasses = clsx(excerptClasses, 'mb-8 text-[1.7rem] leading-tight tracking-tight'); } else if (titleFontCategory === 'serif' && bodyFontCategory !== 'serif') { - excerptClasses = clsx(excerptClasses, 'font-serif text-[1.8rem]'); + excerptClasses = clsx(excerptClasses, 'mb-8 font-serif text-[2.0rem] leading-tight'); } else { - excerptClasses = clsx(excerptClasses, 'text-[1.7rem] tracking-tight'); + excerptClasses = clsx(excerptClasses, 'mb-8 text-[1.9rem] leading-tight tracking-tight'); + } + + if (titleAlignment === 'center') { + excerptClasses = clsx( + excerptClasses, + 'text-center' + ); } return ( @@ -140,9 +147,10 @@ const NewsletterPreviewContent: React.FC<{ {showPostTitleSection && (

Your email newsletter

diff --git a/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap b/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap index e1f4ef0621..c36be50fb4 100644 --- a/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap +++ b/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap @@ -495,7 +495,7 @@ table.body h2 span { - + Post with email-only card @@ -713,7 +713,7 @@ exports[`Email Preview API Read can read post email preview with email card and Object { "access-control-allow-origin": "http://127.0.0.1:2369", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0", - "content-length": "23508", + "content-length": "23530", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1122,7 +1122,7 @@ table.body h2 span { - + HTML Ipsum @@ -1360,7 +1360,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head Object { "access-control-allow-origin": "http://127.0.0.1:2369", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0", - "content-length": "28319", + "content-length": "28343", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1800,7 +1800,7 @@ table.body h2 span { - + Post with email-only card @@ -2025,7 +2025,7 @@ exports[`Email Preview API Read has custom content transformations for email com Object { "access-control-allow-origin": "http://127.0.0.1:2369", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0", - "content-length": "23262", + "content-length": "23284", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2801,7 +2801,7 @@ table.body h2 span { - + Post with email-only card @@ -3033,7 +3033,7 @@ exports[`Email Preview API Read uses the newsletter provided through ?newsletter Object { "access-control-allow-origin": "http://127.0.0.1:2369", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0", - "content-length": "24023", + "content-length": "24045", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -3835,7 +3835,7 @@ table.body h2 span { - + Post with email-only card @@ -4067,7 +4067,7 @@ exports[`Email Preview API Read uses the posts newsletter by default 4: [headers Object { "access-control-allow-origin": "http://127.0.0.1:2369", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0", - "content-length": "24023", + "content-length": "24045", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, diff --git a/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap b/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap index c0e91ba2b9..842178e287 100644 --- a/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap +++ b/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap @@ -395,7 +395,7 @@ table.body h2 span { - + A random test post @@ -1001,7 +1001,7 @@ table.body h2 span { - + This is a test post title @@ -1593,7 +1593,7 @@ table.body h2 span { - + This is a test post title @@ -2185,7 +2185,7 @@ table.body h2 span { - + This is a test post title @@ -3317,7 +3317,7 @@ table.body h2 span { - + This is a test post title @@ -3909,7 +3909,7 @@ table.body h2 span { - + This is a test post title @@ -4595,7 +4595,7 @@ table.body h2 span { - + This is a test post title @@ -6601,7 +6601,7 @@ table.body h2 span { - + This is the main post title @@ -7338,7 +7338,7 @@ table.body h2 span { - + This is a test post title @@ -7985,7 +7985,7 @@ table.body h2 span { - + This is a test post title @@ -8632,7 +8632,7 @@ table.body h2 span { - + This is a test post title @@ -9279,7 +9279,7 @@ table.body h2 span { - + This is a test post title @@ -9926,7 +9926,7 @@ table.body h2 span { - + This is a test post title @@ -10573,7 +10573,7 @@ table.body h2 span { - + A random test post @@ -11167,7 +11167,7 @@ table.body h2 span { - + A random test post diff --git a/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap b/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap index 2c5c818a65..b55f71425b 100644 --- a/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap +++ b/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap @@ -395,7 +395,7 @@ table.body h2 span { - + A random test post @@ -987,7 +987,7 @@ table.body h2 span { - + A random test post @@ -1607,7 +1607,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing - + A random test post diff --git a/ghost/email-service/lib/EmailRenderer.js b/ghost/email-service/lib/EmailRenderer.js index 143aa6a91d..10463dfa5e 100644 --- a/ghost/email-service/lib/EmailRenderer.js +++ b/ghost/email-service/lib/EmailRenderer.js @@ -1097,9 +1097,9 @@ class EmailRenderer { footerContent: newsletter.get('footer_content'), classes: { - title: 'post-title' + (newsletter.get('title_font_category') === 'serif' ? ` post-title-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-title-left` : ``), + title: 'post-title' + ` ` + (post.get('custom_excerpt') ? 'post-title-with-excerpt' : 'post-title-no-excerpt') + (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` : ``), - excerpt: 'post-excerpt' + ` ` + excerptFontClass + (newsletter.get('title_alignment') === 'left' ? ` post-excerpt-left` : ``), + excerpt: 'post-excerpt' + ` ` + (newsletter.get('show_feature_image') && !!postFeatureImage ? 'post-excerpt-with-feature-image' : 'post-excerpt-no-feature-image') + ` ` + excerptFontClass + (newsletter.get('title_alignment') === 'left' ? ` post-excerpt-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` }, diff --git a/ghost/email-service/lib/email-templates/partials/styles-old.hbs b/ghost/email-service/lib/email-templates/partials/styles-old.hbs index d3cd20b295..ccf76f8693 100644 --- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs @@ -353,12 +353,20 @@ figure blockquote p { } .post-title { - padding-bottom: 16px; font-size: 36px; line-height: 1.1em; font-weight: 700; text-align: center; } + +.post-title-with-excerpt { + padding-bottom: 8px; +} + +.post-title-no-excerpt { + padding-bottom: 16px; +} + .post-title-serif { font-family: Georgia, serif; letter-spacing: -0.01em; @@ -384,20 +392,27 @@ figure blockquote p { .post-excerpt { margin: 0; - padding-bottom: 20px; color: #15212A; - font-size: 17px; - line-height: 1.6em; + font-size: 19px; + line-height: 1.4em; text-align: center; } +.post-excerpt-with-feature-image { + padding-bottom: 28px; +} + +.post-excerpt-no-feature-image { + padding-bottom: 32px; +} + .post-excerpt-serif-serif { font-family: Georgia, serif; - font-size: 18px; + font-size: 20px; } .post-excerpt-serif-sans { - font-size: 18px; + font-size: 20px; font-family: Georgia, serif; } diff --git a/ghost/email-service/test/email-renderer.test.js b/ghost/email-service/test/email-renderer.test.js index 92a3bd82ad..677a36bfaf 100644 --- a/ghost/email-service/test/email-renderer.test.js +++ b/ghost/email-service/test/email-renderer.test.js @@ -2070,10 +2070,10 @@ describe('Email renderer', function () { }); const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false}); assert.deepEqual(data.classes, { - title: 'post-title post-title-serif post-title-left', + title: 'post-title post-title-no-excerpt post-title-serif post-title-left', titleLink: 'post-title-link post-title-link-left', meta: 'post-meta post-meta-left', - excerpt: 'post-excerpt post-excerpt-serif-sans post-excerpt-left', + excerpt: 'post-excerpt post-excerpt-no-feature-image post-excerpt-serif-sans post-excerpt-left', body: 'post-content-sans-serif' }); }); @@ -2092,7 +2092,7 @@ describe('Email renderer', function () { show_excerpt: true }); const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false}); - assert.equal(data.classes.excerpt, 'post-excerpt post-excerpt-serif-serif post-excerpt-left'); + assert.equal(data.classes.excerpt, 'post-excerpt post-excerpt-no-feature-image post-excerpt-serif-serif post-excerpt-left'); }); it('show comment CTA is enabled if labs disabled', async function () {