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
2024-05-29 17:59:25 +02:00 · 2024-05-29 17:59:25 +02:00 · acac7801f4
commit acac7801f4
parent 4ef1dd2146
13 changed files with 35 additions and 29 deletions
--- 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 = () => {
--- 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})}
                        />
                    }
--- 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',
--- 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"
--- 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) {
--- 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
--- 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;

--- 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;
 }
--- 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];
--- 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`
            },
--- 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;
    }

--- 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}}
--- 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'
            });
        });