Alignment Matrix Control

The alignment matrix control allows users to quickly adjust inner block alignment; this is in contrast to the alignment toolbar that aligns the frame block.

Table of contents

• Alignment Matrix Control
  • Table of contents
  • Design guidelines
    • Usage
  • Development guidelines
    • Usage
    • Props

Design guidelines

Usage

The alignment matrix is a specialized tool, and it's used in the cover block.

As an example, here's the matrix alignment tool in action.

Development guidelines

Usage

// This is a paraphrased example from the cover block
import {
    BlockControls,
    __experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl
} from "@wordpress/block-editor";

const controls = (
  <>
    <BlockControls>
      <BlockAlignmentMatrixControl
        label={ __( 'Change content position' ) }
        value={ contentPosition }
        onChange={ ( nextPosition ) =>
          setAttributes( { contentPosition: nextPosition } )
        }
      />
    </BlockControls>
  </>
}

Props

Name	Type	Default	Description
label	string	Change matrix alignment	concise description of tool's functionality.
onChange	function	noop	the function to execute upon a user's change of the matrix state
value	string	center	describes the content alignment location and can be top, right, bottom, left, topRight, bottomRight, bottomLeft, topLeft