AlignmentMatrixControl Edit

AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.

import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
    const [ alignment, setAlignment ] = useState( 'center center' );

    return (
        <AlignmentMatrixControl
            value={ alignment }
            onChange={ ( newAlignment ) => setAlignment( newAlignment ) }
        />
    );
};

The component accepts the following props:

The class that will be added to the classes of the underlying grid widget.
– Type: string
– Required: No

Unique ID for the component.

• Type: string
• Required: No

Accessible label. If provided, sets the aria-label attribute of the underlying grid widget.

• Type: string
• Required: No
• Default: Alignment Matrix Control

If provided, sets the default alignment value.

• Type: AlignmentMatrixControlValue
• Required: No
• Default: center center

The current alignment value.

• Type: AlignmentMatrixControlValue
• Required: No

A function that receives the updated alignment value.

• Type: ( newValue: AlignmentMatrixControlValue ) => void
• Required: No

If provided, sets the width of the control.

• Type: number
• Required: No
• Default: 92