Storybook: Add BlockCanvas Component by Rishit30G · Pull Request #68589 · WordPress/gutenberg

Rishit30G · 2025-01-10T07:36:04Z

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 · 2025-01-10T09:29:29Z

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 · 2025-01-11T04:59:54Z

packages/block-editor/src/components/block-canvas/stories/index.story.js

+		styles: {
+			border: '1px solid #ccc',
+			backgroundColor: '#f9f9f9',
+		},


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

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

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.

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

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.

From #67165 (comment):

I'd like to emphasize that we should write the stories in a way that keeps maintenance cost at a minimum.

I think from that general guidance the choice here should be to use the simple Array type.

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 · 2025-01-28T07:12:47Z

packages/block-editor/src/components/block-canvas/stories/index.story.js

+	args: {
+		height: '100px',
+		styles: [ { css: `body{font-size: 16px;}` } ],
+		children: <BlockList />,
+	},


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

Rishit30G · 2025-01-28T08:20:45Z

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

t-hamano · 2025-02-10T04:58:57Z

@Rishit30G thanks for the update!

In the BlockCanvas component, when you press the Enter key in an empty Paragraph block, a new empty Paragraph block should be added. However, the following error is logged in the browser console and it doesn't work.

use-input.js:76 Uncaught TypeError: Cannot read properties of null (reading 'content') at HTMLBodyElement.onKeyDown (use-input.js:76:1)

I think this is because the clientId is not correctly applied to the block and it is not rendered as a Paragraph block:

On the other hand, in a story similar to this PR (Block Editor > Box), the Enter key works correctly. I don't know why this is happening 🤷

I haven't been able to find a solution yet, so I'll add the "Needs Technical Feedback" label.

Rishit30G · 2025-02-10T10:50:09Z

Thanks for testing it out @t-hamano

Even I could replicate this issue, I tried the same logic from the Box code, but the issue still persist
Definitely needs some investigation 🤔

stokesman · 2025-02-10T19:53:42Z

packages/block-editor/src/components/block-canvas/stories/index.story.js

+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ ( newBlocks ) => updateBlocks( newBlocks ) }
+				onChange={ ( newBlocks ) => updateBlocks( newBlocks ) }
+			>
+				<BlockCanvas { ...args } />
+			</BlockEditorProvider>


Adding the provider seems necessary yet I believe it would be considered more appropriate to do so by way of a decorator in order to keep the story itself focused on BlockCanvas. For example, how it was done is in the PR for the BlockTitle story.

stokesman · 2025-02-10T21:13:22Z

On the other hand, in a story similar to this PR (Block Editor > Box), the Enter key works correctly. I don't know why this is happening 🤷

A difference with that story is its source is outside the block-editor package and so it imports from that package by name instead of the local path. It doesn’t seem like it should matter yet I tried changing the import here to '@wordpress/block-editor' and the story started working. I don’t understand what causes this. I suspect whatever it is might also be the cause of #68363.

Rishit30G · 2025-02-11T05:10:24Z

Thanks for sharing the feedback @stokesman! 🙇🏻

I have updated the PR accordingly ✅

Moved the provider to decorators
Updated the imports
Updated the styles type
Added BlockToolbar as well

I tried changing the import here to '@wordpress/block-editor' and the story started working

Yup, that's true, for time being I have updated the imports in the PR so that it doesn't break

Storybook: Add Block Canvas Component

249a177

Rishit30G marked this pull request as ready for review January 10, 2025 09:29

Rishit30G requested a review from ellatrix as a code owner January 10, 2025 09:29

t-hamano mentioned this pull request Jan 10, 2025

Storybook: Add and Update Block Editor Components stories #67165

Open

t-hamano added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components labels Jan 11, 2025

stokesman reviewed Jan 11, 2025

View reviewed changes

fix canvas styles and Default object

1461307

Rishit30G requested a review from stokesman January 22, 2025 11:12

t-hamano reviewed Jan 28, 2025

View reviewed changes

Refactor block-canvas story to use BlockEditorProvider

7179821

t-hamano added the Needs Technical Feedback Needs testing from a developer perspective. label Feb 10, 2025

stokesman reviewed Feb 10, 2025

View reviewed changes

Update block-canvas component with BlockToolbar

fcfabd9

	* @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.

Conversation

Rishit30G commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing Instructions

Screenshots or screencast

Uh oh!

github-actions bot commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stokesman Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rishit30G Jan 13, 2025

Choose a reason for hiding this comment

Screenshot of the storybook

Uh oh!

stokesman Jan 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rishit30G Jan 21, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano Jan 28, 2025

Choose a reason for hiding this comment

Uh oh!

stokesman Feb 10, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano Jan 28, 2025

Choose a reason for hiding this comment

Uh oh!

Rishit30G commented Jan 28, 2025

Uh oh!

t-hamano commented Feb 10, 2025

Uh oh!

Rishit30G commented Feb 10, 2025

Uh oh!

stokesman Feb 10, 2025

Choose a reason for hiding this comment

Uh oh!

stokesman commented Feb 10, 2025

Uh oh!

Rishit30G commented Feb 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Rishit30G commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025 •

edited

Loading

stokesman Jan 11, 2025 •

edited

Loading

stokesman Jan 21, 2025 •

edited

Loading