WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 38 hours ago

#35827 new enhancement

Customizer: Create a dropzone for adding images

Reported by: melchoyce Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.1
Component: Customize Keywords: needs-patch
Focuses: ui, javascript Cc:

Description

This is a follow-up to #35826.

On panels that let you upload images (identity, header, background) we should make the "no image set" container a dropzone to drag & drop your images onto. Like the editor, when you drag and drop an image into those dropzones, it would open the media modal and start uploading the image.

Attachments (1)

35827.wip.diff (3.5 KB) - added by celloexpressions 16 months ago.
Initial work in progress.

Download all attachments as: .zip

Change History (12)

#1 @celloexpressions
17 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version set to 4.1

I'm pretty sure that this functionality previously existed in the pre-media-modal (pre-4.1) iteration of the Customizer image controls. I'd start with WP_Customize_Media_Control (which also covers the image and background controls) and let it come to the header control once that's updated to extend the core chain of controls.

#2 @karmatosed
16 months ago

I would love to see this happen particularly for areas like site logo. In user tests I have seen several times now people try to click the 'no logo' area. This being both clickable and draggable would make a lot of difference. If something can have drop zones or images, making it 'just work' is what people want. There is a really strong learned model of behaviour for people to just drag.

@celloexpressions
16 months ago

Initial work in progress.

#3 @celloexpressions
16 months ago

  • Focuses javascript added

Starting to investigate, this isn't trivial to implement and there are some UX issues to think about. I think we should treat it as a somewhat hidden progressive enhancement - if you drag an image in and you can upload it'll open the media modal and let you go through the process, but we can't cleanly display upload or permissions errors here.

I'm attempting to adapt the code from the media library. I started with tmpl-uploader-inline in wp-includes/media-template.php, but working through it I don't think we should add any of that markup, only the JS should work (keeping the UI simple). I'm also looking at the UploaderWindow view in wp-includes/js/media-views.js. Need to investigate wp.Uploader next; work in progress patch is uploaded (if anyone else wants to iterate, please do so, otherwise I'll revisit likely in a couple weeks).

#4 follow-up: @voldemortensen
16 months ago

I've also been working through some concepts for this. I don't have a patch yet, but I'll take a look at @celloexpressions to get some ideas.

#5 in reply to: ↑ 4 @melchoyce
6 months ago

Replying to voldemortensen:

I've also been working through some concepts for this. I don't have a patch yet, but I'll take a look at @celloexpressions to get some ideas.

Just wanted to follow up here — have you had a chance to review?

#6 @celloexpressions
6 months ago

Also, we can use the notifications API now to show errors directly in the customize pane without worrying about the media modal. For any media type that's dropped in and supported by the control, the dropzone can directly accept the image and process it without opening the media modal and breaking the flow at all. A modal would only be required for cropped-image controls, and that could go straight to the cropping step. This should eliminate a lot of clicks and complexity if implemented well.

Glancing at my old patch, I'm not sure whether it has much to work off of, for what it's worth.

#7 @voldemortensen
6 months ago

I didn't get far with this one before my schedule got crazy, so anyone else who wants to take a stab is more than welcome to.

This ticket was mentioned in Slack in #core-customize by melchoyce. View the logs.


6 months ago

#9 @melchoyce
3 months ago

Semi-related: #34323

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


9 days ago

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


38 hours ago

Note: See TracTickets for help on using tickets.