Modify the initial gap value for core/columns

rose18
(@rose18)

3 years, 4 months ago
Hi,

I want to modify the initial gap value for the core/columns block.
By default, if I didn’t adjust the ‘Block Spacing’ under the Dimension panel for core/columns, it will take the blockGap value from in the theme.json file(see below).
```
{
	"version": 2,
	"styles": {
		"spacing": {
			"blockGap": "1rem"
		}
	}
}
```
The CSS for the core/column will look like this:
```
body .is-layout-flex {
    gap: 1rem;
}
```
When I adjust the ‘Horizontal’ value under ‘Block Spacing’,

the css for the core/column is:
```
.wp-block-columns.wp-container-13 {
    gap: 2em var(--wp--preset--spacing--small);
}
```
Or vice versa, when ‘Vertical’ value is set,
```
.wp-block-columns.wp-container-13 {
    gap: var(--wp--preset--spacing--small) 2em;
}
```
I want to change that 2em value from the CSS above to another value. How do I change that default value to 1rem?

Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

Moderator threadi
(@threadi)

3 years, 3 months ago
The 2nd value for the CSS property gap is the column-gap property. You can also set it separately.
```
body .wp-block-columns {
 column-gap: 1em;
}
```
Thread Starter rose18
(@rose18)

3 years, 3 months ago
Hi @threadi ,

I did try adding this css code:
```
body .wp-block-columns {
 column-gap: 4rem;
row-gap: 4rem;
}
```
But if I adjust the ‘Horizontal’ or Vertical’ value under ‘Block Spacing’, the values set in the editor overrides the css that I have added.
Moderator threadi
(@threadi)

3 years, 3 months ago
Give the property a higher value with !important.
```
body .wp-block-columns {
 column-gap: 1em !important;
}
```
Thread Starter rose18
(@rose18)

3 years, 3 months ago

Thanks @threadi !

I don’t think this will work. If I add !important to column-gap or row-gap, then if I want to adjust the horizontal or vertical block spacing, then it will take the !important css. Below is my custom css code (highlighted in yellow)

In the block editor, I adjusted both the horizontal and vertical block spacing for the core columns block, but it’s taking my custom css because it has !important. So I don’t think adding !important help solve my issue.
Moderator threadi
(@threadi)

3 years, 3 months ago
The solution to your requirement is actually just pure CSS. You could also write
```
body .wp-block-columns.is-layout-flex {
 column-gap: 1em;
}
```
or
```
body div .wp-block-columns.is-layout-flex {
 column-gap: 1em;
}
```
The important thing is that your specification has a higher value.

If you want to have this only on a certain block, you can also give it its own CSS class (e.g. “addgap”) and then define it that way via CSS:
```
body .wp-block-columns.is-layout-flex.addgap {
 column-gap: 1em;
}
```
I also wonder why you added a row-gap. In your question it was only about column-cap – if you set both higher you don’t need a separate CSS specification for it because the identical value could also be set by “gap: 4em”.
Thread Starter rose18
(@rose18)

3 years, 3 months ago
Thanks @threadi !

Actually my main question was how can I change the default gap value, not just the column-gap.
For core columns blocks, you can adjust both the horizontal (column-gap) & vertical (row-gap) blocking spacings.

If block spacings are not set, then the default css is this:

If only the horizontal spacing is set, then the css is this:

If only the vertical spacing is set, then the css is this:

If both the horizontal + vertical spacings are set, then the css is this:

You can see that if one of the block spacing is set, the non-set spacing value is 2em.
```
// if horizontal spacing is set
.wp-block-columns.wp-container-9 {
    gap: 2em var(--wp--preset--spacing--small);
}
```
```
// if vertical spacing is set
.wp-block-columns.wp-container-9 {
    gap: var(--wp--preset--spacing--small) 2em;
}
```
I did try to give the property a higher value, but it’s always taking those css if I adjust both the vertical and horizontal spacings, which I don’t want.

Just want to know is there a way to change that 2em default value.

Thanks!
- This reply was modified 3 years, 3 months ago by rose18.
Moderator threadi
(@threadi)

3 years, 3 months ago

Just want to know is there a way to change that 2em default value.

If by 2em-value you mean the 2nd value at the property, I already told you that above. There is no other way (at the moment). If you want an adaptation to Gutenberg in this respect, write to the Gutenberg developers here: https://github.com/WordPress/gutenberg/issues