Twenty Nineteen: columns set to Full width extend beyond editor window bounds

[charleyparkerdesign]

Fresh install of WordPress 5.8.1 — no plugins or imported database, twentynineteen theme

When creating columns, if they are set to "Full width" alignment, the resulting columns extend past the left and right boundaries of the page editing window, regardless of the window width or whether nav bar is collapsed or open.

Difficult to read or edit the column content at that point, and difficult to reach the alignment control to set them back to "Wide width".

[sabernhardt]

Thanks for the report!

This is apparently an issue with Twenty Nineteen and full-width blocks in the editor. On the front end, the post content has a max-width and then the full-width block is 125% of that. In the editor, the wrapper does not have the max-width.

It might be better with this:

.editor-styles-wrapper {
    max-width: 80%;
    margin: 0 10%;
}

[smit08]

Overridden the full with stylings with the custom stylings in style-editor.css

[sclayf1]

I believe this problem is due to a faulty .block-editor-writing-flow style declaration in twentynineteen's style-editor.scss.

	@include media(tablet) {

		.block-editor-writing-flow {
			max-width: 80%;
			margin: 0 10%;
		}

After SASS processing and injection into the page with JS, the selector becomes .editor-styles-wrapper .block-editor-writing-flow, but this fails to apply because those two classes are now on the same DIV. This bug still exists in 5.8.3.

[sclayf1]

Replying to sclayf1:

I believe this problem is due to a faulty .block-editor-writing-flow style declaration in twentynineteen's style-editor.scss.

I should say the CSS isn't faulty, but the system that modifies it for DOM injection needs to change or the CSS needs to mitigate for it.

Apply max-width and margin when block-editor-writing-flow and editor-styles-wrapper classes are on the same element.

Trac ticket: https://core.trac.wordpress.org/ticket/54169

[sabernhardt]

Thanks @sclayf1! I made a patch (PR) accordingly.

[audrasjb]

Before applying the pull request

[audrasjb]

After applying the pull request: it fixes the issue

[audrasjb]

The above PR fixes the issue.
Self assigning for commit.

[audrasjb]

In 52925:

Twenty Nineteen: avoid columns set to full width to extend beyond editor bounds.

This changeset applies max-width and margin CSS rules when block-editor-writing-flow and editor-styles-wrapper classes are on the same element.

Props charleyparkerdesign, sabernhardt, smit08, sclayf1.
Fixes #54169.

Committed in https://core.trac.wordpress.org/changeset/52925