Fix HTML preview for themes applying global margins

[youknowriad]

Some themes might apply global margins/paddings... For the HTML block preview, we need to reset those styles and only apply the content's editor styles.

Fixes #13414

Repeat instructions from the issue to ensure that it's working properly.

[talldan]

Did the overflow and min-height solve other issues, or are they pre-emptive?

[youknowriad]

This is just the exact same reset used previously in the block styles preview. I assume these can also be used and break something cc @jasmussen

[jasmussen]

Yeah good question.

The two questionable rules are overflow and min-height, and I believe I added those because many themes use overflow as an "auto clearing" measure, and min-height for sites that need to leverage the full viewport height above the fold.

I can't recall why I unstyled those for the block styles preview but I know they were necessary.

@kjellr sorry for pinging you the third time today, you're my CSS Yoda — what side effects might there be to changing the overflow and min-height properties? I'm leaning towards these being fine for the purposes of teh HTML preview tab, but would appreciate your thoughts.

[kjellr]

what side effects might there be to changing the overflow and min-height properties? I'm leaning towards these being fine for the purposes of teh HTML preview tab, but would appreciate your thoughts.

I did some general testing, and the styles didn't seem to cause any issues either way (keeping these !important styles, or removing them). I don't necessarily think it'll be a problem to include them, but I can't figure out what problem they're solving.

[youknowriad]

The problem they may solve is if the editor styles include things like html body or something, which is definitely very rare but I just thought about being certain as the intent is to override the styles no matter what.

[kjellr]

Ah, I see. Yeah, it probably makes sense to include these as a preventative measure then.

[talldan]

Thanks for looking into it so quickly. I gave it a test with a couple of the affected themes and it solved the issue. Good that the change is fairly minimal as well.

[gziolo]

Should it be 5.0 milestone?

[youknowriad]

No, because this will be backported to 4.9 before the actual release as it's a regression in 4.9.

[jasmussen]

Thank you for fast work here. After a sanity check in #13416 (comment), I think this is probably good to ship.

In testing this, I noticed a separate unrelated issue as a result of the HTML block using the sandbox component. I remember adding this offending rule myself, when working on embeds with @notnownikki, so I'm to blame. Notice how we use an important asterisk rule to unset the top and bottom margins on, in this case, paragraph blocks?

Pretty sure I added those rules, and made them important, because I believed that the sandbox component would only ever be used for embeds, where we can't be sure what markup we'll be presented with, and we level the playing field. But we probably need to revisit those rules, and either make them embed only (possible), or at least revisit the problem they were solving.