Storybook: Add BlockCanvas Component

[Rishit30G]

Part of #67165

What?

This PR adds Story for Block Canvas Component

Testing Instructions

• Run npm run storybook:dev
• Open the storybook on http://localhost:50240/
• Check the BlockCanvas Component

Screenshots or screencast

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Rishit30G <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[stokesman]

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

[Rishit30G]

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

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