[FSE] Discussion on Editor Styles Wrapper Padding for block themes

[annezazu]

Description

As part of the fourth call for testing for the FSE Outreach Program, two different people noted that when it came to a WYSIWYG experience, the site editor has padding that breaks the experience a bit:

The site editor makes it looks like there is a small margin all around the full-width header. On the site itself, this isn’t seen. I had set a background color for the full-width header which is edge to edge on the site, but has a margin all around it in the editor.

In talking with a few themers, I wanted to open this issue to discuss the best approach here. It seems the padding was recently updated to 8px, which matches the default “body” browser padding. Generally speaking though, block themes will likely always want this to be 0px considering that helps with creating a true WYSIWYG experience and then desired margins to the inner elements as needed.

If any of this is wrong or the title of the issue needs to be updated, please let me know! cc @kjellr @carolinan @youknowriad for discussion.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.3.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

• Device: Desktop
• Operating system: MacOS
• Browser: Chrome 88

[youknowriad]

We discussed this very recently and updated the default padding to match the browser default here #30277

if we want to update to 0, it will update the frontend of existing themes as well because we can't just set it to 0 in the backend, we need the editor to match frontend by default.

So I think the current approach to match browser defaults is the right one and the least impacting one.

Themes can easily applying "padding: 0" to the root level in theme.json which will zero out the padding for them in both frontend and editor.

[youknowriad]

I'm going to just close this issue as no action is needed for now.

[bobbingwide]

Themes can easily applying "padding: 0" to the root level in theme.json which will zero out the padding for them in both frontend and editor.

@youknowriad Can you be more specific? What exactly do I have to code in an experimental-theme.json file.
At present I have the following CSS in style.css

/**
 Override the 8px margin from user agent stylesheet
 */
body { margin: 0px; }

And can I do something similar to reduce the margin-bottom on the columns block?

/**
Override margin bottom added by Gutenberg inline styling
 */
.wp-block-columns { margin-bottom: 0px;}

[youknowriad]

@bobbingwide

you can set; padding: 0 in theme.json's styles key already and it will clear the default padding for body. Margin is not yet supported in theme.json but there's a PR for it that is close #30608