Gutenberg: Allow using featured image as background for a group block

[aristath]

Came up in a discussion in the block-themes meeting
Related to https://github.com/WordPress/gutenberg/issues/24634 and https://github.com/WordPress/gutenberg/issues/22081

If we want FSE themes to be able to build nice headers using the post's featured image, we need to allow the use of dynamic data as properties for blocks.
For example if we want to do something like this:

we'll need to allow the group block to have a background set to the featured image.

Ideally we'd have a method abstract enough to allow using any kind of dynamic data on many blocks, but for the purposes of FSE, background-images in group blocks are a good place to start.

[noahtallen]

Related: #14744 (though I know featured image is different from images in general), and #22724

[mtias]

we'll need to allow the group block to have a background set to the featured image.

I don't think this is the right approach (the group block). I think it should be baked into background tools for _any block_. I also don't know if it should be abstracted to any dynamic property, at least not in UI. It could be as simple as a toggle on the background options (solid, gradient, image, video, featured image).

There's been some discussions about allowing other properties (like text) to bet set to an entity (pos title). But that also proved to be maybe not necessary if you can just insert a post title block anywhere (within a cover block, etc).

[aristath]

I don't think this is the right approach (the group block). I think it should be baked into background tools for any block.

That's even better! :heart:
The group block was simply the logical choice to use as a 1st step :wink:

[mtias]

Fair enough :)

[LittleBigThing]

The example screenshot from the Twenty Nineteen theme may be a special case. The theme uses the featured image as an img on the blog page and on a single page. This way, it can make use of responsive images by default.

Just an idea, but if an image is not strictly decorative or a background image, just superimposed with text, it could be interesting to use it as an img (see the object-fit CSS property with great support now IE support is getting abandoned) instead of a background image and profit from the responsive images and lazy-loading functionalities in WP. Maybe for another, cover-block-like block? :-)

[alaczek]

I don't think this is the right approach (the group block). I think it should be baked into background tools for any block.

A thousand times yes! This will give us the most flexibility with the designs, without re-inventing the wheel via another block.

[iamtakashi]

I think it should be baked into background tools for any block.

Just came here to say +1 on this approach. With the approach, visual treatments that people might want for the featured image can be done with the abilities that existing blocks already have.

[paaljoachim]

Here are some off the top of my mind suggestions.....(Not sure if I like the suggestions or not...)
But right now they seem like the most straight forward way of adding a setting to the Cover and Image Blocks. (Other blocks could perhaps use something similar.)

Cover Block. I added an auto refresh icon beside the checkbox as the featured image would need to automatically replace the current background image.

---

Image Block. Added auto refresh icon.

---

Here is an associated issue:
https://github.com/WordPress/gutenberg/issues/13795#issuecomment-636787215
This is about setting the first image in the page/post as featured. A setting below the featured image field.

[bfiessinger]

I would also appreciate if there would be some options to use SVG Background patterns like shown on heropatterns.com or svgbackgrounds.com

[shaunandrews]

My first thought was to add Featured Image as an option similar to background gradients:

If we consider this could expand to include other things, like videos, perhaps we could provide select element for choosing:

Similar to choosing Image, the Feature Image option would remove the focal point options and place a message on top of the preview (available depending on context):

[ianstewart]

the Feature Image option would remove the focal point options

Why remove the focal point option? To provide the label?

and place a message on top of the preview (available depending on context)

Might be easier to evaluate the image thumbnail/preview if the message was above or below? Does it need the label once set?

[shaunandrews]

Why remove the focal point option? To provide the label?

We won't always have a featured image to display, and there wouldn't be a way to set a focal point based on a specific post ID. We could still show focal point, but it would end up being the same values across every post regardless of the actual featured image.

Might be easier to evaluate the image thumbnail/preview if the message was above or below?

I was trying to emphasize the messaging while retaining the visual appearance of the image settings.

Does it need the label once set?

I think the label helps explain that this data is defined elsewhere, and may not exist.

[paaljoachim]

To get a birds eye perspective. I placed the controls into the Cover Block and the Group block settings.

Cover Block.

Group Block.