Gutenberg: HTML Preview not displaying correctly for some themes

[talldan]

Describe the bug
This seems to be a regression introduced by #13080

For some themes (Twenty Seventeen, Twenty Sixteen, Twenty Fifteen) the Custom HTML block's preview is not displaying correctly:

The cause seems to be that those themes have some styles on the body element that are now being included in the preview. In the case of Twenty Seventeen:

body {
    // ...
    margin: 20px 40px;
    // ...
}

This margin is causing the content to overflow the preview.

To Reproduce
Steps to reproduce the behavior:

1. Activate Twenty Seventeen
2. Create a custom html block with some basic content <div>test</div>
3. Preview the classic block
4. Observe that the content is not shown in the preview (or is clipped), but the preview does have an inner element with some scrollbars (due to the content overflow) and if you scroll around you'll find the content.

Expected behavior
The preview should be displayed clearly without the need to scroll.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context

• reproduced with 4.9 release candidate 1
• Twenty Nineteen doesn't seem to have this issue (it doesn't have the body margin)

[pento]

As this is a regression in the packages that WordPress 5.1 has imported, I'm adding it to the WordPress 5.1 milestone.

[youknowriad]

This is not a regression in 5.1 AFAIK.

[jasmussen]

As a strawman idea: set body { margin: initial; }?

[youknowriad]

Yes, I think we should reset margin and padding in the HTML block preview as these are only meant for the full editor styles.

[jasmussen]

This is likely already partially done for style variation previews and block previews. Would it make sense to look into a mixin, or other way to semi-automate this?

[youknowriad]

I don't think we can reuse things here as the styles must be applied inside the iframe (in JS)