From 2028fd8608a853bfa610510666ff0619c3435e1c Mon Sep 17 00:00:00 2001 From: mimi Date: Fri, 15 Nov 2024 21:28:50 +0900 Subject: [PATCH] Update BlockMover Stories and README (#66519) * Update BlockMover stories * Use block settings and provider for Horizontal mode * Remove unwanted changes * Update packages/block-editor/src/components/block-mover/README.md Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Update packages/block-editor/src/components/block-mover/stories/index.story.tsx Co-authored-by: Lena Morita * Change .tsx to .js * Add decorators, and descriptions * Fixes README * refactor BlockMover stories for improved structure * remove unnecessary lines in package.json * change Horizontal story to improve rendering * Update packages/block-editor/src/components/block-mover/stories/index.story.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * fix Horizontal decorator * remove trash changes from package.json --------- Co-authored-by: miminari Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: t-hamano --- .../src/components/block-mover/README.md | 23 ++- .../block-mover/stories/index.story.js | 144 +++++++++--------- 2 files changed, 88 insertions(+), 79 deletions(-) diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md index 38520072b4ac86..b781de773ef9f3 100644 --- a/packages/block-editor/src/components/block-mover/README.md +++ b/packages/block-editor/src/components/block-mover/README.md @@ -1,12 +1,10 @@ -# Block mover +# BlockMover -Block movers allow moving blocks inside the editor using up and down buttons. +BlockMover component allows moving blocks inside the editor using up and down buttons. ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png) -## Development guidelines - -### Usage +## Usage Shows the block mover buttons in the block toolbar. @@ -15,13 +13,22 @@ import { BlockMover } from '@wordpress/block-editor'; const MyMover = () => ; ``` -### Props +## Props -#### clientIds +### clientIds -Blocks IDs +The IDs of the blocks to move. - Type: `Array` +- Required: Yes + +### hideDragHandle + +If this property is true, the drag handle is hidden. + +- Type: `boolean` +- Required: No +- Default: `false` ## Related components diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.js b/packages/block-editor/src/components/block-mover/stories/index.story.js index de30260563f91e..de6d13c797b4d9 100644 --- a/packages/block-editor/src/components/block-mover/stories/index.story.js +++ b/packages/block-editor/src/components/block-mover/stories/index.story.js @@ -14,6 +14,7 @@ import BlockMover from '../'; import { ExperimentalBlockEditorProvider } from '../../provider'; import { store as blockEditorStore } from '../../../store'; +// For the purpose of this story, we need to register the core blocks samples. registerCoreBlocks(); const blocks = [ // vertical @@ -30,81 +31,82 @@ const blocks = [ ] ), ]; -function Provider( { children } ) { - const wrapperStyle = { margin: '24px', position: 'relative' }; - - return ( -
+/** + * BlockMover component allows moving blocks inside the editor using up and down buttons. + */ +const meta = { + title: 'BlockEditor/BlockMover', + component: BlockMover, + parameters: { + docs: { canvas: { sourceState: 'shown' } }, + }, + decorators: [ + ( Story ) => ( - { children } + + + -
- ); -} - -function BlockMoverStory() { - const { updateBlockListSettings } = useDispatch( blockEditorStore ); - - useEffect( () => { - /** - * This shouldn't be needed but unfortunatley - * the layout orientation is not declarative, we need - * to render the blocks to update the block settings in the state. - */ - updateBlockListSettings( blocks[ 1 ].clientId, { - orientation: 'horizontal', - } ); - }, [] ); - - return ( -
-

The mover by default is vertical

- - - - -

- But it can also accommodate horizontal blocks. -

- - - + ), + ], + argTypes: { + clientIds: { + control: { + type: 'none', + }, + description: 'The client IDs of the blocks to move.', + }, + hideDragHandle: { + control: { + type: 'boolean', + }, + description: 'If this property is true, the drag handle is hidden.', + }, + }, +}; +export default meta; -

We can also hide the drag handle.

- - - -
- ); -} +export const Default = { + args: { + clientIds: [ blocks[ 0 ].innerBlocks[ 1 ].clientId ], + }, +}; -export default { - title: 'BlockEditor/BlockMover', +/** + * This story shows the block mover with horizontal orientation. + * It is necessary to render the blocks to update the block settings in the state. + */ +export const Horizontal = { + decorators: [ + ( Story ) => { + const { updateBlockListSettings } = useDispatch( blockEditorStore ); + useEffect( () => { + /** + * This shouldn't be needed but unfortunately + * the layout orientation is not declarative, we need + * to render the blocks to update the block settings in the state. + */ + updateBlockListSettings( blocks[ 1 ].clientId, { + orientation: 'horizontal', + } ); + }, [] ); + return ; + }, + ], + args: { + clientIds: [ blocks[ 1 ].innerBlocks[ 1 ].clientId ], + }, + parameters: { + docs: { canvas: { sourceState: 'hidden' } }, + }, }; -export const _default = () => { - return ( - - - - ); +/** + * You can hide the drag handle by `hideDragHandle` attribute. + */ +export const HideDragHandle = { + args: { + ...Default.args, + hideDragHandle: true, + }, };