TT1 blocks: differences in spacing between editor & front end

[annezazu]

In chatting with someone about the latest FSE outreach program here https://github.com/bobbingwide/bobbingwide/issues/14, the issue of spacing at the top of the editor came up as the editor makes the spacing seem okay whereas, when viewing the site, it quickly becomes clear that a spacer block is needed. This breaks the WYSIWYG experience currently.

Editor View:

Front End View:

To me, this seems to be a TT1 blocks issue but, let me know if not! Happy to report in the main Gutenberg repo :)

[kjellr]

The extra space added there comes from margins in Gutenberg, so this could be an issue there. But themes may end up with the ability to customize it, as per issues like https://github.com/WordPress/gutenberg/pull/30371 and https://github.com/WordPress/gutenberg/pull/30375. So let's keep this open here for now and see if those enable a theme-based fix. 👍

[annezazu]

Thanks for the wider context, @kjellr!

[annezazu]

Another tester reported more spacing issues with the editor showing far more spacing than the front end as part of the fourth call for testing. Passing along here and renaming this issue to touch on general spacing differences.

Editor View:

Front End View:

[annezazu]

Cross referencing this issue as this seems to be the culprit :) https://github.com/WordPress/gutenberg/issues/30545

[carolinan]

The padding in the site editor is seen as the mint green background above and to the sides of the header area. It doesn't explain the big difference in the space between that edge and the top of the order button 🤔

[carolinan]

It is difficult to troubleshoot this without the block markup. I went back and followed the instructions from the call for testing for the restaurant header and I am not seeing this drastic difference.

Here is front view on top of the editor view. The image where the order button is closer to the top is the front.

[annezazu]

What would be helpful to share next time this happens @carolinan ? :)

[annezazu]

Passing along wonderful context showing differences between editor and front end from the last FSE call for testing. Happy to open any individual issues that are needed but do need some guidance on what that would be:

Here’s some screenshots comparing a single section from this test’s content. I’d deleted my initial test site before I saw your reply, and what you see here is a bare minimum re-do of this testing call.

Front end: Editor:

The first image is a snapshot from the template editor, from steps 19-22. Each button has a small default top margin applied and there’s no default horizontal spacing between these elements.

The second image is the same content as rendered on the front of the site. In the first column, the first child of the column has a top margin applied; in the second column, the first child has no top margin applied (the top margins applied here and in the previous image are also different values). The buttons now have a small horizontal margin applied by default.

It’s these types of details that often mean the difference between a design that looks well-resolved vs. one that looks unintentional. So far, I’ve been able to manage this in my own themes by not using the native block styles, though I’m concerned there’ll be a point where it’s no longer feasible to write custom CSS for this task.