From 3e5554e10947130ece69a0ce9906742770ffe3c4 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 22 Nov 2024 18:04:53 +0530 Subject: [PATCH 1/4] Add stories for BlockAlignmentControl and BlockAlignmentToolbar components --- .../stories/block-alignment-toolbar.story.js | 48 ++++++++++++++++++ .../stories/index.story.js | 50 +++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js create mode 100644 packages/block-editor/src/components/block-alignment-control/stories/index.story.js diff --git a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js new file mode 100644 index 00000000000000..f91e117cc991a5 --- /dev/null +++ b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { BlockAlignmentToolbar } from '../'; + +/** + * The `BlockAlignmentToolbar` component is used to render block alignment options in the editor. The different alignment options it provides are `left`, `center`, `right`, `wide` and `full`. + */ +const meta = { + title: 'BlockEditor/BlockAlignmentToolbar', + component: BlockAlignmentToolbar, + argTypes: { + value: { + control: { type: null }, + defaultValue: 'undefined', + description: 'The current value of the alignment setting.', + }, + onChange: { + action: 'onChange', + control: { type: null }, + description: + "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie:`left`, `center`, `right`, `wide`, and `full`) as the only argument.", + }, + }, +}; + +export default meta; + +const Template = ( { onChange, ...args } ) => { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); +}; + +export const Default = Template.bind(); diff --git a/packages/block-editor/src/components/block-alignment-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-control/stories/index.story.js new file mode 100644 index 00000000000000..49c8ff4b99ec8f --- /dev/null +++ b/packages/block-editor/src/components/block-alignment-control/stories/index.story.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { BlockAlignmentControl } from '../'; + +/** + * The `BlockAlignmentControl` component is used to render block alignment options in the editor. The different alignment options it provides are `left`, `center`, `right`, `wide` and `full`. + * + * If you want to use the block alignment control in a toolbar, you should use the `BlockAlignmentToolbar` component instead. + */ +const meta = { + title: 'BlockEditor/BlockAlignmentControl', + component: BlockAlignmentControl, + argTypes: { + value: { + control: { type: null }, + defaultValue: 'undefined', + description: 'The current value of the alignment setting.', + }, + onChange: { + action: 'onChange', + control: { type: null }, + description: + "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie:`left`, `center`, `right`, `wide`, and `full`) as the only argument.", + }, + }, +}; + +export default meta; + +const Template = ( { onChange, ...args } ) => { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); +}; + +export const Default = Template.bind(); From 4e48acb0cd579f78611dabfcda412b05bcea9523 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 12:31:05 +0530 Subject: [PATCH 2/4] Following component story format 3 --- .../stories/block-alignment-toolbar.story.js | 28 +++++++++---------- .../stories/index.story.js | 28 +++++++++---------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js index f91e117cc991a5..f73388b13868b8 100644 --- a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js +++ b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js @@ -31,18 +31,18 @@ const meta = { export default meta; -const Template = ( { onChange, ...args } ) => { - const [ value, setValue ] = useState(); - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - value={ value } - /> - ); +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); + }, }; - -export const Default = Template.bind(); diff --git a/packages/block-editor/src/components/block-alignment-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-control/stories/index.story.js index 49c8ff4b99ec8f..f10400290415b9 100644 --- a/packages/block-editor/src/components/block-alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/block-alignment-control/stories/index.story.js @@ -33,18 +33,18 @@ const meta = { export default meta; -const Template = ( { onChange, ...args } ) => { - const [ value, setValue ] = useState(); - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - value={ value } - /> - ); +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); + }, }; - -export const Default = Template.bind(); From 1bb38e671c48c4fcc24e4fa448bb1aff002d0d3e Mon Sep 17 00:00:00 2001 From: akasunil Date: Sat, 14 Dec 2024 11:45:11 +0530 Subject: [PATCH 3/4] Update doc and story for other props of component --- .../block-alignment-control/README.md | 18 ++++++++++++++++++ .../stories/block-alignment-toolbar.story.js | 12 +++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-alignment-control/README.md b/packages/block-editor/src/components/block-alignment-control/README.md index 22b5df9af9bd42..2d0de8df44b784 100644 --- a/packages/block-editor/src/components/block-alignment-control/README.md +++ b/packages/block-editor/src/components/block-alignment-control/README.md @@ -38,6 +38,24 @@ The current value of the alignment setting. You may only choose from the `Option A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `wide`, `full`) as the only argument. +### `controls` + +- **Type:** `Array` +- **Default:** + +```js +[ 'none', 'left', 'center', 'right', 'wide', 'full' ]; +``` + +An array of available alignment controls. + +### `isCollapsed` + +- **Type:** `Boolean` +- **Default:** `true` + +Whether the toolbar should be collapsed. Default is true. + ## 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. diff --git a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js index f73388b13868b8..f31be4368a5f27 100644 --- a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js +++ b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js @@ -14,10 +14,12 @@ import { BlockAlignmentToolbar } from '../'; const meta = { title: 'BlockEditor/BlockAlignmentToolbar', component: BlockAlignmentToolbar, + parameters: { + docs: { canvas: { sourceState: 'shown' } }, + }, argTypes: { value: { control: { type: null }, - defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { @@ -26,6 +28,14 @@ const meta = { description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie:`left`, `center`, `right`, `wide`, and `full`) as the only argument.", }, + controls: { + control: { type: null }, + description: 'An array of available alignment controls.', + }, + isCollapsed: { + control: { type: null }, + description: 'Whether the toolbar should be collapsed.', + }, }, }; From 385e5cc7bacb6e8e96c4aae0318f5d3187821519 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 4 Feb 2025 17:43:17 +0530 Subject: [PATCH 4/4] Addressed feedback --- .../block-alignment-control/README.md | 6 +---- .../stories/block-alignment-toolbar.story.js | 22 ++++++++++++------- .../stories/index.story.js | 14 +++++++----- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-control/README.md b/packages/block-editor/src/components/block-alignment-control/README.md index 2d0de8df44b784..117defe36c8a26 100644 --- a/packages/block-editor/src/components/block-alignment-control/README.md +++ b/packages/block-editor/src/components/block-alignment-control/README.md @@ -41,11 +41,7 @@ A callback function invoked when the toolbar's alignment value is changed via an ### `controls` - **Type:** `Array` -- **Default:** - -```js -[ 'none', 'left', 'center', 'right', 'wide', 'full' ]; -``` +- **Default:** [ `none`, `left`, `center`, `right`, `wide`, `full` ] An array of available alignment controls. diff --git a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js index f31be4368a5f27..d1553763b1d3e5 100644 --- a/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js +++ b/packages/block-editor/src/components/block-alignment-control/stories/block-alignment-toolbar.story.js @@ -8,14 +8,17 @@ import { useState } from '@wordpress/element'; */ import { BlockAlignmentToolbar } from '../'; -/** - * The `BlockAlignmentToolbar` component is used to render block alignment options in the editor. The different alignment options it provides are `left`, `center`, `right`, `wide` and `full`. - */ -const meta = { +export default { title: 'BlockEditor/BlockAlignmentToolbar', component: BlockAlignmentToolbar, parameters: { - docs: { canvas: { sourceState: 'shown' } }, + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'A control for selecting block alignment options in the toolbar. The different alignment options it provides are `left`, `center`, `right`, `wide` and `full`', + }, + }, }, argTypes: { value: { @@ -33,14 +36,12 @@ const meta = { description: 'An array of available alignment controls.', }, isCollapsed: { - control: { type: null }, + control: 'boolean', description: 'Whether the toolbar should be collapsed.', }, }, }; -export default meta; - export const Default = { render: function Template( { onChange, ...args } ) { const [ value, setValue ] = useState(); @@ -56,3 +57,8 @@ export const Default = { ); }, }; + +Default.args = { + defaultValue: 'undefined', + panelId: 'panel-id', +}; diff --git a/packages/block-editor/src/components/block-alignment-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-control/stories/index.story.js index f10400290415b9..1d79d85843282a 100644 --- a/packages/block-editor/src/components/block-alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/block-alignment-control/stories/index.story.js @@ -8,14 +8,18 @@ import { useState } from '@wordpress/element'; */ import { BlockAlignmentControl } from '../'; -/** - * The `BlockAlignmentControl` component is used to render block alignment options in the editor. The different alignment options it provides are `left`, `center`, `right`, `wide` and `full`. - * - * If you want to use the block alignment control in a toolbar, you should use the `BlockAlignmentToolbar` component instead. - */ const meta = { title: 'BlockEditor/BlockAlignmentControl', component: BlockAlignmentControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'A control for selecting block alignment options in the editor. The different alignment options it provides are `left`, `center`, `right`, `wide` and `full`', + }, + }, + }, argTypes: { value: { control: { type: null },