Make WordPress Core

Ticket #28844: 28844.6.diff

File 28844.6.diff, 23.4 KB (added by helen, 10 years ago)
  • src/wp-includes/css/media-views.css

     
    15251525        margin-top: 14px;
    15261526}
    15271527
    1528 .media-sidebar .settings-save-status {
    1529         background: #f5f5f5;
     1528/**
     1529 * Attachment Details
     1530 */
     1531.attachment-details {
     1532        position: relative;
     1533        overflow: auto;
     1534}
     1535
     1536.attachment-details .settings-save-status {
    15301537        float: right;
    15311538        text-transform: none;
    15321539        z-index: 10;
    15331540}
    15341541
    1535 .media-sidebar .settings-save-status .spinner {
     1542.attachment-details .settings-save-status .spinner {
    15361543        margin: 0 5px 0;
    15371544}
    15381545
    1539 .media-sidebar .settings-save-status .saved {
     1546.attachment-details .settings-save-status .saved {
    15401547        float: right;
    15411548        display: none;
    15421549}
    15431550
    1544 .media-sidebar .save-waiting .settings-save-status .spinner,
    1545 .media-sidebar .save-complete .settings-save-status .saved {
     1551.attachment-details.save-waiting .settings-save-status .spinner,
     1552.attachment-details.save-complete .settings-save-status .saved {
    15461553        display: block;
    15471554}
    15481555
    1549 /**
    1550  * Attachment Details
    1551  */
    1552 .attachment-details {
    1553         position: relative;
    1554         overflow: auto;
    1555 }
    1556 
    15571556.attachment-info {
    15581557        overflow: hidden;
    15591558        min-height: 60px;
     
    16451644        display: block;
    16461645}
    16471646
    1648 .attachment-info .delete-attachment,
    1649 .attachment-info .trash-attachment {
     1647.media-modal .delete-attachment,
     1648.media-modal .trash-attachment {
    16501649        color: #bc0b0b;
    16511650}
    16521651
    1653 .attachment-info .delete-attachment:hover,
    1654 .attachment-info .trash-attachment:hover {
     1652.media-modal .delete-attachment:hover,
     1653.media-modal .trash-attachment:hover {
    16551654        color: red;
    16561655}
    16571656
     
    26702669 *
    26712670 * This should be OOCSS'd so both use a shared selector.
    26722671 */
     2672.edit-attachment-frame .edit-media-header {
     2673        overflow: hidden;
     2674}
     2675
     2676.upload-php .media-modal-close .media-modal-icon:before {
     2677        content: '\f335';
     2678        font-size: 30px;
     2679}
     2680
     2681.upload-php .media-modal-close:hover .media-modal-icon:before,
     2682.upload-php .media-modal-close:focus .media-modal-icon:before {
     2683        color: #fff;
     2684}
     2685
     2686.upload-php .media-modal-close .media-modal-icon {
     2687        margin-top: 13px;
     2688        width: 30px;
     2689        height: 30px;
     2690}
     2691
     2692.upload-php .media-modal-close,
    26732693.edit-attachment-frame .edit-media-header .left,
    26742694.edit-attachment-frame .edit-media-header .right {
    26752695        cursor: pointer;
    26762696        color: #777;
    26772697        background-color: transparent;
    2678         height: 48px;
    2679         width: 54px;
    2680         float: left;
     2698        height: 56px;
     2699        width: 56px;
     2700        padding: 0;
     2701        position: absolute;
    26812702        text-align: center;
    26822703        border: 0;
    2683         border-right: 1px solid #ddd;
     2704        border-left: 1px solid #ddd;
    26842705}
    26852706
     2707.upload-php .media-modal-close {
     2708        top: 0;
     2709        right: 0;
     2710}
     2711
     2712.edit-attachment-frame .edit-media-header .left {
     2713        right: 112px;
     2714}
     2715
     2716.edit-attachment-frame .edit-media-header .right {
     2717        right: 56px;
     2718}
     2719
     2720.edit-attachment-frame .media-frame-title {
     2721        left: 0;
     2722        right: 170px; /* leave space for prev/next/close */
     2723}
     2724
    26862725.edit-attachment-frame .edit-media-header .right:before,
    26872726.edit-attachment-frame .edit-media-header .left:before {
    26882727        font: normal 20px/50px 'dashicons' !important;
     
    27112750        cursor: inherit;
    27122751}
    27132752
    2714 .edit-attachment-frame .edit-media-header .close:hover,
     2753.upload-php .media-modal-close:hover,
    27152754.edit-attachment-frame .edit-media-header .right:hover,
    27162755.edit-attachment-frame .edit-media-header .left:hover,
    2717 .edit-attachment-frame .edit-media-header .close:focus,
     2756.upload-php .media-modal-close:focus,
    27182757.edit-attachment-frame .edit-media-header .right:focus,
    27192758.edit-attachment-frame .edit-media-header .left:focus {
    27202759        background: #0074a2;
     
    27292768.edit-attachment-frame .media-frame-content {
    27302769        border-bottom: none;
    27312770        bottom: 0;
     2771        top: 56px;
    27322772}
    27332773
    27342774/* Hiding this for the moment instead of removing it from the template. */
     
    27432783        bottom: 0;
    27442784        right: 0;
    27452785        left: 0;
     2786        box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    27462787}
    2747 
    2748 .edit-attachment-frame .attachment-info {
    2749         border-bottom: 0;
    2750         border-right: 1px solid #ddd;
    2751         bottom: 0;
    2752         position: absolute;
    2753         top: 0;
    2754         left: 0;
    2755         right: 50%;
    2756         margin-bottom: 0;
    2757         padding: 2% 4% 0;
    2758         height: 98%; /* 100% - padding percentage above */
     2788.edit-attachment-frame .attachment-media-view {
     2789        float: left;
     2790        width: 65%;
     2791        height: 100%;
    27592792}
    27602793
    2761 .edit-attachment-frame .attachment-info .thumbnail {
    2762         float: none;
    2763         max-width: none;
    2764         max-height: 70%;
    2765         margin-right: 0;
     2794.edit-attachment-frame .attachment-media-view .thumbnail {
     2795        box-sizing: border-box;
     2796        padding: 16px;
     2797        height: 100%;
    27662798}
    27672799
    2768 .edit-attachment-frame .attachment-info .thumbnail-image img {
    2769         margin: 0;
    2770 }
    2771 
    2772 .edit-attachment-frame .attachment-info .thumbnail-image:after {
    2773         -webkit-box-shadow: none;
    2774                 box-shadow: none;
    2775 }
    2776 
    2777 .edit-attachment-frame .attachment-info .thumbnail img {
     2800.edit-attachment-frame .attachment-media-view img {
     2801        display: block;
     2802        margin-bottom: 16px;
    27782803        max-width: 100%;
    2779         max-height: 100%;
     2804        max-height: calc( 100% - 42px ); /* leave space for actions underneath */
    27802805}
    27812806
    2782 .edit-attachment-frame .attachment-info .details {
    2783         float: none;
     2807.edit-attachment-frame .delete-attachment {
     2808        float: right;
     2809        margin-top: 7px;
    27842810}
    27852811
    27862812.edit-attachment-frame .wp-media-wrapper {
    27872813        margin-bottom: 12px;
    27882814}
    27892815
    2790 .edit-attachment-frame .attachment-fields {
    2791         bottom: 0;
    2792         padding: 2% 4%;
    2793         position: absolute;
    2794         top: 0;
    2795         left: 50%;
    2796         right: 0;
     2816.edit-attachment-frame .attachment-info {
     2817        overflow: auto;
     2818        box-sizing: border-box;
     2819        margin-bottom: 0;
     2820        padding: 12px 16px 0;
     2821        width: 35%;
     2822        height: 100%;
     2823        box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     2824        border-bottom: 0;
     2825        border-left: 1px solid #ddd;
     2826        background: #f3f3f3;
    27972827}
    27982828
    2799 .edit-attachment-frame .attachment-fields .setting {
     2829.edit-attachment-frame .attachment-info .details,
     2830.edit-attachment-frame .attachment-info .settings {
     2831        overflow: hidden;
     2832        float: none;
     2833        margin-bottom: 15px;
     2834        padding-bottom: 15px;
     2835        border-bottom: 1px solid #ddd;
     2836}
     2837
     2838.edit-attachment-frame .attachment-info .setting {
    28002839        display: block;
    28012840        float: left;
    28022841        width: 100%;
    28032842        margin: 1px 0;
    28042843}
    28052844
    2806 .edit-attachment-frame .attachment-fields .setting label {
     2845.edit-attachment-frame .attachment-info .setting label {
    28072846        display: block;
    28082847}
    28092848
    2810 .edit-attachment-frame .attachment-fields .setting .link-to-custom {
     2849.edit-attachment-frame .attachment-info .setting .link-to-custom {
    28112850        margin: 3px 0;
    28122851}
    28132852
    2814 .edit-attachment-frame .attachment-fields .setting .name {
     2853.edit-attachment-frame .attachment-info .setting .name {
    28152854        min-width: 30%;
    28162855        margin-right: 4%;
    28172856        font-size: 12px;
    28182857        text-align: right;
    28192858}
    28202859
    2821 .edit-attachment-frame .attachment-fields .setting select {
     2860.edit-attachment-frame .attachment-info .setting select {
    28222861        max-width: 65%;
    28232862}
    28242863
    2825 .edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
    2826 .edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
     2864.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
     2865.edit-attachment-frame .attachment-info .field input[type="checkbox"] {
    28272866        width: 16px;
    28282867        float: none;
    28292868        margin: 8px 3px 0;
    28302869        padding: 0;
    28312870}
    28322871
    2833 .edit-attachment-frame .attachment-fields .setting span {
     2872.edit-attachment-frame .attachment-info .setting span {
    28342873        float: left;
    28352874        min-height: 22px;
    28362875        padding-top: 8px;
     
    28392878        color: #666;
    28402879}
    28412880
    2842 .edit-attachment-frame .attachment-fields .setting input[type="text"],
    2843 .edit-attachment-frame .attachment-fields .setting input[type="password"],
    2844 .edit-attachment-frame .attachment-fields .setting input[type="number"],
    2845 .edit-attachment-frame .attachment-fields .setting input[type="search"],
    2846 .edit-attachment-frame .attachment-fields .setting input[type="email"],
    2847 .edit-attachment-frame .attachment-fields .setting input[type="url"],
    2848 .edit-attachment-frame .attachment-fields .setting textarea,
    2849 .edit-attachment-frame .attachment-fields .setting .value {
     2881.edit-attachment-frame .attachment-info .setting input[type="text"],
     2882.edit-attachment-frame .attachment-info .setting input[type="password"],
     2883.edit-attachment-frame .attachment-info .setting input[type="number"],
     2884.edit-attachment-frame .attachment-info .setting input[type="search"],
     2885.edit-attachment-frame .attachment-info .setting input[type="email"],
     2886.edit-attachment-frame .attachment-info .setting input[type="url"],
     2887.edit-attachment-frame .attachment-info .setting textarea,
     2888.edit-attachment-frame .attachment-info .setting .value {
    28502889        margin: 1px;
    28512890        width: 65%;
    28522891        float: right;
     
    28562895        box-sizing: border-box;
    28572896}
    28582897
    2859 .edit-attachment-frame .attachment-fields .setting textarea {
     2898.edit-attachment-frame .attachment-info .setting textarea {
    28602899        height: 62px;
    28612900        resize: vertical;
    28622901}
    28632902
    2864 .edit-attachment-frame .attachment-fields select {
     2903.edit-attachment-frame .attachment-info select {
    28652904        margin-top: 3px;
    28662905}
    28672906
  • src/wp-includes/js/media-grid.js

     
    1111        }
    1212
    1313        /**
    14          * A state for editing (cropping, etc.) an image.
     14         * A state for editing an attachment's metadata.
    1515         *
    1616         * @constructor
    1717         * @augments wp.media.controller.State
    1818         * @augments Backbone.Model
    1919         */
    20         media.controller.EditImageNoFrame = media.controller.State.extend({
     20        media.controller.EditAttachmentMetadata = media.controller.State.extend({
    2121                defaults: {
    2222                        id:      'edit-attachment',
    23                         title:   l10n.editImage,
     23                        title:   l10n.attachmentDetails,
    2424                        // Region mode defaults.
    2525                        menu:    false,
    26                         router:  'edit-metadata',
    2726                        content: 'edit-metadata',
    2827
    2928                        url:     ''
     
    3635                 * include the regions expected there.
    3736                 */
    3837                _postActivate: function() {
     38                        this.frame.on( 'title:render:default', this._renderTitle, this );
     39
     40                        this._title();
    3941                        this._content();
    40                         this._router();
    4142                },
    4243
    4344                /**
    4445                 * @access private
    4546                 */
    46                 _router: function() {
    47                         var router = this.frame.router,
    48                                 mode = this.get('router'),
    49                                 view;
    50 
    51                         this.frame.$el.toggleClass( 'hide-router', ! mode );
    52                         if ( ! mode ) {
    53                                 return;
    54                         }
    55 
    56                         this.frame.router.render( mode );
    57 
    58                         view = router.get();
    59                         if ( view && view.select ) {
    60                                 view.select( this.frame.content.mode() );
    61                         }
     47                _title: function() {
     48                        this.frame.title.render( this.get('titleMode') || 'default' );
    6249                },
     50                /**
     51                 * @access private
     52                 */
     53                _renderTitle: function( view ) {
     54                        view.$el.text( this.get('title') || '' );
     55                },
    6356
    6457                _content: function() {
    6558                        var mode = this.get( 'content' );
     
    286279        media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
    287280                template: wp.template( 'attachment-details-two-column' ),
    288281
     282                events: {
     283                        'change [data-setting]':          'updateSetting',
     284                        'change [data-setting] input':    'updateSetting',
     285                        'change [data-setting] select':   'updateSetting',
     286                        'change [data-setting] textarea': 'updateSetting',
     287                        'click .delete-attachment':       'deleteAttachment',
     288                        'click .trash-attachment':        'trashAttachment',
     289                        'click .edit-attachment':         'editAttachment',
     290                        'click .refresh-attachment':      'refreshAttachment',
     291                        'click .edit-image':              'handleEditImageClick'
     292                },
     293
    289294                initialize: function() {
    290295                        if ( ! this.model ) {
    291296                                return;
     
    322327                        media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
    323328                },
    324329
     330                handleEditImageClick: function( event ) {
     331                        this.controller.setState( 'edit-image' );
     332                },
     333
    325334                afterDelete: function( model ) {
    326335                        if ( ! model.destroyed ) {
    327336                                return;
     
    405414         *
    406415         * Requires an attachment model to be passed in the options hash under `model`.
    407416         */
    408         media.view.MediaFrame.EditAttachments = media.view.Frame.extend({
     417        media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
    409418
    410419                className: 'edit-attachment-frame',
    411420                template: media.template( 'edit-attachment-frame' ),
    412                 regions:   [ 'router', 'content' ],
     421                regions:   [ 'title', 'content' ],
    413422
    414423                events: {
    415424                        'click':                    'collapse',
     
    440449                        this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
    441450                        this.on( 'content:render:edit-image', this.editImageContentUgh, this );
    442451                        this.on( 'close', this.detach );
    443                         this.on( 'router:create', this.createRouter, this );
    444                         this.on( 'router:render', this.browseRouter, this );
    445452
     453                        // Bind default title creation.
     454                        this.on( 'title:create:default', this.createTitle, this );
     455                        this.title.mode('default');
     456
    446457                        this.options.hasPrevious = this.hasPrevious();
    447458                        this.options.hasNext = this.hasNext();
    448459
     
    474485                 * Add the default states to the frame.
    475486                 */
    476487                createStates: function() {
     488                        var editImageState = new media.controller.EditImage( { model: this.model } );
     489                        // Noop some methods.
     490                        editImageState._toolbar = function() {};
     491                        editImageState._router = function() {};
     492                        editImageState._menu = function() {};
    477493                        this.states.add([
    478                                 new media.controller.EditImageNoFrame( { model: this.model } )
     494                                new media.controller.EditAttachmentMetadata( { model: this.model } ),
     495                                editImageState
     496
    479497                        ]);
    480498                },
    481499
    482500                /**
    483                  * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
    484                  */
    485                 render: function() {
    486                         // Activate the default state if no active state exists.
    487                         if ( ! this.state() && this.options.state ) {
    488                                 this.setState( this.options.state );
    489                         }
    490                         /**
    491                          * call 'render' directly on the parent class
    492                          */
    493                         return media.view.Frame.prototype.render.apply( this, arguments );
    494                 },
    495 
    496                 /**
    497501                 * Content region rendering callback for the `edit-metadata` mode.
    498502                 */
    499503                editMetadataContent: function() {
     
    530534                        view.loadEditor();
    531535                },
    532536
    533                 /**
    534                  * Create the router view.
    535                  *
    536                  * @param {Object} router
    537                  * @this wp.media.controller.Region
    538                  */
    539                 createRouter: function( router ) {
    540                         router.view = new media.view.Router({
    541                                 controller: this
    542                         });
    543                 },
    544 
    545                 /**
    546                  * Router rendering callback.
    547                  *
    548                  * @param  media.view.Router view Instantiated in this.createRouter()
    549                  */
    550                 browseRouter: function( view ) {
    551                         view.set({
    552                                 'edit-metadata': {
    553                                         text:     l10n.editMetadata,
    554                                         priority: 20
    555                                 }
    556                         });
    557 
    558                         // Only need a tab to Edit Image for images.
    559                         if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
    560                                 view.set({
    561                                         'edit-image': {
    562                                                 text:     l10n.editImage,
    563                                                 priority: 40
    564                                         }
    565                                 });
    566                         }
    567                 },
    568 
    569537                resetContent: function() {
    570538                        this.modal.close();
    571539                        wp.media( {
  • src/wp-includes/media-template.php

     
    255255
    256256        <script type="text/html" id="tmpl-edit-attachment-frame">
    257257                <div class="edit-media-header">
    258                         <button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
    259                         <button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
     258                        <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
     259                        <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
    260260                </div>
    261                 <div class="media-frame-router"></div>
     261                <div class="media-frame-title"></div>
    262262                <div class="media-frame-content"></div>
    263263        </script>
    264264
    265265        <script type="text/html" id="tmpl-attachment-details-two-column">
    266266                <h3>
    267267                        <?php _e('Attachment Details'); ?>
    268 
    269                         <span class="settings-save-status">
    270                                 <span class="spinner"></span>
    271                                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
    272                         </span>
    273268                </h3>
    274                 <div class="attachment-info">
     269                <div class="attachment-media-view">
    275270                        <div class="thumbnail thumbnail-{{ data.type }}">
    276271                                <# if ( data.uploading ) { #>
    277272                                        <div class="media-progress-bar"><div></div></div>
     
    280275                                <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
    281276                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
    282277                                <# } #>
     278
     279                                <# if ( 'audio' === data.type ) { #>
     280                                <div class="wp-media-wrapper">
     281                                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     282                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
     283                                        </audio>
     284                                </div>
     285                                <# } else if ( 'video' === data.type ) { #>
     286                                <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
     287                                        <video controls class="wp-video-shortcode" preload="metadata"
     288                                                width="{{ data.width }}" height="{{ data.height }}"
     289                                                <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
     290                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
     291                                        </video>
     292                                </div>
     293                                <# } #>
     294
     295                                <div class="attachment-actions">
     296                                        <# if ( 'image' === data.type && ! data.uploading ) { #>
     297                                                <a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
     298                                        <# } #>
     299
     300                                        <# if ( ! data.uploading && data.can.remove ) { #>
     301                                                <?php if ( MEDIA_TRASH ): ?>
     302                                                        <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
     303                                                <?php else: ?>
     304                                                        <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
     305                                                <?php endif; ?>
     306                                        <# } #>
     307                                </div>
    283308                        </div>
    284                         <# if ( 'audio' === data.type ) { #>
    285                         <div class="wp-media-wrapper">
    286                                 <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    287                                         <source type="{{ data.mime }}" src="{{ data.url }}"/>
    288                                 </audio>
    289                         </div>
    290                         <# } else if ( 'video' === data.type ) { #>
    291                         <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
    292                                 <video controls class="wp-video-shortcode" preload="metadata"
    293                                         width="{{ data.width }}" height="{{ data.height }}"
    294                                         <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
    295                                         <source type="{{ data.mime }}" src="{{ data.url }}"/>
    296                                 </video>
    297                         </div>
    298                         <# } #>
     309                </div>
     310                <div class="attachment-info">
     311                        <span class="settings-save-status">
     312                                <span class="spinner"></span>
     313                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
     314                        </span>
    299315                        <div class="details">
    300316                                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
    301317                                <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
     
    321337                                        </div>
    322338                                <# } #>
    323339
    324                                 <# if ( ! data.uploading && data.can.remove ) { #>
    325                                         <?php if ( MEDIA_TRASH ): ?>
    326                                                 <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
    327                                         <?php else: ?>
    328                                                 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
    329                                         <?php endif; ?>
    330                                 <# } #>
    331 
    332340                                <div class="compat-meta">
    333341                                        <# if ( data.compat && data.compat.meta ) { #>
    334342                                                {{{ data.compat.meta }}}
    335343                                        <# } #>
    336344                                </div>
    337345                        </div>
    338                 </div>
    339                 <div class="attachment-fields">
    340                         <label class="setting" data-setting="url">
    341                                 <span class="name"><?php _e('URL'); ?></span>
    342                                 <input type="text" value="{{ data.url }}" readonly />
    343                         </label>
    344                         <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    345                         <label class="setting" data-setting="title">
    346                                 <span class="name"><?php _e('Title'); ?></span>
    347                                 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    348                         </label>
    349                         <# if ( 'audio' === data.type ) { #>
    350                         <?php foreach ( array(
    351                                 'artist' => __( 'Artist' ),
    352                                 'album' => __( 'Album' ),
    353                         ) as $key => $label ) : ?>
    354                         <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
    355                                 <span class="name"><?php echo $label ?></span>
    356                                 <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
    357                         </label>
    358                         <?php endforeach; ?>
    359                         <# } #>
    360                         <label class="setting" data-setting="caption">
    361                                 <span class="name"><?php _e('Caption'); ?></span>
    362                                 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    363                         </label>
    364                         <# if ( 'image' === data.type ) { #>
    365                                 <label class="setting" data-setting="alt">
    366                                         <span class="name"><?php _e('Alt Text'); ?></span>
    367                                         <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     346
     347                        <div class="settings">
     348                                <label class="setting" data-setting="url">
     349                                        <span class="name"><?php _e('URL'); ?></span>
     350                                        <input type="text" value="{{ data.url }}" readonly />
    368351                                </label>
    369                         <# } #>
    370                         <label class="setting" data-setting="description">
    371                                 <span class="name"><?php _e('Description'); ?></span>
    372                                 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    373                         </label>
    374                         <label class="setting">
    375                                 <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    376                                 <span class="value">{{ data.authorName }}</span>
    377                         </label>
    378                         <# if ( data.uploadedTo ) { #>
     352                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     353                                <label class="setting" data-setting="title">
     354                                        <span class="name"><?php _e('Title'); ?></span>
     355                                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
     356                                </label>
     357                                <# if ( 'audio' === data.type ) { #>
     358                                <?php foreach ( array(
     359                                        'artist' => __( 'Artist' ),
     360                                        'album' => __( 'Album' ),
     361                                ) as $key => $label ) : ?>
     362                                <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
     363                                        <span class="name"><?php echo $label ?></span>
     364                                        <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
     365                                </label>
     366                                <?php endforeach; ?>
     367                                <# } #>
     368                                <label class="setting" data-setting="caption">
     369                                        <span class="name"><?php _e('Caption'); ?></span>
     370                                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     371                                </label>
     372                                <# if ( 'image' === data.type ) { #>
     373                                        <label class="setting" data-setting="alt">
     374                                                <span class="name"><?php _e('Alt Text'); ?></span>
     375                                                <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     376                                        </label>
     377                                <# } #>
     378                                <label class="setting" data-setting="description">
     379                                        <span class="name"><?php _e('Description'); ?></span>
     380                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     381                                </label>
    379382                                <label class="setting">
    380                                         <span class="name"><?php _e('Uploaded To'); ?></span>
    381                                         <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     383                                        <span class="name"><?php _e( 'Uploaded By' ); ?></span>
     384                                        <span class="value">{{ data.authorName }}</span>
    382385                                </label>
    383                         <# } #>
     386                                <# if ( data.uploadedTo ) { #>
     387                                        <label class="setting">
     388                                                <span class="name"><?php _e('Uploaded To'); ?></span>
     389                                                <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     390                                        </label>
     391                                <# } #>
     392                        </div>
    384393
     394                        <a href="post.php?post={{ data.id }}&action=edit">Edit more details</a>
     395
    385396                </div>
    386397        </script>
    387398
  • src/wp-includes/media.php

     
    29092909                'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
    29102910                'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
    29112911
     2912                // Library Details
     2913                'attachmentDetails'  => __( 'Attachment Details' ),
     2914
    29122915                // From URL
    29132916                'insertFromUrlTitle' => __( 'Insert from URL' ),
    29142917