From 87c12b511337d5ce09867228eb836188a6b66a26 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Thu, 18 Jul 2024 21:01:43 +0800 Subject: [PATCH] Fixed blockquote horizontal spacing on Outlook (#20625) ref DES-571 - padding does not work well with paragraph inside blockquote as horizontal spacing on Outlook - using margin instead of padding makes sure the spacing is consistent across Outlook versions --- .../__snapshots__/email-previews.test.js.snap | 42 ++++---- .../__snapshots__/batch-sending.test.js.snap | 96 ++++++++++++------- .../__snapshots__/cards.test.js.snap | 22 +++-- .../lib/email-templates/partials/styles.hbs | 13 ++- 4 files changed, 112 insertions(+), 61 deletions(-) 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 2cf9c0d045..ab36fdd179 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 @@ -420,7 +420,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -431,7 +432,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -776,7 +778,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": "24519", + "content-length": "24595", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1110,7 +1112,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -1121,7 +1124,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -1280,7 +1284,7 @@ table.body h2 span { -

HTML Ipsum Presents

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

#header h1 a{display: block;width: 300px;height: 80px;}
+

HTML Ipsum Presents

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

#header h1 a{display: block;width: 300px;height: 80px;}
@@ -1488,7 +1492,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": "29301", + "content-length": "29375", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1853,7 +1857,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -1864,7 +1869,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -2216,7 +2222,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": "24273", + "content-length": "24349", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2910,7 +2916,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -2921,7 +2928,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -3287,7 +3295,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": "25056", + "content-length": "25132", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -4007,7 +4015,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -4018,7 +4027,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -4384,7 +4394,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": "25056", + "content-length": "25132", "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 939df78f6f..d7b0bb87d4 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 @@ -313,7 +313,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -324,7 +325,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -992,7 +994,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -1003,7 +1006,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -1647,7 +1651,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -1658,7 +1663,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -2302,7 +2308,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -2313,7 +2320,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -2957,7 +2965,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -2968,7 +2977,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -3560,7 +3570,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -3571,7 +3582,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -4215,7 +4227,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -4226,7 +4239,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -4964,7 +4978,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -4975,7 +4990,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -7033,7 +7049,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -7044,7 +7061,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -7833,7 +7851,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -7844,7 +7863,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -8543,7 +8563,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -8554,7 +8575,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -9253,7 +9275,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -9264,7 +9287,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -9963,7 +9987,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -9974,7 +9999,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -10673,7 +10699,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -10684,7 +10711,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -11383,7 +11411,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -11394,7 +11423,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -12040,7 +12070,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -12051,7 +12082,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { 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 cbe7d94376..a30d6ed8ee 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 @@ -313,7 +313,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -324,7 +325,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -968,7 +970,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -979,7 +982,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -1623,7 +1627,8 @@ table.body h2 span { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -1634,7 +1639,8 @@ table.body h2 span { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr { @@ -1823,7 +1829,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing -

This is just a simple paragraph, no frills.

This is block quote

This is a...different block quote

This is a heading!

Here's a smaller heading.

\\"Cows
A lovely cow

A heading

+

This is just a simple paragraph, no frills.

This is block quote

This is a...different block quote

This is a heading!

Here's a smaller heading.

\\"Cows
A lovely cow

A heading

and a paragraph (in markdown!)

@@ -2030,7 +2036,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing -

Some text.

A blockquote

Some more text.

console.log('Hello world!');

A tiny little script.

+

Some text.

A blockquote

Some more text.

console.log('Hello world!');

A tiny little script.

diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index 4731420ea8..4f2b39ea48 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -175,13 +175,14 @@ blockquote.kg-blockquote-alt { } blockquote p { - margin: 2em 0; - padding: 0 25px; + margin: 2em 25px; + padding: 0 !important; font-size: 1em; } blockquote.kg-blockquote-alt p { - padding: 0 50px; + margin-right: 50px; + margin-left: 50px; } blockquote small { @@ -1581,7 +1582,8 @@ a[data-flickr-embed] img { } table.body blockquote p { - padding: 0 15px !important; + margin-right: 15px !important; + margin-left: 15px !important; } table.body blockquote.kg-blockquote-alt { @@ -1592,7 +1594,8 @@ a[data-flickr-embed] img { } table.body blockquote.kg-blockquote-alt p { - padding: 0 20px !important; + margin-right: 20px !important; + margin-left: 20px !important; } table.body hr {