Columns Block Gutter Size Option

[NenadObradovic]

Hi guys,

Could you consider to add columns block gutter size option so we can be able to set space between columns item?

Possible solution:

1. To add additional class on wp-block-columns element like you set for columns size, for example .normal-gutter
2. SCSS solution

$columns-gutter-label: ('no', 'normal', 'large');
$columns-gutter-size: (0, 15, 25);

.wp-block-columns {
	
	@for $i from 0 to length($columns-gutter-label) {
		&.#{nth($columns-gutter-label,$i+1)}-gutter {
			$gutter-size: nth($columns-gutter-size, $i+1);
			
			@if ($gutter-size != 0) {
				margin: 0 -#{$gutter-size}px;
				
				> .wp-block-column {
					padding: 0 #{$gutter-size}px;
				}
			}
		}
	}
}

3. CSS results

.wp-block-columns.normal-gutter {
  margin: 0 -15px;
}

.wp-block-columns.normal-gutter > .wp-block-column {
  padding: 0 15px;
}

.wp-block-columns.large-gutter {
  margin: 0 -25px;
}

.wp-block-columns.large-gutter > .wp-block-column {
  padding: 0 25px;
}

4. Live results will be https://www.screencast.com/t/9CLHYaHGfg0U

Best regards,
Nenad

[designsimply]

There has been some work in #10541 to refactor margins and padding in the columns block. I would like to close this issue in light of that work. If you are able to help test this update (4.1 is currently available for pre-release testing as of Oct 19), please let me know if the update does not solve the underlying problem for you and if you still need help adjusting spacing between columns. If you prefer to wait for the official 4.1 release, that is okay too as it should be released soon.

[IvanPr]

I would like to have this issue implemented as well.

[jordan-webdev]

+1 to this! Right now, the columns block is unfortunately unusable at times due to the large margins that we can't control.

[IvanPr]

Thank you for re-opening this...

[designsimply]

Reopened for consideration, but keep in mind that doesn't mean it will for sure get approved. It might turn out to be something recommended as a plug-in not as part of the core options. For cases like this, it would help to include a screenshot showing the problem that you are facing so it's very clearly visible. It would also be good to note the name of the theme you are using, in case there's a problem can possibly be traced back to certain themes.

[IvanPr]

It is not actually a problem, but a feature suggestion to:

• add columns block gutter size option [I have to use classes to modify this now]
• allow the column to have only one column, become a container for additional modifications

[iamtakashi]

Just to add a visual example,

I often wish the block has gutter size control to make a design like this example.

Currently, this is impossible to do with the column block as it always adds gutters.

I don't believe that abstracted presets alone would satisfy various needs. As @richtabor mentioned here, a custom option where the user can add a specific value would be really valuable.

[skorasaurus]

possible overlap with #9296

[kjellr]

I've been using the columns block very frequently to build out header layouts in block based themes.

Custom gutter size options would be invaluable, along with the option to set a default width in theme.json.

[apeatling]

@andrewserong Your gap work for columns will address this, right?

[andrewserong]

Yes, once #33991 lands (the more general gap support issue is tracked in #32366), we should then be able to put up a PR to opt-in to the support for the Columns block, which will resolve this issue.

[andrewserong]

Update: this issue should be resolved by: #34630