Site Editor: Twenty Twenty-one Blocks layout is broken in editing view

[vindl]

The homepage layout looks off in the site editor when compared to what's rendered on the front end:

[Addison-Stavlo]

Took a quick look and this doesn't seem to be an issue with the theme but the starter content itself. I see the same problem on my site withe seedlet-blocks.

For some reason, every section of content is nested in a single column inside a layout grid:

[Addison-Stavlo]

or maybe an issue with the layout grid block in the site editor 🤔

[Addison-Stavlo]

Yup, so more specifically it seems to be related to the span setting for the layout-grid block. It seems like the CSS isnt properly being applied for this attribute in the site editor. That is, in the post editor the content looks correct, you may notice a span of "8" for a layout grid. Changing this to "1" will make it look like the broken layout in the site editor.

Loading the site editor, you will see the setting for that layout grid is properly set, but changing that setting doesnt change anything visually and it always seems to render as if the span is 1.

[Addison-Stavlo]

Update - It seems the layout-grid block styles depend on the .block-editor class, which isn't added in the site editor (instead we have #edit-site-editor and .edit-site on this element).

It looks like Automattic/block-experiments#156 will fix this issue.
Also have this core PR open to see if we can just add the block-editor class to the site editor.

[david-szabo97]

Leaving an update here:

• Looks like we won't be able to add the block-editor class to the site editor
• So we are pushing Fix layout grid in site editor. block-experiments#156 to be merged.

[Addison-Stavlo]

Update - Automattic/block-experiments#156 is merged. Once the next release (newer than 1.3) goes out we can verify this is fixed and close.

[vindl]

@Addison-Stavlo @jasmussen what's the timing and process for these releases?

[Addison-Stavlo]

The version in the repo has been updated and is undergoing testing before the release (Automattic/block-experiments#156 (comment)). I'm not sure beyond that though.

[Addison-Stavlo]

The underlying issue is fixed and the layout-grid now works properly in the site editor.

However, it looks like our FSE onboarding patterns no longer use the layout-grid block anyways. 🤣