Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#54169 closed defect (bug) (fixed)

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

Reported by: charleyparkerdesign's profile charleyparkerdesign Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.8.1
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: css Cc:

Description

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".

Attachments (4)

2019-full-width-column.png (283.8 KB) - added by sabernhardt 3 years ago.
54169.patch (553 bytes) - added by smit08 3 years ago.
Overridden the full with stylings with the custom stylings in style-editor.css
Capture d’écran 2022-03-12 à 19.38.40.png (284.2 KB) - added by audrasjb 2 years ago.
Before applying the pull request
Capture d’écran 2022-03-12 à 19.41.42.png (198.8 KB) - added by audrasjb 2 years ago.
After applying the pull request: it fixes the issue

Download all attachments as: .zip

Change History (13)

#1 @sabernhardt
3 years ago

  • Component changed from Administration to Bundled Theme
  • Focuses css added
  • Keywords needs-patch added; needs-testing removed
  • Severity changed from minor to normal
  • Summary changed from Gutenberg issue - when columns are set to Full width they extend beyond editor window bounds to Twenty Nineteen: columns set to Full width extend beyond editor window bounds

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%;
}
Last edited 3 years ago by sabernhardt (previous) (diff)

@smit08
3 years ago

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

#2 @smit08
3 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

#3 follow-up: @sclayf1
2 years ago

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.

Last edited 2 years ago by sclayf1 (previous) (diff)

#4 in reply to: ↑ 3 @sclayf1
2 years ago

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.

This ticket was mentioned in PR #2291 on WordPress/wordpress-develop by sabernhardt.


2 years ago
#5

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

#6 @sabernhardt
2 years ago

  • Milestone changed from Awaiting Review to 6.0

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

@audrasjb
2 years ago

Before applying the pull request

@audrasjb
2 years ago

After applying the pull request: it fixes the issue

#7 @audrasjb
2 years ago

  • Keywords has-screenshots commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to assigned

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

#8 @audrasjb
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.