From ab1f175a059406bbdca715c577dc343b312406de Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Thu, 12 Dec 2024 14:22:31 +0800 Subject: [PATCH 1/3] Used theme version for checking custom fonts support --- .../site/designAndBranding/ThemeSettings.tsx | 56 +++++++++++-------- 1 file changed, 34 insertions(+), 22 deletions(-) diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx index e952292d006..30999efe2ac 100644 --- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ThemeSetting from './ThemeSetting'; -import useCustomFonts from '../../../../hooks/useCustomFonts'; +import semver from 'semver'; import useFeatureFlag from '../../../../hooks/useFeatureFlag'; import {CustomThemeSetting} from '@tryghost/admin-x-framework/api/customThemeSettings'; import {Form} from '@tryghost/admin-x-design-system'; @@ -17,28 +17,31 @@ interface ThemeSettingsProps { } interface ThemeSettingsMap { - [key: string]: string[]; + [key: string]: { + settings: string[]; + version: string; + }; } const themeSettingsMap: ThemeSettingsMap = { - source: ['title_font', 'body_font'], - casper: ['title_font', 'body_font'], - alto: ['title_font', 'body_font'], - bulletin: ['title_font', 'body_font'], - dawn: ['title_font', 'body_font'], - digest: ['title_font', 'body_font'], - dope: ['title_font', 'body_font'], - ease: ['title_font', 'body_font'], - edge: ['title_font', 'body_font'], - edition: ['title_font', 'body_font'], - episode: ['typography'], - headline: ['title_font', 'body_font'], - journal: ['title_font', 'body_font'], - london: ['title_font', 'body_font'], - ruby: ['title_font', 'body_font'], - solo: ['typography'], - taste: ['style'], - wave: ['title_font', 'body_font'] + source: {settings: ['title_font', 'body_font'], version: '1.4.0'}, + casper: {settings: ['title_font', 'body_font'], version: '5.8.0'}, + alto: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + bulletin: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + dawn: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + digest: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + dope: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + ease: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + edge: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + edition: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + episode: {settings: ['typography'], version: '1.1.0'}, + headline: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + journal: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + london: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + ruby: {settings: ['title_font', 'body_font'], version: '1.1.0'}, + solo: {settings: ['typography'], version: '1.1.0'}, + taste: {settings: ['style'], version: '1.1.0'}, + wave: {settings: ['title_font', 'body_font'], version: '1.1.0'} }; const ThemeSettings: React.FC = ({sections, updateSetting}) => { @@ -46,8 +49,17 @@ const ThemeSettings: React.FC = ({sections, updateSetting}) const activeTheme = themesData?.themes.find((theme: Theme) => theme.active); const activeThemeName = activeTheme?.package.name?.toLowerCase() || ''; const activeThemeAuthor = activeTheme?.package.author?.name || ''; + const activeThemeVersion = activeTheme?.package.version; const hasCustomFonts = useFeatureFlag('customFonts'); - const {supportsCustomFonts} = useCustomFonts(); + const supportsCustomFonts = (() => { + const themeConfig = themeSettingsMap[activeThemeName]; + + if (!themeConfig || !activeThemeVersion) { + return false; + } + + return semver.gte(activeThemeVersion, themeConfig.version); + })(); return ( <> @@ -71,7 +83,7 @@ const ThemeSettings: React.FC = ({sections, updateSetting}) // hides typography related theme settings from official themes // should be removed once we remove the settings from the themes in 6.0 if (hasCustomFonts) { - const hidingSettings = themeSettingsMap[activeThemeName]; + const hidingSettings = themeSettingsMap[activeThemeName].settings; if (hidingSettings && hidingSettings.includes(setting.key) && activeThemeAuthor === 'Ghost Foundation' && supportsCustomFonts) { spaceClass += ' hidden'; } From 1555b8953f2263b18c8e23895d1c31773f62eee9 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Mon, 16 Dec 2024 13:07:12 +0800 Subject: [PATCH 2/3] Removed unnecessary active theme requests --- .../components/settings/site/theme/AdvancedThemeSettings.tsx | 3 --- .../src/components/settings/site/theme/ThemeInstalledModal.tsx | 3 --- 2 files changed, 6 deletions(-) diff --git a/apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx b/apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx index 16c9f96b9a6..9c78f8e8a40 100644 --- a/apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx @@ -1,7 +1,6 @@ import InvalidThemeModal, {FatalErrors} from './InvalidThemeModal'; import NiceModal from '@ebay/nice-modal-react'; import React from 'react'; -import useCustomFonts from '../../../../hooks/useCustomFonts'; import {Button, ButtonProps, ConfirmationModal, List, ListItem, Menu, ModalPage, showToast} from '@tryghost/admin-x-design-system'; import {JSONError} from '@tryghost/admin-x-framework/errors'; import {Theme, isActiveTheme, isDefaultTheme, isDeletableTheme, isLegacyTheme, useActivateTheme, useDeleteTheme} from '@tryghost/admin-x-framework/api/themes'; @@ -49,13 +48,11 @@ const ThemeActions: React.FC = ({ }) => { const {mutateAsync: activateTheme} = useActivateTheme(); const {mutateAsync: deleteTheme} = useDeleteTheme(); - const {refreshActiveThemeData} = useCustomFonts(); const handleError = useHandleError(); const handleActivate = async () => { try { await activateTheme(theme.name); - refreshActiveThemeData(); showToast({ title: 'Theme activated', type: 'success', diff --git a/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx index 0decc316b5b..c1cea32d195 100644 --- a/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx +++ b/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx @@ -1,6 +1,5 @@ import NiceModal from '@ebay/nice-modal-react'; import React, {ReactNode, useState} from 'react'; -import useCustomFonts from '../../../../hooks/useCustomFonts'; import {Button, ConfirmationModalContent, Heading, List, ListItem, showToast} from '@tryghost/admin-x-design-system'; import {InstalledTheme, ThemeProblem, useActivateTheme} from '@tryghost/admin-x-framework/api/themes'; import {useHandleError} from '@tryghost/admin-x-framework/hooks'; @@ -43,7 +42,6 @@ const ThemeInstalledModal: React.FC<{ onActivate?: () => void; }> = ({title, prompt, installedTheme, onActivate}) => { const {mutateAsync: activateTheme} = useActivateTheme(); - const {refreshActiveThemeData} = useCustomFonts(); const handleError = useHandleError(); let errorPrompt = null; @@ -87,7 +85,6 @@ const ThemeInstalledModal: React.FC<{ try { const resData = await activateTheme(installedTheme.name); const updatedTheme = resData.themes[0]; - refreshActiveThemeData(); showToast({ title: 'Theme activated', From d8afad743798a2952ab8a69a3c4d9fa3e0590abc Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Mon, 16 Dec 2024 13:16:35 +0800 Subject: [PATCH 3/3] Fixed a test --- .../test/acceptance/site/design.test.ts | 42 ++----------------- 1 file changed, 3 insertions(+), 39 deletions(-) diff --git a/apps/admin-x-settings/test/acceptance/site/design.test.ts b/apps/admin-x-settings/test/acceptance/site/design.test.ts index 7e6ac1024d2..b8741d3db65 100644 --- a/apps/admin-x-settings/test/acceptance/site/design.test.ts +++ b/apps/admin-x-settings/test/acceptance/site/design.test.ts @@ -418,6 +418,7 @@ test.describe('Design settings', async () => { name: 'headline', package: { name: 'headline', + version: '1.1.0', author: { name: 'Ghost Foundation' } @@ -449,19 +450,7 @@ test.describe('Design settings', async () => { key: 'body_font' } ] - }}, - activeTheme: { - method: 'GET', - path: '/themes/active/', - response: { - themes: [{ - name: 'casper', - package: {}, - active: true, - templates: [] - }] - } - } + }} }}); await page.goto('/'); @@ -539,32 +528,7 @@ test.describe('Design settings', async () => { key: 'body_font' } ] - }}, - activeTheme: { - method: 'GET', - path: '/themes/active/', - response: { - themes: [{ - name: 'casper', - package: {}, - active: true, - templates: [], - warnings: [{ - fatal: false, - level: 'warning', - rule: 'Missing support for custom fonts', - details: 'CSS variables for Ghost font settings are not present: --gh-font-heading, --gh-font-body', - regex: {}, - failures: [ - { - ref: 'styles' - } - ], - code: 'GS051-CUSTOM-FONTS' - }] - }] - } - } + }} }}); await page.goto('/');