Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#46999 closed defect (bug) (fixed)

Twenty Nineteen: Responsive Columns broken in WordPress 5.2 Beta

Reported by: dianeco's profile dianeco Owned by: sergeybiryukov's profile 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 5 years ago.

Download all attachments as: .zip

Change History (9)

#1 @kjellr
5 years 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
5 years ago

#2 @kjellr
5 years 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 5 years ago by kjellr (previous) (diff)

#3 @SergeyBiryukov
5 years 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
5 years ago

  • Milestone changed from Awaiting Review to 5.2

#5 follow-up: @dianeco
5 years ago

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

#6 in reply to: ↑ 5 @kjellr
5 years 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
5 years 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
5 years 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.