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

Open
NenadObradovic opened this issue Oct 18, 2018 · 6 comments
Open

Columns Block Gutter Size Option #10730

NenadObradovic opened this issue Oct 18, 2018 · 6 comments

Comments

@NenadObradovic
Copy link

@NenadObradovic 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

This comment has been minimized.

Copy link
Member

@designsimply 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

This comment has been minimized.

Copy link

@IvanPr IvanPr commented Feb 22, 2019

I would like to have this issue implemented as well.

@jordan-webdev

This comment has been minimized.

Copy link

@jordan-webdev 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

This comment has been minimized.

Copy link

@IvanPr IvanPr commented Apr 16, 2019

Thank you for re-opening this...

@designsimply

This comment has been minimized.

Copy link
Member

@designsimply 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

This comment has been minimized.

Copy link

@IvanPr 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.