Layout Dropdown

The T2 Layout Dropdown displays options for block layouts in a
dropdown: default, stack (flex column), row (flex row) and grid.
It can be displayed both in the Block Toolbar and in the Inspector Panel.

link Built-in dropdown menu items

[
	{ value: 'default', icon: group, title: __('Default', 't2') },
	{ value: 'stack', icon: stack, title: __('Stack', 't2') },
	{ value: 'row', icon: row, title: __('Row', 't2') },
	{ value: 'grid', icon: grid, title: __('Grid', 't2') },
]

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

link Example

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

<LayoutDropdown
	type="inspector"
	value={layout}
	filter={['default', 'stack', 'row']}
	onChange={(value: string | undefined) => setAttributes({ layout: value })}
	required={true}
/>

link Available props

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