SpacingRangeControl

The Spacing range control reads the spacing sizes from theme.json and displays
them in a RangeControl. The control can be used to set block spacing like
gaps, padding, margins. etc. The values are the spacing size slugs configured
in theme.json.

The spacing sizes can be filtered to only display a subset of the
available sizes.

link Example

import { SpacingRangeControl } from '@t2/editor';

const { attributes, setAttributes } = props;
const { columnGap, rowGap } = attributes;

<SpacingRangeControl
    label={__('Column gap', 't2')}
    value={columnGap}
    onChange={(value) => setAttributes({ columnGap: value })}
/>
<SpacingRangeControl
    label={__('Row gap', 't2')}
    value={rowGap}
    {/* The default size is an empty string: '' */}
    filter={['', 'none', 'small', 'medium', 'large']}
    onChange={(value) => setAttributes({ rowGap: value })}
/>

link Available props