WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#27620 closed defect (bug) (fixed)

Customizer background image drop zone text glitch

Reported by: astralbodies Owned by: ocean90
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Customize Keywords: has-patch
Focuses: javascript Cc:

Description

The text "Drop a file here or ." is missing the "or" part of the description.

https://i.cloudup.com/aAeR5Qdy62.png

I originally discovered this on WordPress.com and I was directed to open a ticket here in Core.

Attachments (5)

27620-wp38.png (16.7 KB) - added by ocean90 4 years ago.
27620-wp39.png (11.9 KB) - added by ocean90 4 years ago.
27620.patch (698 bytes) - added by rachelbaker 4 years ago.
Corrected plupload support check and hide drop-zone area on fallback.
27620.2.patch (1.2 KB) - added by adamsilverstein 4 years ago.
Use feature detection to determine if browser supports drag and drop
27620.3.patch (437 bytes) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (24)

#1 @ocean90
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.9

Hello astralbodies, thanks for the report.

Confirmed. The part after "or" is the button below. In 3.8 it was a link.

@ocean90
4 years ago

@ocean90
4 years ago

@rachelbaker
4 years ago

Corrected plupload support check and hide drop-zone area on fallback.

#2 @rachelbaker
4 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

#3 follow-up: @ocean90
4 years ago

  • Owner set to ocean90
  • Status changed from new to reviewing

#4 in reply to: ↑ 3 @adamsilverstein
4 years ago

Replying to ocean90:

I tested this and it looks good, after applying the patch I see the proper 'select a file' option -

http://f.cl.ly/items/3h1804062x2A3l3L1i1L/Customize%20Twenty%20Twelve%20%E2%80%94%20WordPress%202014-04-02%2013-00-32%202014-04-02%2013-00-37.jpg

Last edited 4 years ago by adamsilverstein (previous) (diff)

#5 follow-up: @ocean90
4 years ago

  • Keywords needs-patch added; has-patch needs-testing removed

Nope, this.supports returns true in IE, because it's this.supports.upload aka Uploader.browser.supported. The result is, that you have no button to upload in IE.

#6 in reply to: ↑ 5 ; follow-up: @rachelbaker
4 years ago

Replying to ocean90:

Nope, this.supports returns true in IE, because it's this.supports.upload aka Uploader.browser.supported. The result is, that you have no button to upload in IE.

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

#7 in reply to: ↑ 6 ; follow-ups: @ocean90
4 years ago

Replying to rachelbaker:

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

this.uploader.bind( 'init', function( uploader ) { .. } in wp-upload.js runs after this.uploader.init() in customize-controls.js. Because of this this.supports.dragdrop is undefined.

#8 in reply to: ↑ 7 @adamsilverstein
4 years ago

Replying to ocean90:

Replying to rachelbaker:

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

this.uploader.bind( 'init', function( uploader ) { .. } in wp-upload.js runs after this.uploader.init() in customize-controls.js. Because of this this.supports.dragdrop is undefined.

that makes sense. i see the set call dragdrop = self.supports.dragdrop = uploader.features.dragdrop && ! Uploader.browser.mobile;

what i'm still unclear on is where uploader.features.dragdrop is set - I couldn't find that in JS or on the PHP side where the options are passed. I'm likely missing something, is it being set?

@adamsilverstein
4 years ago

Use feature detection to determine if browser supports drag and drop

#9 in reply to: ↑ 7 ; follow-up: @adamsilverstein
4 years ago

Replying to ocean90:

Replying to rachelbaker:

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

this.uploader.bind( 'init', function( uploader ) { .. } in wp-upload.js runs after this.uploader.init() in customize-controls.js. Because of this this.supports.dragdrop is undefined.

In 27620.2.patch I reproduced the code from Modernizr we are using internally (later) to check for drag & drop support. I verified this works correctly across IE 8->11 and in firefox; I would expect it to work correctly across browsers.

#10 @adamsilverstein
4 years ago

  • Keywords has-patch dev-feedback added; needs-patch removed

#11 @adamsilverstein
4 years ago

  • Focuses javascript added

#12 in reply to: ↑ 9 @rachelbaker
4 years ago

Replying to adamsilverstein:

In 27620.2.patch I reproduced the code from Modernizr we are using internally (later) to check for drag & drop support. I verified this works correctly across IE 8->11 and in firefox; I would expect it to work correctly across browsers.

Smart approach! Thank you for picking this up for me, Adam. I also tested in IE 8->10 and verified it was working. This probably also needs testing on mobile/tablet devices as well.

#13 @ocean90
4 years ago

  • Keywords dev-feedback removed

I don't think we need another feature detection here. Plupload does this already, that's where uploader.features.dragdrop comes from. We just have to get in the right order again, like it was in 3.8.

Last edited 4 years ago by ocean90 (previous) (diff)

#14 @ocean90
4 years ago

  • Focuses ui removed
  • Keywords needs-patch added; has-patch removed

The related change is the upgrade to Plupload 2.1.1, see [27316] , especially wp-plupload.js.

@ocean90
4 years ago

#15 follow-up: @ocean90
4 years ago

  • Keywords has-patch added; needs-patch removed

Because the dropzone setup is now bind to the Init event, the init method of the uploader should be bind to the PostInit event, see 27620.3.patch.

#16 in reply to: ↑ 15 ; follow-up: @adamsilverstein
4 years ago

Replying to ocean90:

Because the dropzone setup is now bind to the Init event, the init method of the uploader should be bind to the PostInit event, see 27620.3.patch.

Brilliant, this gets right to the root of the problem. I missed the PostInit event. This makes way more sense than my replication of the feature detection code. Will do some browser testing!

#17 in reply to: ↑ 16 @adamsilverstein
4 years ago

Replying to adamsilverstein:

Replying to ocean90:

Because the dropzone setup is now bind to the Init event, the init method of the uploader should be bind to the PostInit event, see 27620.3.patch.

Brilliant, this gets right to the root of the problem. I missed the PostInit event. This makes way more sense than my replication of the feature detection code. Will do some browser testing!

Works as expected - tested in ie 8,9 & 10 plus firefox (current).

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.


4 years ago

#19 @ocean90
4 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 27933:

Plupload wrapper: Call init callback on PostInit event.
Fixes the background image uploader in Customizer, which was broken after [27316].

fixes #27620.

Note: See TracTickets for help on using tickets.