Horizontal Align Dropdown

The T2 Horizontal Align Dropdown displays options for horizontal alignments
in a dropdown: left, center, right, 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: 'left', icon: left, title: __('Align left', 't2') },
	{ value: 'center', icon: center, title: __('Align center', 't2') },
	{ value: 'right', icon: right, title: __('Align right', 't2') },
	{ value: 'stretch', icon: stretch, title: __('Stretch items', '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.HorizontalAlignDropdown.allOptions hook.

link Example

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

<HorizontalAlignDropdown
	type="inspector"
	value={justifyContent}
	filter={['left', 'center', 'right', 'stretch']}
	onChange={(value: string | undefined) => setAttributes({ justifyContent: 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 horizontal alignment value: left, center, right, 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: left, center, right, stretch or space-between.
required? boolean Whether a valid string value is always returned or not.