mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Hide typography related theme settings from official themes (#21530)
ref DES-929
This commit is contained in:
parent
9f9c8dc364
commit
e25d5cc105
1 changed files with 43 additions and 1 deletions
|
@ -1,7 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ThemeSetting from './ThemeSetting';
|
import ThemeSetting from './ThemeSetting';
|
||||||
|
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
|
||||||
import {CustomThemeSetting} from '@tryghost/admin-x-framework/api/customThemeSettings';
|
import {CustomThemeSetting} from '@tryghost/admin-x-framework/api/customThemeSettings';
|
||||||
import {Form} from '@tryghost/admin-x-design-system';
|
import {Form} from '@tryghost/admin-x-design-system';
|
||||||
|
import {Theme, useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
|
||||||
import {isCustomThemeSettingVisible} from '../../../../utils/isCustomThemeSettingsVisible';
|
import {isCustomThemeSettingVisible} from '../../../../utils/isCustomThemeSettingsVisible';
|
||||||
|
|
||||||
interface ThemeSettingsProps {
|
interface ThemeSettingsProps {
|
||||||
|
@ -13,7 +15,37 @@ interface ThemeSettingsProps {
|
||||||
updateSetting: (setting: CustomThemeSetting) => void;
|
updateSetting: (setting: CustomThemeSetting) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ThemeSettingsMap {
|
||||||
|
[key: string]: 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']
|
||||||
|
};
|
||||||
|
|
||||||
const ThemeSettings: React.FC<ThemeSettingsProps> = ({sections, updateSetting}) => {
|
const ThemeSettings: React.FC<ThemeSettingsProps> = ({sections, updateSetting}) => {
|
||||||
|
const {data: themesData} = useBrowseThemes();
|
||||||
|
const activeTheme = themesData?.themes.find((theme: Theme) => theme.active);
|
||||||
|
const activeThemeName = activeTheme?.name.toLowerCase() || '';
|
||||||
|
const hasCustomFonts = useFeatureFlag('customFonts');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{sections.map((section) => {
|
{sections.map((section) => {
|
||||||
|
@ -29,9 +61,19 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({sections, updateSetting})
|
||||||
if (setting.type === 'boolean' && previousType !== 'boolean' && previousType !== undefined) {
|
if (setting.type === 'boolean' && previousType !== 'boolean' && previousType !== undefined) {
|
||||||
spaceClass = 'mt-3';
|
spaceClass = 'mt-3';
|
||||||
}
|
}
|
||||||
if ((setting.type === 'text' || setting.type === 'select') && (previousType === 'text' || previousType === 'select')) {
|
if ((setting.type === 'text' || setting.type === 'select') && (previousType === 'text' || previousType === 'select')) {
|
||||||
spaceClass = 'mt-2';
|
spaceClass = 'mt-2';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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];
|
||||||
|
if (hidingSettings && hidingSettings.includes(setting.key)) {
|
||||||
|
spaceClass += ' hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
previousType = setting.type;
|
previousType = setting.type;
|
||||||
return <div key={setting.key} className={spaceClass}>
|
return <div key={setting.key} className={spaceClass}>
|
||||||
<ThemeSetting
|
<ThemeSetting
|
||||||
|
|
Loading…
Reference in a new issue