Add gutter, margin, and padding controls to the columns block

[LevinMedia]

Limitations with the columns block:

As it stands, a user is somewhat limited in what they can achieve with the columns block. This is problematic, as it's fundamental building block for constructing a page's layout. Let's look at an example: the screen shot below is a design I made in Figma. It's a single row with a light yellow background, on top of which sits a simple three column layout. The two outer columns have images, and there's some text and a button in the middle column.

The row (parent container) should be the full width of the site. It should have no margin or padding. There are no gutters between the columns. The content in the columns should be aligned to the middle the of row vertically. The columns which contain the images should have no margin or padding. However, the column in the middle should have a healthy amount of padding on the left and right sides to keep the headline more condensed and in the center of the column.

This is the best I could do using the the blocks in core:

• The parent container (The columns block) has padding automatically applied to it. There are no controls to change or remove it.
• A user is unable to add or remove margin to the parent block as well. This becomes problematic if you wish to stack multiple rows directly on top of each other, with no space in-between them.
• There's no ability to control the gutters between the columns, or remove them.
• There's no ability to control the margin or padding that's applied to the individual columns.

Solutions:

• Remove the padding that's automatically applied to the columns block
• Add margin and padding controls to the columns block (parent block)
• Add gutter controls to the columns block (parent block)
• Add margin and padding controls to individual columns blocks (child blocks)

One small detail to keep in mind: at the moment, when a background color is added to many types of blocks (paragraph, headline, column etc) padding is automatically added as well. This behavior should either be eliminated, or the auto padding value should appear in the new padding control component, there by allowing the user to refine it further, or remove it.

Controls for the "columns block" (parent) and "column block" (child) would look something like this:

both of these are using the new box control component, which was recently included on the cover block.

Bigger picture, and out of scope for this particular issue:

Essentially every block should have these margin and padding controls by default.

Describe alternatives you've considered:

Using Elementor with no prior experience, I was able to re-create this layout in about 10 minutes. Screen shot below:

Elementor uses the same principle which I've described in the solutions above. There's no margin or padding applied to the parent container by default. The parent container has controls for the gutters. Each of the elements (Parent block, and child column blocks) have their own margin and padding controls.

cc @jameskoster

[jameskoster]

One small detail to keep in mind: at the moment, when a background color is added numerous block (paragraph, headline, column etc) padding is automatically added to it. This behavior should either be eliminated, or the auto padding value should appear in the new padding control component, there by allowing the user to refine it further, or remove it.

One of the key considerations here is what happens to existing instances of the block upon update. To avoid disruption on the frontend, wherever folks are currently using the background color option with the static auto-padding applied, that auto-padding value should probably be migrated to the new dedicated padding control.

[richtabor]

I've found margin to be very tricky to implement in blocks. Padding is great, but margin is difficult because it interacts with the space outside of the block, whereas padding is inside. When interacting outside, it becomes tricky to emulate one-to-one with the front-end, and creates confusion on how to manipulate that spacing (as not every block has margin controls - rightfully so). I lean towards using Spacer blocks for "margin" control.

Gutter is tricky for mobile implementation, but it's not impossible. We (CoBlocks) figured out some creative solutions for gutters in a few blocks; including using custom gutter spacing values (with inline CSS vars).

[aristath]

Would converting blocks to css-grid with a flex fallback for old browsers be out of the question?
It would solve pretty much all issues regarding gutters, responsive etc.

[lifeact]

Add gutter, margin, and padding controls to the any block

[andrewserong]

I believe this one is now resolved, as of the following PRs:

• Columns block gap / spacing support and vertical margin support added in: Columns block: Enable blockGap and vertical margin support #34630
• Columns padding support added in: Columns: Add padding support #35701

Themes can opt in to the above controls by setting the following spacing settings in theme.json:

		"spacing": {
			"blockGap": true,
			"margin": true,
			"padding": true,

I'll close this issue out now.

[ethanclevenger91]

@andrewserong so far as I can tell it's:

"spacing": {
	"customMargin": true,
	"customPadding": true
},

Right?

[andrewserong]

@ethanclevenger91 yes, up until yesterday (and in the v1 of theme.json) the margin and padding properties have the custom prefix. As of #36155 in the v2 of theme.json the custom prefix has been removed. It looks like the v1 naming will still continue to work though 🙂

[Nic787]

Is there a way to enable gap support via functions.php? I don't use theme.json

In my functions file, I have enabled custom spacing, but all the new spacing options are not showing, so I don't know if it was meant to be in 5.9 or not.

Thank you

[andrewserong]

Is there a way to enable gap support via functions.php? I don't use theme.json

@Nic787 I don't believe so. The new spacing controls are designed to work with the theme.json approach, and I think the only controls that are switched on via add_theme_support( 'custom-spacing' ); are those for backwards compatibility (in this case, padding — here's where the check happens in the Gutenberg code).

It should be possible to add a minimal theme.json file to an existing theme in 5.9 if you'd like to opt in to the new controls (the appearanceTools setting will opt-in to most of them). From memory, I think part of the decision to guard features behind opting in via theme.json was to ensure that existing themes don't unintentionally expose new controls. For example, the block gap support depends on the layout support, which renders additional styling that could conflict with some classic themes.

[Nic787]

@andrewserong I did create a short theme.json file.

{
    "version": 2,
    "settings": {
        "spacing": {
			"blockGap": true,
			"customPadding": true,
			"customMargin": true,
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		}
    }
}

However, it doesn't work and it also remove all the default style of Gutenberg block editor.

Also, how can I bring back default Wordpress style in the editor?

[carolinan]

@Nic787 Version 2 does not use "customPadding": true, "customMargin": true, so this creates an error in theme.json.
Use "padding": true, "margin": true instead.

Please use this reference:
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/

[Nic787]

My bad, I changed it after I wrote it.

For now I use:

{
    "version": 2,
    "settings": {
        "appearanceTools": true,
        "layout": {
			"contentSize": true,
			"wideSize": true
		},
        "spacing": {
                        "blockGap": true,
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		}
    }
}

Why does it look like that?

Instead of that?

But still unable to get the block gap functionality working.

EDIT: I was able to fix the editor style. In fact, I thought that the layout option was affecting my site style, but looks like it's affecting the editor layout instead. So I fixed that.

But why my block gaps not working? Do I have to add something else on my website? Does it just work for gallery block or am I supposed to have it on columns too?