Background Image block support follow-up tasks

[andrewserong]

Related to #16479, following on from #14744.

Now that the background image block support has been introduced in #53934, this issue captures some ideas for follow-up tasks and features.

Prioritized tasks for WP 6.8 and beyond

• Setting background-image overrides background gradient #60401 - WIP WIP Experiment: combine gradient and background image into background-image #60739
  • Gradient backgrounds should be set with background-image instead of background #32787 - Get the block support to work with gradient backgrounds in a logical way. See related comment: Global styles: add background image to top-level theme.json styles #59354 (comment)
  • Update Core safecss_filter_attr/kses to support linear gradient/rgb(a). See: WIP Experiment: combine gradient and background image into background-image #60739 (comment)
• Background image: should it integrate with background-image theme mod? #60939
• Allow for background-attachment and other controls to be disabled via theme.json (?)
• Improve organisation of site background options #63096
  • Global Styles: Improve organisation of site background color and image #63216
  • Background image: remove toolspanel placeholder component #64242
  • Global Styles: refactor site background controls and move site global styles into Background group #65304
  • Global Styles: Adds site background color controls component in global styles #66736
• Background image: add support for relative theme path URLs in template and pattern files #62254
• Add support for relative theme paths in variation styles and variation block styles. See: https://github.com/WordPress/gutenberg/pull/60100/files#r1639128861
• Fix default controls support for background support and panel Background supports: add default controls supports #68085
• Add ability to skip background support serialization in line with other block supports

Prioritized tasks for WP 6.7

• Background image: add uploading state and restrict drag to one image. #64565
• Background images: add support for theme.json ref value resolution #64128
• Background image: ensure consistency with defaults and fix reset/remove functionality #64328
• Background images: ensure appropriate default values #64192
• Global styles: consolidate theme.json ref and URI resolution #64182
• Background image: move controls into a popover #60151
  • Global styles: tweak block background position preview height #63225
• Background: add background attachment to top level styles #61382 - adds support for background-attachment
• Global styles: block background UI controls  #60100
  • Hook up post editor to inherited global styles and allow setting to "None". See: Global styles: block background UI controls  #60100 (comment)
• Quote blocks: add background image and minimum height support #62497
• Verse block: add background image and minimum height support #62498
• Post content block: add background image and padding support  #62499
• Background Image: Make panel appear in a consistent location #63551

Completed for WP 6.6

• Background images: add defaults for background size #62046
• Global styles: add option to remove site-wide theme background image #61998
• Background image tool: Improvements, bugfixes, find alternative to "fixed" #61928
• Add support for theme relative url paths for site-wide background images
  • Add/background image theme source #61401 (experiment)
  • Background image: add support for relative theme path URLs in top-level theme.json styles #61271
• Ensure that the site editor and frontend body min-height values match when a background is selected. Global styles: force root min-height of 100% for backgrounds #59809
• Move background default values logic to block supports Background block supports: move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles #59889 and Background block supports: move size defaults to hooks and block.json #60008
• Global styles: background UI controls #59454
• Global styles: add background to global styles changes output #60229
• Global styles: background UI control labels #60264
• Background image: use media upload flow  #60687
• Background image: tools panel shouldn't show reset button for inherited values #61304
• Background images: remove required "file" prop #61387
  • Background images: remove lingering "file" prop #61469
• Background image: size controls should show when an image is set #61388
• Background image: explicitly set background repeat value in user styles #61526
• Global styles: Group "Background image" in "Layout" section #61494

Completed for WP 6.5

• Add contain, fixed size and repeat controls: Background image: Add backgroundSize and repeat features #57005
• Background image support: add background position controls #58592
• Group block: When background image is set, has-background CSS class is missing #56261
• Background image: Add has-background classname when background image is applied #57495
• Background image block support: Add tests for size and repeat output #57474
• Background Image block support: Add reset menu item #54341
• Improve background image control #54439
• Background Image control: use consistent button, ensure descriptive text accounts for no image selected #54711
• Background image: Add backgroundSize and repeat features #57005

---

Unprioritized tasks

• Enable editor background tools image preview for theme.json url(...) string values. See Background images: add support for theme.json ref value resolution #64128 (comment)
• Redesign background controls, taking into account background fills/gradients
  • Design proposal: Global styles: block background UI controls  #60100 (comment)
• Site Export: ensure that the export endpoint uses Gutenberg theme classes #61561
• Add repeat-x and repeat-y options to background images #62608
• Propose adding stylesheet_uri and template_uri field to themes endpoint (Trac ticket, Core PR)
• Theme.json: create a consistent syntax for relative paths #61804
• User global styles: should we save relative paths to the database for uploaded assets? #61809
• For global styles and custom background images (uploaded to wp-content) save relative paths in the database.
• Improve performance by allowing support for optimized image size output Background image block support: optimize image output #59113
• Add support for background images via URL rather than just via media library
• Add option to use Featured Image
• Enable Duotone support (this will likely require outputting an img element)
• Enable video background (this will also likely require outputting child elements in rendered markup)
• Explore potentially allowing aspect ratio support, as requested for the Cover block: Add aspect ratio selector to Cover Block #54032
• Explore an option for opacity or overlay of the background image - Verse block - background image does not have overlay or filter option #66019
• Background image block support: optimize image output #59113
• Background Image Block Support - Add ability to define which orientation the sizing should adhere to #62219
• Should it be possible to set background images on a per page/post basis? Background image tool: Improvements, bugfixes, find alternative to "fixed" #61928 (comment)

Background position improvements

• Allow non-percent-based units (e.g. rem, em, etc)
• Allow values that are relative to a particular side (see 3-value and 4-value syntax on MDN) to allow for example "4em from top"
• Improve experience for adding values from an empty state
• Consolidate controls with those in the Cover block
• Look into preventing the controls from displaying until a background image is set (e.g. by moving the size, etc controls into a popover)

[Ren2049]

Image embeds are vital for prototyping within the block editor (before comitting them to the media library).

[annezazu]

Pulling from the FSE Outreach Program's Final Touches call for testing, I wondered if the focal point option would eventually be added in as well:

Color adjustments are fine, but having the same background adjustments available as the cover block would be great. Focus point, at least.

& more here:

Here it would be great with similar controls that exist in the Cover block such a focus and color overlay and opacity.

& more here:

The task was fairly straight forward, although I agree with most of the responders here that an image editing toolbar, like the Cover block has, would make a better handle.

Happy to open a separate issue if that's easier!

[andrewserong]

I wondered if the focal point option would eventually be added in as well:

Oh, yes! It'd be good to have that as an option, too. I've added it to the list in this tracking issue — no need to create a separate issue for it just yet, I think this is a good place to gather together the ideas for now.

Color overlay and opacity.

Color overlay is possibly a little out of scope for the Group block, as it's well handled by the Cover block and would require additional markup to achieve. The main differences between what we can do for the Group vs Cover blocks at the moment is whether the additional styling rules can be applied to a simple outer wrapper (Group block) vs requiring an additional inner wrapper (Cover block).

[eduardozulian]

I'm +1 a few of the recommendations here. Here's the list I gathered based on stuff we offer for the Cover Block, all of them already shared:

• Focal point picker
• Overlay opacity
• Set as a fixed background
• Set as repeated background (great for small images that would work as a background pattern)
• Image filters/Duotone support

@andrewserong I believe you're also aware of Automattic/wp-calypso#82284 but I wanted to move it here just to confirm if the lack of padding on the group block is currently expected or if we should indeed offer a default padding if there is a background image/color.

Thank you!