Make WordPress Core

Opened 2 years ago

Closed 18 months 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:


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.


(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:

Twenty Nineteen:

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

Attachments (3)

53643.diff (866 bytes) - added by sabernhardt 18 months ago.
changing width to 100%
Capture d’écran 2022-06-07 à 06.48.43.png (156.5 KB) - added by audrasjb 18 months 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 18 months ago.
After patch: looks better :)

Download all attachments as: .zip

Change History (9)

#1 @desrosj
2 years ago

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

#2 @matthiaspabst
2 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".

18 months ago

changing width to 100%

#3 @sabernhardt
18 months 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.)

18 months ago

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

18 months ago

After patch: looks better :)

#4 @audrasjb
18 months 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
18 months ago

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

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