From ece5667a358479c7b93112347cea32121f618e4f Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Fri, 27 Dec 2024 13:07:15 +0530 Subject: [PATCH 1/4] Storybook: Add stories for BlockInspector component. --- .../block-inspector/stories/index.story.js | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 packages/block-editor/src/components/block-inspector/stories/index.story.js diff --git a/packages/block-editor/src/components/block-inspector/stories/index.story.js b/packages/block-editor/src/components/block-inspector/stories/index.story.js new file mode 100644 index 00000000000000..38c533aeb449fb --- /dev/null +++ b/packages/block-editor/src/components/block-inspector/stories/index.story.js @@ -0,0 +1,78 @@ +/** + * WordPress dependencies + */ +import { registerCoreBlocks } from '@wordpress/block-library'; +import { createBlock } from '@wordpress/blocks'; +import { useDispatch } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { ExperimentalBlockEditorProvider } from '../../provider'; +import BlockInspector from '../'; + +registerCoreBlocks(); + +const blocks = [ createBlock( 'core/paragraph' ) ]; + +const BlockSelector = ( { children, clientId } ) => { + const { selectBlock } = useDispatch( blockEditorStore ); + + useEffect( () => { + if ( clientId ) { + selectBlock( clientId ); + } + }, [ clientId, selectBlock ] ); + + return children; +}; + +const meta = { + title: 'BlockEditor/BlockInspector', + component: BlockInspector, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'The Block inspector is one of the panels that is displayed in the editor; it is mainly used to view and modify the settings of the selected block.', + }, + }, + }, + decorators: [ + ( Story ) => ( + + + + ), + ], + argTypes: { + showNoBlockSelectedMessage: { + control: 'boolean', + description: + 'Determines whether the Block Inspector displays a "No block selected" message or not when no block is selected.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' }, + }, + }, + }, +}; + +export default meta; + +export const Default = {}; + +export const WithSelectedBlock = { + decorators: [ + ( Story ) => ( + + + + + + ), + ], +}; From 2aa5eb548eddfb557b7445924683b2520a5897f4 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Wed, 1 Jan 2025 11:38:35 +0530 Subject: [PATCH 2/4] Storybook: Remove unnecessary decorators and default value summary --- .../src/components/block-inspector/stories/index.story.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/stories/index.story.js b/packages/block-editor/src/components/block-inspector/stories/index.story.js index 38c533aeb449fb..ba0940b99dc890 100644 --- a/packages/block-editor/src/components/block-inspector/stories/index.story.js +++ b/packages/block-editor/src/components/block-inspector/stories/index.story.js @@ -41,13 +41,6 @@ const meta = { }, }, }, - decorators: [ - ( Story ) => ( - - - - ), - ], argTypes: { showNoBlockSelectedMessage: { control: 'boolean', @@ -55,7 +48,6 @@ const meta = { 'Determines whether the Block Inspector displays a "No block selected" message or not when no block is selected.', table: { type: { summary: 'boolean' }, - defaultValue: { summary: 'true' }, }, }, }, From 4df7ec8c9c700c88fe3f0a9765141cf621398c91 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Wed, 1 Jan 2025 12:06:18 +0530 Subject: [PATCH 3/4] Storybook: Add JSDoc for BlockInspector component. --- .../src/components/block-inspector/index.js | 15 +++++++++++++++ .../block-inspector/stories/index.story.js | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 450a370b5c212a..5c02f31ec0d3b1 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -39,6 +39,21 @@ function BlockStylesPanel( { clientId } ) { ); } +/** + * The Block inspector is one of the panels that is displayed in the editor; it is mainly used to view and modify the settings of the selected block. + * + * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md + * + * @example + * ```jsx + * import { BlockInspector } from '@wordpress/block-editor'; + * const MyBlockInspector = () => ; + * ``` + * + * @param {Object} props Component props. + * @param {boolean} props.showNoBlockSelectedMessage Whether to display a "No block selected" message when no block is selected. + * @return {Element} BlockInspector component. + */ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { const { count, diff --git a/packages/block-editor/src/components/block-inspector/stories/index.story.js b/packages/block-editor/src/components/block-inspector/stories/index.story.js index ba0940b99dc890..5ead2e101a0640 100644 --- a/packages/block-editor/src/components/block-inspector/stories/index.story.js +++ b/packages/block-editor/src/components/block-inspector/stories/index.story.js @@ -45,7 +45,7 @@ const meta = { showNoBlockSelectedMessage: { control: 'boolean', description: - 'Determines whether the Block Inspector displays a "No block selected" message or not when no block is selected.', + 'Whether to display a "No block selected" message when no block is selected.', table: { type: { summary: 'boolean' }, }, From ac1879590ae3e18cce3880aad5580986462ccdf6 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Tue, 14 Jan 2025 13:22:48 +0530 Subject: [PATCH 4/4] Storybook: Remove showNoBlockSelectedMessage argType --- .../block-inspector/stories/index.story.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/stories/index.story.js b/packages/block-editor/src/components/block-inspector/stories/index.story.js index 5ead2e101a0640..e586dd3ecac0d3 100644 --- a/packages/block-editor/src/components/block-inspector/stories/index.story.js +++ b/packages/block-editor/src/components/block-inspector/stories/index.story.js @@ -41,16 +41,13 @@ const meta = { }, }, }, - argTypes: { - showNoBlockSelectedMessage: { - control: 'boolean', - description: - 'Whether to display a "No block selected" message when no block is selected.', - table: { - type: { summary: 'boolean' }, - }, - }, - }, + decorators: [ + ( Story ) => ( + + + + ), + ], }; export default meta; @@ -60,11 +57,9 @@ export const Default = {}; export const WithSelectedBlock = { decorators: [ ( Story ) => ( - - - - - + + + ), ], };