From acac7801f46789ae2c40eaf4ffa182f38be7e85e Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Wed, 29 May 2024 17:59:25 +0200
Subject: [PATCH] Split subhead feature into two feature flags (#20279)

REF MOM-119
- Split subhead feature flag into two: editorSubtitle and
newsletterSubtitle
- Updated UI copy, feature flag names and class names from subhead to
subtitle
---
 .../settings/advanced/labs/AlphaFeatures.tsx           | 10 +++++++---
 .../email/newsletters/NewsletterDetailModal.tsx        |  6 +++---
 .../email/newsletters/NewsletterPreviewContent.tsx     |  6 +++---
 .../admin/app/components/gh-koenig-editor-lexical.hbs  |  6 +++---
 ghost/admin/app/components/gh-koenig-editor-lexical.js |  6 +++---
 ghost/admin/app/components/gh-post-settings-menu.hbs   |  2 +-
 ghost/admin/app/services/feature.js                    |  3 ++-
 ghost/admin/app/styles/layouts/editor.css              |  4 ++--
 ghost/core/core/shared/labs.js                         |  3 ++-
 ghost/email-service/lib/EmailRenderer.js               |  2 +-
 .../lib/email-templates/partials/styles-old.hbs        |  8 ++++----
 .../email-service/lib/email-templates/template-old.hbs |  6 +++---
 ghost/email-service/test/email-renderer.test.js        |  2 +-
 13 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
index 5c632a9e74..b0f1859bd6 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
@@ -68,9 +68,13 @@ const features = [{
     description: '(Highly) Experimental support for ActivityPub.',
     flag: 'ActivityPub'
 },{
-    title: 'Subhead',
-    description: 'Using custom excerpts as subheads in editor and newsletter',
-    flag: 'subhead'
+    title: 'Subtitle in editor',
+    description: 'Using custom excerpt as subtitle in editor',
+    flag: 'editorSubtitle'
+},{
+    title: 'Subtitle in newsletter',
+    description: 'Showing subtitle in newsletter',
+    flag: 'newsletterSubtitle'
 }];
 
 const AlphaFeatures: React.FC = () => {
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
index ebb5bf11b4..bf4d768cdf 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
@@ -103,7 +103,7 @@ const Sidebar: React.FC<{
     const {mutateAsync: uploadImage} = useUploadImage();
     const [selectedTab, setSelectedTab] = useState('generalSettings');
     const hasEmailCustomization = useFeatureFlag('emailCustomization');
-    const hasSubhead = useFeatureFlag('subhead');
+    const hasNewsletterSubtitle = useFeatureFlag('newsletterSubtitle');
     const {localSettings} = useSettingGroup();
     const [siteTitle] = getSettingValues(localSettings, ['title']) as string[];
     const handleError = useHandleError();
@@ -424,11 +424,11 @@ const Sidebar: React.FC<{
                         title='Body style'
                         onSelect={option => updateNewsletter({body_font_category: option?.value})}
                     />
-                    {hasSubhead && 
+                    {hasNewsletterSubtitle && 
                         <Toggle
                             checked={newsletter.show_subhead}
                             direction="rtl"
-                            label='Subhead'
+                            label='Subtitle'
                             onChange={e => updateNewsletter({show_subhead: e.target.checked})}
                         />
                     }
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 dbd46cfe59..e5c32a0c87 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
@@ -77,7 +77,7 @@ const NewsletterPreviewContent: React.FC<{
     const showHeader = headerIcon || headerTitle;
     const {config} = useGlobalData();
     const hasNewEmailAddresses = useFeatureFlag('newEmailAddresses');
-    const hasSubhead = useFeatureFlag('subhead');
+    const hasNewsletterSubtitle = useFeatureFlag('newsletterSubtitle');
 
     const currentDate = new Date().toLocaleDateString('default', {
         year: 'numeric',
@@ -134,8 +134,8 @@ const NewsletterPreviewContent: React.FC<{
                                     )} style={{color: titleColor}}>
                                         Your email newsletter
                                     </h2>
-                                    {(hasSubhead && showSubhead) && (
-                                        <p className="mb-4 text-[1.6rem] leading-[1.7] text-black">A subhead that highlights the key points of your newsletter.</p>
+                                    {(hasNewsletterSubtitle && showSubhead) && (
+                                        <p className="mb-4 text-[1.6rem] leading-[1.7] text-black">A subtitle that highlights the key points of your newsletter.</p>
                                     )}
                                     <div className={clsx(
                                         'flex w-full justify-between text-center text-md leading-none text-grey-700',
diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
index 3c05f1fd7f..f517f5f009 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
@@ -57,10 +57,10 @@
                 data-test-editor-title-input={{true}}
             />
 
-            {{#if (feature 'subhead')}}
+            {{#if (feature 'editorSubtitle')}}
                 <GhTextarea
-                    @class="gh-editor-subhead"
-                    @placeholder="Add a subhead..."
+                    @class="gh-editor-subtitle"
+                    @placeholder="Add a subtitle..."
                     @shouldFocus={{false}}
                     @tabindex="1"
                     @autoExpand=".gh-koenig-editor"
diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.js b/ghost/admin/app/components/gh-koenig-editor-lexical.js
index 6426944c3f..4836f7c80f 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.js
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.js
@@ -117,10 +117,10 @@ export default class GhKoenigEditorReactComponent extends Component {
     // - Enter, creating an empty paragraph when editor is not empty
     @action
     onTitleKeydown(event) {
-        if (this.feature.get('subhead')) {
+        if (this.feature.get('editorSubtitle')) {
             if (event.key === 'Enter') {
                 event.preventDefault();
-                const subheadElement = document.querySelector('.gh-editor-subhead');
+                const subheadElement = document.querySelector('.gh-editor-subtitle');
                 if (subheadElement) {
                     subheadElement.focus();
                 }
@@ -150,7 +150,7 @@ export default class GhKoenigEditorReactComponent extends Component {
         }
     }
 
-    // Subheader ("excerpt") Actions -------------------------------------------
+    // Subhead ("excerpt") Actions -------------------------------------------
 
     @action
     updateExcerpt(event) {
diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index 4367293fa5..99c9aa24b5 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -93,7 +93,7 @@
                             {{/if}}
                         {{/if}}
 
-                        {{#unless (feature 'subhead')}}
+                        {{#unless (feature 'editorSubtitle')}}
                         <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="customExcerpt">
                             <label for="custom-excerpt">Excerpt</label>
                             <GhTextarea
diff --git a/ghost/admin/app/services/feature.js b/ghost/admin/app/services/feature.js
index 84a8e1834c..94dbf381f9 100644
--- a/ghost/admin/app/services/feature.js
+++ b/ghost/admin/app/services/feature.js
@@ -83,7 +83,8 @@ export default class FeatureService extends Service {
     @feature('onboardingChecklist') onboardingChecklist;
     @feature('ActivityPub') ActivityPub;
     @feature('internalLinking') internalLinking;
-    @feature('subhead') subhead;
+    @feature('editorSubtitle') editorSubtitle;
+    @feature('newsletterSubtitle') newsletterSubtitle;
 
     _user = null;
 
diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css
index 42302f7edd..6b0f8545c8 100644
--- a/ghost/admin/app/styles/layouts/editor.css
+++ b/ghost/admin/app/styles/layouts/editor.css
@@ -788,7 +788,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     height: 2.4rem;
 }
 
-.gh-editor-subhead {
+.gh-editor-subtitle {
     display: block;
     width: 100%;
     max-width: unset;
@@ -806,7 +806,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     box-shadow: none;
 }
 
-.gh-editor-subhead:focus {
+.gh-editor-subtitle:focus {
     box-shadow: none !important;
     border: none !important;
 }
diff --git a/ghost/core/core/shared/labs.js b/ghost/core/core/shared/labs.js
index 0eaee7caa5..e0b24246b6 100644
--- a/ghost/core/core/shared/labs.js
+++ b/ghost/core/core/shared/labs.js
@@ -52,7 +52,8 @@ const ALPHA_FEATURES = [
     'importMemberTier',
     'lexicalIndicators',
     'adminXDemo',
-    'subhead'
+    'editorSubtitle',
+    'newsletterSubtitle'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];
diff --git a/ghost/email-service/lib/EmailRenderer.js b/ghost/email-service/lib/EmailRenderer.js
index e81c7d88ee..63856ee31b 100644
--- a/ghost/email-service/lib/EmailRenderer.js
+++ b/ghost/email-service/lib/EmailRenderer.js
@@ -1079,7 +1079,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` : ``),
-                subhead: 'post-subhead' + (newsletter.get('title_alignment') === 'left' ? ` post-subhead-left` : ``),
+                subtitle: 'post-subtitle' + (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`
             },
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 14057a5ba4..79075d5f4d 100644
--- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs
+++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs
@@ -376,12 +376,12 @@ figure blockquote p {
     text-align: left;
 }
 
-.post-subhead-wrapper {
+.post-subtitle-wrapper {
     width: 100%;
     max-width: 600px !important;
 }
 
-.post-subhead {
+.post-subtitle {
     margin: 0;
     padding-bottom: 20px;
     color: #15212A;
@@ -390,7 +390,7 @@ figure blockquote p {
     text-align: center;
 }
 
-.post-subhead-left {
+.post-subtitle-left {
     text-align: left;
 }
 
@@ -1300,7 +1300,7 @@ a[data-flickr-embed] img {
         font-size: 16px;
     }
 
-    table.body .post-subhead {
+    table.body .post-subtitle {
         font-size: 16px !important;
     }
 
diff --git a/ghost/email-service/lib/email-templates/template-old.hbs b/ghost/email-service/lib/email-templates/template-old.hbs
index e46bb047bb..b7a97e04b3 100644
--- a/ghost/email-service/lib/email-templates/template-old.hbs
+++ b/ghost/email-service/lib/email-templates/template-old.hbs
@@ -79,11 +79,11 @@
                                                     <a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
                                                 </td>
                                             </tr>
-                                            {{#hasFeature 'subhead'}}
+                                            {{#hasFeature 'newsletterSubtitle'}}
                                                 {{#if newsletter.showSubhead}}
                                                     <tr>
-                                                        <td class="post-subhead-wrapper" style="width: 100%">
-                                                            <p class="{{classes.subhead}}">Jonathan Haidt wrote a best-selling book about teens and social media. Not everyone buys its thesis.</p>
+                                                        <td class="post-subtitle-wrapper" style="width: 100%">
+                                                            <p class="{{classes.subtitle}}">Jonathan Haidt wrote a best-selling book about teens and social media. Not everyone buys its thesis.</p>
                                                         </td>
                                                     </tr>
                                                 {{/if}}
diff --git a/ghost/email-service/test/email-renderer.test.js b/ghost/email-service/test/email-renderer.test.js
index ad0f337d40..c7402c8b11 100644
--- a/ghost/email-service/test/email-renderer.test.js
+++ b/ghost/email-service/test/email-renderer.test.js
@@ -1995,7 +1995,7 @@ 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',
-                subhead: 'post-subhead post-subhead-left',
+                subtitle: 'post-subtitle post-subtitle-left',
                 body: 'post-content-sans-serif'
             });
         });