10up / gutenberg-best-practices

Welcome to the 10up Gutenberg Best Practices!
https://gutenberg.10up.com
88 stars 24 forks source link

Add a guide for adding a setting to an existing tools panel like typography #133

Open fabiankaegy opened 1 year ago

fabiankaegy commented 1 year ago

Essentially a guide for <InspectorControls group="typography"> with the usage of the experimental ToolsPanelItem

<InspectorControls group="typography">
    <ToolsPanelItem
        hasValue={() => !!value}
        label={__('Labelt', 'namespace')}
        onDeselect={() => setAttributes({ value: undefined })}
        resetAllFilter={() => ({
            value: undefined,
        })}
        onSelect={() => setAttributes({ value: 'left' })}
        panelId={clientId}
    >
        <ToggleGroupControl
            label={__('Label', 'namespace')}
            value={value}
            onChange={(value) => setAttributes({ value: value })}
        >
            <ToggleGroupControlOption value="left" label={__('Left', 'namespace')} />
            <ToggleGroupControlOption value="right" label={__('Right', 'namespace')} />
        </ToggleGroupControl>
    </ToolsPanelItem>
</InspectorControls>