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

[needle]

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

[needle]

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.

[ader]

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

[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.

[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.

[needle]

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' ) );

[needle]

Without CSS enqueued

[needle]

With CSS enqueued

[helen]

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.

[needle]

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.

[ader]

Thank you for the screenshots, now I see the problem :)

[azaozz]

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).

[azaozz]

In 27656:

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

[nacin]

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?

[helen]

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

[azaozz]

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.

[needle]

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

[kirasong]

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.

[DrewAPicture]

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.

[azaozz]

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.

[azaozz]

In 27901:

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