Skip to content

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Aug 4, 2025

What?

Follow-up to #70939

This PR adds drag-and-drop functionality for uploading posters in the Cover/Video block.

Why?

Previously, uploading an image in the new poster control required a three-step process. This update streamlines the experience by allowing users to upload images directly via drag-and-drop, making the workflow faster and more intuitive.

How?

The DropZone component was integrated directly, accompanied by an onFilesDrop callback to handle file uploads.

Testing Instructions

  1. Create a new Cover or Video block.
  2. Attach a video to it.
  3. Add a poster image to the block by dragging and dropping it over the corresponding control.
  4. Confirm that the image gets properly applied.

Testing Instructions for Keyboard

Same.

Screencast

pr-demo-dnd.mov

@yogeshbhutkar yogeshbhutkar self-assigned this Aug 4, 2025
@yogeshbhutkar yogeshbhutkar added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Video Affects the Video Block labels Aug 4, 2025
@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review August 4, 2025 09:14
Copy link

github-actions bot commented Aug 4, 2025

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.

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

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

@yogeshbhutkar yogeshbhutkar requested a review from Mamaduka August 4, 2025 09:36
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, @yogeshbhutkar!

I left a couple of minor notes. I'll try to test and properly review this tomorrow.

Comment on lines 60 to 61
noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice( message );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should use withNotices with new components. Let's use snackbar for errors here.

P.S. Don't forget to remove all related styling.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've removed the usage of withNotices within PosterImage. Should we also refactor PostFeaturedImage to reflect the same?

* Implements a static getter for `mediaUpload`.
* Removes the usage of `withNotices` as well as the corresponding styles.
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, @yogeshbhutkar!

@Mamaduka Mamaduka merged commit a9e3fda into WordPress:trunk Aug 5, 2025
80 of 83 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.4 milestone Aug 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Video Affects the Video Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants