LayoutDropdown

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 Inspector panel example

import { LayoutDropdown } from '@t2/editor';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function Edit({ attributes, setAttributes }) {
    const { layout } = attributes;
    const blockProps = useBlockProps({ className: 't2-test-block' });

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Settings', 't2')}>
                    <LayoutDropdown
                        type="inspector"
                        value={layout}
                        filter={['default', 'stack', 'row', 'grid']}
                        onChange={(value) => setAttributes({ layout: value })}
                        required={true}
                    />
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                <p>{__('This is a test block', 't2')}</p>
            </div>
        </>
    );
}

link Toolbar example

import { LayoutDropdown } from '@t2/editor';
import { BlockControls, useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

export default function Edit({ attributes, setAttributes }) {
    const { layout } = attributes;
    const blockProps = useBlockProps({ className: 't2-test-block' });

    return (
        <>
            <BlockControls>
                <LayoutDropdown
                    type="toolbar"
                    value={layout}
                    filter={['default', 'stack', 'row', 'grid']}
                    onChange={(value) => setAttributes({ layout: value })}
                    required={true}
                />
            </BlockControls>
            <div {...blockProps}>
                <p>{__('This is a test block', 't2')}</p>
            </div>
        </>
    );
}

link Component properties

export type LayoutDropdownProps = {
    /** Control type: `toolbar` (default) or `inspector`. */
    type?: string;

    /** The control label. */
    label?: string;

    /** The selected layout: `default`, `stack`, `row` or `grid`. */
    value?: string;

    /** Filters the control to only displays a subset of the available options. */
    filter?: boolean | string[];

    /** Callback returning the selected layout value: `default`, `stack`, `row` or `grid`. */
    onChange: (value: string | undefined) => void;

    /** Whether an layout value is required (true) or not (false, default). */
    required?: boolean;
};

link Default dropdown 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') },
]

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