Added theme hide title+image incompatibility warning (#17416)

Refs https://github.com/TryGhost/Product/issues/3567

ghost/admin/app/components/gh-post-settings-menu.hbs

@@ -142,6 +142,12 @@
                                             <span class="input-toggle-component"></span>
                                         </div>
                                     </label>
+                                    {{#liquid-if (and (not this.post.showTitleAndFeatureImage) this.themeMissingShowTitleAndFeatureImage)}}
+                                        <div class="nav-list-item-notification">
+                                            Uh-oh. Looks like your theme doesn't support this feature.
+                                            <a href="#">Learn more</a>
+                                        </div>
+                                    {{/liquid-if}}
                                 </div>
                             </li>
                         {{/if}}

ghost/admin/app/components/gh-post-settings-menu.js

@@ -20,6 +20,7 @@ export default class GhPostSettingsMenu extends Component {
     @service slugGenerator;
     @service session;
     @service settings;
+    @service themeManagement;
     @service ui;
 
     @inject config;
@@ -163,6 +164,10 @@ export default class GhPostSettingsMenu extends Component {
         return true;
     }
 
+    get themeMissingShowTitleAndFeatureImage() {
+        return this.themeManagement.activeTheme.hasPageBuilderFeature('show_title_and_feature_image');
+    }
+
     willDestroyElement() {
         super.willDestroyElement(...arguments);
 

ghost/admin/app/models/theme.js

@@ -26,6 +26,66 @@ export default Model.extend({
         });
     }),
 
+    codedWarnings: computed('warnings.[]', function () {
+        const codedWarnings = {};
+
+        this.warnings.forEach((warning) => {
+            if (!codedWarnings[warning.code]) {
+                codedWarnings[warning.code] = [];
+            }
+
+            codedWarnings[warning.code].push(warning);
+        });
+
+        return codedWarnings;
+    }),
+
+    codedErrors: computed('errors.[]', function () {
+        const codedErrors = {};
+
+        this.errors.forEach((error) => {
+            if (!codedErrors[error.code]) {
+                codedErrors[error.code] = [];
+            }
+
+            codedErrors[error.code].push(error);
+        });
+
+        return codedErrors;
+    }),
+
+    codedErrorsAndWarnings: computed('codedErrors.[]', 'codedWarnings.[]', function () {
+        const codedErrorsAndWarnings = {};
+
+        Object.keys(this.codedErrors).forEach((code) => {
+            if (!codedErrorsAndWarnings[code]) {
+                codedErrorsAndWarnings[code] = [];
+            }
+            codedErrorsAndWarnings[code] = [...codedErrorsAndWarnings[code], ...this.codedErrors[code]];
+        });
+
+        Object.keys(this.codedWarnings).forEach((code) => {
+            if (!codedErrorsAndWarnings[code]) {
+                codedErrorsAndWarnings[code] = [];
+            }
+            codedErrorsAndWarnings[code] = [...codedErrorsAndWarnings[code], ...this.codedWarnings[code]];
+        });
+
+        return codedErrorsAndWarnings;
+    }),
+
+    hasPageBuilderFeature(feature) {
+        const failures = this.codedErrorsAndWarnings;
+
+        if (!failures['GS110-NO-MISSING-PAGE-BUILDER-USAGE']) {
+            return true;
+        }
+
+        return !failures['GS110-NO-MISSING-PAGE-BUILDER-USAGE'].some((failure) => {
+            return !failure.failures.some(({ref}) => ref === `@page.${feature}`);
+        });
+    },
+
     activate() {
         let adapter = this.store.adapterFor(this.constructor.modelName);
 

ghost/admin/app/styles/patterns/navlist.css

@@ -76,3 +76,13 @@ li.nav-list-item .arrow-right {
 li.nav-list-item .arrow-right path {
     fill: var(--midgrey);
 }
+
+.nav-list-item-notification {
+    margin: 0 2.4rem 2rem;
+    color: var(--middarkgrey);
+}
+
+.nav-list-item-notification a {
+    color: var(--green-d1);
+    font-weight: 500;
+}