Make the Cover block image controls available on the Background image Styles panel

[henriqueiamarino]

I propose replicating the cover block's style controls (left) on the background image panel (right).

This update will bring consistency to our editor by enabling color, overlay opacity, and filters to be applied in more image instances.
Currently, such styles are available for cover block, featured image, and image block.

[jasmussen]

Nice one. There's definitely a task here to unify our "background tools", for example if you set a gradient background, the same cover/contain/tile tools would be useful. @ramonjd is there already an issue for tracking some of this unification work? To be clear the unification likely has to go both ways, bringing some of the the Cover color controls into a "Background" panel, for example.

[ramonjd]

Hi folks! 👋🏻

Thanks for the ping.

Just to be clear, what is the proposition here? Is it to add background color, opacity and filter support to background images?

the unification likely has to go both ways, bringing some of the the Cover color controls into a "Background" panel, for example.

Yeah, ideally, when background supports is fully mature it'd completely replace the cover block custom controls.

It's a bit of crystal ball gazing at the moment given the quagmire of cover block deprecations and special cases.

Furthermore, for background colors specifically, there's a long-standing issue related to the way WordPress has applied background gradient. The TL;DR is that gradients are applied using the background CSS property, which will overwrite other background-* properties. This bug needs to be rectified.

Here are some related PRs and issues:

• Global Styles: Adds site background color controls component in global styles #66736
• Setting background-image overrides background gradient #60401

There's a catch-all tracking issue for follow ups to background supports over here:

• Background Image block support follow-up tasks #54336

[jasmussen]

I think those related PRs and tracking issue well capture the goal at hand, to unify background controls so they function across. For example, a gradient background can be resized, repeat, positinoed, just like a background can.

I suppose the unique aspect of this issue—and it may need to be renamed slightly to encourage some explorations—is that the Cover block overlay serves both as a background when you have no image set, and as a background image overlay when you do have one. Likely the solution is a UI not unlike this, which shows each background element as a layer that you can move around. The overlay would simply be a color fill on top of a background layer.

As noted, we're already working towards that across a few different issues. Do you know if the specific use case: background layers, is tracked anywhere already? If not, we could potentially re-work this one, and seek out a fresh design for it. LMK!

[ramonjd]

Do you know if the specific use case: background layers, is tracked anywhere already?

Apart from the link you cited, not really.

There's a related technical discussion over in #60739 (comment), where we riffed on how to represent layers in theme.json.

It's going to be a great feature as soon as there's a chunk of time to work on it and get the foundations in place!!