Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Columns Block Gutter Size Option #10730

Closed
NenadObradovic opened this issue Oct 18, 2018 · 12 comments · Fixed by #34630
Closed

Columns Block Gutter Size Option #10730

NenadObradovic opened this issue Oct 18, 2018 · 12 comments · Fixed by #34630
Assignees
Labels
[Block] Columns [Feature] Design Tools [Type] Enhancement

Comments

@NenadObradovic
Copy link

NenadObradovic commented Oct 18, 2018

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;
				}
			}
		}
	}
}
  1. 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;
}
  1. Live results will be https://www.screencast.com/t/9CLHYaHGfg0U

Best regards,
Nenad

@designsimply designsimply added [Type] Enhancement [Feature] Blocks labels Oct 22, 2018
@designsimply
Copy link
Member

designsimply commented Oct 22, 2018

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
Copy link

IvanPr commented Feb 22, 2019

I would like to have this issue implemented as well.

@jordan-webdev
Copy link

jordan-webdev commented Mar 28, 2019

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

@designsimply designsimply reopened this Apr 16, 2019
@IvanPr
Copy link

IvanPr commented Apr 16, 2019

Thank you for re-opening this...

@designsimply
Copy link
Member

designsimply commented Apr 16, 2019

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
Copy link

IvanPr commented Apr 16, 2019

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
Copy link

iamtakashi commented Jul 22, 2020

Just to add a visual example,

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

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

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
Copy link
Member

skorasaurus commented Jul 28, 2020

possible overlap with #9296

@mtias mtias added the [Feature] Design Tools label Aug 30, 2020
@kjellr
Copy link
Contributor

kjellr commented Dec 9, 2020

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
Copy link
Contributor

apeatling commented Aug 24, 2021

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

@andrewserong
Copy link
Contributor

andrewserong commented Aug 24, 2021

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 andrewserong linked a pull request Sep 8, 2021 that will close this issue
7 tasks
@andrewserong
Copy link
Contributor

andrewserong commented Sep 9, 2021

Update: this issue should be resolved by: #34630

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns [Feature] Design Tools [Type] Enhancement
Projects
Status: Done