Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#53643 closed defect (bug) (fixed)

Twenty Twenty: "Wide line" separator breaks inside columns.

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

Description

The "Wide line" separator style in Twenty Twenty breaks outside of its container when placed inside of a column. I expect it would max out at the column width like it does in Twenty Twenty-One or Twenty Nineteen. This happens on the front-end, and also in the editor.

To Reproduce:

  1. Add a columns block with a few columns in it.
  2. Add a separator block into one of the columns.
  3. Set the separator to use the "Wide line" style.
  4. Observe the overflow issue.

Screenshots:

https://cldup.com/XBguG4Emmi.png

https://cldup.com/9KVe96W0SK.png

(Additionally, the separators don't show up in the preview, but I've seen that happen in many themes, so I don't think it's specific to Twenty Twenty).

Other themes, for reference:

Twenty Twenty-One:

https://cldup.com/2334o8oCij.png

Twenty Nineteen:

https://cldup.com/Z-dvo3quFO.png


Tested with Twenty Twenty v1.7
WordPress v5.7.2
Gutenberg v11.0.0

Attachments (3)

53643.diff (866 bytes) - added by sabernhardt 2 years ago.
changing width to 100%
Capture d’écran 2022-06-07 à 06.48.43.png (156.5 KB) - added by audrasjb 2 years ago.
Before patch: Wide line separators inserted inside columns are overflowing their container
Capture d’écran 2022-06-07 à 06.51.28.png (157.1 KB) - added by audrasjb 2 years ago.
After patch: looks better :)

Download all attachments as: .zip

Change History (9)

#1 @desrosj
3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

#2 @matthiaspabst
3 years ago

This also happens without columns. To reproduce the bug it's enough to add a paragraph and a separator with the style "wide".

@sabernhardt
2 years ago

changing width to 100%

#3 @sabernhardt
2 years ago

  • Focuses css added
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Future Release to 6.1

r53459 seems to have fixed the width and overflow in the editor, but that still leaves the front-end.

At 1280 pixels and wider, the separator's width and max-width were both 120rem. One of those needs to be 100%, and I chose to change the width. (The width is already set to 100%, so simply removing the fixed value at the breakpoint is another option.)

@audrasjb
2 years ago

Before patch: Wide line separators inserted inside columns are overflowing their container

@audrasjb
2 years ago

After patch: looks better :)

#4 @audrasjb
2 years ago

  • Keywords has-screenshots commit added

Let's commit the suggested patch, using width: 100%. I think it's better for an existing theme to change the value than to remove it completely.

#5 @audrasjb
2 years ago

  • Owner set to audrasjb
  • Status changed from new to accepted

#6 @audrasjb
2 years ago

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

In 53475:

Twenty-Twenty: Fix a width/alignement issue on "Wide Line" Separator style variation.

This change fixes an alignement issue on the "Wide Line" Separator style variation on front-end, especially when used inside a column block. It changes the block width value from 120rem to 100% to avoid container overflowing.

Props kjellr, matthiaspabst, sabernhardt, audrasjb.
Fixes #53643.

Note: See TracTickets for help on using tickets.