Block Widget Editor: Widget area layout is broken

[t-hamano]

Description

The latest Gutenberg seems to have the following problems with the layout in the block widget editor.

The widget area is narrow and there is spacing around the widget area

Closing the widget area results in an extremely narrow width

285631b9a83010126b06c141cfac4fba.mp4

Expected behavior (Gutenberg plugin disabled)

Step-by-step reproduction instructions

• Activate Twenty Twenty One theme
• Go to Appearance > Widgets

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

According to my research, I think this is caused by a slight change in the structure of the Widget Editor due to #54149.

[t-hamano]

With #54149, the widget editor is now rendered via the new BlockCanvas component. This component has a WritingFlow component with the .editor-style-wrapper class applied inside it.

However, the widget editor did not originally apply this class to the WritingFlow component. Because this class should be applied to the content wrapper inside each widget area.

If the entire editor has this class, you will end up with unintended style overrides. For example, if a classic theme that supports widgets defines the following theme.json, the style will also be applied to the panel title of the widget area. This is because the widget area panel title is also an h2 element, so it matches the .editor-styles-wrapper h2 selector.

{
	"version": 2,
	"styles": {
		"elements": {
			"h2": {
				"border": {
					"top": {
						"color": "#ff0000",
						"style": "solid",
						"width": "100px"
					}
				}
			}
		}
	}
}

It seems a bit unreasonable to assume all these cases and override the unintended style on the widget editor side. Therefore, I believe that a means to solve this problem by not giving fixed class names to the WritingFlow component is needed first.

@youknowriad

For example, would it be possible to add something like writingFlowProps to the BlockCanvas component? The default value is an object like {className:'editor-styles-wrapper'}, and the approach is to provide a means to override this.

[youknowriad]

For me, it's the widgets editor that has a completely weird behavior. (styles not applied to the whole editor). In an ideal world, the widgets editor would render a separate editor per widget area. I guess there's some reason for the current approach, so in order to avoid regressions let's just avoid using BlockCanvas and restore the previous components.

I don't think we should pollute BlockCanvas with props to address the specifics of the widgets editor because it's such an edge case.