Block widgets in the editor are not reflecting how they will look on the site

[desrosj]

While editing block widgets, many blocks do not accurately reflect how they will actually look on the front end of the site.

If this responsibility is on the theme, then the bundled themes need to be updated to better match.

[desrosj]

In my screenshots, I'm using the Twenty Twenty-One theme. It feels strange that some of the widgets have default styling, and others don't.

[jorbin]

I think that there are two pieces to this:

1) There should be better generic default styling since of the blocks don't look great as is and
2) The default themes should include better personalization.

I also think there should be a devnote to call out and encourage this personalization

[caseymilne]

Is there any way that styles from themes that apply to these blocks could be repurposed by the editor without having to specify them? Meaning could we make it easier for a theme to just focus on styles for the front-end, and then the editor has a way to grab those styles and parse them if they conform to a a certain structure, such as wrapping them in comments like:

/*
 * EditorBlockStyle
 * block-target: paragraph
 */

h2 {
  font-size: 1.2em;
}

/* /EditorBlockStyle */

Then the editor would need to open the theme stylesheet, parse out all the block target sections and combine them into an editor stylesheeet.

[noisysocks]

1) There should be better generic default styling since of the blocks don't look great as is and

Is there any way that styles from themes that apply to these blocks could be repurposed by the editor without having to specify them?

A potential solution here is to implement editor styles in the widgets editor, see GB26163. There are some design issues with implementing this, though. @isabel_brison is working on determining how feasible it is to do this in time for WordPress 5.8.

2) The default themes should include better personalization.

I also think there should be a devnote to call out and encourage this personalization

Agreed. All of the bundled themes should ideally be updated to work nicely with blocks which can now be added to widget areas. I can work on getting a dev note out. Do you know of anyone who could volunteer to work on the bundled themes?

[andraganescu]

Advancing the issue, @isabel_brison made a couple PRs to see if it’s viable to include theme editor styles in the new widgets editor at this stage. They need to be tested together, because ​the core one loads the actual styles and ​the Gutenberg one fixes some consequent styling issues in the editor. Let's see what the experience of using theme block styles is.

[noisysocks]

I'm going to close this ticket in favour of smaller tickets for each of the three seperate but related issues at play here, described below.

1) Editor styles

The widgets block editor does not currently load editor styles. This is why blocks appear unstyled.

This is a missing feature, not a bug, as the widgets screen has never supported editor styles or WYSIWYG editing.

Implementing this would make it so that blocks look the same in both the widgets block editor and on the site frontend.

This is tracked by GB26163 and #53344. @isabel_brison is working on a patch in #53344. It might be possible to add this in time for 5.8 if we can sort out the issues raised in GB32683.

2) Default block styles

With editor styles unavailable or turned off, some blocks do not look right. This is most apparent with the Latest Posts and Latest Comments blocks.

Note that this bug also occurs in the post editor if you turn off Preferences → Use theme styles.

It also affects the block editor in the Customizer.

This needs to be fixed regardless of whether or not we add editor styles to the widgets editor, because editor styles can be turned off and the Customizer will not support them.

I've opened GB32718 to track this issue.

3) Bundled theme issues

There are minor styling issues to do with blocks in some of the bundled themes. For example, in Twenty Twenty-one, the post title in the Latest Posts block should have a regular font size instead of a heading font size.

I looked briefly and saw the following issues:

• Twenty Twenty-one: Headings in Latest Posts block are too large.
• Twenty Seventeen: Extra padding in Latest Comments block.
• Twenty Sixteen: Extraneous separator above Latest Comments block.
• Twenty Fourteen: Text has low contrast in Latest Comments block.
• Twenty Thirteen: Extra padding in Latest Comments block.
• Twenty Ten: Extra padding on left of Latest Posts block.

I've opened #53422 to track this issue.

[desrosj]

In 51200:

Widgets: Add editor styles to the widgets block editor.

This updates the widgets screen to load the editor styles in the same way as the post editor. This combined with the package updates in [51198] and [51199] ensures that the blocks added to sidebars more accurately reflect what will be displayed on the front end of the site.

Props isabel_brison, noisysocks, andraganescu, audrasjb, jorbin, caseymilne, desrosj.
Fixes #53344. See #53388.