Make "Background Tools" an easy API and add to Group / Columns

[mtias]

As part of the effort to refine how we present and expose common block functionality (see #15450) we'll be both working on the technical infrastructure and the actual solutions. One of those is background tools. Right now it's possible to add video backgrounds, colored overlays, etc, to the Cover block alone. It'd make sense to extract this and extend to other container blocks (group and columns, for example) as well as expanding the features.

This ticket is meant to focus on the UI for background tools (toolbar and block inspector) and its feature set.

• Background image.
• Background video.
• Color & Overlay.
• Background gradient.
• Focus point (if using image).
• Parallax effect (if using image).

Tasks

• [x] Group background tools in a “Background” panel. Refine presentation if possible.
• [x] Add gradient color options. See #16662
• [x] Add tools to Column and Group. See #15450

[karmatosed]

Just noting a few issues exploring this to feed into a global ticket:

Background tools for columns: https://github.com/WordPress/gutenberg/issues/16660 Gradients in cover images: https://github.com/WordPress/gutenberg/issues/16662

[strarsis]

When a background image is set as background, it would be nice if also the dominant image color is automatically set as background image. Then the element already got a good color while the image still loads and when images are disabled.

[karmatosed]

I am going to remove needs design for now from this as both issues linked do have that and are in progress.

[ItsJonQ]

When a background image is set as background, it would be nice if also the dominant image color is automatically set as background image. Then the element already got a good color while the image still loads and when images are disabled.

@strarsis I think that's a wonderful idea!!! This suggestion inspired me to experiment and I think I have something pretty solid working <3

Video demo: https://d.pr/v/f2flil

[caseymilne]

Sorry if it's been already discussed but can the InspectorControls be grouped into a new component that could then be used consistently to provide backgrounds? And in situations where you might need to provide multiple backgrounds for 1 block (custom blocks might) then that component could be utilized again in multiple panels, like:

<BackgroundControlSet for="div" />
<BackgroundControlSet for="div.child" />

Any thoughts about using the same split as Elementor which is to define "Background Overlay" as separate from "Background"?

[glendaviesnz]

Have started a discussion here about options for implementing this.

[adamziel]

@andrewserong since you self-assigned this issue recently: Is there any feature that you think could still land until Wednesday next week to be included in WordPress 6.0 release? To increase visibility, we can add it to the WordPress Editor 6.0 project board.

[andrewserong]

Thanks for the ping @adamziel — I don't think there'll be anything to land in time for 6.0 from what I was exploring. I worked on a proof of concept for a background image block support in https://github.com/WordPress/gutenberg/pull/39243#issuecomment-1075761582 and we now have designs for a future direction for how the background controls might work (in https://github.com/WordPress/gutenberg/issues/39427), but that will likely be a bigger piece of work for post 6.0.

[porg]

As this very ticket deals with the technical foundations for making more sophisticated background options (as of WP 6.2 only available in the Cover block) generally available for various blocks, especially for the Group block, I think this idea is worth sharing here:

• 51465

[annezazu]

Wanted to note that this continues to come up around template parts, especially for a simple use case of wanting to have a background image in a header for example: https://github.com/WordPress/gutenberg/issues/29238 This issue was closed but feedback was gathered for consideration.

[mtias]

Closing as this is all done.