From 1a3cd813a57543516158e0cb6b207bcdb4723304 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Fri, 22 Nov 2024 18:51:16 +0530 Subject: [PATCH 1/6] Doc: Add Storybook for BlockTitle --- .../block-title/stories/index.story.js | 152 ++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 packages/block-editor/src/components/block-title/stories/index.story.js diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js new file mode 100644 index 00000000000000..9015e709ece598 --- /dev/null +++ b/packages/block-editor/src/components/block-title/stories/index.story.js @@ -0,0 +1,152 @@ +/** + * WordPress dependencies + */ +import { registerCoreBlocks } from '@wordpress/block-library'; +import { createBlock } from '@wordpress/blocks'; +import { BlockEditorProvider } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import BlockTitle from '../'; + +// Register core blocks for the story environment +registerCoreBlocks(); + +// Create more comprehensive sample blocks for testing +const blocks = [ + createBlock( 'core/paragraph', { + content: 'This is a sample paragraph block.', + className: 'sample-paragraph', + } ), + createBlock( 'core/heading', { + level: 2, + content: 'Sample Heading Block', + } ), + createBlock( + 'core/group', + { + layout: { type: 'flex', justifyContent: 'center' }, + }, + [ + createBlock( 'core/paragraph', { + content: 'Nested paragraph within a group block', + } ), + ] + ), +]; + +/** + * Storybook configuration for BlockTitle component + */ +const meta = { + title: 'BlockEditor/BlockTitle', + component: BlockTitle, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + "The Block Title component renders a block's configured title as a string.", + }, + }, + }, + decorators: [ + ( Story ) => ( + +
+ +
+ + ), + ], + argTypes: { + clientId: { + control: { + type: 'select', + labels: { + [ blocks[ 0 ].clientId ]: "Paragraph's Client ID", + [ blocks[ 1 ].clientId ]: "Heading's Client ID", + [ blocks[ 2 ].clientId ]: "Group's Client ID", + [ blocks[ 2 ].innerBlocks[ 0 ].clientId ]: + "Nested Paragraph's Client ID", + }, + }, + options: [ + blocks[ 0 ].clientId, + blocks[ 1 ].clientId, + blocks[ 2 ].clientId, + blocks[ 2 ].innerBlocks[ 0 ].clientId, + ], + description: 'The client ID of the block to render', + }, + maximumLength: { + control: { + type: 'number', + min: 5, + max: 50, + step: 1, + }, + description: 'Maximum length before title truncation', + }, + context: { + control: { type: 'text' }, + description: 'Optional context to pass to getBlockLabel', + }, + }, +}; + +export default meta; + +/** + * Story variations demonstrating BlockTitle component capabilities + */ +export const Default = { + args: { + clientId: blocks[ 0 ].clientId, + }, + parameters: { + docs: { + description: { + story: 'Default rendering of BlockTitle for a paragraph block', + }, + }, + }, +}; + +/** + * Story variations demonstrating BlockTitle component with maximum length + */ +export const WithMaxLength = { + args: { + clientId: blocks[ 0 ].clientId, + maximumLength: 5, + }, +}; + +/** + * Story variations demonstrating BlockTitle component with client ID of a heading block + */ +export const HeadingBlock = { + args: { + clientId: blocks[ 1 ].clientId, + }, +}; + +/** + * Story variations demonstrating BlockTitle component with client ID of a paragraph block + */ +export const ParagraphBlock = { + args: { + clientId: blocks[ 0 ].clientId, + }, +}; + +/** + * Story variations demonstrating BlockTitle component with client ID of a nested block within a group + */ +export const NestedBlock = { + args: { + clientId: blocks[ 2 ].innerBlocks[ 0 ].clientId, + }, +}; From 8b84d14fffecc3eeb1f4b3a322ecdbf79fa7299c Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Fri, 6 Dec 2024 14:31:27 +0530 Subject: [PATCH 2/6] Refactor: Simplify Storybook for BlockTitle and add type summaries to controls --- .../block-title/stories/index.story.js | 75 +++++-------------- 1 file changed, 20 insertions(+), 55 deletions(-) diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js index 9015e709ece598..7928d56934be67 100644 --- a/packages/block-editor/src/components/block-title/stories/index.story.js +++ b/packages/block-editor/src/components/block-title/stories/index.story.js @@ -13,7 +13,7 @@ import BlockTitle from '../'; // Register core blocks for the story environment registerCoreBlocks(); -// Create more comprehensive sample blocks for testing +// Create sample blocks for testing const blocks = [ createBlock( 'core/paragraph', { content: 'This is a sample paragraph block.', @@ -23,17 +23,9 @@ const blocks = [ level: 2, content: 'Sample Heading Block', } ), - createBlock( - 'core/group', - { - layout: { type: 'flex', justifyContent: 'center' }, - }, - [ - createBlock( 'core/paragraph', { - content: 'Nested paragraph within a group block', - } ), - ] - ), + createBlock( 'core/group', { + layout: { type: 'flex', justifyContent: 'center' }, + } ), ]; /** @@ -54,9 +46,7 @@ const meta = { decorators: [ ( Story ) => ( -
- -
+ ), ], @@ -68,17 +58,19 @@ const meta = { [ blocks[ 0 ].clientId ]: "Paragraph's Client ID", [ blocks[ 1 ].clientId ]: "Heading's Client ID", [ blocks[ 2 ].clientId ]: "Group's Client ID", - [ blocks[ 2 ].innerBlocks[ 0 ].clientId ]: - "Nested Paragraph's Client ID", }, }, options: [ blocks[ 0 ].clientId, blocks[ 1 ].clientId, blocks[ 2 ].clientId, - blocks[ 2 ].innerBlocks[ 0 ].clientId, ], description: 'The client ID of the block to render', + table: { + type: { + summary: 'string', + }, + }, }, maximumLength: { control: { @@ -88,10 +80,20 @@ const meta = { step: 1, }, description: 'Maximum length before title truncation', + table: { + type: { + summary: 'number', + }, + }, }, context: { control: { type: 'text' }, description: 'Optional context to pass to getBlockLabel', + table: { + type: { + summary: 'string', + }, + }, }, }, }; @@ -113,40 +115,3 @@ export const Default = { }, }, }; - -/** - * Story variations demonstrating BlockTitle component with maximum length - */ -export const WithMaxLength = { - args: { - clientId: blocks[ 0 ].clientId, - maximumLength: 5, - }, -}; - -/** - * Story variations demonstrating BlockTitle component with client ID of a heading block - */ -export const HeadingBlock = { - args: { - clientId: blocks[ 1 ].clientId, - }, -}; - -/** - * Story variations demonstrating BlockTitle component with client ID of a paragraph block - */ -export const ParagraphBlock = { - args: { - clientId: blocks[ 0 ].clientId, - }, -}; - -/** - * Story variations demonstrating BlockTitle component with client ID of a nested block within a group - */ -export const NestedBlock = { - args: { - clientId: blocks[ 2 ].innerBlocks[ 0 ].clientId, - }, -}; From d55d06f79632593432183a12a1acabf25519621a Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Wed, 11 Dec 2024 00:50:33 +0530 Subject: [PATCH 3/6] Refactor: Updated descriptions to match the JSDoc --- .../block-title/stories/index.story.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js index 7928d56934be67..b336dff7e928b6 100644 --- a/packages/block-editor/src/components/block-title/stories/index.story.js +++ b/packages/block-editor/src/components/block-title/stories/index.story.js @@ -39,7 +39,7 @@ const meta = { canvas: { sourceState: 'shown' }, description: { component: - "The Block Title component renders a block's configured title as a string.", + "Renders the block's configured title as a string, or empty if the title cannot be determined.", }, }, }, @@ -65,7 +65,7 @@ const meta = { blocks[ 1 ].clientId, blocks[ 2 ].clientId, ], - description: 'The client ID of the block to render', + description: 'Client ID of block.', table: { type: { summary: 'string', @@ -79,7 +79,8 @@ const meta = { max: 50, step: 1, }, - description: 'Maximum length before title truncation', + description: + 'The maximum length that the block title string may be before truncated.', table: { type: { summary: 'number', @@ -88,7 +89,7 @@ const meta = { }, context: { control: { type: 'text' }, - description: 'Optional context to pass to getBlockLabel', + description: 'The context to pass to `getBlockLabel`.', table: { type: { summary: 'string', @@ -107,11 +108,4 @@ export const Default = { args: { clientId: blocks[ 0 ].clientId, }, - parameters: { - docs: { - description: { - story: 'Default rendering of BlockTitle for a paragraph block', - }, - }, - }, }; From 8669bdf7b6373f022d17547a0ef47a1c2c8ad5dc Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Thu, 12 Dec 2024 15:31:02 +0530 Subject: [PATCH 4/6] Refactor: Remove comment from BlockTitle story --- .../src/components/block-title/stories/index.story.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js index b336dff7e928b6..05616fa7bb5c15 100644 --- a/packages/block-editor/src/components/block-title/stories/index.story.js +++ b/packages/block-editor/src/components/block-title/stories/index.story.js @@ -13,7 +13,7 @@ import BlockTitle from '../'; // Register core blocks for the story environment registerCoreBlocks(); -// Create sample blocks for testing +// Sample blocks for testing const blocks = [ createBlock( 'core/paragraph', { content: 'This is a sample paragraph block.', @@ -28,9 +28,6 @@ const blocks = [ } ), ]; -/** - * Storybook configuration for BlockTitle component - */ const meta = { title: 'BlockEditor/BlockTitle', component: BlockTitle, From d57750af5723def54c2df6abf6d922ed5c50a3bb Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Wed, 18 Dec 2024 11:21:25 +0530 Subject: [PATCH 5/6] Storybook: Refactor BlockTitle story to use ExperimentalBlockEditorProvider - Replaced BlockEditorProvider with ExperimentalBlockEditorProvider. - Simplified blocks array to include a single paragraph block. - Removed unnecessary client ID mappings and control options. - Cleaned up redundant comments and controls. --- .../block-title/stories/index.story.js | 39 ++----------------- 1 file changed, 4 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js index 05616fa7bb5c15..179ef40edffdab 100644 --- a/packages/block-editor/src/components/block-title/stories/index.story.js +++ b/packages/block-editor/src/components/block-title/stories/index.story.js @@ -3,30 +3,18 @@ */ import { registerCoreBlocks } from '@wordpress/block-library'; import { createBlock } from '@wordpress/blocks'; -import { BlockEditorProvider } from '@wordpress/block-editor'; /** * Internal dependencies */ +import { ExperimentalBlockEditorProvider } from '../../provider'; import BlockTitle from '../'; // Register core blocks for the story environment registerCoreBlocks(); // Sample blocks for testing -const blocks = [ - createBlock( 'core/paragraph', { - content: 'This is a sample paragraph block.', - className: 'sample-paragraph', - } ), - createBlock( 'core/heading', { - level: 2, - content: 'Sample Heading Block', - } ), - createBlock( 'core/group', { - layout: { type: 'flex', justifyContent: 'center' }, - } ), -]; +const blocks = [ createBlock( 'core/paragraph' ) ]; const meta = { title: 'BlockEditor/BlockTitle', @@ -42,26 +30,13 @@ const meta = { }, decorators: [ ( Story ) => ( - + - + ), ], argTypes: { clientId: { - control: { - type: 'select', - labels: { - [ blocks[ 0 ].clientId ]: "Paragraph's Client ID", - [ blocks[ 1 ].clientId ]: "Heading's Client ID", - [ blocks[ 2 ].clientId ]: "Group's Client ID", - }, - }, - options: [ - blocks[ 0 ].clientId, - blocks[ 1 ].clientId, - blocks[ 2 ].clientId, - ], description: 'Client ID of block.', table: { type: { @@ -72,9 +47,6 @@ const meta = { maximumLength: { control: { type: 'number', - min: 5, - max: 50, - step: 1, }, description: 'The maximum length that the block title string may be before truncated.', @@ -98,9 +70,6 @@ const meta = { export default meta; -/** - * Story variations demonstrating BlockTitle component capabilities - */ export const Default = { args: { clientId: blocks[ 0 ].clientId, From 117eb8d4b4b66076e0ded283f991f9d36a78b9c1 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Thu, 19 Dec 2024 12:27:25 +0530 Subject: [PATCH 6/6] Storybook: Set clientId control to null for BlockTitle --- .../src/components/block-title/stories/index.story.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js index 179ef40edffdab..dc66fc721e5158 100644 --- a/packages/block-editor/src/components/block-title/stories/index.story.js +++ b/packages/block-editor/src/components/block-title/stories/index.story.js @@ -37,6 +37,7 @@ const meta = { ], argTypes: { clientId: { + control: { type: null }, description: 'Client ID of block.', table: { type: { @@ -45,9 +46,7 @@ const meta = { }, }, maximumLength: { - control: { - type: 'number', - }, + control: { type: 'number' }, description: 'The maximum length that the block title string may be before truncated.', table: {