WordPress.org

Make WordPress Core

Opened 20 months ago

Last modified 3 weeks ago

#35827 assigned enhancement

Customizer: Create a dropzone for adding images

Reported by: melchoyce Owned by:
Milestone: Future Release Priority: high
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 18 months ago.
Initial work in progress.

Download all attachments as: .zip

Change History (22)

#1 @celloexpressions
19 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
18 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
18 months ago

Initial work in progress.

#3 @celloexpressions
18 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
18 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
8 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
8 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
8 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.


8 months ago

#9 @melchoyce
5 months ago

Semi-related: #34323

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


2 months ago

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


2 months ago

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


2 months ago

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


7 weeks ago

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


6 weeks ago

#15 @westonruter
4 weeks ago

  • Milestone changed from Future Release to 4.9

Milestoning for visibility.

#16 @westonruter
4 weeks ago

  • Priority changed from normal to high

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

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


4 weeks ago

#18 @westonruter
4 weeks ago

  • Owner set to obenland
  • Status changed from new to assigned

#19 @westonruter
4 weeks ago

  • Owner obenland deleted

This needs a champion urgently to make it for 4.9.

#20 @jbpaul17
4 weeks ago

  • Milestone changed from 4.9 to Future Release

Punting to Future Release per today's Customize chat.

#21 @joemcgill
3 weeks ago

Let's also remember to include media widget placeholders whenever this is implemented.

Note: See TracTickets for help on using tickets.