Media Grid, for audio files:

* Show `artist` and `album` fields in the Edit Attachment modal
* Sync their values on `change`

See #28839.


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

src/wp-admin/includes/ajax-actions.php

@@ -2218,6 +2218,25 @@ function wp_ajax_save_attachment() {
 		}
 	}
 
+	if ( 0 === strpos( $post['post_mime_type'], 'audio/' ) ) {
+		$changed = false;
+		$id3data = wp_get_attachment_metadata( $post['ID'] );
+		if ( ! is_array( $id3data ) ) {
+			$changed = true;
+			$id3data = array();
+		}
+		foreach ( wp_get_attachment_id3_keys( (object) $post, 'edit' ) as $key => $label ) {
+			if ( isset( $changes[ $key ] ) ) {
+				$changed = true;
+				$id3data[ $key ] = sanitize_text_field( wp_unslash( $changes[ $key ] ) );
+			}
+		}
+
+		if ( $changed ) {
+			wp_update_attachment_metadata( $id, $id3data );
+		}
+	}
+
 	wp_update_post( $post );
 	wp_send_json_success();
 }

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

@@ -298,10 +298,11 @@
 
 			this.$el.attr('aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
 
-			this.model.on( 'change:sizes change:uploading', this.render, this );
-			this.model.on( 'change:title', this._syncTitle, this );
+			this.model.on( 'change:title',   this._syncTitle, this );
 			this.model.on( 'change:caption', this._syncCaption, this );
 			this.model.on( 'change:percent', this.progress, this );
+			this.model.on( 'change:album',   this._syncAlbum, this );
+			this.model.on( 'change:artist',  this._syncArtist, this );
 
 			// Update the selection.
 			this.model.on( 'add', this.select, this );
@@ -443,6 +444,7 @@
 
 			this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
 			this.on( 'content:render:edit-image', this.editImageContentUgh, this );
+			this.on( 'close', this.detach );
 
 			// Only need a tab to Edit Image for images.
 			if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
@@ -465,12 +467,12 @@
 				} );
 
 				// Completely destroy the modal DOM element when closing it.
-				this.modal.close = function() {
+				this.modal.on( 'close', function() {
 					self.modal.remove();
 					$( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
 
 					self.resetRoute();
-				};
+				} );
 
 				this.modal.content( this );
 				this.modal.open();

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

@@ -5032,7 +5032,9 @@
 	// Ensure settings remain in sync between attachment views.
 	_.each({
 		caption: '_syncCaption',
-		title:   '_syncTitle'
+		title:   '_syncTitle',
+		artist:  '_syncArtist',
+		album:   '_syncAlbum'
 	}, function( method, setting ) {
 		/**
 		 * @param {Backbone.Model} model

src/wp-includes/media-template.php

@@ -337,6 +337,17 @@ function wp_print_media_templates() {
 				<span class="name"><?php _e('Title'); ?></span>
 				<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
 			</label>
+			<# if ( 'audio' === data.type ) { #>
+			<?php foreach ( array(
+				'artist' => __( 'Artist' ),
+				'album' => __( 'Album' ),
+			) as $key => $label ) : ?>
+			<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
+				<span class="name"><?php echo $label ?></span>
+				<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
+			</label>
+			<?php endforeach; ?>
+			<# } #>
 			<label class="setting" data-setting="caption">
 				<span class="name"><?php _e('Caption'); ?></span>
 				<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
@@ -352,15 +363,16 @@ function wp_print_media_templates() {
 				<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 			</label>
 			<label class="setting">
-					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
-					<span class="value">{{ data.authorName }}</span>
-				</label>
+				<span class="name"><?php _e( 'Uploaded By' ); ?></span>
+				<span class="value">{{ data.authorName }}</span>
+			</label>
 			<# if ( data.uploadedTo ) { #>
 				<label class="setting">
 					<span class="name"><?php _e('Uploaded To'); ?></span>
 					<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
 				</label>
 			<# } #>
+
 		</div>
 	</script>