Skip to content

Commit

Permalink
Add/block types list component readme (#25066)
Browse files Browse the repository at this point in the history
* Draft block types list component readme

* Update block types list component readme

* Update block types list readme

* Update block types list readme

* Update JSX code sample

* Update JSX code sample

* Update items type
  • Loading branch information
JustinyAhin authored Sep 9, 2020
1 parent cef5be7 commit 14edc2d
Showing 1 changed file with 41 additions and 0 deletions.
41 changes: 41 additions & 0 deletions packages/block-editor/src/components/block-types-list/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Block Types List

The `BlockTypesList` component lets users display a list of blocks in different interfaces or as a result of certain actions. It is also possible to select one of the blocks in the list to insert it into the editor.

This component is present in the block insertion tab, the reusable blocks tab and the quick block insertion modal in the editor.

![Block types list in the block inserter tab](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-1.png)

![Block types list in the reusables blocks tab](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-2.png)

![Block types list in the quick inserter modal](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-3.png)

## Table of contents

1. [Development guidelines](#development-guidelines)
2. [Related components](#related-components)

## Development guidelines

### Usage

Renders a list of blocks types.

```jsx
import { BlockTypesList } from '@wordpress/block-editor';

const MyBlockTypesList = () => <BlockTypesList items={ filteredItems } />;;
```

### Props

#### items

The blocks that will be displayed in the block list.

- Type: `Array<Block>`
- 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.

0 comments on commit 14edc2d

Please sign in to comment.