BlockHeightControl

The T2 BlockHeightControl lets you select a height size from a range of sizes. You can use the size value to add a class to your block, and then set the (minimum) height with css.

link Example

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

const { attributes, setAttributes } = props;
const { minHeight = 'none' } = attributes;

<BlockHeightControl
    label={__('Min height', 't2')}
    value={minHeight}
    sizes={[
        { value: 'none', label: __('None', 't2') },
        { value: 'small', label: __('Small', 't2') },
        { value: 'medium', label: __('Medium', 't2') },
        { value: 'large', label: __('Large', 't2') },
    ]}
    onChange={(value) => setAttributes({ minHeight: value })}
/>

If the sizes array is empty, the control uses the default
sizes: none, small, medium and large.

link Component props

export type BlockHeightControlProps = {
    /** The label above the block height control. */
    label?: string;

    /** The selected height name. */
    value: string;

    /** An array of value/label pairs to populate the dropdown control. */
    sizes?: BlockHeightControlSizeOption[];

    /** Callback returning the selected height name when the author selects a height. */
    onChange: (value: string) => void;
};

link Size option props

export type BlockHeightControlSizeOption = {
    /** The height name */
    value: string;

    /** The height label to be displayed in the dropdown. */
    label: string;
};

link Screenshots

link Small block height

link Medium block height