Vertical Align Dropdown

The T2 Vertical Align Dropdown displays options for vertical alignments
in a dropdown: top, center, bottom, stretch and space-between.
It can be displayed both in the Block Toolbar and in the Inspector Panel.

link Built-in dropdown menu items

[
	{ value: 'top', icon: alignTop, title: __('Align top', 't2') },
	{ value: 'center', icon: alignCenter, title: __('Align middle', 't2') },
	{ value: 'bottom', icon: alignBottom, title: __('Align bottom', 't2') },
	{ value: 'stretch', icon: alignStretch, title: __('Stretch to fill', 't2') },
	{ value: 'space-between', icon: spaceBetween, title: __('Space between', 't2') },
]

You can filter (reduce) the menu items to display in the control or add our
own with the t2.VerticalAlignDropdown.allOptions hook.

link Example

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

<VerticalAlignDropdown
	type="inspector"
	value={alignItems}
	filter={['top', 'center', 'bottom', 'stretch']}
	onChange={(value: string | undefined) => setAttributes({ alignItems: value })}
	required={false}
/>

link Available props

Prop Type Description
type? string Control type: toolbar (default) or inspector.
label? string The control label.
value? string The selected vertical alignment value: top, center, bottom, stretch or space-between.
filter? string[] Filters the control to only displays a subset of the available options.
onChange (value: string | undefined) => void Returns the selected alignment value: top, center, bottom, stretch or space-between.
required? boolean Whether a valid string value is always returned or not.