Make WordPress Core

Opened 21 months ago

Closed 15 months ago

Last modified 15 months 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 21 months ago.
54169.patch (553 bytes) - added by smit08 21 months 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 15 months ago.
Before applying the pull request
Capture d’écran 2022-03-12 à 19.41.42.png (198.8 KB) - added by audrasjb 15 months ago.
After applying the pull request: it fixes the issue

Download all attachments as: .zip

Change History (13)

#1 @sabernhardt
21 months 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 21 months ago by sabernhardt (previous) (diff)

@smit08
21 months ago

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

#2 @smit08
21 months ago

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

#3 follow-up: @sclayf1
16 months 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 16 months ago by sclayf1 (previous) (diff)

#4 in reply to: ↑ 3 @sclayf1
16 months 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.


16 months 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
16 months ago

  • Milestone changed from Awaiting Review to 6.0

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

@audrasjb
15 months ago

Before applying the pull request

@audrasjb
15 months ago

After applying the pull request: it fixes the issue

#7 @audrasjb
15 months 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
15 months 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.