search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.34k stars 4.13k forks source link

Block Bindings: Add support for the Cover block background image #63763

Open bacoords opened 2 months ago

bacoords commented 2 months ago

What problem does this address?

Right now you can tie the cover block's image to the featured image, but that's as dynamic as you can get. Cover blocks make great containers for synced patterns and it would be great to be able to have block overrides on the cover block's image. The controls are already in the block toolbar, so it shouldn't require too much UI adjustment.

What is your proposed solution?

Enable block bindings/overrides on the cover block's image ID attribute.

bacoords commented 2 months ago

@SantosGuillamot In response to this comment, do you imagine there being a future abstraction for block bindings that would work for the cover block to opt into? If so, I agree that's worth waiting for. Otherwise, it seems that the way the cover block sets a background image is pretty unique and might always be a little bit hard-coded.

SantosGuillamot commented 1 month ago

I am not familiar with the cover block code, but while working on adding support for some attributes of the image, they could benefit from future set_inner_html or set_outer_html methods from the HTML API. I assumed that, to cover the different use cases, the cover block would need those as well. But I might be mistaken and maybe that's not the case.

justintadlock commented 5 days ago

Just want to echo my support for this specific block to have bindings. It'll open up a lot of custom things I want to do with category/tag/term archives.

I can actually kind of fake this to setting the Cover (outside the loop) to use the featured image, but it's really just using the first post's image if it exists:

author-archive-cover

I have bunches and bunches of other use cases too.

jptweb commented 18 hours ago

Yes I am also investigating if there is possible or a workaround. Cover images seem like such a common feature most websites have; and they are generally on every page so they really benefit from overrides and syncing. So simply using a non synced pattern means I may need to go and and re-save hundreds of pages to update there style. I am trying to see if it could be possible with block variations as well; look forward to hearing any viable solutions as a workaround.

A hacky approach I had was to make one non synced pattern that holds the cover element, and inside that put the synced content like text etc as overrides. This has worked ok but it looks a little weird in the patterns menu and still could lead to issues if I ever needed to change the non synced cover.

What i'll probably end up doing is just creating my own block.. but I then feel i'm reinventing the wheel as the cover block already does cool stuff like serve different size images on different devices etc; allows you to choose focal point etc.

EDIT i'm also realizing this would be a lot tricker than though as things like focal point would be unique for each cover etc. there would be a lot of overrides! I suppose for now I will follow this tutorial to create gutenberg blocks with dynamic content https://kinsta.com/blog/dynamic-blocks/ but once again then i'm recreating the wheel here :(