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