WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 5 months ago

Last modified 5 months ago

#46643 closed defect (bug) (fixed)

Twenty Nineteen: Column block has additional padding on the front end.

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

Description

The Column block in Twenty Nineteen was originally built to make the front and back end appearance close to identical. At the time of the 5.0 launch, this included some extra-wide spacing between columns on the front end. At some point, columns in Gutenberg were tightened up, and the front and back end no longer match.

The front-end should be adjusted to have the slimmer padding that the back end has.

Editor:

https://cldup.com/2jM2-WsgHL-3000x3000.png

Front End:

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

Attachments (1)

46643.patch (4.4 KB) - added by kjellr 5 months ago.

Download all attachments as: .zip

Change History (5)

#1 @timon.schroeter
6 months ago

Background information (screenshots, gif videos) is available here:
https://github.com/WordPress/gutenberg/issues/13061

Originally we though it was a bug in Gutenberg, which is why it was first reported there, but the Gutenberg devs found out it is an issue with Twenty Nineteen.

Sadly this prevents us from upgrading, as our sites use a lot of two column layouts.

#2 @kjellr
5 months ago

  • Keywords has-patch added; needs-patch removed
  • Type changed from enhancement to defect (bug)

I've uploaded a patch that fixes this discrepancy, as well as the issue in #46999. Both issues are related to the same few lines of code, and this one's a bit more expansive, so I pulled them into one. I'm changing this from [Enhancement] to [Bug] since it includes that fix.

There were also additional top/bottom margins being applied to breakpoints under 768px, so I've migrated the rules to prevent that over to cover all break points as well.

Screenshots:

1400px Wide

Before

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

After

https://cldup.com/edo4-FyluP-3000x3000.png

785px Wide

Before

https://cldup.com/fMtD-dOdfv-3000x3000.png

After

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

600px Wide

Before

https://cldup.com/197SLuEfGD-3000x3000.png

After

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

480px Wide

Before

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

After

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

@kjellr
5 months ago

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

  • Milestone changed from Awaiting Review to 5.2
Note: See TracTickets for help on using tickets.