Ticket #28844: 28844.5.diff

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

@@ -1525 +1525 @@
         margin-top: 14px;
 }
 
-.media-sidebar .settings-save-status {
-        background: #f5f5f5;
+/**
+ * Attachment Details
+ */
+.attachment-details {
+        position: relative;
+        overflow: auto;
+}
+
+.attachment-details .settings-save-status {
         float: right;
         text-transform: none;
         z-index: 10;
 }
 
-.media-sidebar .settings-save-status .spinner {
+.attachment-details .settings-save-status .spinner {
         margin: 0 5px 0;
 }
 
-.media-sidebar .settings-save-status .saved {
+.attachment-details .settings-save-status .saved {
         float: right;
         display: none;
 }
 
-.media-sidebar .save-waiting .settings-save-status .spinner,
-.media-sidebar .save-complete .settings-save-status .saved {
+.attachment-details.save-waiting .settings-save-status .spinner,
+.attachment-details.save-complete .settings-save-status .saved {
         display: block;
 }
 
-/**
- * Attachment Details
- */
-.attachment-details {
-        position: relative;
-        overflow: auto;
-}
-
 .attachment-info {
         overflow: hidden;
         min-height: 60px;
@@ -1645 +1644 @@
         display: block;
 }
 
-.attachment-info .delete-attachment,
-.attachment-info .trash-attachment {
+.media-modal .delete-attachment,
+.media-modal .trash-attachment {
         color: #bc0b0b;
 }
 
-.attachment-info .delete-attachment:hover,
-.attachment-info .trash-attachment:hover {
+.media-modal .delete-attachment:hover,
+.media-modal .trash-attachment:hover {
         color: red;
 }
 
@@ -2670 +2669 @@
  *
  * This should be OOCSS'd so both use a shared selector.
  */
+.edit-attachment-frame .edit-media-header {
+        overflow: hidden;
+}
+
+.upload-php .media-modal-close .media-modal-icon:before {
+        content: '\f335';
+        font-size: 30px;
+}
+
+.upload-php .media-modal-close:hover .media-modal-icon:before,
+.upload-php .media-modal-close:focus .media-modal-icon:before {
+        color: #fff;
+}
+
+.upload-php .media-modal-close .media-modal-icon {
+        margin-top: 13px;
+        width: 30px;
+        height: 30px;
+}
+
+.upload-php .media-modal-close,
 .edit-attachment-frame .edit-media-header .left,
 .edit-attachment-frame .edit-media-header .right {
         cursor: pointer;
         color: #777;
         background-color: transparent;
-        height: 48px;
-        width: 54px;
-        float: left;
+        height: 56px;
+        width: 56px;
+        padding: 0;
+        position: absolute;
         text-align: center;
         border: 0;
-        border-right: 1px solid #ddd;
+        border-left: 1px solid #ddd;
+}
+
+.upload-php .media-modal-close {
+        top: 0;
+        right: 0;
+}
+
+.edit-attachment-frame .edit-media-header .left {
+        right: 112px;
+}
+
+.edit-attachment-frame .edit-media-header .right {
+        right: 56px;
+}
+
+.edit-attachment-frame .media-frame-title {
+        left: 0;
+        right: 170px; /* leave space for prev/next/close */
+        box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.1)
 }
 
 .edit-attachment-frame .edit-media-header .right:before,
@@ -2711 +2751 @@
         cursor: inherit;
 }
 
-.edit-attachment-frame .edit-media-header .close:hover,
+.upload-php .media-modal-close:hover,
 .edit-attachment-frame .edit-media-header .right:hover,
 .edit-attachment-frame .edit-media-header .left:hover,
-.edit-attachment-frame .edit-media-header .close:focus,
+.upload-php .media-modal-close:focus,
 .edit-attachment-frame .edit-media-header .right:focus,
 .edit-attachment-frame .edit-media-header .left:focus {
         background: #0074a2;
@@ -2729 +2769 @@
 .edit-attachment-frame .media-frame-content {
         border-bottom: none;
         bottom: 0;
+        top: 56px;
 }
 
 /* Hiding this for the moment instead of removing it from the template. */
@@ -2744 +2785 @@
         right: 0;
         left: 0;
 }
-
-.edit-attachment-frame .attachment-info {
-        border-bottom: 0;
-        border-right: 1px solid #ddd;
-        bottom: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 50%;
-        margin-bottom: 0;
-        padding: 2% 4% 0;
-        height: 98%; /* 100% - padding percentage above */
-}
-
-.edit-attachment-frame .attachment-info .thumbnail {
-        float: none;
-        max-width: none;
-        max-height: 70%;
-        margin-right: 0;
-}
-
-.edit-attachment-frame .attachment-info .thumbnail-image img {
-        margin: 0;
+.edit-attachment-frame .attachment-media-view {
+        float: left;
+        width: 65%;
+        height: 100%;
 }
 
-.edit-attachment-frame .attachment-info .thumbnail-image:after {
-        -webkit-box-shadow: none;
-                box-shadow: none;
+.edit-attachment-frame .attachment-media-view .thumbnail {
+        box-sizing: border-box;
+        padding: 16px;
+        height: 100%;
 }
 
-.edit-attachment-frame .attachment-info .thumbnail img {
+.edit-attachment-frame .attachment-media-view img {
+        display: block;
+        margin-bottom: 16px;
         max-width: 100%;
-        max-height: 100%;
+        max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 }
 
-.edit-attachment-frame .attachment-info .details {
-        float: none;
+.edit-attachment-frame .delete-attachment {
+        float: right;
+        margin-top: 7px;
 }
 
 .edit-attachment-frame .wp-media-wrapper {
         margin-bottom: 12px;
 }
 
-.edit-attachment-frame .attachment-fields {
-        bottom: 0;
-        padding: 2% 4%;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        right: 0;
+.edit-attachment-frame .attachment-info {
+        overflow: auto;
+        box-sizing: border-box;
+        margin-bottom: 0;
+        padding: 12px 16px 0;
+        width: 35%;
+        height: 100%;
+        border-bottom: 0;
+        border-left: 1px solid #ddd;
+        background: #f3f3f3;
+}
+
+.edit-attachment-frame .attachment-info .details,
+.edit-attachment-frame .attachment-info .settings {
+        overflow: hidden;
+        float: none;
+        margin-bottom: 15px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #ddd;
 }
 
-.edit-attachment-frame .attachment-fields .setting {
+.edit-attachment-frame .attachment-info .setting {
         display: block;
         float: left;
         width: 100%;
         margin: 1px 0;
 }
 
-.edit-attachment-frame .attachment-fields .setting label {
+.edit-attachment-frame .attachment-info .setting label {
         display: block;
 }
 
-.edit-attachment-frame .attachment-fields .setting .link-to-custom {
+.edit-attachment-frame .attachment-info .setting .link-to-custom {
         margin: 3px 0;
 }
 
-.edit-attachment-frame .attachment-fields .setting .name {
+.edit-attachment-frame .attachment-info .setting .name {
         min-width: 30%;
         margin-right: 4%;
         font-size: 12px;
         text-align: right;
 }
 
-.edit-attachment-frame .attachment-fields .setting select {
+.edit-attachment-frame .attachment-info .setting select {
         max-width: 65%;
 }
 
-.edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
-.edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
+.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
+.edit-attachment-frame .attachment-info .field input[type="checkbox"] {
         width: 16px;
         float: none;
         margin: 8px 3px 0;
         padding: 0;
 }
 
-.edit-attachment-frame .attachment-fields .setting span {
+.edit-attachment-frame .attachment-info .setting span {
         float: left;
         min-height: 22px;
         padding-top: 8px;
@@ -2839 +2877 @@
         color: #666;
 }
 
-.edit-attachment-frame .attachment-fields .setting input[type="text"],
-.edit-attachment-frame .attachment-fields .setting input[type="password"],
-.edit-attachment-frame .attachment-fields .setting input[type="number"],
-.edit-attachment-frame .attachment-fields .setting input[type="search"],
-.edit-attachment-frame .attachment-fields .setting input[type="email"],
-.edit-attachment-frame .attachment-fields .setting input[type="url"],
-.edit-attachment-frame .attachment-fields .setting textarea,
-.edit-attachment-frame .attachment-fields .setting .value {
+.edit-attachment-frame .attachment-info .setting input[type="text"],
+.edit-attachment-frame .attachment-info .setting input[type="password"],
+.edit-attachment-frame .attachment-info .setting input[type="number"],
+.edit-attachment-frame .attachment-info .setting input[type="search"],
+.edit-attachment-frame .attachment-info .setting input[type="email"],
+.edit-attachment-frame .attachment-info .setting input[type="url"],
+.edit-attachment-frame .attachment-info .setting textarea,
+.edit-attachment-frame .attachment-info .setting .value {
         margin: 1px;
         width: 65%;
         float: right;
@@ -2856 +2894 @@
         box-sizing: border-box;
 }
 
-.edit-attachment-frame .attachment-fields .setting textarea {
+.edit-attachment-frame .attachment-info .setting textarea {
         height: 62px;
         resize: vertical;
 }
 
-.edit-attachment-frame .attachment-fields select {
+.edit-attachment-frame .attachment-info select {
         margin-top: 3px;
 }
 

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

@@ -11 +11 @@
         }
 
         /**
-         * A state for editing (cropping, etc.) an image.
+         * A state for editing an attachment's metadata.
          *
          * @constructor
          * @augments wp.media.controller.State
          * @augments Backbone.Model
          */
-        media.controller.EditImageNoFrame = media.controller.State.extend({
+        media.controller.EditAttachmentMetadata = media.controller.State.extend({
                 defaults: {
                         id:      'edit-attachment',
-                        title:   l10n.editImage,
+                        title:   l10n.attachmentDetails,
                         // Region mode defaults.
                         menu:    false,
-                        router:  'edit-metadata',
                         content: 'edit-metadata',
 
                         url:     ''
@@ -36 +35 @@
                  * include the regions expected there.
                  */
                 _postActivate: function() {
+                        this.frame.on( 'title:render:default', this._renderTitle, this );
+
+                        this._title();
                         this._content();
-                        this._router();
                 },
 
                 /**
                  * @access private
                  */
-                _router: function() {
-                        var router = this.frame.router,
-                                mode = this.get('router'),
-                                view;
-
-                        this.frame.$el.toggleClass( 'hide-router', ! mode );
-                        if ( ! mode ) {
-                                return;
-                        }
-
-                        this.frame.router.render( mode );
-
-                        view = router.get();
-                        if ( view && view.select ) {
-                                view.select( this.frame.content.mode() );
-                        }
+                _title: function() {
+                        this.frame.title.render( this.get('titleMode') || 'default' );
+                },
+                /**
+                 * @access private
+                 */
+                _renderTitle: function( view ) {
+                        view.$el.text( this.get('title') || '' );
                 },
 
                 _content: function() {
@@ -286 +279 @@
         media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
                 template: wp.template( 'attachment-details-two-column' ),
 
+                events: {
+                        'change [data-setting]':          'updateSetting',
+                        'change [data-setting] input':    'updateSetting',
+                        'change [data-setting] select':   'updateSetting',
+                        'change [data-setting] textarea': 'updateSetting',
+                        'click .delete-attachment':       'deleteAttachment',
+                        'click .trash-attachment':        'trashAttachment',
+                        'click .edit-attachment':         'editAttachment',
+                        'click .refresh-attachment':      'refreshAttachment',
+                        'click .edit-image': 'handleEditImageClick'
+                },
+
                 initialize: function() {
                         if ( ! this.model ) {
                                 return;
@@ -322 +327 @@
                         media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
                 },
 
+                handleEditImageClick: function( event ) {
+                        this.controller.setState( 'edit-image' );
+                },
+
                 afterDelete: function( model ) {
                         if ( ! model.destroyed ) {
                                 return;
@@ -405 +414 @@
          *
          * Requires an attachment model to be passed in the options hash under `model`.
          */
-        media.view.MediaFrame.EditAttachments = media.view.Frame.extend({
+        media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
 
                 className: 'edit-attachment-frame',
                 template: media.template( 'edit-attachment-frame' ),
-                regions:   [ 'router', 'content' ],
+                regions:   [ 'title', 'content' ],
 
                 events: {
                         'click':                    'collapse',
@@ -440 +449 @@
                         this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
                         this.on( 'content:render:edit-image', this.editImageContentUgh, this );
                         this.on( 'close', this.detach );
-                        this.on( 'router:create', this.createRouter, this );
-                        this.on( 'router:render', this.browseRouter, this );
+
+                        // Bind default title creation.
+                        this.on( 'title:create:default', this.createTitle, this );
+                        this.title.mode('default');
 
                         this.options.hasPrevious = this.hasPrevious();
                         this.options.hasNext = this.hasNext();
@@ -474 +485 @@
                  * Add the default states to the frame.
                  */
                 createStates: function() {
+                        var editImageState = new media.controller.EditImage( { model: this.model } );
+                        // Noop some methods.
+                        editImageState._toolbar = function() {};
+                        editImageState._router = function() {};
+                        editImageState._menu = function() {};
                         this.states.add([
-                                new media.controller.EditImageNoFrame( { model: this.model } )
-                        ]);
-                },
+                                new media.controller.EditAttachmentMetadata( { model: this.model } ),
+                                editImageState
 
-                /**
-                 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
-                 */
-                render: function() {
-                        // Activate the default state if no active state exists.
-                        if ( ! this.state() && this.options.state ) {
-                                this.setState( this.options.state );
-                        }
-                        /**
-                         * call 'render' directly on the parent class
-                         */
-                        return media.view.Frame.prototype.render.apply( this, arguments );
+                        ]);
                 },
 
                 /**
@@ -530 +534 @@
                         view.loadEditor();
                 },
 
-                /**
-                 * Create the router view.
-                 *
-                 * @param {Object} router
-                 * @this wp.media.controller.Region
-                 */
-                createRouter: function( router ) {
-                        router.view = new media.view.Router({
-                                controller: this
-                        });
-                },
-
-                /**
-                 * Router rendering callback.
-                 *
-                 * @param  media.view.Router view Instantiated in this.createRouter()
-                 */
-                browseRouter: function( view ) {
-                        view.set({
-                                'edit-metadata': {
-                                        text:     l10n.editMetadata,
-                                        priority: 20
-                                }
-                        });
-
-                        // Only need a tab to Edit Image for images.
-                        if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
-                                view.set({
-                                        'edit-image': {
-                                                text:     l10n.editImage,
-                                                priority: 40
-                                        }
-                                });
-                        }
-                },
-
                 resetContent: function() {
                         this.modal.close();
                         wp.media( {

src/wp-includes/media-template.php

@@ -255 +255 @@
 
         <script type="text/html" id="tmpl-edit-attachment-frame">
                 <div class="edit-media-header">
-                        <button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
-                        <button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
+                        <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
+                        <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
                 </div>
-                <div class="media-frame-router"></div>
+                <div class="media-frame-title"></div>
                 <div class="media-frame-content"></div>
         </script>
 
         <script type="text/html" id="tmpl-attachment-details-two-column">
                 <h3>
                         <?php _e('Attachment Details'); ?>
-
-                        <span class="settings-save-status">
-                                <span class="spinner"></span>
-                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
-                        </span>
                 </h3>
-                <div class="attachment-info">
+                <div class="attachment-media-view">
                         <div class="thumbnail thumbnail-{{ data.type }}">
                                 <# if ( data.uploading ) { #>
                                         <div class="media-progress-bar"><div></div></div>
@@ -280 +275 @@
                                 <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
                                         <img src="{{ data.icon }}" class="icon" draggable="false" />
                                 <# } #>
+
+                                <# if ( 'audio' === data.type ) { #>
+                                <div class="wp-media-wrapper">
+                                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
+                                        </audio>
+                                </div>
+                                <# } else if ( 'video' === data.type ) { #>
+                                <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
+                                        <video controls class="wp-video-shortcode" preload="metadata"
+                                                width="{{ data.width }}" height="{{ data.height }}"
+                                                <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
+                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
+                                        </video>
+                                </div>
+                                <# } #>
+
+                                <div class="attachment-actions">
+                                        <# if ( 'image' === data.type && ! data.uploading ) { #>
+                                                <a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
+                                        <# } #>
+
+                                        <# if ( ! data.uploading && data.can.remove ) { #>
+                                                <?php if ( MEDIA_TRASH ): ?>
+                                                        <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
+                                                <?php else: ?>
+                                                        <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
+                                                <?php endif; ?>
+                                        <# } #>
+                                </div>
                         </div>
-                        <# if ( 'audio' === data.type ) { #>
-                        <div class="wp-media-wrapper">
-                                <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
-                                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
-                                </audio>
-                        </div>
-                        <# } else if ( 'video' === data.type ) { #>
-                        <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
-                                <video controls class="wp-video-shortcode" preload="metadata"
-                                        width="{{ data.width }}" height="{{ data.height }}"
-                                        <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
-                                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
-                                </video>
-                        </div>
-                        <# } #>
+                </div>
+                <div class="attachment-info">
+                        <span class="settings-save-status">
+                                <span class="spinner"></span>
+                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
+                        </span>
                         <div class="details">
                                 <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
                                 <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
@@ -321 +337 @@
                                         </div>
                                 <# } #>
 
-                                <# if ( ! data.uploading && data.can.remove ) { #>
-                                        <?php if ( MEDIA_TRASH ): ?>
-                                                <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
-                                        <?php else: ?>
-                                                <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
-                                        <?php endif; ?>
-                                <# } #>
-
                                 <div class="compat-meta">
                                         <# if ( data.compat && data.compat.meta ) { #>
                                                 {{{ data.compat.meta }}}
                                         <# } #>
                                 </div>
                         </div>
-                </div>
-                <div class="attachment-fields">
-                        <label class="setting" data-setting="url">
-                                <span class="name"><?php _e('URL'); ?></span>
-                                <input type="text" value="{{ data.url }}" readonly />
-                        </label>
-                        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
-                        <label class="setting" data-setting="title">
-                                <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>
-                        </label>
-                        <# if ( 'image' === data.type ) { #>
-                                <label class="setting" data-setting="alt">
-                                        <span class="name"><?php _e('Alt Text'); ?></span>
-                                        <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
+
+                        <div class="settings">
+                                <label class="setting" data-setting="url">
+                                        <span class="name"><?php _e('URL'); ?></span>
+                                        <input type="text" value="{{ data.url }}" readonly />
+                                </label>
+                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+                                <label class="setting" data-setting="title">
+                                        <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>
+                                </label>
+                                <# if ( 'image' === data.type ) { #>
+                                        <label class="setting" data-setting="alt">
+                                                <span class="name"><?php _e('Alt Text'); ?></span>
+                                                <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
+                                        </label>
+                                <# } #>
+                                <label class="setting" data-setting="description">
+                                        <span class="name"><?php _e('Description'); ?></span>
+                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
                                 </label>
-                        <# } #>
-                        <label class="setting" data-setting="description">
-                                <span class="name"><?php _e('Description'); ?></span>
-                                <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
-                        </label>
-                        <label class="setting">
-                                <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>
+                                        <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>
+
+                        <a href="post.php?post={{ data.id }}&action=edit">Edit more details</a>
 
                 </div>
         </script>

src/wp-includes/media.php

@@ -2909 +2909 @@
                 'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
                 'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
 
+                // Library Details
+                'attachmentDetails'  => __( 'Attachment Details' ),
+
                 // From URL
                 'insertFromUrlTitle' => __( 'Insert from URL' ),