From e7707dbe44fc039b03ee6308c336b4569bcd4773 Mon Sep 17 00:00:00 2001 From: mimi Date: Mon, 28 Oct 2024 13:53:09 +0900 Subject: [PATCH 01/14] Update BlockMover stories --- .../src/components/block-mover/README.md | 23 ++-- .../block-mover/stories/index.story.js | 110 ------------------ .../block-mover/stories/index.story.tsx | 94 +++++++++++++++ 3 files changed, 108 insertions(+), 119 deletions(-) delete mode 100644 packages/block-editor/src/components/block-mover/stories/index.story.js create mode 100644 packages/block-editor/src/components/block-mover/stories/index.story.tsx diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md index 38520072b4ac86..103830a5200d3c 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 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,20 @@ import { BlockMover } from '@wordpress/block-editor'; const MyMover = () => ; ``` -### Props +## Props + +### `clientIds`: `Array` + +Blocks IDs. + +- Required: Yes -#### clientIds +### `hideDragHandle`: `boolean` -Blocks IDs +If this property is true, the drag handle is hidden. -- Type: `Array` +- 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 deleted file mode 100644 index de30260563f91e..00000000000000 --- a/packages/block-editor/src/components/block-mover/stories/index.story.js +++ /dev/null @@ -1,110 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEffect } from '@wordpress/element'; -import { createBlock } from '@wordpress/blocks'; -import { registerCoreBlocks } from '@wordpress/block-library'; -import { useDispatch } from '@wordpress/data'; -import { Toolbar } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import BlockMover from '../'; -import { ExperimentalBlockEditorProvider } from '../../provider'; -import { store as blockEditorStore } from '../../../store'; - -registerCoreBlocks(); -const blocks = [ - // vertical - createBlock( 'core/group', { layout: { type: 'flex' } }, [ - createBlock( 'core/paragraph' ), - createBlock( 'core/paragraph' ), - createBlock( 'core/paragraph' ), - ] ), - // horizontal - createBlock( 'core/buttons', {}, [ - createBlock( 'core/button' ), - createBlock( 'core/button' ), - createBlock( 'core/button' ), - ] ), -]; - -function Provider( { children } ) { - const wrapperStyle = { margin: '24px', position: 'relative' }; - - return ( -
- - { 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. -

- - - - -

We can also hide the drag handle.

- - - -
- ); -} - -export default { - title: 'BlockEditor/BlockMover', -}; - -export const _default = () => { - return ( - - - - ); -}; diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.tsx b/packages/block-editor/src/components/block-mover/stories/index.story.tsx new file mode 100644 index 00000000000000..5af1ae9ab39609 --- /dev/null +++ b/packages/block-editor/src/components/block-mover/stories/index.story.tsx @@ -0,0 +1,94 @@ +/** + * External dependencies + */ +import type { Meta, StoryFn } from '@storybook/react'; + +/** + * WordPress dependencies + */ +import { useEffect } from '@wordpress/element'; +import { Toolbar } from '@wordpress/components'; +import { useDispatch } from '@wordpress/data'; +import { createBlock } from '@wordpress/blocks'; +import { registerCoreBlocks } from '@wordpress/block-library'; + +/** + * Internal dependencies + */ +import BlockMover from '../'; +import { store as blockEditorStore } from '../../../store'; + +// For the purpose of this story, we need to register the core blocks samples. +registerCoreBlocks(); +const blocks = [ + // vertical + createBlock( 'core/group', { layout: { type: 'flex' } }, [ + createBlock( 'core/paragraph' ), + createBlock( 'core/paragraph' ), + createBlock( 'core/paragraph' ), + ] ), + // horizontal + createBlock( 'core/buttons', {}, [ + createBlock( 'core/button' ), + createBlock( 'core/button' ), + createBlock( 'core/button' ), + ] ), +]; + +const meta: Meta< typeof BlockMover > = { + title: 'BlockEditor/BlockMover', + component: BlockMover, + parameters: { + controls: { expanded: true }, + docs: { canvas: { sourceState: 'shown' } }, + }, +}; +export default meta; + +const Template: StoryFn< typeof BlockMover > = ( props ) => { + 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', + } ); + }, [ updateBlockListSettings ] ); + return ( + + + + ); +}; + +export const Default: StoryFn< typeof BlockMover > = Template.bind( {} ); +Default.args = { + clientIds: [ + blocks.length ? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ] : [], + ], +}; + +/** + * Also have horizontal orientation. + */ +export const Horizontal: StoryFn< typeof BlockMover > = Template.bind( {} ); +Horizontal.args = { + clientIds: [ + blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], + ], +}; + +/** + * We can also hide the drag handle. + */ +export const HideDragHandle: StoryFn< typeof BlockMover > = Template.bind( {} ); +HideDragHandle.args = { + clientIds: [ + blocks.length ? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ] : [], + ], + hideDragHandle: true, +}; From af4c05ad3ddc71124d78554cd7c6d7a15a064021 Mon Sep 17 00:00:00 2001 From: mimi Date: Tue, 29 Oct 2024 10:14:32 +0900 Subject: [PATCH 02/14] Use block settings and provider for Horizontal mode --- package.json | 3 +- .../block-mover/stories/index.story.tsx | 110 ++++++++++++++---- 2 files changed, 89 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 06a73c51cc940d..832e785009240a 100644 --- a/package.json +++ b/package.json @@ -290,5 +290,6 @@ }, "workspaces": [ "packages/*" - ] + ], + "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" } diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.tsx b/packages/block-editor/src/components/block-mover/stories/index.story.tsx index 5af1ae9ab39609..2f8ca67b05a649 100644 --- a/packages/block-editor/src/components/block-mover/stories/index.story.tsx +++ b/packages/block-editor/src/components/block-mover/stories/index.story.tsx @@ -7,15 +7,16 @@ import type { Meta, StoryFn } from '@storybook/react'; * WordPress dependencies */ import { useEffect } from '@wordpress/element'; -import { Toolbar } from '@wordpress/components'; -import { useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; import { registerCoreBlocks } from '@wordpress/block-library'; +import { useDispatch } from '@wordpress/data'; +import { Toolbar } from '@wordpress/components'; /** * Internal dependencies */ 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. @@ -35,17 +36,16 @@ const blocks = [ ] ), ]; -const meta: Meta< typeof BlockMover > = { - title: 'BlockEditor/BlockMover', - component: BlockMover, - parameters: { - controls: { expanded: true }, - docs: { canvas: { sourceState: 'shown' } }, - }, -}; -export default meta; +// Provider component to wrap the BlockEditorProvider +function Provider( { children } ) { + return ( + + { children } + + ); +} -const Template: StoryFn< typeof BlockMover > = ( props ) => { +function BlockMoverStoryHorizontal() { const { updateBlockListSettings } = useDispatch( blockEditorStore ); useEffect( () => { @@ -57,11 +57,49 @@ const Template: StoryFn< typeof BlockMover > = ( props ) => { updateBlockListSettings( blocks[ 1 ].clientId, { orientation: 'horizontal', } ); - }, [ updateBlockListSettings ] ); + }, [] ); + + return ( +
+ + + +
+ ); +} + +const meta: Meta< typeof BlockMover > = { + title: 'BlockEditor/BlockMover', + component: BlockMover, + parameters: { + controls: { expanded: true }, + docs: { canvas: { sourceState: 'shown' } }, + }, +}; +export default meta; + +const Template: StoryFn< typeof BlockMover > = ( props ) => { return ( - - - + +
+ + + +
+ ); }; @@ -73,22 +111,48 @@ Default.args = { }; /** - * Also have horizontal orientation. + * 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: StoryFn< typeof BlockMover > = Template.bind( {} ); +export const Horizontal: StoryFn< typeof BlockMover > = ( props ) => { + return ( + + + + ); +}; Horizontal.args = { clientIds: [ blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], ], }; +Horizontal.parameters = { + docs: { canvas: { sourceState: 'hidden' } }, +}; /** - * We can also hide the drag handle. + * You can hide the drag handle by `hideDragHandle` attribute. */ -export const HideDragHandle: StoryFn< typeof BlockMover > = Template.bind( {} ); +export const HideDragHandle: StoryFn< typeof BlockMover > = ( props ) => { + return ( + +
+ + + +
+ + ); +}; HideDragHandle.args = { - clientIds: [ - blocks.length ? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ] : [], - ], + ...Default.args, hideDragHandle: true, }; From ddbc82666684a8a4ce1f5315ed59b75fc8a563ab Mon Sep 17 00:00:00 2001 From: mimi Date: Tue, 29 Oct 2024 10:29:51 +0900 Subject: [PATCH 03/14] Remove unwanted changes --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 832e785009240a..06a73c51cc940d 100644 --- a/package.json +++ b/package.json @@ -290,6 +290,5 @@ }, "workspaces": [ "packages/*" - ], - "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" + ] } From ee7f4f14d7f36b41283980d439225db927742e76 Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 7 Nov 2024 08:06:19 +0900 Subject: [PATCH 04/14] Update packages/block-editor/src/components/block-mover/README.md Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- packages/block-editor/src/components/block-mover/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md index 103830a5200d3c..4268b183829665 100644 --- a/packages/block-editor/src/components/block-mover/README.md +++ b/packages/block-editor/src/components/block-mover/README.md @@ -1,6 +1,6 @@ # BlockMover -BlockMover allows 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) From 027e5870ece8cf2ac5f18a673db04ed0c2311c57 Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 7 Nov 2024 08:23:34 +0900 Subject: [PATCH 05/14] Update packages/block-editor/src/components/block-mover/stories/index.story.tsx Co-authored-by: Lena Morita --- .../src/components/block-mover/stories/index.story.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.tsx b/packages/block-editor/src/components/block-mover/stories/index.story.tsx index 2f8ca67b05a649..531c5768f4582c 100644 --- a/packages/block-editor/src/components/block-mover/stories/index.story.tsx +++ b/packages/block-editor/src/components/block-mover/stories/index.story.tsx @@ -50,7 +50,7 @@ function BlockMoverStoryHorizontal() { useEffect( () => { /** - * This shouldn't be needed but unfortunatley + * 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. */ From 99b0190bc2d2b2d8126d24eedbc9216dcef5bfd8 Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 7 Nov 2024 08:45:03 +0900 Subject: [PATCH 06/14] Change .tsx to .js --- .../{index.story.tsx => index.story.js} | 106 +++++++----------- 1 file changed, 43 insertions(+), 63 deletions(-) rename packages/block-editor/src/components/block-mover/stories/{index.story.tsx => index.story.js} (65%) diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.tsx b/packages/block-editor/src/components/block-mover/stories/index.story.js similarity index 65% rename from packages/block-editor/src/components/block-mover/stories/index.story.tsx rename to packages/block-editor/src/components/block-mover/stories/index.story.js index 531c5768f4582c..828ea612fcccf5 100644 --- a/packages/block-editor/src/components/block-mover/stories/index.story.tsx +++ b/packages/block-editor/src/components/block-mover/stories/index.story.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import type { Meta, StoryFn } from '@storybook/react'; - /** * WordPress dependencies */ @@ -36,15 +31,6 @@ const blocks = [ ] ), ]; -// Provider component to wrap the BlockEditorProvider -function Provider( { children } ) { - return ( - - { children } - - ); -} - function BlockMoverStoryHorizontal() { const { updateBlockListSettings } = useDispatch( blockEditorStore ); @@ -52,29 +38,27 @@ function BlockMoverStoryHorizontal() { /** * 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. + * to render the blocks to update the block settings in the state. */ updateBlockListSettings( blocks[ 1 ].clientId, { orientation: 'horizontal', } ); - }, [] ); + } ); return ( -
- - - -
+ + + ); } -const meta: Meta< typeof BlockMover > = { +const meta = { title: 'BlockEditor/BlockMover', component: BlockMover, parameters: { @@ -84,26 +68,24 @@ const meta: Meta< typeof BlockMover > = { }; export default meta; -const Template: StoryFn< typeof BlockMover > = ( props ) => { +const Template = ( props ) => { return ( - -
- - - -
- + + + + + ); }; -export const Default: StoryFn< typeof BlockMover > = Template.bind( {} ); +export const Default = Template.bind( {} ); Default.args = { clientIds: [ blocks.length ? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ] : [], @@ -114,11 +96,11 @@ Default.args = { * 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: StoryFn< typeof BlockMover > = ( props ) => { +export const Horizontal = ( props ) => { return ( - + - + ); }; Horizontal.args = { @@ -133,23 +115,21 @@ Horizontal.parameters = { /** * You can hide the drag handle by `hideDragHandle` attribute. */ -export const HideDragHandle: StoryFn< typeof BlockMover > = ( props ) => { +export const HideDragHandle = ( props ) => { return ( - -
- - - -
- + + + + + ); }; HideDragHandle.args = { From ee98912f1d3c082e8324408343e320e1a16d9a0e Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 7 Nov 2024 09:40:36 +0900 Subject: [PATCH 07/14] Add decorators, and descriptions --- .../src/components/block-mover/README.md | 8 +- .../block-mover/stories/index.story.js | 87 ++++++++++--------- 2 files changed, 51 insertions(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md index 4268b183829665..d0ab0a2d5f0a1d 100644 --- a/packages/block-editor/src/components/block-mover/README.md +++ b/packages/block-editor/src/components/block-mover/README.md @@ -15,16 +15,18 @@ const MyMover = () => ; ## Props -### `clientIds`: `Array` +### `clientIds` -Blocks IDs. +The client IDs of the blocks to move. +- Type: `Array` - Required: Yes -### `hideDragHandle`: `boolean` +### `hideDragHandle` If this property is true, the drag handle is hidden. +- Type: `boolean` - Required: No - Default: `false` 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 828ea612fcccf5..97d8fce96a926c 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 @@ -43,45 +43,60 @@ function BlockMoverStoryHorizontal() { updateBlockListSettings( blocks[ 1 ].clientId, { orientation: 'horizontal', } ); - } ); + }, [] ); return ( - - - + ); } +/** + * BlockMover component allows moving blocks inside the editor using up and down buttons. + */ const meta = { title: 'BlockEditor/BlockMover', component: BlockMover, parameters: { - controls: { expanded: true }, docs: { canvas: { sourceState: 'shown' } }, }, + decorators: [ + ( Story ) => ( + + + + + + ), + ], + argTypes: { + clientIds: { + control: { + type: 'array', + }, + 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; const Template = ( props ) => { return ( - - - - - + ); }; @@ -97,11 +112,7 @@ Default.args = { * It is necessary to render the blocks to update the block settings in the state. */ export const Horizontal = ( props ) => { - return ( - - - - ); + return ; }; Horizontal.args = { clientIds: [ @@ -117,19 +128,13 @@ Horizontal.parameters = { */ export const HideDragHandle = ( props ) => { return ( - - - - - + ); }; HideDragHandle.args = { From a865f221bc1d5d3eb9816fe071a22f446e2b5b2e Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 7 Nov 2024 09:51:38 +0900 Subject: [PATCH 08/14] Fixes README --- packages/block-editor/src/components/block-mover/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md index d0ab0a2d5f0a1d..b781de773ef9f3 100644 --- a/packages/block-editor/src/components/block-mover/README.md +++ b/packages/block-editor/src/components/block-mover/README.md @@ -15,14 +15,14 @@ const MyMover = () => ; ## Props -### `clientIds` +### clientIds -The client IDs of the blocks to move. +The IDs of the blocks to move. - Type: `Array` - Required: Yes -### `hideDragHandle` +### hideDragHandle If this property is true, the drag handle is hidden. From 693b8eed0425600389cb492c2c17c08398f5b14f Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 14 Nov 2024 08:27:54 +0900 Subject: [PATCH 09/14] refactor BlockMover stories for improved structure --- package.json | 3 +- .../block-mover/stories/index.story.js | 99 +++++++------------ 2 files changed, 38 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index 06a73c51cc940d..832e785009240a 100644 --- a/package.json +++ b/package.json @@ -290,5 +290,6 @@ }, "workspaces": [ "packages/*" - ] + ], + "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" } 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 97d8fce96a926c..c822804eb8ee45 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 @@ -31,29 +31,6 @@ const blocks = [ ] ), ]; -function BlockMoverStoryHorizontal() { - 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 ( - - ); -} - /** * BlockMover component allows moving blocks inside the editor using up and down buttons. */ @@ -75,7 +52,7 @@ const meta = { argTypes: { clientIds: { control: { - type: 'array', + type: 'none', }, description: 'The client IDs of the blocks to move.', }, @@ -89,55 +66,51 @@ const meta = { }; export default meta; -const Template = ( props ) => { - return ( - - ); -}; - -export const Default = Template.bind( {} ); -Default.args = { - clientIds: [ - blocks.length ? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ] : [], - ], +export const Default = { + args: { + clientIds: [ + blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], + ], + }, }; /** * 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 = ( props ) => { - return ; -}; -Horizontal.args = { - clientIds: [ - blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], +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 ; + }, ], -}; -Horizontal.parameters = { - docs: { canvas: { sourceState: 'hidden' } }, + args: { + clientIds: [ + blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], + ], + }, + parameters: { + docs: { canvas: { sourceState: 'hidden' } }, + }, }; /** * You can hide the drag handle by `hideDragHandle` attribute. */ -export const HideDragHandle = ( props ) => { - return ( - - ); -}; -HideDragHandle.args = { - ...Default.args, - hideDragHandle: true, +export const HideDragHandle = { + args: { + ...Default.args, + hideDragHandle: true, + }, }; From a5dd59d5a1bb8fdcae6e3828fe12d3b40beb6a31 Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 14 Nov 2024 08:33:02 +0900 Subject: [PATCH 10/14] remove unnecessary lines in package.json --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 832e785009240a..06a73c51cc940d 100644 --- a/package.json +++ b/package.json @@ -290,6 +290,5 @@ }, "workspaces": [ "packages/*" - ], - "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" + ] } From bcd9a926cb0aefd4d60dc3873d16188902415bbf Mon Sep 17 00:00:00 2001 From: mimi Date: Thu, 14 Nov 2024 08:50:32 +0900 Subject: [PATCH 11/14] change Horizontal story to improve rendering --- .../components/block-mover/stories/index.story.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) 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 c822804eb8ee45..5b2fdd4ee61782 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 @@ -80,7 +80,7 @@ export const Default = { */ export const Horizontal = { decorators: [ - ( Story ) => { + () => { const { updateBlockListSettings } = useDispatch( blockEditorStore ); useEffect( () => { /** @@ -92,14 +92,13 @@ export const Horizontal = { orientation: 'horizontal', } ); }, [] ); - return ; + return ( + + ); }, ], - args: { - clientIds: [ - blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], - ], - }, parameters: { docs: { canvas: { sourceState: 'hidden' } }, }, From 66a811d9bc56f889be27ac7287f293300f7215a0 Mon Sep 17 00:00:00 2001 From: mimi Date: Fri, 15 Nov 2024 07:17:45 +0900 Subject: [PATCH 12/14] Update packages/block-editor/src/components/block-mover/stories/index.story.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../src/components/block-mover/stories/index.story.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 5b2fdd4ee61782..af89c944ce2fcd 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 @@ -68,9 +68,7 @@ export default meta; export const Default = { args: { - clientIds: [ - blocks.length ? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ] : [], - ], + clientIds: [ blocks[ 0 ].innerBlocks[ 1 ].clientId ], }, }; From b53d9487a1a29379d38e9ed6fa0b5670b06ad8b5 Mon Sep 17 00:00:00 2001 From: mimi Date: Fri, 15 Nov 2024 07:26:51 +0900 Subject: [PATCH 13/14] fix Horizontal decorator --- package.json | 3 ++- .../src/components/block-mover/stories/index.story.js | 11 +++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 06a73c51cc940d..832e785009240a 100644 --- a/package.json +++ b/package.json @@ -290,5 +290,6 @@ }, "workspaces": [ "packages/*" - ] + ], + "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" } 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 af89c944ce2fcd..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 @@ -78,7 +78,7 @@ export const Default = { */ export const Horizontal = { decorators: [ - () => { + ( Story ) => { const { updateBlockListSettings } = useDispatch( blockEditorStore ); useEffect( () => { /** @@ -90,13 +90,12 @@ export const Horizontal = { orientation: 'horizontal', } ); }, [] ); - return ( - - ); + return ; }, ], + args: { + clientIds: [ blocks[ 1 ].innerBlocks[ 1 ].clientId ], + }, parameters: { docs: { canvas: { sourceState: 'hidden' } }, }, From 973b8202bd09eb4133942f87be5825498c59cfdd Mon Sep 17 00:00:00 2001 From: mimi Date: Fri, 15 Nov 2024 20:41:54 +0900 Subject: [PATCH 14/14] remove trash changes from package.json --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 832e785009240a..06a73c51cc940d 100644 --- a/package.json +++ b/package.json @@ -290,6 +290,5 @@ }, "workspaces": [ "packages/*" - ], - "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" + ] }