Storybook: Add Story for InnerBlocks - #68651
Conversation
Mamaduka
added
[Type] Developer Documentation
dhruvikpatel18
changed the title
dhruvikpatel18
changed the title
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
im3dabasia
left a comment
im3dabasia
left a comment
There was a problem hiding this comment.
Thanks @dhruvikpatel18
Left a few feedbacks. Please address them.
| // `InnerBlocks` only renders within a block, so the props being demonstrated | ||
| // are passed down to the block type registered below through a context rather | ||
| // than rendered by the story directly. | ||
| const InnerBlocksProps = createContext( {} ); |
There was a problem hiding this comment.
InnerBlocksProps reads like the real exported useInnerBlocksProps API. Could you rename it to something like ArgsContext so the two don't get confused?
| }, | ||
| argTypes: { | ||
| allowedBlocks: { | ||
| control: { type: 'object' }, |
There was a problem hiding this comment.
An object control can't take true/false, so two of the three modes your own description lists aren't reachable from Controls.
A select + mapping like you did for renderAppender would cover all three, wdyt?
| description: | ||
| 'A component rendered in front of the appender, which can be used to represent an example state before any block is inserted.', | ||
| table: { | ||
| type: { summary: 'Component' }, |
There was a problem hiding this comment.
placeholder is rendered as a node, not invoked (block-list/index.js:281),
Navigation passes an element (inner-blocks.js:60). 'Element' fits better than 'Component'.
| export const Default = { | ||
| render: function Template( args ) { | ||
| const blocks = useContainerBlock(); | ||
|
|
||
| return ( | ||
| <InnerBlocksProps.Provider value={ args }> | ||
| <ExperimentalBlockEditorProvider | ||
| value={ blocks } | ||
| selection={ SELECTION } | ||
| > | ||
| <style>{ storyStyles }</style> | ||
| <div className="inner-blocks-story"> | ||
| <BlockList /> | ||
| </div> | ||
| </ExperimentalBlockEditorProvider> | ||
| </InnerBlocksProps.Provider> | ||
| ); | ||
| }, | ||
| }; |
There was a problem hiding this comment.
With sourceState: 'shown', the snippet is all story scaffolding, <InnerBlocks /> and the args never appear, so the source panel teaches nothing. Could you add a hand-written parameters.docs.source.code?
3 participants
What?
This PR will add story for
InnerBlockscomponent in the Storybook.Why?
Part of: #67165
Part of: #22891
Testing Instructions
innerBlockstory.Screenshots or screencast
innerBlocks.Screencast.mov