Make WordPress Core

Opened 9 months ago

Closed 8 months ago

Last modified 4 months ago

#59312 closed defect (bug) (worksforme)

Twenty Twenty-Three: Full-width columns have excess padding in-between columns

Reported by: ddegner's profile ddegner Owned by:
Milestone: Priority: normal
Severity: major Version: 6.3.1
Component: Bundled Theme Keywords: needs-patch reporter-feedback
Focuses: ui, css Cc:

Description

When creating two more more columns in the twenty twenty-three theme normally the "gap" is determined by the "gap" setting. But if the columns are set to full width then extra padding is added to the internal gap.

This increase is unexpected and not reflected in the editor and should probably be removed.

Here are examples on a fresh wordpress install. The bottom, full width columns show the excess padding.
https://imgur.com/oR55nXD

Here is an example showing the padding on inspector:
https://imgur.com/Ev2nhAS

Here is an example in the editor view, showing no excess padding:
https://imgur.com/T9mAy3g

The extra padding is being added by this code:

.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) {
padding-right: var(--wp--style--root--padding-right);
padding-left: var(--wp--style--root--padding-left);
}

Here is a hacky patch, I'm sure there is a better way to do it:

.wp-block-column:not(:last-child){
margin-right: 0;}

.wp-block-column:not(:first-child){
margin-left: 0;
}

.wp-block-column:not(:last-child), .wp-block-column:not(:first-child){
margin-right: 0;
margin-left: 0;
}

Attachments (1)

Screenshot 2023-09-07 at 11.47.28 AM.png (7.0 MB) - added by ddegner 9 months ago.
Example of unexpected padding between full-width columns

Change History (7)

#1 @ddegner
9 months ago

My patch was wrong, here is the update that can be dropped into additional CSS to fix it:

.wp-block-column:not(:last-child){
padding-right: 0 !important;}

.wp-block-column:not(:first-child){
padding-left: 0 !important;
}

.wp-block-column:not(:last-child):not(:first-child) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

@ddegner
9 months ago

Example of unexpected padding between full-width columns

#2 @SergeyBiryukov
9 months ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Twenty Twenty-Three theme: Full-width columns have excess padding in-between columns to Twenty Twenty-Three: Full-width columns have excess padding in-between columns

#3 @ddegner
9 months ago

I just checked to make sure this isn't in Gutenberg by trying the Twenty-twenty two theme on the latest wordpress. It did not have a large gap, so this large gap is only in the Twenty-twenty three theme.

#4 @faisal03
8 months ago

  • Keywords reporter-feedback added

Reproduction Report

I tested the issue, and it is not reproduced. Even when set to full width, the TT3 theme maintains the same space between two columns. It seems like your image resolution is not big enough to cover the full width and by default, align to the left, making space between the other image. And the other image may have the right alignment. Can you please share the HMTL snippet of your page?

BE

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

FE

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

Environment

  • OS: macOS
  • Localhost Server: Nginx
  • PHP: 8.1
  • WordPress: 6.4-beta1-56730-src
  • Browser: Chrome
  • Theme: Twenty Twenty-Four (TT3)

Actual Results

  • ❌ I was unable to reproduce the reported issue. It rendered correctly for me.

#5 @ddegner
8 months ago

  • Resolution set to worksforme
  • Status changed from new to closed

You are right, it has been fixed in the 6.4 beta1. Awesome!

#6 @swissspidy
4 months ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.