From 428eebeaf80c545cb896775963f50cacfb191a3b Mon Sep 17 00:00:00 2001
From: Steve Larson <9larsons@gmail.com>
Date: Thu, 5 Dec 2024 10:39:41 -0600
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Added=20custom=20font=20support=20for?=
 =?UTF-8?q?=20themes=20(#21817)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref [DES-949](https://linear.app/tryghost/issue/DES-949/

https://github.com/TryGhost/Ghost/commit/177e604501728df2dd085cfd9bdf34f56257a221

This adds custom fonts feature allowing users to select heading and body
fonts for their themes from a curated list. This allows publishers to
have more control over their brand, and allows themes to have a wider
range of styles to appeal to different audiences.

Without custom fonts support, themes will continue to work as normal,
but users won't be able to customize their typography. As for the
official themes, all of them will support custom fonts.
---
 .../components/settings/advanced/labs/BetaFeatures.tsx    | 4 ----
 ghost/core/core/frontend/helpers/body_class.js            | 6 +++---
 ghost/core/core/shared/labs.js                            | 4 ++--
 ghost/core/package.json                                   | 2 +-
 .../e2e-api/admin/__snapshots__/settings.test.js.snap     | 2 +-
 ghost/core/test/unit/frontend/helpers/body_class.test.js  | 3 ++-
 yarn.lock                                                 | 8 ++++----
 7 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
index 71d3cb4ddd..97daa8bb2c 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
@@ -27,10 +27,6 @@ const BetaFeatures: React.FC = () => {
                 action={<FeatureToggle flag='i18n' />}
                 detail={<>Translate your membership flows into your publication language (<a className='text-green' href="https://github.com/TryGhost/Ghost/tree/main/ghost/i18n/locales" rel="noopener noreferrer" target="_blank">supported languages</a>). Don’t see yours? <a className='text-green' href="https://forum.ghost.org/t/help-translate-ghost-beta/37461" rel="noopener noreferrer" target="_blank">Get involved</a></>}
                 title='Portal translation' />
-            <LabItem
-                action={<FeatureToggle flag='customFonts' />}
-                detail={<>Enable new custom font settings. <a className='text-green' href="https://ghost.org/docs/themes/custom-settings/#setting-up-support-for-custom-fonts" rel="noopener noreferrer" target="_blank">Learn more &rarr;</a></>}
-                title='Custom fonts' />
             <LabItem
                 action={<div className='flex flex-col items-end gap-1'>
                     <FileUpload
diff --git a/ghost/core/core/frontend/helpers/body_class.js b/ghost/core/core/frontend/helpers/body_class.js
index e1d5bbca69..acd0913a29 100644
--- a/ghost/core/core/frontend/helpers/body_class.js
+++ b/ghost/core/core/frontend/helpers/body_class.js
@@ -48,12 +48,12 @@ module.exports = function body_class(options) { // eslint-disable-line camelcase
     if (labs.isSet('customFonts')) {
         // Check if if the request is for a site preview, in which case we **always** use the custom font values
         // from the passed in data, even when they're empty strings or settings cache has values.
-        const isSitePreview = options.data.site._preview;
+        const isSitePreview = options.data?.site?._preview ?? false;
         // Taking the fonts straight from the passed in data, as they can't be used from the
         // settings cache for the theme preview until the settings are saved. Once saved,
         // we need to use the settings cache to provide the correct CSS injection.
-        const headingFont = isSitePreview ? options.data.site.heading_font : settingsCache.get('heading_font');
-        const bodyFont = isSitePreview ? options.data.site.body_font : settingsCache.get('body_font');
+        const headingFont = isSitePreview ? options.data?.site?.heading_font : settingsCache.get('heading_font');
+        const bodyFont = isSitePreview ? options.data?.site?.body_font : settingsCache.get('body_font');
 
         if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
             (typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {
diff --git a/ghost/core/core/shared/labs.js b/ghost/core/core/shared/labs.js
index ce3942a1c6..0491d25561 100644
--- a/ghost/core/core/shared/labs.js
+++ b/ghost/core/core/shared/labs.js
@@ -20,7 +20,8 @@ const GA_FEATURES = [
     'themeErrorsNotification',
     'outboundLinkTagging',
     'announcementBar',
-    'newEmailAddresses'
+    'newEmailAddresses',
+    'customFonts'
 ];
 
 // NOTE: this allowlist is meant to be used to filter out any unexpected
@@ -32,7 +33,6 @@ const BETA_FEATURES = [
     'editorExcerpt',
     'ActivityPub',
     'importMemberTier',
-    'customFonts',
     'staff2fa',
     'contentVisibility'
 ];
diff --git a/ghost/core/package.json b/ghost/core/package.json
index 897fd62c97..ee117d5871 100644
--- a/ghost/core/package.json
+++ b/ghost/core/package.json
@@ -193,7 +193,7 @@
     "ghost-storage-base": "1.0.0",
     "glob": "8.1.0",
     "got": "11.8.6",
-    "gscan": "4.45.0",
+    "gscan": "4.46.0",
     "human-number": "2.0.4",
     "image-size": "1.1.1",
     "intl": "1.2.5",
diff --git a/ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap b/ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap
index c8e9f30e88..6bda643237 100644
--- a/ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap
+++ b/ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap
@@ -1155,7 +1155,7 @@ exports[`Settings API Edit Can edit a setting 2: [headers] 1`] = `
 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": "4445",
+  "content-length": "4466",
   "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/unit/frontend/helpers/body_class.test.js b/ghost/core/test/unit/frontend/helpers/body_class.test.js
index c39ac4ab2c..d35d2c17b9 100644
--- a/ghost/core/test/unit/frontend/helpers/body_class.test.js
+++ b/ghost/core/test/unit/frontend/helpers/body_class.test.js
@@ -31,7 +31,8 @@ describe('{{body_class}} helper', function () {
                     context: [],
                     settings: {active_theme: 'casper'}
                 }
-            }
+            },
+            site: {}
         };
     });
 
diff --git a/yarn.lock b/yarn.lock
index 1de088f15e..4340fe94c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18804,10 +18804,10 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
 
-gscan@4.45.0:
-  version "4.45.0"
-  resolved "https://registry.yarnpkg.com/gscan/-/gscan-4.45.0.tgz#8f033793b80ac65b64d666aac0891287c1e74909"
-  integrity sha512-d7yu7eGJSv7Xrd8lcBr7Bq76xeKe/LYkrRsRgE8vPRlmHxLPx7AlFb585vbS1Q64cQGwQhlAGusIeKesrfOa6w==
+gscan@4.46.0:
+  version "4.46.0"
+  resolved "https://registry.yarnpkg.com/gscan/-/gscan-4.46.0.tgz#682e5388061e35518e0906ca1285734347cbbe60"
+  integrity sha512-SHsvld0EbVW7X9aHqL6P2CG31yjvrX1IxrVePZTm4yKxH7jjD1QmSmL1Ol3sFAh5MRqtGBuj9mGfDC1nJI0e7w==
   dependencies:
     "@sentry/node" "^7.73.0"
     "@tryghost/config" "^0.2.18"