Twenty Nineteen: Responsive Columns broken in WordPress 5.2 Beta

[dianeco]

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.

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;
}
}

[kjellr]

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

After (768px):

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

After (785px):

---

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]

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.

[SergeyBiryukov]

In 45264:

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

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

[dianeco]

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

[kjellr]

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!

[dianeco]

Here's the screenshot, there's no spacing between the text and the edges of the screen:

[kjellr]

Replying to dianeco:

Here's the screenshot, there's no spacing between the text and the edges of the screen:

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.