Gutenberg: Background Tools

[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

• [ ] Group background tools in a “Background” panel. Refine presentation if possible.
• [ ] Add gradient color options. See #16662
• [ ] 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