AlignmentMatrixControl

See the WordPress Storybook for more detailed, interactive documentation.

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

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

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

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

Props

defaultValue

If provided, sets the default alignment value.

  • Type: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
  • Required: No
  • Default: 'center center'

label

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

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

onChange

A function that receives the updated alignment value.

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

value

The current alignment value.

  • Type: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
  • Required: No

width

If provided, sets the width of the control.

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

Subcomponents

AlignmentMatrixControl.Icon

Props

disablePointerEvents

If true, disables pointer events on the icon.

  • Type: boolean
  • Required: No
  • Default: true
value

The current alignment value.

  • Type: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
  • Required: No
  • Default: center