Cover: Enable support for adding posters over video

[yogeshbhutkar]

What?

Closes #18962

This PR adds support for displaying posters over videos within the Core/Cover block.

Why?

For larger videos and users on slower connections, the inability to set a poster image can result in blocks displaying a blank background, leading to a poor user experience.

How?

The refactorings made in #67044 extracted the poster-image component, which is reused in this PR to implement a similar functionality within the core/cover block.

Testing Instructions

1. Create a new post and insert a cover block.
2. Attach a large video to it.
3. Also, attach a corresponding poster image to the video.
4. On the front-end, from the developer tools, enable network throttling and set the throttle to "fast 4G".
5. Confirm that the poster gets shown and acts as a placeholder until the video loads up.

Testing Instructions for Keyboard

Same.

Screencast

pr-demo.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @VonZubinski, @H0yVoy, @idea--list.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: VonZubinski, H0yVoy, idea--list.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: donalirl <[email protected]>
Co-authored-by: erikjoling <[email protected]>
Co-authored-by: strarsis <[email protected]>
Co-authored-by: michael-sumner <[email protected]>
Co-authored-by: aatospaja <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[fabiankaegy]

Very cool! I left one comment that we need to address before we can merge this but other than that I think this works as intended and solves a very old issue :)

[fabiankaegy]

Looking at this more I think we should improve the way the poster image is handled here. I'd love to display it similar to the posts featured image where you get a preview of the poster and can then replace / remove it.

CleanShot.2025-07-21.at.12.41.15.mp4

[yogeshbhutkar]

I agree with this, @fabiankaegy. The current UI for previewing poster images definitely needs some iteration. That said, this has also been the case for the Video Block, where poster image support has existed for some time now.

In my opinion, this PR is simply adding poster image support in line with what's already available in the Video Block. With that in mind, I think it would make sense to handle the design enhancements for both blocks as part of a follow-up issue. What do you think?

[fabiankaegy]

@yogeshbhutkar Very good point! :)

I hadn't realized that the video block uses the exact same control.

In that case I'm happy with this 👍 :)

[fabiankaegy]

I just requested an additional final review from @t-hamano or @Mamaduka but from my end this is good to go

[t-hamano]

I think we should improve the way the poster image is handled here. I'd love to display it similar to the posts featured image where you get a preview of the poster and can then replace / remove it.

I agree. The current PosterImage UI makes it difficult to preview poster images. We may be able to try to improve it with a separate PR.

[Mamaduka]

I think we should improve the way the poster image is handled here. I'd love to display it similar to the posts featured image where you get a preview of the poster and can then replace / remove it.

+1. Makes sense as a follow-up.

[Mamaduka]

Thanks for working on this, @yogeshbhutkar!

The new poster image control works as expected, and I couldn't identify any regressions when testing the previous block markup.

A small note: Maybe we should place a new control below the 'Focal point' picker. IMO, seems less distracting and secondary with this order. @fabiankaegy, @t-hamano, what do you think?

Screenshot

[t-hamano]

Maybe we should place a new control below the 'Focal point' picker. IMO, seems less distracting and secondary with this order.

+1 👍

As a follow-up, it would be great to improve the PosterImage component of the Video block based on this feedback as well (Correctly place the MediaUploadCheck, use ref suffix, etc.).

[Mamaduka]

As a follow-up, it would be great to improve the PosterImage component of the Video block based on this feedback as well (Correctly place the MediaUploadCheck, use ref suffix, etc.).

We got that covered in #70830.

[yogeshbhutkar]

The MediaUpload component supports pre-selecting images via attachment IDs, but this isn’t currently implemented. To enable this, we may need to introduce a posterId attribute in the block.json for the Video and Cover blocks.

I would like to know your thoughts on whether this is a viable approach and if it requires a follow-up.

[Mamaduka]

The MediaUpload component supports pre-selecting images via attachment IDs, but this isn’t currently implemented. To enable this, we may need to introduce a posterId attribute in the block.json for the Video and Cover blocks.

I've not seen any reports requesting the fix for it. While a nice QoL improvement, it doesn't seem to be a significant issue for users. I would say it's a very low priority.