Docs: Add block patterns list component readme (#24983)

* Start block patterns list component readme * Update block patterns list component readme * Update block patterns list component readme * Add block patterns list component props * Update block patterns list component readme * Update JSX code sample * Update component readme props * Update component props description * Update component readme props description * Update component props types * Start block patterns list component readme * Update block patterns list component readme * Update block patterns list component readme * Add block patterns list component props * Update block patterns list component readme * Update JSX code sample * Update component readme props * Update component props description * Update component readme props description * Update component props types * Update the component props description * Update packages/block-editor/src/components/block-patterns-list/README.md Co-authored-by: Greg Ziółkowski <[email protected]>
WordPress · Nov 26, 2020 · 2518b58 · 2518b58
1 parent be6fc5b
commit 2518b58
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md
@@ -0,0 +1,58 @@
+# Block Patterns List
+
+The `BlockPatternList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
+
+For more infos about blocks patterns, read [this](https://make.wordpress.org/core/2020/07/16/block-patterns-in-wordpress-5-5/).
+
+![Block patterns sidebar in WordPress 5.5](https://make.wordpress.org/core/files/2020/09/blocks-patterns-sidebar-in-wordpress-5-5.png)
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a block patterns list.
+
+```jsx
+import { BlockPatternList } from '@wordpress/block-editor';
+
+const MyBlockPatternList = () => (
+	<BlockPatternList
+		blockPatterns={ shownBlockPatterns }
+		shownPatterns={ shownBlockPatterns }
+		onClickPattern={ onSelectBlockPattern }
+	/>
+);
+```
+
+### Props
+
+#### blockPatterns
+
+An array of block patterns that can be shown in the block patterns list.
+
+-   Type: `Array`
+-   Required: Yes
+
+#### shownPatterns
+
+An array of shown block patterns objects.
+
+
+-   Type: `Array`
+-   Required: Yes
+
+#### onClickPattern
+
+The performed event after a click on a block pattern. In most cases, the pattern is inserted in the block editor.
+
+-   Type: `Function`
+-   Required: Yes
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/provider/README.md) in the components tree.