HorizontalAlignDropdown

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 BlockControls and InspectorControls.

link Inspector panel example

import { HorizontalAlignDropdown } 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 { justifyContent } = attributes;
    const blockProps = useBlockProps({ className: 't2-test-block' });

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Settings', 't2')}>
                    <HorizontalAlignDropdown
                        type="inspector"
                        value={justifyContent}
                        filter={['left', 'center', 'right', 'stretch']}
                        onChange={(value) => setAttributes({ justifyContent: value })}
                        required={false}
                    />
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                <p>{__('This is a test block.', 't2')}</p>
            </div>
        </>
    );
}

link Toolbar example

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

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

	return (
		<>
			<BlockControls>
				<HorizontalAlignDropdown
					type="toolbar"
					value={justifyContent}
					filter={['left', 'center', 'right', 'stretch']}
					onChange={(value) => setAttributes({ justifyContent: value })}
					required={false}
				/>
			</BlockControls>
			<div {...blockProps}>
				<p>{__('This is a test block.', 't2')}</p>
			</div>
		</>
	);
}

link Default dropdown options

[
	{ 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 Component properties

export type AlignDropdownProps = {
	/** Control type: "toolbar" (default) or "inspector" */
	type?: string;

	/** Control label */
	label?: string;

	/** The selected horizontal alignment value: `left`, `center`, `right`, `stretch` or `space-between`. */
	value?: string;

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

	/** Callback function when the selection is changed. */
	onChange: (value: string | undefined) => void;

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

link See also

• VerticalAlignDropdown - A dropdown displaying options for vertical alignments.