Layouts: Gutenberg (+) buttons appearing in Services Layout preview

[ianstewart]

Chrome and MacOS.

This seems particular to this layout.

@iamtakashi @alaczek

[ianstewart]

Also visible in the Alves Layout …

[obenland]

IIRC those are being hidden through CSS, so we might just need to update that selector to include these blocks

[ianstewart]

Not sure if related (or potentially another issue) but …

… are these large gaps in the preview related to a hidden + button? (If so, I can make another issue.)

[obenland]

are these large gaps in the preview related to a hidden + button?

Answered by @marekhrabe in Slack, quoted here for posterity:

[We] are rendering previews in a narrow container (that would usually trigger some smaller media queries), however the CSS media queries are computed against the whole screen which means unexpected results.

[iamtakashi]

are these large gaps in the preview related to a hidden + button?

The large gaps seem to be mostly coming from the difference in vertical margins for blocks between the front of the site and the editor CSS in the Varia based themes.

[iamtakashi]

The large gaps seem to be mostly coming from the difference in vertical margins for blocks between the front of the site and the editor CSS in the Varia based themes.

For example Automattic/themes#1798

[marekhrabe]

I will tackle just the "plus" buttons in this issue. We seem to have #39355 specifically for the large gap problems.

[marekhrabe]

PR that should fix this WordPress/gutenberg#20433

[marekhrabe]

Fixed. It will be shipped in next Gutenberg release.