Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook: Add BlockCanvas Component #68589

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

Storybook: Add BlockCanvas Component #68589

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
249a177
Storybook: Add Block Canvas Component
Rishit30G Jan 10, 2025
1461307
fix canvas styles and Default object
Rishit30G Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions packages/block-editor/src/components/block-canvas/stories/index.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/**
* Internal dependencies
*/
import { BlockCanvas, BlockList } from '../..';

const meta = {
title: 'BlockEditor/BlockCanvas',
component: BlockCanvas,
parameters: {
docs: {
canvas: { sourceState: 'shown' },
description: {
component:
'The BlockCanvas component is used to render the canvas for the block editor.',
},
},
},
argTypes: {
children: {
control: false, // Disable direct control for `children` as it defaults to `BlockList`
description: 'The children to render in the canvas.',
table: {
type: { summary: 'node' },
defaultValue: { summary: 'BlockList' },
},
},
height: {
control: 'text',
description: 'The height of the canvas.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '300px' },
},
},
styles: {
control: 'object',
description: 'The styles to apply to the canvas.',
table: {
type: { summary: 'object' },
},
},
},
};

export default meta;

export const Default = {
args: {
height: '300px',
styles: {
border: '1px solid #ccc',
backgroundColor: '#f9f9f9',
},
Copy link
Contributor

@stokesman stokesman Jan 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

styles is an array of objects and the actual CSS is a string. A basic example is the variable used in the playground stories.

As for the type, I'm not sure how thoroughly it can/should be documented so maybe for now Array suffices. The full type would be something like: { css?: string; assets?: string; isGlobalStyles?: boolean; __unstableType: string; }[]. Example usage is here and you can see how it’s consumed in EditorStyles

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for sharing the feedback and resources @stokesman

Here is the updated code snippet:

meta object:

styles: {
	control: 'object',
	description: 'The styles to apply to the canvas.',
	table: {
	  type: {
	    summary:
	      '[{ css?: string; assets?: string; isGlobalStyles?: boolean; __unstableType: string; }]',
	   },
	 },
      },

Default object:

export const Default = {
	args: {
		height: '100px',
		styles: [ { css: `body{font-size: 16px;}` } ],
		children: <BlockList />,
	},
	render: function Template( args ) {
		return (
			<BlockCanvas { ...args } />
		);
	},
};

Screenshot of the storybook

image

Let me know if this looks good, I'll update the PR accordingly 🙇🏻

Copy link
Contributor

@stokesman stokesman Jan 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! The change to Default looks good to me.

For the styles prop’s type summary, I'm not sure because I haven’t see guidance on how specific it should be. Most other examples I have seen are pretty generic. So perhaps just Array, or Array<{}>. If it’s better to fully specify the type then the last update you posted isn’t quite right—I’ll take some responsibility—and it should be:

{ css?: string; assets?: string; isGlobalStyles?: boolean; __unstableType?: string; }[]

or alternatively using the Array generic:

Array<{ css?: string; assets?: string; isGlobalStyles?: boolean; __unstableType?: string; }>

I’ll ping @WordPress/gutenberg-components and @t-hamano in case they know the guidance around this (and if not maybe we can establish it). One argument in favor of a more general type here would be easier maintenance I think 🤷‍♂️. It’s also notable EditorStyles is where the type is actually important as this component just passes it through.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, thanks for sharing the updates and feedback! 🙇🏻
I have updated the PR ✅

children: <BlockList />, // Default `children` is `BlockList`
},
render: function Template( args ) {
return <BlockCanvas { ...args } />;
},
};
Loading