Column Block: Add More Styling

[deborah86]

What problem does this address?

It is difficult to make the column block look nice without using additional CSS.

What is your proposed solution?

Color options for a single column

There are no options to change the color of an entire column. The only option is to change the color of either the blocks within the column or the entire color itself.

Ability to Modify the Padding Between Column Elements

[paaljoachim]

Hi @deborah86

I noticed you raised two concerns.
Color options for a single column

I just tested using WP 5.8 RC 2
Twenty Twenty One
The Gutenberg plugin version 11.0.0

This is what I see:

It looks like "Color options for a single column" has been dealt with.

---

The Ability to Modify the Padding Between Column Elements.
It looks like @andrewserong has been looking into this through this draft PR: #32137

[andrewserong]

Yes, the color options for a single column task was addressed in: #31778 and there's a follow-up fix for column background colors with vertical alignment that's under review in: #32909

For adding in column gap support, we have a couple of steps before we can reliably get to it. Initially I explored adding in gap support directly to the columns block in #32137, however it turns out we need a more general approach for gap support that will be used across a number of blocks, so that we can better future-proof the feature. The next steps for gap support are tracked in #32366, but are broadly:

• Add a general gap block support feature (this is being worked on in [WIP] Block Support: Add gap block support feature #32571, but is currently waiting on its dependency Dimensions Panel: Add new ToolsPanel component and update spacing supports #32392 landing first).
• Once the gap block support feature is in place, we can rework [WIP] Update Columns block to use CSS Grid, add option to adjust grid gap #32137 to use the gap block support feature, and use that PR to implement the feature that should close out this issue.

I'll continue updating #32366 as we make progress.

[skorasaurus]

Hi,

This has been implemented through the 'block spacing' capability https://learn.wordpress.org/tutorial/block-spacing/
also known as gap.