Column Block: Add color and padding support to individual column block

[andrewserong]

Description

• Add color support for the individual Column block
• Add padding support for the individual Column block

Note: I've left padding / margin support out of the Columns block for the moment.

Related to #30753

How has this been tested?

Manually — add a columns block to a post, and test setting colours at the individual column block level. Blocks within the column block should override colors set at the column block level. Also, test the Padding settings under Spacing on the individual Column block.

Screenshots

Setting padding to 1em we can get the headings to line up between the column with a background color, and the column without a background color:

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[aaronrobertshaw]

Thanks for adding the color support @andrewserong 👍

Tests well for me.

I'm not certain regarding the new CSS style though. It would conflict with theme set values once padding support is added. I'd be inclined to omit it from this PR as it would only have to be removed later.

[andrewserong]

Thanks for testing! It looks a little weird without padding altogether, so I'll group this change with adding in padding support, too.

[andrewserong]

Updated to remove the CSS rule, and add in padding support to the individual column block.

[aaronrobertshaw]

LGTM ✨

One minor question. Is the intention to add padding support to the columns block separately? That will just be a simple opt-in to the padding support as well.

[andrewserong]

Thanks @aaronrobertshaw!

One minor question. Is the intention to add padding support to the columns block separately? That will just be a simple opt-in to the padding support as well.

Yes, I ran into a bit of odd behaviour with the interactions between setting padding at the Columns block level and figuring out the inner spacing (or margins) between the individual column blocks, so thought I'd try splitting these out for the time being. Also the parent Columns block currently has the following CSS rule which could cause us issues, so I thought that might be better to figure out on another PR in case it takes a little longer to fix up:

	&.has-background {
		padding: $block-bg-padding--v $block-bg-padding--h;
	}

[aaronrobertshaw]

Sounds like a plan. Once the tests pass we should be right to merge this.

[aaronrobertshaw]

All tests are now passing. I've manually re-tested this as well and it's still working nicely 👌

I'll merge this and we can iterate on the parent columns block as discussed.