Allow using featured image as background for a group block

[aristath]

Came up in a discussion in the block-themes meeting
Related to #24634 and #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! ❤️
The group block was simply the logical choice to use as a 1st step 😉

[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:
#13795 (comment)
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.

[BrunoAHVincent]

nearly 3 years now, any news on this? Trying to use pods for this

[paaljoachim]

Currently we still are not able to easily select the Group block. (There is an issue for it.)

While for instance the Cover block has this placeholder. (Behind the Cover block tool bar we see the Group block.)

Perhaps it is time for adding a placeholder to the Group block?
@jasmussen @jameskoster

[jasmussen]

@paaljoachim Where's that group issue? The group block has a selectable state now in trunk.

[paaljoachim]

Hey @jasmussen Joen.

The group block has a selectable state now in trunk.

That is nice to hear! Will it be added to the next version of the Gutenberg plugin?

I will add in some issues and a PR which I believe are somewhat associated.

I feel when working on adding a background one should also have in the back of the mind of having a way to add a featured image. @draganescu Andrei has earlier worked on the Featured image controls for the Cover block.

(I am adding this PR by @andrewserong in as it could in some way also touch upon the featured image.)
Add a Background Image Block Support and opt-in for the Group block
#39243

Moving background tools for the Cover block from the Block Inspector to the Toolbar + extending background tools to Cover/Group blocks. By @critterverse
#28643

Group Block - add support for Background Images (Should also include the featured image)
#14744

There are multiple Group block enhancements which have to do with the design tools. I am wondering if we can extend the placeholder or perhaps the Group block toolbar to add in some of the Cover block toolbar options. As it can create some consistency and connection between the Group block and the Cover block we have today.

[jasmussen]

The clickable state will be in v14. #40664

The issues you shared are around background images, which is cool. Just wanted to see if there was an open ticket around the not being able to click to select an empty group block, because now you can.

[masteradhoc]

+1