Allow attachments to be Detached from their parent in media grid and list modes.

See #6820.


git-svn-id: https://develop.svn.wordpress.org/trunk@31619 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/media/views.js

@@ -2656,6 +2656,7 @@ Attachment = View.extend({
 			this.listenTo( this.model, 'change', this.render );
 		} else {
 			this.listenTo( this.model, 'change:percent', this.progress );
+			this.listenTo( this.model, 'change:parent', this.render );
 		}
 		this.listenTo( this.model, 'change:title', this._syncTitle );
 		this.listenTo( this.model, 'change:caption', this._syncCaption );
@@ -3195,7 +3196,8 @@ Details = Attachment.extend({
 		'click .untrash-attachment':      'untrashAttachment',
 		'click .edit-attachment':         'editAttachment',
 		'click .refresh-attachment':      'refreshAttachment',
-		'keydown':                        'toggleSelectionHandler'
+		'keydown':                        'toggleSelectionHandler',
+		'click .detach-from-parent':      'detachFromParent'
 	},
 
 	initialize: function() {
@@ -3294,6 +3296,20 @@ Details = Attachment.extend({
 			this.controller.trigger( 'attachment:keydown:arrow', event );
 			return;
 		}
+	},
+
+	/**
+	 * @param {Object} event
+	 */
+	detachFromParent: function( event ) {
+		event.preventDefault();
+
+		this.model.save({
+			'parent' : 0,
+			'uploadedTo' : 0,
+			'uploadedToLink' : '',
+			'uploadedToTitle' : ''
+		});
 	}
 });
 

src/wp-includes/js/media/views/attachment.js

@@ -52,6 +52,7 @@ Attachment = View.extend({
 			this.listenTo( this.model, 'change', this.render );
 		} else {
 			this.listenTo( this.model, 'change:percent', this.progress );
+			this.listenTo( this.model, 'change:parent', this.render );
 		}
 		this.listenTo( this.model, 'change:title', this._syncTitle );
 		this.listenTo( this.model, 'change:caption', this._syncCaption );

src/wp-includes/js/media/views/attachment/details.js

@@ -35,7 +35,8 @@ Details = Attachment.extend({
 		'click .untrash-attachment':      'untrashAttachment',
 		'click .edit-attachment':         'editAttachment',
 		'click .refresh-attachment':      'refreshAttachment',
-		'keydown':                        'toggleSelectionHandler'
+		'keydown':                        'toggleSelectionHandler',
+		'click .detach-from-parent':      'detachFromParent'
 	},
 
 	initialize: function() {
@@ -134,6 +135,20 @@ Details = Attachment.extend({
 			this.controller.trigger( 'attachment:keydown:arrow', event );
 			return;
 		}
+	},
+
+	/**
+	 * @param {Object} event
+	 */
+	detachFromParent: function( event ) {
+		event.preventDefault();
+
+		this.model.save({
+			'parent' : 0,
+			'uploadedTo' : 0,
+			'uploadedToLink' : '',
+			'uploadedToTitle' : ''
+		});
 	}
 });
 

src/wp-includes/media-template.php

@@ -418,6 +418,9 @@ function wp_print_media_templates() {
 						<# } else { #>
 							<span class="value">{{ data.uploadedToTitle }}</span>
 						<# } #>
+						<# if ( data.nonces.edit ) { #>
+						<a class="detach-from-parent" data-id="{{ data.id }}" href="#">(<?php _e( 'Detach' ); ?>)</a>
+						<# } #>
 					</label>
 				<# } #>
 				<div class="attachment-compat"></div>