| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { __experimentalFontAppearanceControl as WPFontAppearanceControl } from "@wordpress/block-editor"; |
| 3 |
|
| 4 |
import TypographyPanelItem from "./TypographyPanelItem"; |
| 5 |
import { useFontFamilies } from "./FontFamilyControl"; |
| 6 |
|
| 7 |
export interface FontAppearance { |
| 8 |
fontStyle: string; |
| 9 |
fontWeight: string; |
| 10 |
} |
| 11 |
|
| 12 |
interface Props { |
| 13 |
label?: string; |
| 14 |
value: FontAppearance; |
| 15 |
onChange: (newValue: FontAppearance) => void; |
| 16 |
/** The font the appearance belongs to, so its own faces are offered. */ |
| 17 |
fontFamily?: string; |
| 18 |
onDeselect?: () => void; |
| 19 |
resetAllFilter?: () => void; |
| 20 |
isShownByDefault?: boolean; |
| 21 |
isSingleColumn?: boolean; |
| 22 |
panelId?: string; |
| 23 |
} |
| 24 |
|
| 25 |
const noAppearance: FontAppearance = { fontStyle: "", fontWeight: "" }; |
| 26 |
|
| 27 |
export default function FontAppearanceControl({ |
| 28 |
label = __("Appearance", "tableberg"), |
| 29 |
value, |
| 30 |
onChange, |
| 31 |
fontFamily, |
| 32 |
onDeselect, |
| 33 |
resetAllFilter, |
| 34 |
isShownByDefault = false, |
| 35 |
isSingleColumn = true, |
| 36 |
panelId, |
| 37 |
}: Props) { |
| 38 |
const fontFamilies = useFontFamilies(); |
| 39 |
const fontFamilyFaces = |
| 40 |
fontFamilies.find(family => family.fontFamily === fontFamily) |
| 41 |
?.fontFace ?? []; |
| 42 |
|
| 43 |
return ( |
| 44 |
<TypographyPanelItem |
| 45 |
label={label} |
| 46 |
hasValue={() => !!value.fontStyle || !!value.fontWeight} |
| 47 |
onDeselect={onDeselect ?? (() => onChange({ ...noAppearance }))} |
| 48 |
resetAllFilter={resetAllFilter} |
| 49 |
isShownByDefault={isShownByDefault} |
| 50 |
isSingleColumn={isSingleColumn} |
| 51 |
panelId={panelId} |
| 52 |
> |
| 53 |
<WPFontAppearanceControl |
| 54 |
__next40pxDefaultSize |
| 55 |
fontFamilyFaces={fontFamilyFaces} |
| 56 |
value={{ |
| 57 |
fontStyle: value.fontStyle || undefined, |
| 58 |
fontWeight: value.fontWeight || undefined, |
| 59 |
}} |
| 60 |
onChange={newValue => |
| 61 |
onChange({ |
| 62 |
fontStyle: newValue?.fontStyle || "", |
| 63 |
fontWeight: newValue?.fontWeight || "", |
| 64 |
}) |
| 65 |
} |
| 66 |
/> |
| 67 |
</TypographyPanelItem> |
| 68 |
); |
| 69 |
} |
| 70 |
|
