InspectorDropdown

The T2 InspectorDropdown is a base component for displaying dropdowns in the
inspector panel. It's not a stand-alone component, but intended to be used by
other controls. It's similar to the native ToolbarDropdownMenu component,
with the main difference that it's displayed in the InspectorPanel and
not in the Block Toolbar.

It's used by LayoutDropdown, HorizontalAlignDropdown and VerticalAlignDropdown.
allowing them to be used both in the Block Toolbar and in the Inspector Panel.

Each dropdown menu item is represented by a DropdownMenuOption object, containing
a value, an icon and a title.

link Example

import { __ } from '@wordpress/i18n';
import { group, row, stack, grid } from '@wordpress/icons';
import { InspectorDropdown } from '@t2/editor';

const options = [
	{ 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') },
];

export function MyDropdown(props) {
	const {label, value, onChange, required } = props;

	return (
		<InspectorDropdown
			label={__('Layout', 't2')}
			value={value || 'default'}
			options={options}
			onChange={(selection: string | undefined) =>
				onChange(selection)
			}
			required={true}
		/>
	);
}

link Available props