From 3e5554e10947130ece69a0ce9906742770ffe3c4 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 22 Nov 2024 18:04:53 +0530 Subject: [PATCH 1/3] 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/3] 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/3] 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.', + }, }, };