WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#46999 closed defect (bug) (fixed)

Twenty Nineteen: Responsive Columns broken in WordPress 5.2 Beta

Reported by: dianeco Owned by: SergeyBiryukov
Milestone: 5.2 Priority: normal
Severity: normal Version: 5.2
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

WordPress 5.2 introduces a 2 columns breakpoint on small devices https://github.com/WordPress/gutenberg/pull/12816 but it doesn't work on Twenty Nineteen.
On 768px devices, the columns don't wrap in rows of 2 and the gutter isn't the same between each column.

https://i.imgur.com/frRH5IW.png

Moreover, is it intended to have a gutter of 54px (32px set by the columns block + 1rem added by the theme) on large devices? By defaut Gutenberg set the value to 32px which is better for the content (especially on tablets), maybe it's not necessary to add 1 rem:

@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-columns[class*='has-'] > * {
    margin-right: 1rem;
}
}

Attachments (1)

46999.patch (2.2 KB) - added by kjellr 3 months ago.

Download all attachments as: .zip

Change History (9)

#1 @kjellr
3 months ago

  • Keywords has-patch added

WordPress 5.2 introduces a 2 columns breakpoint on small devices https://github.com/WordPress/gutenberg/pull/12816 but it doesn't work on Twenty Nineteen. On 768px devices, the columns don't wrap in rows of 2 and the gutter isn't the same between each column.

Thanks for the report, @dianeco. I've attached a patch that should fix this.

Before (768px):

https://cldup.com/mBZWxVL37p-3000x3000.png

After (768px):

https://cldup.com/dQ7sh62FRp-3000x3000.png

While I was in there, I noticed that margin was also inconsistent between 783–800px. I've included a small change to fix that as well.

Before (785px):

https://cldup.com/UPox6p072N-3000x3000.png

After (785px):

https://cldup.com/dKQIlBiGhb-3000x3000.png


Moreover, is it intended to have a gutter of 54px (32px set by the columns block + 1rem added by the theme) on large devices? By defaut Gutenberg set the value to 32px which is better for the content (especially on tablets), maybe it's not necessary to add 1 rem:

You're right, this is no longer needed. It was originally added to more closely mimic the extra space that was included in the editor, but that extra space has since been removed there. I'm going to address this as part of #46643. 👍

@kjellr
3 months ago

#2 @kjellr
3 months ago

Note: I've worked on a broader fix in #46643 that also happens to fix this bug. I'd recommend merging that instead of 46999.patch, since the other issue also improves on a number of other column inconsistencies.

Last edited 3 months ago by kjellr (previous) (diff)

#3 @SergeyBiryukov
3 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 45264:

Twenty Nineteen: Fix padding discrepancies in responsive styles for Column block.

Props kjellr, dianeco.
Fixes #46643, #46999.

#4 @SergeyBiryukov
3 months ago

  • Milestone changed from Awaiting Review to 5.2

#5 follow-up: @dianeco
3 months ago

The patch works well, except the full columns are now broken because it removes the side padding.

#6 in reply to: ↑ 5 @kjellr
3 months ago

Replying to dianeco:

The patch works well, except the full columns are now broken because it removes the side padding.

@dianeco Would you mind sharing a screenshot? Thanks!

#7 follow-up: @dianeco
3 months ago

Here's the screenshot, there's no spacing between the text and the edges of the screen:
https://i.imgur.com/2pe0i9B.png

#8 in reply to: ↑ 7 @kjellr
3 months ago

Replying to dianeco:

Here's the screenshot, there's no spacing between the text and the edges of the screen:
https://i.imgur.com/2pe0i9B.png

Ah, good call. The (relatively) good news is that at least that's how things look in the editor too. I'll open a new ticket to tackle this in both places.

I've opened #47044 to track this.

Note: See TracTickets for help on using tickets.