WordPress.org
Get WordPress

Make WordPress Core

Ticket #27366: 27366-01.patch

File 27366-01.patch, 19.3 KB (added by gcorne, 11 years ago)

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

    diff --git src/wp-includes/css/media-views.css src/wp-includes/css/media-views.css
index f3e03ff..b556866 100644
     
    15131513        overflow: auto;
    15141514}
    15151515
     1516.image-details .media-modal {
     1517        left: 100px;
     1518        right: 100px;
     1519}
     1520
     1521.image-details .media-frame-menu {
     1522        display: none;
     1523}
     1524
     1525.image-details .media-frame-title,
     1526.image-details .media-frame-content,
     1527.image-details .media-frame-router {
     1528        left: 0;
     1529}
     1530
    15161531.image-details .embed-media-settings {
    15171532        top: 0;
     1533        overflow: visible;
     1534}
     1535
     1536.image-details .column-settings {
     1537        width: 44%;
     1538        float: left;
     1539        margin-right: 20px;
     1540}
     1541
     1542.image-details .column-image {
     1543        width: 53%;
     1544        float: left;
     1545}
     1546
     1547.image-details .image img {
     1548        max-width: 100%;
     1549        max-height: 500px;
    15181550}
    15191551
     1552
    15201553.media-embed .thumbnail {
    15211554        max-width: 100%;
    15221555        max-height: 200px;
    … …  
    15291562        display: block;
    15301563}
    15311564
    1532 .media-embed .edit-attachment {
    1533         margin-left: 10px;
    1534 }
    1535 
    15361565.media-embed .thumbnail:after {
    15371566        content: '';
    15381567        display: block;
    … …  
    15541583        clear: both;
    15551584}
    15561585
    1557 .media-embed .setting .hidden {
     1586.image-details .setting {
     1587        float: none;
     1588}
     1589
     1590.image-details .actions {
     1591        margin: 10px 0;
     1592}
     1593
     1594.media-embed .setting input[type="text"],
     1595.media-embed .setting textarea {
     1596        display: block;
     1597        width: 100%;
     1598        max-width: 400px;
     1599        margin: 1px 0;
     1600}
     1601
     1602.image-details .setting input[type="text"],
     1603.image-details .setting textarea {
     1604        max-width: inherit;
     1605}
     1606
     1607.media-embed .setting input.hidden {
    15581608        display: none;
    15591609}
    15601610
    … …  
    15701620        margin: 2px 0;
    15711621}
    15721622
    1573 .media-embed .setting input[type="text"],
    1574 .media-embed .setting textarea {
    1575         display: block;
    1576         width: 100%;
    1577         max-width: 400px;
    1578         margin: 1px 0;
     1623.media-embed-sidebar {
     1624        position: absolute;
     1625        top: 0;
     1626        left: 440px;
     1627}
     1628
     1629.advanced,
     1630.link-settings {
     1631        margin-top: 10px;
     1632}
     1633
     1634.advanced .hidden {
     1635        display: none;
    15791636}
    15801637
    15811638/* Drag & drop on the editor upload */
    … …  
    17801837                top: 40%;
    17811838        }
    17821839
     1840        .image-details .media-modal {
     1841                left: 30px;
     1842                right: 30px;
     1843        }
     1844
    17831845        .media-selection {
    17841846                min-width: 120px;
    17851847        }
    … …  
    18481910                display: none;
    18491911        }
    18501912
     1913        .image-details .media-frame-title {
     1914                display: block;
     1915                top: 0;
     1916                font-size: 14px;
     1917        }
     1918
    18511919        .media-frame-toolbar {
    18521920                position: absolute;
    18531921                bottom: 0px;
    … …  
    19041972                top: 118px;
    19051973        }
    19061974
     1975        .image-details .media-frame.hide-router .media-frame-content {
     1976                top: 40px;
     1977        }
     1978
    19071979        .media-frame .attachments-browser {
    19081980                padding-bottom: 300px;
    19091981        }
    … …  
    19382010        }
    19392011
    19402012        /* Full-bleed modal */
    1941         .media-modal {
     2013        .media-modal,
     2014        .image-details .media-modal {
    19422015                position: fixed;
    19432016                top: 0;
    19442017                left: 0;
    … …  
    19742047                padding-bottom: 52px;
    19752048        }
    19762049
     2050        .image-details .column-settings,
     2051        .image-details .column-image {
     2052                float: none;
     2053                width: 100%;
     2054        }
     2055
    19772056        /* Gallery */
    19782057        .media-frame.hide-router .media-frame-content {
    19792058                top: 73px;

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

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
index be0ee8f..e13c057 100644
     
    761761                initialize: function( options ) {
    762762                        this.image = options.image;
    763763                        media.controller.State.prototype.initialize.apply( this, arguments );
     764                },
     765
     766                activate: function() {
     767                        this.frame.modal.$el.addClass('image-details');
     768                },
     769
     770                deactivate: function() {
     771                        this.frame.modal.$el.addClass('image-details');
    764772                }
    765773        });
    766774
    … …  
    25562564
    25572565                },
    25582566
    2559 
    25602567                renderMenu: function( view ) {
    25612568                        var lastState = this.lastState(),
    25622569                                previous = lastState && lastState.id,
    … …  
    26112618                },
    26122619
    26132620                renderReplaceImageToolbar: function() {
     2621                        var frame = this,
     2622                                lastState = frame.lastState(),
     2623                                previous = lastState && lastState.id;
     2624
    26142625                        this.toolbar.set( new media.view.Toolbar({
    26152626                                controller: this,
    26162627                                items: {
     2628                                        back: {
     2629                                                text:     l10n.back,
     2630                                                priority: 20,
     2631                                                click:    function() {
     2632                                                        if ( previous ) {
     2633                                                                frame.setState( previous );
     2634                                                        } else {
     2635                                                                frame.close();
     2636                                                        }
     2637                                                }
     2638                                        },
     2639
    26172640                                        replace: {
    26182641                                                style:    'primary',
    26192642                                                text:     l10n.replace,
    … …  
    59045927                className: 'image-details',
    59055928                template:  media.template('image-details'),
    59065929                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    5907                         'click .edit-attachment': 'editAttachment'
     5930                        'click .edit-attachment': 'editAttachment',
     5931                        'click .replace-attachment': 'replaceAttachment',
     5932                        'click .show-advanced': 'showAdvanced'
    59085933                } ),
    59095934                initialize: function() {
    59105935                        // used in AttachmentDisplay.prototype.updateLinkTo
    59115936                        this.options.attachment = this.model.attachment;
    59125937                        if ( this.model.attachment ) {
    5913                                 this.listenTo( this.model.attachment, 'change:url', this.updateUrl );
     5938                                this.listenTo( this.model, 'change:url', this.updateUrl );
     5939                                this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    59145940                        }
    59155941                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    59165942                },
    … …  
    59455971                },
    59465972
    59475973                resetFocus: function() {
    5948                         this.$( '.caption textarea' ).focus();
    5949                         this.$( '.embed-image-settings' ).scrollTop( 0 );
     5974                        this.$( '.link-to-custom' ).blur();
     5975                        this.$( '.embed-media-settings' ).scrollTop( 0 );
    59505976                },
    59515977
    59525978                updateUrl: function() {
    5953                         this.$( '.thumbnail img' ).attr( 'src', this.model.get('url' ) );
     5979                        this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
    59545980                        this.$( '.url' ).val( this.model.get('url' ) );
    59555981                },
    59565982
     5983                toggleLinkSettings: function() {
     5984                        if ( this.model.get( 'link' ) === 'none' ) {
     5985                                this.$( '.link-settings' ).addClass('hidden');
     5986                        } else {
     5987                                this.$( '.link-settings' ).removeClass('hidden');
     5988                        }
     5989                },
     5990
     5991                showAdvanced: function( event ) {
     5992                        event.preventDefault();
     5993                        $( event.target ).closest('.advanced')
     5994                                .find( '.hidden' ).removeClass( 'hidden' );
     5995                        $( event.target ).remove();
     5996
     5997
     5998                },
     5999
    59576000                editAttachment: function( event ) {
    59586001                        var editState = this.controller.state( 'edit-image' );
    59596002
    … …  
    59626005                                editState.set( 'image', this.model.attachment );
    59636006                                this.controller.setState( 'edit-image' );
    59646007                        }
     6008                },
     6009
     6010                replaceAttachment: function( event ) {
     6011                        event.preventDefault();
     6012                        this.controller.setState( 'replace-image' );
    59656013                }
    59666014        });
    59676015

  • src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 

    diff --git src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
