Wp-calypso: Layouts: Block previews contain unexpected amount of blank space

[ianstewart]

Many of the previews in our Layout Selector have unexpected gaps in the preview that do not reflect the final output.

For example this About template …

Compared to the final output on the front-end of the site …

Enhancement: Provide a preview that matches the expected front-end result to improve the ability for users to select the right layout design for their needs and to better match.

[marekhrabe]

Possibly solved by the iframe preview, as media queries will have a better match

[jeryj]

I've dug into this a bit to see if the iframe PR (#39628) will fix this.

• The iframe PR preview matches the resulting editor view extremely closely on almost all templates (the ones that don't will get new spin-off issues).
• Most of the discrepancies between the preview and front-end are also issues between the editor and front-end.

That said, here's what I've found to be the specific issue with the extra blank spaces:

• This is an issue focused with Varia and Varia child themes (which is a lot of them). They have this CSS on the front-end:

.wp-block-spacer {
   display: block;
   margin-bottom: 0 !important;
   margin-top: 0 !important;
}

• The Gutenberg spacer block in the editor _does not have the wp-block-spacer_ class.
• I would think it is standard for all Gutenberg blocks to have a wp-block-[blockname] class attached to them. It appears that many do. If this is true, then I'd recommend we open an issue in Gutenberg to have that classname added to the spacer block in the editor.

[getdave]

@jeryj Thanks for your research here. Can I confirm the following:

1. That this _isn't_ a SPT specific issue.
2. That the "fix" is actually due to a missing class attribute on the saved core/spacer Block in Gutenberg Core?

If so then I'd suggest this issue is actually better raised:

• on the Varia Theme repo - regarding what you've learned above.
• on the Gutenberg repo - solely regarding the missing class (but without all the info above as it's not necessarily relevant to Core).

Thanks again

[jeryj]

1. This is not a SPT specific issue. The extra-large spacing is also happening on the editor of (likely) all themes and is happening on the front-end of themes like 2020.

Here's a screenshot of 2020 with the about page template on the front-end. You can see the large spacing is present:

1. No, that doesn't seem to be the actual fix. Adding the wp-block-spacer class doesn't remove the margins. This led me to looking into the issue further.

The 2020 theme above on the front-end also does not contain margin-bottom/top on the spacer, but still has large gaps. The issue there is that 2020 applies margins to groups and Varia based themes must have a spacer between groups.

Here's a screenshot of Varia on the front-end with the about page template _when the spacers are removed from the template_:

Compare this same page (spacers removed) to the 2020 front-end. Spacing looks good when spacers are entirely removed, since the margins are handled by the groupings automatically:

So we have a couple issues we're fixing for now:

1. Different themes handle group spacing differently. Some need spacers, some don't. My quick take on this is that spacers should not need to be added to get appropriate default spacing. That would mean a CSS change on Varia and varia based themes, if we went that route.
2. If we do the above, then the spacers would need to be removed from the default templates.
3. I think the margins on the editor around the spacer (32px top/bottom) may be for appropriate spacing to allow the appender + to be easier to access. In this sense, I think we _should set the top/bottom margins to 0 on spacers in the SPT preview_). However, _this will still show a large space_.

Here's a screenshot of the spacer top/bottom margins set to 0 in the SPT preview:

Still not so great :/

Here's a screenshot with the _spacers removed entirely from DOM_ in the SPT preview:

Now it looks right 👍

So, in the end, it may be best to change the about template _to not use spacers_.

It may open a can of worms, but it may be good to also fix Varia based theme CSS so that _spacers are not needed to get a nice looking template layout_ when using grouped blocks.

cc @getdave

[jeryj]

Quick follow up. I had previously said:

I think we should set the top/bottom margins to 0 on spacers in the SPT preview)

I tried this, and, because of collapsing margins, setting the margins to 0 does not actually do anything. The previews still have the same amount of spacing.

[getdave]

Thanks @jeryj . Interesting I've been working on trying to get dimensions (spacing) controls added to the Group Block in Core for a while now with little success. The main issue seems to be we can't decide how it should work on Themes that rely on spacer blocks.

[obenland]

@ianstewart @iamtakashi What's your preferred way to handle this?

[iamtakashi]

In terms of vertical spacing, I don't see drastic differences between what I see in the preview and the editor with Varia based themes.

In my opinion, the editor should show the content as close as possible to the front-end of the site, and I think that the editor styles in Varia based themes need to be improved.

[iamtakashi]

There is a Varia based theme issue that should make this situation better. (it won't still make 1:1, but better.)

[iamtakashi]

There is a Varia based theme issue that should make this situation better

Before and after

[jeryj]

I think those Varia changes will help, but I think a change to the master template would be a good as well. My reason for recommending a template change is that Twenty Twenty experiences a similar large spacing, but it's consistent across preview, editor, and front-end:

Preview

Editor

Front-end

Because of this, it seems like it'd be good to tweak the master template to display more consistently across Twenty Twenty and Varia-based themes.

cc @iamtakashi @ianstewart

[iamtakashi]

it seems like it'd be good to tweak the master template to display more consistently across Twenty Twenty and Varia-based themes.

That's ideal, but unfortunately, it's impossible to make the layouts work consistently in both Twenty Twenty and Varia-based themes as they handle spacing differently, and it's going to be disruptive for all the existing sites to change how Varia based themes handle spacing like Twenty Twenty.

This problem illustrates one of the reasons why we should move on to offering Block patterns — more smaller chunks of a page, and let the user decide the spacing between the patterns.

[obenland]

This problem illustrates one of the reasons why we should move on to offering Block patterns

@ianstewart @iamtakashi In the meantime, how should this issue be handled?

[iamtakashi]

I think, at this point, this issue is more of Varia's editor-style issue, not a preview issue because the preview matches with the editor.

[ianstewart]

I'll close this one and we can move it to a Themes discussion.