From f0d1cf2d66e59fadfa19cf4284be172740b5b2b6 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 28 Jul 2022 12:40:09 +0200
Subject: [PATCH] Updated newsletter paywall cta design  (#15111)

refs https://github.com/TryGhost/Team/issues/1705

- Made `max-width` smaller to avoid super-long lines
- Added `span` elements with `nowrap` to avoid one or two-word orphans

Co-authored-by: Rishabh <zrishabhgarg@gmail.com>
---
 .../core/server/services/mega/post-email-serializer.js    | 6 +++---
 .../server/services/mega/post-email-serializer.test.js    | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ghost/core/core/server/services/mega/post-email-serializer.js b/ghost/core/core/server/services/mega/post-email-serializer.js
index 296a810fbe..e066d61f18 100644
--- a/ghost/core/core/server/services/mega/post-email-serializer.js
+++ b/ghost/core/core/server/services/mega/post-email-serializer.js
@@ -350,9 +350,9 @@ function renderPaywallCTA(post) {
         style="position: relative; display: block; width: 100%; margin: 3em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #e5eff5;">
     <h2
         style="margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 26px;">
-        Subscribe to continue reading.</h2>
-    <p style="margin: 0 auto 1.5em auto; line-height: 1.6em; max-width: 480px;">Become a paid member of ${siteTitle} to get access to all
-        subscriber-only content.</p>
+        Subscribe to <span style="white-space: nowrap; font-size: 26px !important;">continue reading.</span></h2>
+    <p style="margin: 0 auto 1.5em auto; line-height: 1.6em; max-width: 440px;">Become a paid member of ${siteTitle} to get access to 
+    <span style="white-space: nowrap;">all subscriber-only content.</span></p>
     <div class="btn btn-accent" style="box-sizing: border-box; width: 100%; display: table;">
         <table border="0" cellspacing="0" cellpadding="0" align="center"
             style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
diff --git a/ghost/core/test/unit/server/services/mega/post-email-serializer.test.js b/ghost/core/test/unit/server/services/mega/post-email-serializer.test.js
index 6d3425569b..ad412b4b19 100644
--- a/ghost/core/test/unit/server/services/mega/post-email-serializer.test.js
+++ b/ghost/core/test/unit/server/services/mega/post-email-serializer.test.js
@@ -105,12 +105,12 @@ describe('Post Email Serializer', function () {
 
             let output = renderEmailForSegment(email, 'status:free');
             output.html.should.containEql(`<p>Free content</p>`);
-            output.html.should.containEql(`Subscribe to continue reading`);
+            output.html.should.containEql(`Subscribe to`);
             output.html.should.containEql(`https://site.com/blah/#/portal/signup`);
             output.html.should.not.containEql(`<p>Members content</p>`);
 
             output.plaintext.should.containEql(`Free content`);
-            output.plaintext.should.containEql(`Subscribe to continue reading`);
+            output.plaintext.should.containEql(`Subscribe to`);
             output.plaintext.should.containEql(`https://site.com/blah/#/portal/signup`);
             output.plaintext.should.not.containEql(`Members content`);
         });
@@ -146,12 +146,12 @@ describe('Post Email Serializer', function () {
 
             let output = renderEmailForSegment(email, 'status:free');
             output.html.should.containEql(`<p>Free content</p>`);
-            output.html.should.containEql(`Subscribe to continue reading`);
+            output.html.should.containEql(`Subscribe to`);
             output.html.should.containEql(`https://site.com/blah/#/portal/signup`);
             output.html.should.not.containEql(`<p>Members content</p>`);
 
             output.plaintext.should.containEql(`Free content`);
-            output.plaintext.should.containEql(`Subscribe to continue reading`);
+            output.plaintext.should.containEql(`Subscribe to`);
             output.plaintext.should.containEql(`https://site.com/blah/#/portal/signup`);
             output.plaintext.should.not.containEql(`Members content`);
         });