Themes: Remote, Upsidedown, George Lois, Archivo - with Gutenberg plugin, editor content does not follow max width

sophiegyo commented 1 year ago

Quick summary

Several a8c themes whose content in the editor view should have constrained width to match the live view, are currently not showing constrained width when the Gutenberg plugin is active.

Replicated on:

Simple
Atomic
Self-hosted

Themes where this issue occurs so far:

Archivo
Remote
Upsidedown
George Lois

Additional themes tested where I could not replicate this issue:

Pixl
Poema
Storia

Steps to reproduce

Start at any WordPress site with Gutenberg 16.0.0 active
Ensure one of the following a8c themes is installed:
- Upsidedown
- George Lois
- Remote
- Archivo
Edit an existing page

What you expected to happen

The content within the editor should have margins to the left and right which somewhat match the live view.

Example taken from how Upsidedown looks in the editor WITHOUT Gutenberg:

Live view:

What actually happened

The editor view of the content isn't as 'centered':

Live view remains as normal.

IMO this is happening because something in these themes is being overriden by Gutenberg to prevent editor-styles max-width or margin being set. No space here:

Margin AND max-width here:

This seems to follow on the themes I've mentioned so far; I'm not sure if there are others.

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

No response

Logs or notes

Tested with: WP 6.2.2 Gutenberg 16.0.0

I put the workaround as 'yes, difficult to implement' because on dotcom the workaround would be 'Deactivate Gutenberg' which isn't really viable for Simple sites.

It isn't a usability issue, more of an aesthetic issue - but we've had a couple of complaints. See p7DVsv-hGe#comment-46328-p2

liviopv commented 1 year ago

Reproduced using George Louis on a local site:

CleanShot 2023-06-21 at 12 02 20

cuemarie commented 1 year ago

Noting this was escalated here: p1687345113536249-slack-C02FMH4G8

cuemarie commented 1 year ago

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

Tested on Simple – Replicated
Tested on Atomic – Replicated
Replicated outside of Dotcom? - Yes, if I install the archivo-wpcom-1.0.1.zip theme file

📌 FINDINGS/SCREENSHOTS/VIDEO

Atomic site using theme Archivo - editor content touches the side of the browser window
Simple site using Remote and Archivo - editor content has left/right margins very close to edges of editor
On Atomic, the issue does not present in the editor on Gutenberg v15.9.1