| 1 |
import { ReactNode } from "react"; |
| 2 |
import { useBlockEditContext } from "@wordpress/block-editor"; |
| 3 |
import { __experimentalToolsPanelItem as ToolsPanelItem } from "@wordpress/components"; |
| 4 |
|
| 5 |
/** |
| 6 |
* What every typography control below takes. The value is the plain CSS value |
| 7 |
* the control edits, so a block can keep it wherever its attributes live. |
| 8 |
*/ |
| 9 |
export interface TypographyControlProps { |
| 10 |
label?: string; |
| 11 |
value: string; |
| 12 |
onChange: (newValue: string) => void; |
| 13 |
/** Defaults to clearing the value. */ |
| 14 |
onDeselect?: () => void; |
| 15 |
resetAllFilter?: () => void; |
| 16 |
isShownByDefault?: boolean; |
| 17 |
/** Half width, so two controls sit side by side. */ |
| 18 |
isSingleColumn?: boolean; |
| 19 |
/** Defaults to the block being edited. */ |
| 20 |
panelId?: string; |
| 21 |
} |
| 22 |
|
| 23 |
interface Props { |
| 24 |
label: string; |
| 25 |
hasValue: () => boolean; |
| 26 |
onDeselect: () => void; |
| 27 |
resetAllFilter?: () => void; |
| 28 |
isShownByDefault?: boolean; |
| 29 |
isSingleColumn?: boolean; |
| 30 |
panelId?: string; |
| 31 |
children: ReactNode; |
| 32 |
} |
| 33 |
|
| 34 |
/** |
| 35 |
* The ToolsPanel plumbing the typography controls share: the menu entry, its |
| 36 |
* reset and the two-column layout. |
| 37 |
*/ |
| 38 |
export default function TypographyPanelItem({ |
| 39 |
label, |
| 40 |
hasValue, |
| 41 |
onDeselect, |
| 42 |
resetAllFilter, |
| 43 |
isShownByDefault = false, |
| 44 |
isSingleColumn = false, |
| 45 |
panelId, |
| 46 |
children, |
| 47 |
}: Props) { |
| 48 |
const { clientId } = useBlockEditContext(); |
| 49 |
|
| 50 |
return ( |
| 51 |
<ToolsPanelItem |
| 52 |
panelId={panelId ?? clientId} |
| 53 |
className={isSingleColumn ? "single-column" : undefined} |
| 54 |
label={label} |
| 55 |
hasValue={hasValue} |
| 56 |
onDeselect={onDeselect} |
| 57 |
resetAllFilter={resetAllFilter ?? onDeselect} |
| 58 |
isShownByDefault={isShownByDefault} |
| 59 |
> |
| 60 |
{children} |
| 61 |
</ToolsPanelItem> |
| 62 |
); |
| 63 |
} |
| 64 |
|
