Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Used theme version for checking custom fonts support #21891

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Used theme version for checking custom fonts support #21891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab1f175
Used theme version for checking custom fonts support
minimaluminium Dec 12, 2024
1555b89
Removed unnecessary active theme requests
minimaluminium Dec 16, 2024
d8afad7
Fixed a test
minimaluminium Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 34 additions & 22 deletions apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,37 +17,49 @@ 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<ThemeSettingsProps> = ({sections, updateSetting}) => {
const {data: themesData} = useBrowseThemes();
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 (
<>
Expand All @@ -71,7 +83,7 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({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';
}
Expand Down
3 changes: 0 additions & 3 deletions apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -49,13 +48,11 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
}) => {
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',
Expand Down
3 changes: 0 additions & 3 deletions apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand Down
42 changes: 3 additions & 39 deletions apps/admin-x-settings/test/acceptance/site/design.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,7 @@ test.describe('Design settings', async () => {
name: 'headline',
package: {
name: 'headline',
version: '1.1.0',
author: {
name: 'Ghost Foundation'
}
Expand Down Expand Up @@ -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('/');
Expand Down Expand Up @@ -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: <code>--gh-font-heading</code>, <code>--gh-font-body</code>',
regex: {},
failures: [
{
ref: 'styles'
}
],
code: 'GS051-CUSTOM-FONTS'
}]
}]
}
}
}}
}});

await page.goto('/');
Expand Down
Loading