Design tools exploration: Contextual color controls and new panels for Background, and Elements

[jameskoster]

Extracted from discussion in https://github.com/WordPress/gutenberg/pull/60100#issuecomment-2180553281 and https://github.com/WordPress/gutenberg/pull/60151.

In container blocks like Group, the Color panel provides options to apply colors to child elements such as buttons, links, and headings.

While this feature is useful, it has limitations – for example, it doesn't allow for adjusting the dimensions of buttons within the Group.

Another issue is the disorganized background options: the background color control is in the Color panel, while the background image control is in a separate Background Image panel.

Contextual color controls

I suggest moving text and background controls to more appropriate panels. The text color control could be relocated to the Typography panel, and the background color control to a new Background panel, alongside the background image control.

A dedicated Background panel would allow users to add multiple background images and reorder them as needed.

Child elements

To enhance functionality, a new 'Elements' panel could enable users to fully style child elements within a container. This approach is similar to styling blocks in Global styles, which has been quite effective.

---

Additionally, this reorganization could simplify the 'Overlay' option in the Cover block, combining background images and transparent background colors into a single control that can be applied to any block, not just the Cover block.

cc @WordPress/gutenberg-design for thoughts.

[richtabor]

Interesting exploration. Would background controls open via a popover?

[jameskoster]

Precisely. There's a PR for that over here: https://github.com/WordPress/gutenberg/pull/60151