Columns: Adopt button and heading element colors

[aaronrobertshaw]

Related:

• Design Tools: Add block instance elements color support for buttons and headings #53667

What?

Adds the ability to specify colors for button and heading elements with Column/s blocks instances.

Why?

Provides greater flexibility in styling sections that may differ from the overall global styles e.g. a call-to-action pattern that might be darker or lighter than the overall theme.

How?

Opts into button and heading color support.

Known Issues

There are some existing issues with the generic heading element gradient backgrounds overriding a simple background color on specific h1-h6 elements. Similarly, a gradient applied by the container block can't be overridden by a simple background color set via an individual block within the container. These will be addressed separately.

Next Steps

The might be further container like blocks that we could opt into this color support for e.g. Cover, Media & Text, Details, Post Template etc.

Testing Instructions

1. Edit a post and add a Columns block and select a multi-column layout for the inner columns
2. In each column add a few different levels of headings along with a button or two
3. Select the overall Columns block
4. In the Block Inspector > Styles > Color panel, toggle on button and heading color controls
5. Adjust color for buttons and heading elements (check preset and custom colors, gradients etc). All the button and heading elements within the columns should reflect the correct color
6. Select a specific heading element now (h1 - h6) that matches one of the headings and confirm that overrides the generic heading element style selected earlier
7. Repeat the process, selecting one of the inner columns, checking their button/heading colors update appropriately
8. Save the post and confirm the colors are correct on the frontend

Screenshots or screencast

[andrewserong]

Thanks for putting this up, I had a feeling I might see a PR like this just around the corner 😀

✅ Columns-level elements styles are output correctly in editor and site frontend.
✅ Column-level elements styles correctly override Columns-level styles.
✅ Block-level elements styles correctly override Column and Columns-level styles, with the caveat about gradients as mentioned in the PR description.

There might be further container like blocks that we could opt into this color support for e.g. Cover, Media & Text, Details, Post Template etc.

Excellent! Cover block sounds like a good next candidate to me 🙂

LGTM! ✨

[Marc-pi]

@andrewserong / @aaronrobertshaw nice. the day you will add shadow on column/columns (#44651) and column radius #41345 our price lists will say hourra ! ;-)
nice addition here already, thanks