Use Cover block instead of Post Featured Image to enhance designs

[luminuu]

I've worked on a design in Figma with the provided template, before actually looking at the code. I noticed that for the queries and templates, the Post Featured Image block is used to display images. In my design, I thought of giving the images a gradient overlay like you can do with the Cover block. But with the current setup, this design is not possible.

So I want to kick of a discussion of changing the Post Featured Images to Cover blocks, to enable a wider varierty of designs. Any thoughts?

Here's a preview of my design:

I also saw that @critterverse has been working on a design using duotones but the images don't really display well there. I think with using a gradient, it would be much more pleasing to the eye: #125

[critterverse]

Woah, this looks gorgeous @luminuu!

So I want to kick of a discussion of changing the Post Featured Images to Cover blocks, to enable a wider varierty of designs.

I think one of the most interesting aspects of this project is trying to work within the restrictions of the Post Featured Image block, which will already be populated with content for a lot of folks. Another approach could be to propose adding something like the overlay functionality to the Post Featured Image block — might be a cool proposal for this tracking list: #30

[carolinan]

The cover block can be set up to use the existing featured image, the user does not need to upload any new content.
For anyone viewing the page, it looks like the post thumbnail.
I think the difference is, that the block does not have a link, which can be unexpected.
If the post has no featured image, the block does not show.

It still needs to be tested in a template, of course.

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"focalPoint":{"x":"0.35","y":"0.36"},"gradient":"luminous-dusk","isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim has-background-gradient has-luminous-dusk-gradient-background"></span><div class="wp-block-cover__inner-container"></div></div><!-- /wp:cover -->
```

[luminuu]

@critterverse I've now created an issue for this and also linked it in #30: WordPress/gutenberg#43676

[mikachan]

I like the idea of using the cover block instead of the featured image, especially for the post and page templates, as it seems more flexible for the variations. But I'm not so sure about using it for the query block if it's not able to be a link, as @carolinan mentioned.

@justintadlock had a good idea around providing single post templates both with and without a featured image (#101). Maybe we could do this using the cover block instead of the featured image? Or perhaps provide the cover block as an additional option? (e.g. with no image, with a featured image, and with a cover block)

[critterverse]

For within the query block, I'm also wondering if the Cover block might get messy with the default inner paragraph text juxtaposed with titles just below. This seems like it might be less noisy on something like the single post template so I do really like @mikachan / @justintadlock's suggestions above!

Also WordPress/gutenberg#43676 would be so so cool if we can make that happen in time.

[carolinan]

The default inner blocks can be removed (until the block is selected and you add new blocks).

[RahiDroid]

@carolinan @luminuu Please correct me if I am wrong, but the Cover block needs to have a fixed height (~430px by default), so using it as the featured image could render it cropped on Front-end; which isn't the case with the Post Featured Image bock. Users might expect their post/page's featured image not to get cropped on FE.

If we happen to achieve WordPress/gutenberg#43676 in time, we may be able to eliminate the need for these additional templates.

[carolinan]

The user can open the template and change the height, and any other setting. I don't think that is an issue at all.

[RahiDroid]

The user can open the template and change the height, and any other setting. I don't think that is an issue at all.

I agree, but a fixed height may not work for all images. It should be dynamic which isn't possible with the Cover block.