Broken editor style in some themes (Twenty Twenty and Twenty Nineteen)

[fullofcaffeine]

Description

I've stumbled upon a few styling oddities when trying Gutenberg v11.4.0 with some themes, namely Twenty Twenty and Twenty Nineteen. I assume this issue could be more widespread and affect other themes in unexpected ways, too (?)

WIth Twenty Twenty, the page title input has shifted way to the left of the page, not aligning with the block list area horizontally:

Left is v10.3.0, right is v11.4.0.

In the case of Twenty Ninteteen, the same problem exists (though it looks like it was already present in previous versions of Gutenberg), but there's one minor issue thing that seems to have been introduced by v11.4.0:

Left is v10.3.0, right is v11.4.0.

I've bisected and it seems to have been introduced by this changeset: #34167.

Step-by-step reproduction instructions

1. Using trunk or v11.4.0, set the theme to Twenty Twenty or Twenty Nineteen;
2. Start a new page or post;
3. Verify how the alignment between the title and the block list area looks odd. In the case of Twenty Nineteen, there's another minor alignment issue (see screenshot above);
4. If you built from source, try reverting e30d875 and rebuild Gutenberg;
5. Verify that Twenty Twenty looks fine now. Twenty Nineteen still looks odd, though one of the alignment issues is gone (refer to the screenshots above for a visual reference).

Environment info

• Wordpress 5.8-beta4-51266;
• Gutenberg v11.4.0 (or built from trunk);
• Ubuntu Linux 18.04;
• Firefox 92.0b9 (64-bit)

Pre-checks

• I have searched the existing issues.
• I have tested with all plugins deactivated except Gutenberg.

[talldan]

Thanks for reporting this! I also noticed yesterday that this is the situation in Twenty Seventeen:

Also had a situation where the toolbar also appeared underneath the first block because of the lack of space at the top 😱

[fullofcaffeine]

Also had a situation where the toolbar also appeared underneath the first block because of the lack of space at the top scream

I also noticed that, but this appears to be an older bug. I just tested and it happens on v11.3.0, too, it's just that the bigger top margin on (most?) of the themes created more space for the toolbar and it didn't overlap with the top bar in the Desktop viewport.

[fullofcaffeine]

We found another issue that manifests with the Twenty Twenty theme on Firefox (92.0b9 (64-bit), Linux), desktop, and mobile viewports. The overflow rules for the title seem wrong or are not applying for some reason, and the title goes beyond the bounds instead of wrapping:

Doesn't happen on Chrome and Safari.

[ellatrix]

I cannot reproduce the issue in Firefox with Twenty Twenty. The text seems to wrap fine for me.

[ellatrix]

@fullofcaffeine Could you open a new issues if there's another problem with more info on how to reproduce and what style is missing?

[ellatrix]

In any case, this seems unrelated to the original issue and more like a styling issue with the theme. I will close this PR but feel free to reopen if I'm wrong.