Twenty Nineteen: Wide alignment does not match front-end when the sidebar is active

[laurelfulford]

Originally reported in Twenty Nineteen's GitHub repo by @afercia:

When viewing in the editor, the 'wide' block is not the same width as it appears on the front-end, when the sidebars in the editor are open.

In the front-end, the wide image is always larger than the paragraph content even at smaller viewports, until it goes fully responsive under 768. This is not the case in the editor, so the views don't match.

Steps to replicate:

1. In the editor, add an Image block and set it to 'wide' width.
2. Add a paragraph block, and give it a background colour (to better see it's size).
3. Compare their widths when the editor sidebars are open; the paragraph and wide image appear to be the same width.
4. Publish the page.
5. View the front-end, and note the 'wide' image and paragraphs are not the same width.

Original ticket here: ​https://github.com/WordPress/twentynineteen/issues/667

[laurelfulford]

Twenty Nineteen - shows editor and front-end overlap

[karmatosed]

Noting that I can replicate this in testing today.