Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow using featured image as background for a group block #24660

Open
aristath opened this issue Aug 19, 2020 · 20 comments
Open

Allow using featured image as background for a group block #24660

aristath opened this issue Aug 19, 2020 · 20 comments
Labels
[Block] Group Affects the Group Block [Block] Post Featured Image Affects the Post Featured Image Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@aristath
Copy link
Member

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:

Screen Shot 2020-08-19 at 12 30 10 PM

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.

@kjellr kjellr added the [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. label Aug 19, 2020
@shaunandrews shaunandrews added the Needs Design Needs design efforts. label Aug 19, 2020
@noahtallen
Copy link
Member

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

@mtias
Copy link
Member

mtias commented Aug 28, 2020

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
Copy link
Member Author

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
Copy link
Member

mtias commented Aug 28, 2020

Fair enough :)

@LittleBigThing
Copy link

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
Copy link

alaczek commented Sep 3, 2020

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
Copy link

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
Copy link
Contributor

paaljoachim commented Sep 26, 2020

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.

Cover-Block-Feature-image


Image Block. Added auto refresh icon.

Image-Block-set-featured


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.

@mtias mtias added the [Block] Post Featured Image Affects the Post Featured Image Block label Sep 26, 2020
@bfiessinger
Copy link

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

@shaunandrews
Copy link
Contributor

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

image

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

image

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):

image

@ianstewart
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

paaljoachim commented Oct 1, 2020

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

Cover Block.

Featured-image-in-Cover-Block

Group Block.

Featured-image-Group-Block

@BrunoAHVincent
Copy link

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

@paaljoachim
Copy link
Contributor

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.)
Screenshot 2022-08-22 at 09 27 34

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

@jasmussen
Copy link
Contributor

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

@paaljoachim
Copy link
Contributor

paaljoachim commented Aug 22, 2022

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.

Screenshot 2022-08-22 at 10 17 39

@jasmussen
Copy link
Contributor

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
Copy link
Contributor

+1

@annezazu annezazu added [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") and removed [Feature] Full Site Editing labels Jul 24, 2023
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 24, 2023
@LunaticZorr
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Group Affects the Group Block [Block] Post Featured Image Affects the Post Featured Image Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
Status: Not Started
Archived in project
Development

No branches or pull requests