index 2d2e587..f0a5807 100644
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    112112        }
    113113
    114114        function extractImageData( imageNode ) {
    115                 var classes, metadata, captionBlock, caption,
     115                var classes, metadata, captionBlock, caption, link,
    116116                        dom = editor.dom;
    117117
    118118                // default attributes
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    121121                        url: false,
    122122                        height: '',
    123123                        width: '',
    124                         size: 'none',
     124                        size: false,
    125125                        caption: '',
    126126                        alt: '',
    127127                        align: 'none',
    128128                        link: false,
    129                         linkUrl: ''
     129                        linkUrl: '',
     130                        linkClassName: '',
     131                        linkTargetBlank: false,
     132                        linkRel: '',
     133                        title: '',
     134                        className: ''
    130135                };
    131136
    132137                metadata.url = dom.getAttrib( imageNode, 'src' );
    133138                metadata.alt = dom.getAttrib( imageNode, 'alt' );
     139                metadata.title = dom.getAttrib( imageNode, 'title' );
    134140                metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
    135141                metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
     142                metadata.className = imageNode.className;
    136143
    137                 //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored
    138                 // when the image and/or caption are updated
    139                 // maybe use getAttribs()
    140 
    141                 // extract meta data from classes (candidate for turning into a method)
    142                 classes = imageNode.className.split( ' ' );
     144                classes = metadata.className.split( ' ' );
    143145                tinymce.each( classes, function( name ) {
    144146
    145147                        if ( /^wp-image/.test( name ) ) {
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    155157                        }
    156158                } );
    157159
    158                 // extract caption
     160                // Extract caption
    159161                captionBlock = dom.getParents( imageNode, '.wp-caption' );
    160162
    161163                if ( captionBlock.length ) {
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    171173                        caption = dom.select( 'dd.wp-caption-dd', captionBlock );
    172174                        if ( caption.length ) {
    173175                                caption = caption[0];
    174                                 // need to do some more thinking about this
     176
    175177                                metadata.caption = editor.serializer.serialize( caption )
    176178                                        .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
    177179                        }
    178180                }
    179181
    180                 // extract linkTo
     182                // Extract linkTo
    181183                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
    182                         metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
     184                        link = imageNode.parentNode;
     185                        metadata.linkUrl = dom.getAttrib( link, 'href' );
     186                        metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
     187                        metadata.linkRel = dom.getAttrib( link, 'rel' );
     188                        metadata.linkClassName = link.className;
    183189                }
    184190
    185191                return metadata;
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    222228                                nodeToReplace = imageNode.parentNode;
    223229                        }
    224230                }
    225                 // uniqueId isn't super exciting, so maybe we want to use something else
     231
    226232                uid = editor.dom.uniqueId( 'wp_' );
    227233                editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
    228234                editor.dom.replace( node, nodeToReplace );
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    245251
    246252        function createImageAndLink( imageData, mode ) {
    247253                var classes = [],
    248                         props;
     254                        attrs, linkAttrs;
    249255
    250256                mode = mode ? mode : 'node';
    251257
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    260266                        }
    261267                }
    262268
    263                 props = {
     269                attrs = {
    264270                        src: imageData.url,
    265271                        width: imageData.width,
    266272                        height: imageData.height,
    267                         alt: imageData.alt
     273                        alt: imageData.alt,
     274                        title: imageData.title
    268275                };
    269276
    270277                if ( classes.length ) {
    271                         props['class'] = classes.join( ' ' );
     278                        attrs['class'] = classes.join( ' ' );
    272279                }
    273280
    274281                if ( imageData.linkUrl ) {
     282
     283                        linkAttrs = {
     284                                href: imageData.linkUrl
     285                        };
     286
     287                        if ( imageData.linkRel ) {
     288                                linkAttrs.rel = imageData.linkRel;
     289                        }
     290
     291                        console.log( imageData );
     292                        if ( imageData.linkTargetBlank ) {
     293                                linkAttrs.target = '_blank';
     294                        }
     295
     296                        if ( imageData.linkClassName ) {
     297                                linkAttrs['class'] = imageData.linkClassName;
     298                        }
     299
    275300                        if ( mode === 'node' ) {
    276                                 return editor.dom.create( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
     301                                return editor.dom.create( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
    277302                        } else if ( mode === 'html' ) {
    278                                 return editor.dom.createHTML( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
     303                                return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
    279304                        }
     305
    280306                } else if ( mode === 'node' ) {
    281                         return editor.dom.create( 'img', props );
     307                        return editor.dom.create( 'img', attrs );
    282308                } else if ( mode === 'html' ) {
    283                         return editor.dom.createHTML( 'img', props );
     309                        return editor.dom.createHTML( 'img', attrs );
    284310                }
    285311        }
    286312

  • src/wp-includes/media-template.php 

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
index 49cbe90..7f15353 100644
    function wp_print_media_templates() { 
    667667        </script>
    668668
    669669        <script type="text/html" id="tmpl-image-details">
    670                 <?php // reusing .media-embed to pick up the styles for now ?>
    671670                <div class="media-embed">
    672671                        <div class="embed-media-settings">
    673                                 <div class="thumbnail">
    674                                         <img src="{{ data.model.url }}" draggable="false" />
    675                                 </div>
    676                                 <# if ( data.attachment && window.imageEdit ) { #>
    677                                         <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
    678                                 <# } #>
    679 
    680                                 <div class="setting url">
    681                                         <?php // might want to make the url editable if it isn't an attachment ?>
    682                                         <input type="text" disabled="disabled" value="{{ data.model.url }}" />
    683                                 </div>
     672                                <div class="column-settings">
     673                                        <?php
     674                                        /** This filter is documented in wp-admin/includes/media.php */
     675                                        if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
     676                                                <label class="setting caption">
     677                                                        <span><?php _e('Caption'); ?></span>
     678                                                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     679                                                </label>
     680                                        <?php endif; ?>
    684681
    685                                 <?php
    686                                 /** This filter is documented in wp-admin/includes/media.php */
    687                                 if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
    688                                         <label class="setting caption">
    689                                                 <span><?php _e('Caption'); ?></span>
    690                                                 <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     682                                        <label class="setting alt-text">
     683                                                <span><?php _e('Alternative Text'); ?></span>
     684                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    691685                                        </label>
    692                                 <?php endif; ?>
    693686
    694                                 <label class="setting alt-text">
    695                                         <span><?php _e('Alt Text'); ?></span>
    696                                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    697                                 </label>
     687                                        <div class="advanced">
     688                                                <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     689                                                <div class="hidden">
     690                                                        <label class="setting title-text">
     691                                                                <span><?php _e('Title Attribute'); ?></span>
     692                                                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
     693                                                        </label>
     694                                                </div>
     695                                        </div>
    698696
    699                                 <div class="setting align">
    700                                         <span><?php _e('Align'); ?></span>
    701                                         <div class="button-group button-large" data-setting="align">
    702                                                 <button class="button" value="left">
    703                                                         <?php esc_attr_e('Left'); ?>
    704                                                 </button>
    705                                                 <button class="button" value="center">
    706                                                         <?php esc_attr_e('Center'); ?>
    707                                                 </button>
    708                                                 <button class="button" value="right">
    709                                                         <?php esc_attr_e('Right'); ?>
    710                                                 </button>
    711                                                 <button class="button active" value="none">
    712                                                         <?php esc_attr_e('None'); ?>
    713                                                 </button>
     697                                        <div class="setting align">
     698                                                <span><?php _e('Align'); ?></span>
     699                                                <div class="button-group button-large" data-setting="align">
     700                                                        <button class="button" value="left">
     701                                                                <?php esc_attr_e('Left'); ?>
     702                                                        </button>
     703                                                        <button class="button" value="center">
     704                                                                <?php esc_attr_e('Center'); ?>
     705                                                        </button>
     706                                                        <button class="button" value="right">
     707                                                                <?php esc_attr_e('Right'); ?>
     708                                                        </button>
     709                                                        <button class="button active" value="none">
     710                                                                <?php esc_attr_e('None'); ?>
     711                                                        </button>
     712                                                </div>
    714713                                        </div>
    715                                 </div>
    716                                 <div class="setting link-to">
    717                                         <span><?php _e('Link To'); ?></span>
    718                                         <div class="button-group button-large" data-setting="link">
    719                                         <# if ( data.attachment ) { #>
    720                                                 <button class="button" value="file">
    721                                                         <?php esc_attr_e('Media File'); ?>
    722                                                 </button>
    723                                                 <button class="button" value="post">
    724                                                         <?php esc_attr_e('Attachment Page'); ?>
    725                                                 </button>
    726                                         <# } else { #>
    727                                                 <button class="button" value="file">
    728                                                         <?php esc_attr_e('Image URL'); ?>
    729                                                 </button>
    730                                         <# } #>
    731                                                 <button class="button" value="custom">
    732                                                         <?php esc_attr_e('Custom URL'); ?>
    733                                                 </button>
    734                                                 <button class="button active" value="none">
    735                                                         <?php esc_attr_e('None'); ?>
    736                                                 </button>
     714                                        <div class="setting link-to">
     715                                                <span><?php _e('Link To'); ?></span>
     716                                                <div class="button-group button-large" data-setting="link">
     717                                                <# if ( data.attachment ) { #>
     718                                                        <button class="button" value="file">
     719                                                                <?php esc_attr_e('Media File'); ?>
     720                                                        </button>
     721                                                        <button class="button" value="post">
     722                                                                <?php esc_attr_e('Attachment Page'); ?>
     723                                                        </button>
     724                                                <# } else { #>
     725                                                        <button class="button" value="file">
     726                                                                <?php esc_attr_e('Image URL'); ?>
     727                                                        </button>
     728                                                <# } #>
     729                                                        <button class="button" value="custom">
     730                                                                <?php esc_attr_e('Custom URL'); ?>
     731                                                        </button>
     732                                                        <button class="button active" value="none">
     733                                                                <?php esc_attr_e('None'); ?>
     734                                                        </button>
     735                                                </div>
     736                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
    737737                                        </div>
    738                                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
    739                                 </div>
    740738
    741                                 <# if ( data.attachment ) { #>
    742                                         <div class="setting size">
    743                                                 <span><?php _e('Size'); ?></span>
    744                                                 <div class="button-group button-large" data-setting="size">
    745                                                 <?php
    746                                                         /** This filter is documented in wp-admin/includes/media.php */
    747                                                         $sizes = apply_filters( 'image_size_names_choose', array(
    748                                                                 'thumbnail' => __('Thumbnail'),
    749                                                                 'medium'    => __('Medium'),
    750                                                                 'large'     => __('Large'),
    751                                                                 'full'      => __('Full Size'),
    752                                                         ) );
    753 
    754                                                         foreach ( $sizes as $value => $name ) : ?>
    755                                                                 <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
    756                                                                 if ( size ) { #>
    757                                                                         <button class="button" value="<?php echo esc_attr( $value ); ?>">
    758                                                                                 <?php echo esc_html( $name ); ?>
    759                                                                                 </button>
    760                                                                 <# } #>
    761                                                         <?php endforeach; ?>
     739
     740                                        <div class="link-settings">
     741                                                <div class="setting link-target">
     742                                                        <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
     743                                                </div>
     744                                                <div class="advanced">
     745                                                        <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     746                                                        <div class="hidden">
     747                                                                <label class="setting link-rel">
     748                                                                        <span><?php _e('Link Rel'); ?></span>
     749                                                                        <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     750                                                                </label>
     751                                                                <label class="setting link-class-name">
     752                                                                        <span><?php _e('CSS Class'); ?></span>
     753                                                                        <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     754                                                                </label>
     755                                                        </div>
    762756                                                </div>
    763757                                        </div>
    764                                 <# } #>
     758
     759                                        <# if ( data.attachment ) { #>
     760                                                <div class="setting size">
     761                                                        <span><?php _e('Size'); ?></span>
     762                                                        <div class="button-group button-large" data-setting="size">
     763                                                        <?php
     764                                                                /** This filter is documented in wp-admin/includes/media.php */
     765                                                                $sizes = apply_filters( 'image_size_names_choose', array(
     766                                                                        'thumbnail' => __('Thumbnail'),
     767                                                                        'medium'    => __('Medium'),
     768                                                                        'large'     => __('Large'),
     769                                                                        'full'      => __('Full Size'),
     770                                                                ) );
     771
     772                                                                foreach ( $sizes as $value => $name ) : ?>
     773                                                                        <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
     774                                                                        if ( size ) { #>
     775                                                                                <button class="button" value="<?php echo esc_attr( $value ); ?>">
     776                                                                                        <?php echo esc_html( $name ); ?>
     777                                                                                        </button>
     778                                                                        <# } #>
     779                                                                <?php endforeach; ?>
     780                                                        </div>
     781                                                </div>
     782                                        <# } #>
     783                                </div>
     784                                <div class="column-image">
     785                                        <div class="image">
     786                                                <img src="{{ data.model.url }}" draggable="false" />
     787                                        </div>
     788                                        <div class="setting url">
     789                                                <input type="text" disabled="disabled" value="{{ data.model.url }}" />
     790                                        </div>
     791                                        <# if ( data.attachment && window.imageEdit ) { #>
     792                                                <div class="actions">
     793                                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     794                                                        <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     795                                                </div>
     796                                        <# } #>
     797                                </div>
    765798                        </div>
    766799                </div>
    767800        </script>