-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added readme to matrix alignment toolbar (#23341)
- Loading branch information
1 parent
805bdf8
commit d3503d4
Showing
1 changed file
with
64 additions
and
0 deletions.
There are no files selected for viewing
64 changes: 64 additions & 0 deletions
64
packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
# Alignment Matrix Toolbar | ||
|
||
The alignment matrix toolbar allows users to quickly adjust inner block alignment; this is in contrast to the alignment toolbar that aligns the frame block. | ||
|
||
![Button components](https://i.imgur.com/PxYkgL5.png) | ||
|
||
## Table of contents | ||
- [Alignment Matrix Toolbar](#alignment-matrix-toolbar) | ||
- [Table of contents](#table-of-contents) | ||
- [Design guidelines](#design-guidelines) | ||
- [Usage](#usage) | ||
- [Development guidelines](#development-guidelines) | ||
- [Usage](#usage-1) | ||
- [Props](#props) | ||
|
||
## Design guidelines | ||
|
||
### Usage | ||
|
||
The alignment matrix is a specialized tool, and it's used in the cover block. | ||
|
||
![Cover](https://i.imgur.com/nJjqen8.png) | ||
|
||
As an example, here's the matrix alignment tool in action. | ||
|
||
![center](https://i.imgur.com/0Ce1fZm.png) | ||
|
||
|
||
![rop_right](https://i.imgur.com/yGGf6IP.png) | ||
|
||
## Development guidelines | ||
|
||
### Usage | ||
|
||
```jsx | ||
// This is a paraphrased example from the cover block | ||
import { | ||
BlockControls, | ||
__experimentalBlockAlignmentMatrixToolbar as BlockAlignmentMatrixToolbar | ||
} from "@wordpress/block-editor"; | ||
|
||
const controls = ( | ||
<> | ||
<BlockControls> | ||
<BlockAlignmentMatrixToolbar | ||
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` |