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 () {