| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { |
| 3 |
useSettings, |
| 4 |
__experimentalFontFamilyControl as WPFontFamilyControl, |
| 5 |
} from "@wordpress/block-editor"; |
| 6 |
|
| 7 |
import TypographyPanelItem, { |
| 8 |
TypographyControlProps, |
| 9 |
} from "./TypographyPanelItem"; |
| 10 |
|
| 11 |
interface FontFamily { |
| 12 |
fontFamily: string; |
| 13 |
name?: string; |
| 14 |
fontFace?: Record<string, any>[]; |
| 15 |
} |
| 16 |
|
| 17 |
/** Every font the site offers, whichever origin it comes from. */ |
| 18 |
export function useFontFamilies(): FontFamily[] { |
| 19 |
const [fontFamilies] = useSettings("typography.fontFamilies"); |
| 20 |
|
| 21 |
return ["default", "theme", "custom"].flatMap( |
| 22 |
origin => fontFamilies?.[origin] ?? [] |
| 23 |
); |
| 24 |
} |
| 25 |
|
| 26 |
export default function FontFamilyControl({ |
| 27 |
label = __("Font", "tableberg"), |
| 28 |
value, |
| 29 |
onChange, |
| 30 |
onDeselect, |
| 31 |
resetAllFilter, |
| 32 |
isShownByDefault = true, |
| 33 |
isSingleColumn, |
| 34 |
panelId, |
| 35 |
}: TypographyControlProps) { |
| 36 |
const fontFamilies = useFontFamilies(); |
| 37 |
|
| 38 |
if (!fontFamilies.length) { |
| 39 |
return null; |
| 40 |
} |
| 41 |
|
| 42 |
return ( |
| 43 |
<TypographyPanelItem |
| 44 |
label={label} |
| 45 |
hasValue={() => !!value} |
| 46 |
onDeselect={onDeselect ?? (() => onChange(""))} |
| 47 |
resetAllFilter={resetAllFilter} |
| 48 |
isShownByDefault={isShownByDefault} |
| 49 |
isSingleColumn={isSingleColumn} |
| 50 |
panelId={panelId} |
| 51 |
> |
| 52 |
<WPFontFamilyControl |
| 53 |
__next40pxDefaultSize |
| 54 |
__nextHasNoMarginBottom |
| 55 |
fontFamilies={fontFamilies} |
| 56 |
value={value} |
| 57 |
onChange={newValue => onChange(newValue || "")} |
| 58 |
/> |
| 59 |
</TypographyPanelItem> |
| 60 |
); |
| 61 |
} |
| 62 |
|
