Skip to content

Commit

Permalink
Reverted custom fonts flag (#21645)
Browse files Browse the repository at this point in the history 
ref https://ghost.slack.com/archives/C025584CA/p1731950126867179

- moved custom fonts functionality back to a labs flag
- reverted gscan version to 4.45 which doesn't include the custom fonts
checks/warnings
  • Loading branch information
@9larsons
9larsons committed Nov 18, 2024
1 parent 254acb3 commit 34d267d
Show file tree
Hide file tree
Showing 13 changed files with 144 additions and 102 deletions.
4 changes: 4 additions & 0 deletions apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ const features = [{
title: 'Staff 2FA',
description: 'Enables email verification for staff logins',
flag: 'staff2fa'
}, {
title: 'Custom Fonts',
description: 'Enables new custom font settings',
flag: 'customFonts'
}];

const AlphaFeatures: React.FC = () => {
Expand Down
91 changes: 47 additions & 44 deletions apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import BehindFeatureFlag from '../../../BehindFeatureFlag';
import React, {useState} from 'react';
import UnsplashSelector from '../../../selectors/UnsplashSelector';
import clsx from 'clsx';
Expand Down Expand Up @@ -318,50 +319,52 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
}
</div>
</Form>
<Form className='-mt-4' gap='sm' margins='lg' title='Typography'>
<Select
className={selectFont(selectedHeadingFont.label, true)}
components={{Option, SingleValue}}
controlClasses={{control: '!min-h-16 !pl-2', option: '!pl-2'}}
hint={''}
menuShouldScrollIntoView={true}
options={customHeadingFonts}
selectedOption={selectedHeadingFont}
testId='heading-font-select'
title={'Heading font'}
onSelect={(option) => {
if (option?.value === DEFAULT_FONT) {
setHeadingFont({name: DEFAULT_FONT, creator: themeNameVersion});
updateSetting('heading_font', '');
} else {
setHeadingFont({name: option?.value || '', creator: CUSTOM_FONTS.heading.find(f => f.name === option?.value)?.creator || ''});
updateSetting('heading_font', option?.value || '');
}
}}
/>
<Select
className={selectFont(selectedBodyFont.label, false)}
components={{Option, SingleValue}}
controlClasses={{control: '!min-h-16 !pl-2', option: '!pl-2'}}
hint={''}
maxMenuHeight={200}
menuPosition='fixed'
menuShouldScrollIntoView={true}
options={customBodyFonts}
selectedOption={selectedBodyFont}
testId='body-font-select'
title={'Body font'}
onSelect={(option) => {
if (option?.value === DEFAULT_FONT) {
setBodyFont({name: DEFAULT_FONT, creator: themeNameVersion});
updateSetting('body_font', '');
} else {
setBodyFont({name: option?.value || '', creator: CUSTOM_FONTS.body.find(f => f.name === option?.value)?.creator || ''});
updateSetting('body_font', option?.value || '');
}
}}
/>
</Form>
<BehindFeatureFlag flag="customFonts">
<Form className='-mt-4' gap='sm' margins='lg' title='Typography'>
<Select
className={selectFont(selectedHeadingFont.label, true)}
components={{Option, SingleValue}}
controlClasses={{control: '!min-h-16 !pl-2', option: '!pl-2'}}
hint={''}
menuShouldScrollIntoView={true}
options={customHeadingFonts}
selectedOption={selectedHeadingFont}
testId='heading-font-select'
title={'Heading font'}
onSelect={(option) => {
if (option?.value === DEFAULT_FONT) {
setHeadingFont({name: DEFAULT_FONT, creator: themeNameVersion});
updateSetting('heading_font', '');
} else {
setHeadingFont({name: option?.value || '', creator: CUSTOM_FONTS.heading.find(f => f.name === option?.value)?.creator || ''});
updateSetting('heading_font', option?.value || '');
}
}}
/>
<Select
className={selectFont(selectedBodyFont.label, false)}
components={{Option, SingleValue}}
controlClasses={{control: '!min-h-16 !pl-2', option: '!pl-2'}}
hint={''}
maxMenuHeight={200}
menuPosition='fixed'
menuShouldScrollIntoView={true}
options={customBodyFonts}
selectedOption={selectedBodyFont}
testId='body-font-select'
title={'Body font'}
onSelect={(option) => {
if (option?.value === DEFAULT_FONT) {
setBodyFont({name: DEFAULT_FONT, creator: themeNameVersion});
updateSetting('body_font', '');
} else {
setBodyFont({name: option?.value || '', creator: CUSTOM_FONTS.body.find(f => f.name === option?.value)?.creator || ''});
updateSetting('body_font', option?.value || '');
}
}}
/>
</Form>
</BehindFeatureFlag>
</>
);
};
Expand Down
10 changes: 7 additions & 3 deletions apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import ThemeSetting from './ThemeSetting';
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import {CustomThemeSetting} from '@tryghost/admin-x-framework/api/customThemeSettings';
import {Form} from '@tryghost/admin-x-design-system';
import {Theme, useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
Expand Down Expand Up @@ -43,6 +44,7 @@ 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 hasCustomFonts = useFeatureFlag('customFonts');

return (
<>
Expand All @@ -65,9 +67,11 @@ 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
const hidingSettings = themeSettingsMap[activeThemeName];
if (hidingSettings && hidingSettings.includes(setting.key)) {
spaceClass += ' hidden';
if (hasCustomFonts) {
const hidingSettings = themeSettingsMap[activeThemeName];
if (hidingSettings && hidingSettings.includes(setting.key)) {
spaceClass += ' hidden';
}
}

previousType = setting.type;
Expand Down
3 changes: 3 additions & 0 deletions apps/admin-x-settings/test/acceptance/site/design.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
mockApi,
mockSitePreview,
responseFixtures,
toggleLabsFlag,
updatedSettingsResponse
} from '@tryghost/admin-x-framework/test/acceptance';
import {expect, test} from '@playwright/test';
Expand Down Expand Up @@ -305,6 +306,7 @@ test.describe('Design settings', async () => {
});

test('Custom fonts', async ({page}) => {
toggleLabsFlag('customFonts', true);
await mockApi({page, requests: {
...globalDataRequests,
browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: {
Expand Down Expand Up @@ -350,6 +352,7 @@ test.describe('Design settings', async () => {
});

test('Custom fonts setting back to default', async ({page}) => {
toggleLabsFlag('customFonts', true);
await mockApi({page, requests: {
...globalDataRequests,
browseSettings: {...globalDataRequests.browseSettings, response: updatedSettingsResponse([
Expand Down
42 changes: 22 additions & 20 deletions ghost/core/core/frontend/helpers/body_class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// Usage: `{{body_class}}`
//
// Output classes for the body element
const {settingsCache} = require('../services/proxy');
const {labs, settingsCache} = require('../services/proxy');
const {generateCustomFontBodyClass, isValidCustomFont, isValidCustomHeadingFont} = require('@tryghost/custom-fonts');
const {SafeString} = require('../services/handlebars');

Expand Down Expand Up @@ -45,28 +45,30 @@ module.exports = function body_class(options) { // eslint-disable-line camelcase
classes.push('paged');
}

// 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 ?? 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');
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;
// 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');

if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
(typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {
/** @type FontSelection */
const fontSelection = {};
if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
(typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {
/** @type FontSelection */
const fontSelection = {};

if (headingFont) {
fontSelection.heading = headingFont;
if (headingFont) {
fontSelection.heading = headingFont;
}
if (bodyFont) {
fontSelection.body = bodyFont;
}
const customBodyClasses = generateCustomFontBodyClass(fontSelection);
classes.push(new SafeString(customBodyClasses));
}
if (bodyFont) {
fontSelection.body = bodyFont;
}
const customBodyClasses = generateCustomFontBodyClass(fontSelection);
classes.push(new SafeString(customBodyClasses));
}

classes = classes.join(' ').trim();
Expand Down
42 changes: 22 additions & 20 deletions ghost/core/core/frontend/helpers/ghost_head.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,27 +353,29 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
head.push(getTinybirdTrackerScript(dataRoot));
}

// 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 ?? 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');
if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
(typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {
/** @type FontSelection */
const fontSelection = {};

if (headingFont) {
fontSelection.heading = headingFont;
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;
// 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');
if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
(typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {
/** @type FontSelection */
const fontSelection = {};

if (headingFont) {
fontSelection.heading = headingFont;
}
if (bodyFont) {
fontSelection.body = bodyFont;
}
const customCSS = generateCustomFontCss(fontSelection);
head.push(new SafeString(customCSS));
}
if (bodyFont) {
fontSelection.body = bodyFont;
}
const customCSS = generateCustomFontCss(fontSelection);
head.push(new SafeString(customCSS));
}
}

Expand Down
3 changes: 2 additions & 1 deletion ghost/core/core/shared/labs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ const ALPHA_FEATURES = [
'adminXDemo',
'contentVisibility',
'commentImprovements',
'staff2fa'
'staff2fa',
'customFonts'
];

module.exports.GA_KEYS = [...GA_FEATURES];
Expand Down
2 changes: 1 addition & 1 deletion ghost/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@
"ghost-storage-base": "1.0.0",
"glob": "8.1.0",
"got": "11.8.6",
"gscan": "4.46.0",
"gscan": "4.45.0",
"human-number": "2.0.4",
"image-size": "1.1.1",
"intl": "1.2.5",
Expand Down
1 change: 1 addition & 0 deletions ghost/core/test/e2e-api/admin/__snapshots__/config.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Object {
"collectionsCard": true,
"commentImprovements": true,
"contentVisibility": true,
"customFonts": true,
"editorExcerpt": true,
"emailCustomization": true,
"i18n": true,
Expand Down
Loading

0 comments on commit 34d267d

Please sign in to comment.