Group Block - add support for Background Images

[getdave]

The Group Block recently merged with support for background colors. As a next step, it would be good to add support for background images along with the focal picker.

Describe the solution you'd like

This would upgrade the Group Block with the following:

• Ability to choose a background image as the background
• Ability to pick the focal point for that background image
• Ability to set color overlay (as per cover Block) (thanks to @SchneiderSam )

Considerations

• Would this bring the Block too close to the current cover Block? Or should we encourage users to utilise a cover Block within a section to achieve this?

[SchneiderSam]

Great would be in this move also a color overlay as with the Cover Block.

[youknowriad]

Yeah, I'm not sure about this as this will just be a cover block in the end if we do this.

[SchneiderSam]

As an end user, I understand it this way:

Cover Block: a block to add text to a background image at the beginning of a post. Alternatively it can also be used in the middle of a post as call-to-action.

Section Block: can do anything. Columns, background color, background image, Section in Section, ect... Simply: The LEGO building block for a website.

It would be great to know which block should be used for what. For me the cover block is completely superfluous. The Block section should have all the functions currently available in the cover block.

A section block without the possibility to insert pictures just doesn't make sense. This is a must have!

[youknowriad]

A section block without the possibility to insert pictures just doesn't make sense. This is a must have!

Thanks for sharing your opinion, let's keep the discussion flowing but let's avoid "absolute" statements. "this doesn't make sense, this is a must have".

[SchneiderSam]

Ok. Sorry!

[oxyc]

I would prefer if the cover block (and all blocks with InnerBlock) supported filtering the list of allowed inner blocks. The themes that want to add 3 columns inside a Cover Block could write the styles to support it.

[truchot]

Why not use the cover block if the aim is to have a background image ?

[bbertucc]

@truchot - the cover block doesn't support nested blocks.

Adding to @getdave's feature request: The ability to fix image position and add a background overlay.

My use case:
I want to create a masthead with a header, subtitle and button. Mastheads like these are very common. See Bootstrap's Punny headline.

[truchot]

@truchot - the cover block doesn't support nested blocks.

Yes it does :)

1. You can install Gutenberg as a plugin to get last features
2. Or wait WordPress 5.2 that will be released very soon

[bbertucc]

o perfect @truchot! Didn't catch that in the release notes. It still doesn't support other blocks, like columns.

My question now: Why not get rid of the cover block and just add the same background settings to the group? We can add the extra spacing with a spacing block

[melchoyce]

Mockups:

(Please note that as this is an older mockup, many general UI elements are outdated.)

Some questions:

• We'd be reusing image settings from Cover.
• Instead of overlay color, I'm using opacity, so color and image can remain independent. Does this make sense?
• Should we use the new swap image flow for changing background images and include an image icon in the toolbar, instead of putting it in the sidebar?
• Is there any way to measure color contrast of text over an image?