WordPress.org

Make WordPress Core

#27465 closed defect (bug) (fixed)

Drag and drop files into the Visual Editor missing styles when used on front end

Reported by: needle Owned by: azaozz
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: TinyMCE Keywords:
Focuses: javascript Cc:

Description

When using wp_editor() on the front end with media_buttons enabled, drag-and-drop functionality is broken. In terms of styling, wp-admin/css/edit.css is not enqueued and therefore no styling is applied. More critically, dragging a file to the editor results in an endless loop of Javascript errors. presumably because a relevant script is not being enqueued:

Uncaught TypeError: Object function ( item ) {

	// loop through the array
	for (var i = 0; i < this.length; i++){
		
		// remove our item
		if (item === this[i]) { this.splice(i, 1); }
		
	}

} has no method 'toggle' 

media-views.js?ver=3.9-beta2:3030
media.view.EditorUploader.media.View.extend.refresh media-views.js?ver=3.9-beta2:3030
media.view.EditorUploader.media.View.extend.containerDragover media-views.js?ver=3.9-beta2:3106
n.event.dispatch jquery.js?ver=1.11.0:3
n.event.add.r.handle jquery.js?ver=1.11.0:3
media.view.EditorUploader.media.View.extend.refresh media-views.js?ver=3.9-beta2:3030
media.view.EditorUploader.media.View.extend.containerDragover media-views.js?ver=3.9-beta2:3106
n.event.dispatch jquery.js?ver=1.11.0:3
n.event.add.r.handle

Attachments (4)

without-dropzone.png (24.2 KB) - added by needle 17 months ago.
Without CSS enqueued
with-dropzone.png (30.9 KB) - added by needle 17 months ago.
With CSS enqueued
27465.patch (3.1 KB) - added by azaozz 16 months ago.
27465.1.patch (4.0 KB) - added by azaozz 16 months ago.

Download all attachments as: .zip

Change History (24)

comment:1 @needle17 months ago

On further investigation, it seems I've somewhat misrepresented the JS error. I am adding a utility function to the Array object which produces the error mentioned in the ticket:

Array.prototype.remove_item = function( item ) {
	for (var i = 0; i < this.length; i++){
		if (item === this[i]) { this.splice(i, 1); }
	}
}

This is a common approach and it seems odd for the drag-and-drop code to trigger an error as a result, but it is not strictly an error in WP core.

However, my report concerning the inclusion of wp-admin/css/edit.css still stands.

Last edited 17 months ago by needle (previous) (diff)

comment:2 follow-up: @ader17 months ago

Hi, I've just reproduced it on 3.9-beta2 and everything works perfectly fine.

Last edited 17 months ago by ader (previous) (diff)

comment:3 in reply to: ↑ 2 ; follow-up: @needle17 months ago

Replying to ader:

Hi, I've just reproduced it on 3.9-beta2 and everything works perfectly fine.

Ignoring the JS error, did you see "Drop files to upload" underneath the TinyMCE editor? I have to enqueue wp-admin/css/edit.css for things to function correctly.

comment:4 in reply to: ↑ 3 ; follow-up: @ader17 months ago

Replying to needle:

Replying to ader:

Hi, I've just reproduced it on 3.9-beta2 and everything works perfectly fine.

Ignoring the JS error, did you see "Drop files to upload" underneath the TinyMCE editor? I have to enqueue wp-admin/css/edit.css for things to function correctly.

Yes, I see it underneath. I can drag&drop to both underneath panel and using "Add media" button, and files upload correctly. Also I didn't get any JS errors. I've tested it on fresh WP install with Twenty Fourteen theme enabled.

comment:5 in reply to: ↑ 4 @needle17 months ago

Replying to ader:

Replying to needle:

Replying to ader:

Hi, I've just reproduced it on 3.9-beta2 and everything works perfectly fine.

Ignoring the JS error, did you see "Drop files to upload" underneath the TinyMCE editor? I have to enqueue wp-admin/css/edit.css for things to function correctly.

