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

[ddegner]

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

[ddegner]

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]

Example of unexpected padding between full-width columns

[ddegner]

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.

[faisal03]

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

FE

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.

[ddegner]

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