diff --git a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js
index ad9bffab762c2..ef3dce2add466 100644
--- a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js
+++ b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js
@@ -6,59 +6,147 @@ import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-
/**
* Internal dependencies
*/
-import BlockPatternsList from '../';
-import { ExperimentalBlockEditorProvider } from '../../provider';
+import BlockPatternsList from '..';
import patterns from './fixtures';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { __ } from '@wordpress/i18n';
+registerCoreBlocks();
const blockEditorSettings = {
styles: [ { css: blockLibraryStyles } ],
};
-export default {
- component: BlockPatternsList,
+/**
+ * Storybook metadata
+ */
+const meta = {
title: 'BlockEditor/BlockPatternsList',
-};
-
-export const Default = {
- render: function Template( props ) {
- return (
-
-
-
- );
- },
- args: {
- blockPatterns: patterns,
- isDraggable: false,
- label: 'Block patterns story',
- showTitlesAsTooltip: false,
+ component: BlockPatternsList,
+ parameters: {
+ docs: {
+ canvas: {
+ sourceState: 'shown',
+ },
+ description: {
+ component:
+ 'The `BlockPatternsList` component renders a list of block patterns.',
+ },
+ },
},
argTypes: {
- blockPatterns: { description: 'The patterns to render.' },
+ blockPatterns: {
+ control: {
+ type: 'object',
+ },
+ description: 'The patterns to render.',
+ table: {
+ type: {
+ summary: 'object',
+ },
+ },
+ },
shownPatterns: {
+ contorl: { type: null },
description:
- 'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
+ 'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns.`',
+ table: {
+ type: {
+ summary: 'object',
+ },
+ },
+ },
+ onClickPattern: {
+ control: { type: null },
+ description:
+ 'Callback function to handle the click event on a pattern.',
+ table: {
+ type: {
+ summary: 'function',
+ },
+ },
+ },
+ onHover: {
+ control: {
+ type: null,
+ },
+ description:
+ 'Callback function to handle the hover event on a pattern.',
+ table: {
+ type: {
+ summary: 'function',
+ },
+ },
},
- onClickPattern: { type: 'function' },
- onHover: { type: 'function' },
showTitlesAsTooltip: {
+ control: {
+ type: 'boolean',
+ },
description:
'Whether to render the title of each pattern as a tooltip. If enabled',
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ },
},
orientation: {
+ control: {
+ type: 'string',
+ },
description: 'Orientation for the underlying composite widget.',
table: {
- defaultValue: { summary: 'both' },
- type: { summary: 'string' },
+ defaultValue: {
+ summary: 'both',
+ },
+ type: {
+ summary: 'string',
+ },
+ },
+ },
+ category: {
+ control: {
+ type: 'string',
+ },
+ description: 'The currently selected pattern category.',
+ table: {
+ type: {
+ summary: 'string',
+ },
},
},
- category: { description: 'The currently selected pattern category.' },
isDraggable: {
+ control: {
+ type: 'boolean',
+ },
description: 'Whether the pattern list item should be draggable.',
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ },
},
},
- parameters: {
- actions: { argTypesRegex: '^on.*' },
- controls: { expanded: true },
+};
+
+export default meta;
+
+export const Default = {
+ args: {
+ blockPatterns: patterns,
+ isDraggable: false,
+ label: __( 'Block patterns story' ),
+ showTitlesAsTooltip: false,
+ },
+ render: function Template( args ) {
+ return (
+
+
+
+ );
},
};