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 <rishit30g@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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 🙇🏻

[stokesman]

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.

[Rishit30G]

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

[t-hamano]

There are no strict rules for now 😅 Personally, I think a simple array type is fine, following the JSDoc here:

gutenberg/packages/block-editor/src/components/block-canvas/index.js

Lines 124 to 128 in 2abe6fa

	* @param {Object} props Component props.
	* @param {string} props.height Canvas height, defaults to 300px.
	* @param {Array} props.styles Content styles to inject into the iframe.
	* @param {Element} props.children Content of the canvas, defaults to the BlockList component.
	* @return {Element} Block Breadcrumb.

[t-hamano]

Thanks for the PR!

The BlockCanvas component doesn't draw anything visually by itself, so exposing it to Storybook may not be useful.

Generally, this component is expected to render blocks based on the data from a provider. Therefore, how about wrapping it in a provider and managing the blocks as a state?

Example (Quotation from this document):

function MyEditorComponent() {
	const [ blocks, updateBlocks ] = useState( [] );

	return (
		<BlockEditorProvider
			value={ blocks }
			onInput={ ( blocks ) => updateBlocks( blocks ) }
			onChange={ ( blocks ) => updateBlocks( blocks ) }
		>
			<BlockCanvas />
		</BlockEditorProvider>
	);
}

[t-hamano]

I don't think these args are necessary, as this component should work fine with the default props.

[Rishit30G]

Thanks for the feedback and resources @t-hamano! 🙇🏻
I have updated the code as per the feedback and now the component looks like this:

Screen.Recording.2025-01-28.at.1.28.36.PM.mov