From f037188cc4a759726ab954e84abe682448d95bf2 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Tue, 26 Nov 2024 11:18:44 +0530 Subject: [PATCH 1/4] Storybook: Add BlockAlignmentMatrixControl Stories --- .../stories/index.story.js | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js new file mode 100644 index 00000000000000..9b3d30af118842 --- /dev/null +++ b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js @@ -0,0 +1,62 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BlockAlignmentMatrixControl from '../'; + +export default { + title: 'BlockEditor/BlockAlignmentMatrixControl', + component: BlockAlignmentMatrixControl, + parameters: { + layout: 'centered', + }, + argTypes: { + label: { + control: 'text', + defaultValue: 'Change matrix alignment', + description: 'Label for the control.', + }, + onChange: { + action: 'onChange', + description: 'Function called when the value changes.', + }, + isDisabled: { + control: 'boolean', + defaultValue: false, + description: 'Whether the control is disabled.', + }, + value: { + description: 'The current alignment value.', + }, + }, +}; + +const Template = ( { onChange, ...args } ) => { + const [ value, setValue ] = useState( 'center center' ); + + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + /> + ); +}; + +export const Default = Template.bind( {} ); +Default.args = { + label: 'Change matrix alignment', +}; + +export const Disabled = Template.bind( {} ); +Disabled.args = { + label: 'Disabled Alignment Control', + isDisabled: true, +}; From 9ab1da2f1cc9f1e5ba7c3f955bfa1ab5d38ed30f Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 2 Dec 2024 16:31:27 +0530 Subject: [PATCH 2/4] Update BlockAlignmentMatrixControl story to CSF 3 --- .../stories/index.story.js | 40 ++++++++----------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js index 9b3d30af118842..ef825607d10a96 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js +++ b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js @@ -35,28 +35,22 @@ export default { }, }; -const Template = ( { onChange, ...args } ) => { - const [ value, setValue ] = useState( 'center center' ); +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState( 'center center' ); - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - /> - ); -}; - -export const Default = Template.bind( {} ); -Default.args = { - label: 'Change matrix alignment', -}; - -export const Disabled = Template.bind( {} ); -Disabled.args = { - label: 'Disabled Alignment Control', - isDisabled: true, + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + /> + ); + }, + args: { + label: 'Change matrix alignment', + }, }; From 9e0cd13101ae840e61d25dca1f71bdfa206bb871 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Thu, 12 Dec 2024 13:09:27 +0530 Subject: [PATCH 3/4] Update BlockAlignmentMatrixControl documentation and story with additional properties --- .../block-alignment-matrix-control/README.md | 7 +-- .../stories/index.story.js | 44 ++++++++++++++----- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md index dfb38e15964124..1f1c6e8964ae93 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/README.md +++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md @@ -48,6 +48,7 @@ const controls = ( | Name | Type | Default | Description | | ---------- | ---------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `label` | `string` | `Change matrix alignment` | concise description of tool's functionality. | -| `onChange` | `function` | `noop` | the function to execute upon a user's change of the matrix state | -| `value` | `string` | `center` | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` | +| `label` | `string` | `Change matrix alignment` | Label for the control. | +| `onChange` | `function` | `noop` | Function to execute upon a user's change of the matrix state. | +| `value` | `string` | `center` | Describes the content alignment location and can be `center center`, `center left`, `center right`, `top center`, `top left`, `top right`, `bottom center`, `bottom left`, `bottom right`. | +| `isDisabled` | `boolean` | `false` | Disables the control. | diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js index ef825607d10a96..91fe2799c99dcd 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js +++ b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js @@ -8,36 +8,61 @@ import { useState } from '@wordpress/element'; */ import BlockAlignmentMatrixControl from '../'; -export default { +const meta = { title: 'BlockEditor/BlockAlignmentMatrixControl', component: BlockAlignmentMatrixControl, parameters: { - layout: 'centered', + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Renders a control for selecting block alignment using a matrix of alignment options.', + }, + }, }, argTypes: { label: { control: 'text', - defaultValue: 'Change matrix alignment', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'Change matrix alignment' }, + }, description: 'Label for the control.', }, onChange: { action: 'onChange', - description: 'Function called when the value changes.', + control: { type: null }, + table: { + type: { summary: 'function' }, + defaultValue: { summary: '() => {}' }, + }, + description: + "Function to execute upon a user's change of the matrix state.", }, isDisabled: { control: 'boolean', - defaultValue: false, - description: 'Whether the control is disabled.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + description: 'Disables the control.', }, value: { - description: 'The current alignment value.', + control: 'text', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'center center' }, + }, + description: 'Value of the control.', }, }, }; +export default meta; + export const Default = { render: function Template( { onChange, ...args } ) { - const [ value, setValue ] = useState( 'center center' ); + const [ value, setValue ] = useState(); return ( ); }, - args: { - label: 'Change matrix alignment', - }, }; From 613d0b0d183d63759a320f43a899efe042cb985c Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Thu, 12 Dec 2024 13:11:23 +0530 Subject: [PATCH 4/4] Fix syntax error in BlockAlignmentMatrixControl README --- .../src/components/block-alignment-matrix-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md index 1f1c6e8964ae93..e2c2e6f81ce6ae 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/README.md +++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md @@ -41,7 +41,7 @@ const controls = ( /> -} +); ``` ### Props