# Block Patterns List

The `BlockPatternsList` 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)

## Development guidelines

### Usage

Renders a block patterns list.

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

const MyBlockPatternsList = () => (
	<BlockPatternsList
		blockPatterns={ shownBlockPatterns }
		onClickPattern={ onSelectBlockPattern }
	/>
);
```

### Props

#### blockPatterns

An array of block patterns that can be shown in the block patterns list.

-   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

#### isDraggable

Enables drag and drop functionality to the available block patterns.

-   Type: `boolean`
-   Required: No

#### orientation

The orientation value determines which arrow keys can be used to move focus. Available options are (`vertical`|`horizontal`). If not provided all arrow keys work.

-   Type: `string`
-   Required: No

#### label

The aria label for the block patterns list.

-   Type: `string`
-   Required: No
-   Default: `Block Patterns`

#### showTitlesAsTooltip

Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop.

-   Type: `boolean`
-   Required: No
-   Default: `false`

## 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/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.