From d3503d4fdc641f0c92d8a8456a8858aa54622d74 Mon Sep 17 00:00:00 2001
From: Alita Moore <alita.moore805@gmail.com>
Date: Thu, 9 Jul 2020 02:54:14 -0500
Subject: [PATCH] added readme to matrix alignment toolbar (#23341)

---
 .../block-alignment-matrix-toolbar/README.md  | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md

diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md b/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md
new file mode 100644
index 0000000000000..d28c9229aadc8
--- /dev/null
+++ b/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md
@@ -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`