Yes, I see it underneath. I can drag&drop to both underneath panel and using "Add media" button, and files upload correctly. Also I didn't get any JS errors. I've tested it on fresh WP install with Twenty Fourteen theme enabled.

Sorry, what I wrote was ambiguous - what I meant to say was that seeing "Drop files to upload" is unexpected since admin screens with editors don't show it and it's only when wp-admin/css/edit.css has been enqueued that it disappears initially, as it presumably should.

When files are dragged to the editor without enqueueing the css, there is no visible dropzone, but there is when it is enqueued. I'll upload screenshots, but you can test just by toggling:

wp_enqueue_style( 'wp_editor_edit_css', admin_url( 'css/edit.css' ) );

@needle17 months ago

Without CSS enqueued

@needle17 months ago

With CSS enqueued

comment:6 follow-up: @helen17 months ago

Please don't enqueue individual admin CSS files that are not already registered with the script loader. They are not meant to be used that way. Unregistered files are modular and used to build wp-admin.css.

Sounds like either drag-into-editor should only be available in the admin, or the CSS should be moved to /wp-includes/css/editor.css.

comment:7 in reply to: ↑ 6 @needle17 months ago

Replying to helen:

Sounds like either drag-into-editor should only be available in the admin, or the CSS should be moved to /wp-includes/css/editor.css.

Thank you for putting the issue succinctly. It should either work or not be present.

comment:8 @ader17 months ago

Thank you for the screenshots, now I see the problem :) Drag&Drop should be available in frontend so right now one of the possible options is moving wp-admin/css/edit.css to /wp-includes/css/editor.css as helen suggested. I've tried it and it worked so I can confirm it.

Last edited 17 months ago by ader (previous) (diff)

comment:9 @helen17 months ago

  • Milestone changed from Awaiting Review to 3.9
  • Summary changed from Drag and drop files into the Visual Editor broken when used on front end to Drag and drop files into the Visual Editor missing styles when used on front end

comment:10 @azaozz17 months ago

I'm 50/50 on whether the drag/drop should be enabled by default on the front-end. Looks like it works in most themes but it would probably break somewhere. Perhaps best would be to have some sort of setting (JS var, body class, etc.) to enable it on the front.

In any case thinking the CSS should be in media-views.css or editor.css (perhaps the former as it requires media).

comment:11 @azaozz17 months ago

In 27656:

Move the styling of drag/drop on the editor uploading to media-views.css, see #27465

comment:12 @ircbot16 months ago

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

comment:13 @nacin16 months ago

I'm thinking this it's probably easiest for this to remain admin-only, at least for now. I'd like it to be available on the frontend but that seems like a minefield?

comment:14 @helen16 months ago

I agree on keeping this admin-only for now. Not enough testing to feel good about it for 3.9.

comment:15 @azaozz16 months ago

Yeah, agreed. Was thinking we can add a setting to turn this on, perhaps in _wpPluploadSettings as technically this is part of the uploader. Or we can just look at the adminpage JS global.

comment:16 @needle16 months ago

If this becomes optional, could it please be a parameter passed to wp_editor() rather than hidden in JS somewhere? Cheers.

comment:17 follow-up: @DH-Shredder16 months ago

It sounds like the consensus is that we should disable this on the front-end.

I'd be fine with either a filter or argument to wp_editor() here that defaults to admin only.

comment:18 in reply to: ↑ 17 @DrewAPicture16 months ago

Replying to DH-Shredder:

It sounds like the consensus is that we should disable this on the front-end.

I'd be fine with either a filter or argument to wp_editor() here that defaults to admin only.

My money's on a new argument for wp_editor(), ignored and set to false for the front-end.

@azaozz16 months ago

@azaozz16 months ago

comment:19 @azaozz16 months ago

27465.1.patch should do it. Was wondering if we should also disable triggering of the jQuery 'dragstart dragend dragover drop' events from TinyMCE, seems better.

comment:20 @azaozz16 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 27901:

Drag and drop files on the editor to upload: add new argument to wp_editor() to enable, fixes #27465

Note: See TracTickets for help on using tickets.