Changeset 27050

Timestamp:

01/28/2014 09:16:42 PM (11 years ago)

Author:

azaozz

Message:

Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (1 diff)
• css/media-views.css (modified) (4 diffs)
• js/media-models.js (modified) (3 diffs)
• js/media-views.js (modified) (5 diffs)
• js/tinymce/plugins/wpeditimage/plugin.js (modified) (2 diffs)
• media-template.php (modified) (1 diff)
• media.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-editor.php

@@ -229 +229 @@
                         'tabfocus',
                         'textcolor',
-                        'image',
                         'fullscreen',
                         'wordpress',

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

@@ -87 +87 @@
 }
 
+.media-frame .hidden {
+    display: none;
+}
+
 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
 .ui-sortable,
@@ -1412 +1416 @@
 
 /**
- * Embed from URL
+ * Embed from URL and Image Details
  */
 .embed-url {
@@ -1453 +1457 @@
 }
 
+.image-details .embed-image-settings {
+    top: 0;
+}
+
 .media-embed .thumbnail {
     max-width: 100%;
@@ -1483 +1491 @@
     display: block;
     clear: both;
+}
+
+.media-embed .setting .hidden {
+    display: none;
 }
 

trunk/src/wp-includes/js/media-models.js

@@ -3 +3 @@
 
 (function($){
-    var Attachment, Attachments, Query, compare, l10n, media;
+    var Attachment, Attachments, Query, PostImage, compare, l10n, media;
 
     /**
@@ -31 +31 @@
         } else if ( 'post' === attributes.frame && MediaFrame.Post ) {
             frame = new MediaFrame.Post( attributes );
+        } else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
+            frame = new MediaFrame.ImageDetails( attributes );
         }
 
@@ -338 +340 @@
             return Attachments.all.push( attachment || { id: id } );
         })
+    });
+
+    /**
+     * wp.media.model.Attachment
+     *
+     * @constructor
+     * @augments Backbone.Model
+     *
+     **/
+    PostImage = media.model.PostImage = Backbone.Model.extend({
+
+        initialize: function( attributes ) {
+            this.attachment = false;
+
+            if ( attributes.attachment_id ) {
+                this.attachment = media.model.Attachment.get( attributes.attachment_id );
+                this.dfd = this.attachment.fetch();
+                this.bindAttachmentListeners();
+            }
+
+            // keep url in sync with changes to the type of link
+            this.on( 'change:link', this.updateLinkUrl, this );
+            this.on( 'change:size', this.updateSize, this );
+
+            this.setLinkTypeFromUrl();
+
+        },
+
+        bindAttachmentListeners: function() {
+            this.listenTo( this.attachment, 'sync', this.setLinkTypeFromUrl );
+        },
+
+        changeAttachment: function( attachment, props ) {
+            this.stopListening( this.attachment );
+            this.attachment = attachment;
+            this.bindAttachmentListeners();
+
+            this.set( 'attachment_id', this.attachment.get( 'id' ) );
+            this.set( 'caption', this.attachment.get( 'caption' ) );
+            this.set( 'alt', this.attachment.get( 'alt' ) );
+            this.set( 'size', props.get( 'size' ) );
+            this.set( 'align', props.get( 'align' ) );
+            this.set( 'link', props.get( 'link' ) );
+            this.updateLinkUrl();
+            this.updateSize();
+        },
+
+        setLinkTypeFromUrl: function() {
+            var linkUrl = this.get( 'linkUrl' ),
+                type;
+
+            if ( ! linkUrl ) {
+                this.set( 'link', 'none' );
+                return;
+            }
+
+            // default to custom if there is a linkUrl
+            type = 'custom';
+
+            if ( this.attachment ) {
+                if ( this.attachment.get( 'url' ) === linkUrl ) {
+                    type = 'file';
+                } else if ( this.attachment.get( 'link' ) === linkUrl ) {
+                    type = 'post';
+                }
+            } else {
+                if ( this.get( 'url' ) === linkUrl ) {
+                    type = 'file';
+                }
+            }
+
+            this.set( 'link', type );
+
+        },
+
+
+        updateLinkUrl: function() {
+            var link = this.get( 'link' ),
+                url;
+
+            switch( link ) {
+                case 'file':
+                    if ( this.attachment ) {
+                        url = this.attachment.get( 'url' );
+                    } else {
+                        url = this.get( 'url' );
+                    }
+                    this.set( 'linkUrl', url );
+                    break;
+                case 'post':
+                    this.set( 'linkUrl', this.attachment.get( 'link' ) );
+                    break;
+                case 'none':
+                    this.set( 'linkUrl', '' );
+                    break;
+
+            }
+
+        },
+
+        updateSize: function() {
+            var size;
+
+            if ( ! this.attachment ) {
+                return;
+            }
+
+            size = this.attachment.get( 'sizes' )[ this.get( 'size' ) ];
+            this.set( 'url', size.url );
+            this.set( 'width', size.width );
+            this.set( 'height', size.height );
+
+        }
+
+
     });
 

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

@@ -979 +979 @@
             selection.reset( attachment ? [ attachment ] : [] );
         }
+    });
+
+
+    media.controller.ImageDetails = media.controller.State.extend({
+
+        defaults: _.defaults({
+            id: 'image-details',
+            toolbar: 'image-details',
+            title: l10n.imageDetailsTitle,
+            content: 'image-details',
+            menu: 'image-details',
+            router: false,
+            attachment: false,
+            priority: 60,
+            editing: false
+        }, media.controller.Library.prototype.defaults ),
+
+        initialize: function( options ) {
+            this.image = options.image;
+            media.controller.State.prototype.initialize.apply( this, arguments );
+        }
+    });
+
+    /**
+     * wp.media.controller.ReplaceImage
+     *
+     * Replace a selected single image
+     *
+     **/
+    media.controller.ReplaceImage = media.controller.Library.extend({
+        defaults: _.defaults({
+            id:         'replace-image',
+            filterable: 'uploaded',
+            multiple:   false,
+            toolbar:    'replace',
+            title:      l10n.replaceImageTitle,
+            priority:   60,
+            syncSelection: false
+        }, media.controller.Library.prototype.defaults ),
+
+        initialize: function( options ) {
+            var library, comparator;
+
+            this.image = options.image;
+
+            // If we haven't been provided a `library`, create a `Selection`.
+            if ( ! this.get('library') ) {
+                this.set( 'library', media.query({ type: 'image' }) );
+            }
+            /**
+             * call 'initialize' directly on the parent class
+             */
+            media.controller.Library.prototype.initialize.apply( this, arguments );
+
+            library    = this.get('library');
+            comparator = library.comparator;
+
+            // Overload the library's comparator to push items that are not in
+            // the mirrored query to the front of the aggregate collection.
+            library.comparator = function( a, b ) {
+                var aInQuery = !! this.mirroring.get( a.cid ),
+                    bInQuery = !! this.mirroring.get( b.cid );
+
+                if ( ! aInQuery && bInQuery ) {
+                    return -1;
+                } else if ( aInQuery && ! bInQuery ) {
+                    return 1;
+                } else {
+                    return comparator.apply( this, arguments );
+                }
+            };
+
+            // Add all items in the selection to the library, so any featured
+            // images that are not initially loaded still appear.
+            library.observe( this.get('selection') );
+        },
+
+        activate: function() {
+            this.updateSelection();
+            /**
+             * call 'activate' directly on the parent class
+             */
+            media.controller.Library.prototype.activate.apply( this, arguments );
+        },
+
+        deactivate: function() {
+            /**
+             * call 'deactivate' directly on the parent class
+             */
+            media.controller.Library.prototype.deactivate.apply( this, arguments );
+        },
+
+        updateSelection: function() {
+            var selection = this.get('selection'),
+                attachment = this.image.attachment;
+
+            selection.reset( attachment ? [ attachment ] : [] );
+
+        }
+
+
     });
 
@@ -1925 +2026 @@
             }) );
         }
-    });
+
+    });
+
+    media.view.MediaFrame.ImageDetails = media.view.MediaFrame.Select.extend({
+        defaults: {
+            id:      'image',
+            url:     '',
+            menu:    'image-details',
+            content: 'image-details',
+            toolbar: 'image-details',
+            type:    'link',
+            title:    l10n.imageDetailsTitle,
+            priority: 120
+        },
+
+        initialize: function( options ) {
+            this.image = new media.model.PostImage( options.metadata );
+            this.options.selection = new media.model.Selection( this.image.attachment, { multiple: false } );
+            media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
+        },
+
+        bindHandlers: function() {
+            media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
+            this.on( 'menu:create:image-details', this.createMenu, this );
+            this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
+            this.on( 'menu:render:image-details', this.renderMenu, this );
+            this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
+            // override the select toolbar
+            this.on( 'toolbar:render:replace', this.renderReplaceImageToolbar, this );
+        },
+
+        createStates: function() {
+            this.states.add([
+                new media.controller.ImageDetails({
+                    image: this.image,
+                    editable: false,
+                    menu: 'image-details'
+                }),
+                new media.controller.ReplaceImage({
+                    id: 'replace-image',
+                    library:   media.query( { type: 'image' } ),
+                    image: this.image,
+                    multiple:  false,
+                    title:     l10n.imageReplaceTitle,
+                    menu: 'image-details',
+                    toolbar: 'replace',
+                    priority:  80,
+                    displaySettings: true
+                })
+            ]);
+        },
+
+        renderImageDetailsContent: function() {
+            var view = new media.view.ImageDetails({
+                controller: this,
+                model: this.state().image,
+                attachment: this.state().image.attachment
+            }).render();
+
+            this.content.set( view );
+
+        },
+
+        renderMenu: function( view ) {
+            var lastState = this.lastState(),
+                previous = lastState && lastState.id,
+                frame = this;
+
+            view.set({
+                cancel: {
+                    text:     l10n.imageDetailsCancel,
+                    priority: 20,
+                    click:    function() {
+                        if ( previous ) {
+                            frame.setState( previous );
+                        } else {
+                            frame.close();
+                        }
+                    }
+                },
+                separateCancel: new media.View({
+                    className: 'separator',
+                    priority: 40
+                })
+            });
+
+        },
+
+        renderImageDetailsToolbar: function() {
+            this.toolbar.set( new media.view.Toolbar({
+                controller: this,
+                items: {
+                    select: {
+                        style:    'primary',
+                        text:     l10n.update,
+                        priority: 80,
+
+                        click: function() {
+                            var controller = this.controller,
+                                state = controller.state();
+
+                            controller.close();
+
+                            // not sure if we want to use wp.media.string.image which will create a shortcode or
+                            // perhaps wp.html.string to at least to build the <img />
+                            state.trigger( 'update', controller.image.toJSON() );
+
+                            // Restore and reset the default state.
+                            controller.setState( controller.options.state );
+                            controller.reset();
+                        }
+                    }
+                }
+            }) );
+        },
+
+        renderReplaceImageToolbar: function() {
+            this.toolbar.set( new media.view.Toolbar({
+                controller: this,
+                items: {
+                    replace: {
+                        style:    'primary',
+                        text:     l10n.replace,
+                        priority: 80,
+
+                        click: function() {
+                            var controller = this.controller,
+                                state = controller.state(),
+                                selection = state.get( 'selection' ),
+                                attachment = selection.single();
+
+                            controller.close();
+
+                            controller.image.changeAttachment( attachment, state.display( attachment ) );
+
+                            // not sure if we want to use wp.media.string.image which will create a shortcode or
+                            // perhaps wp.html.string to at least to build the <img />
+                            state.trigger( 'replace', controller.image.toJSON() );
+
+                            // Restore and reset the default state.
+                            controller.setState( controller.options.state );
+                            controller.reset();
+                        }
+                    }
+                }
+            }) );
+        }
+
+    });
+
 
     /**
@@ -4556 +4806 @@
 
             if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
-                $input.hide();
+                $input.addClass( 'hidden' );
                 return;
             }
@@ -4572 +4822 @@
             }
 
-            $input.show();
+            $input.removeClass( 'hidden' );
 
             // If the input is visible, focus and select its contents.
@@ -4933 +5183 @@
         }
     });
+
+    media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
+        className: 'image-details',
+        template:  media.template('image-details'),
+
+        initialize: function() {
+            // used in AttachmentDisplay.prototype.updateLinkTo
+            this.options.attachment = this.model.attachment;
+            media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
+        },
+
+        prepare: function() {
+            var attachment = false;
+
+            if ( this.model.attachment ) {
+                attachment = this.model.attachment.toJSON();
+            }
+            return _.defaults({
+                model: this.model.toJSON(),
+                attachment: attachment
+            }, this.options );
+        },
+
+
+        render: function() {
+            var self = this,
+                args = arguments;
+            if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
+                // should instead show a spinner when the attachment is new and then add a listener that updates on change
+                this.model.dfd.done( function() {
+                    media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
+                    self.resetFocus();
+                } );
+            } else {
+                media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
+                setTimeout( function() { self.resetFocus(); }, 10 );
+            }
+
+            return this;
+        },
+
+        resetFocus: function() {
+            this.$( '.caption textarea' ).focus();
+            this.$( '.embed-image-settings' ).scrollTop( 0 );
+        }
+    });
 }(jQuery));

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

@@ -100 +100 @@
             return out;
         });
+    }
+
+    function extractImageData( imageNode ) {
+        var classes, metadata, captionBlock, caption;
+
+        // default attributes
+        metadata = {
+            attachment_id: false,
+            url: false,
+            height: '',
+            width: '',
+            size: 'none',
+            caption: '',
+            alt: '',
+            align: 'none',
+            link: false,
+            linkUrl: ''
+        };
+
+        metadata.url = editor.dom.getAttrib( imageNode, 'src' );
+        metadata.alt = editor.dom.getAttrib( imageNode, 'alt' );
+        metadata.width = parseInt( editor.dom.getAttrib( imageNode, 'width' ), 10 );
+        metadata.height = parseInt( editor.dom.getAttrib( imageNode, 'height' ), 10 );
+
+        //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored when the image and/or caption are updated
+        // maybe use getAttribs()
+
+        // extract meta data from classes (candidate for turning into a method)
+        classes = imageNode.className.split( ' ' );
+        tinymce.each( classes, function( name ) {
+
+            if ( /^wp-image/.test( name ) ) {
+                metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
+            }
+
+            if ( /^align/.test( name ) ) {
+                metadata.align = name.replace( 'align', '' );
+            }
+
+            if ( /^size/.test( name ) ) {
+                metadata.size = name.replace( 'size-', '' );
+            }
+        } );
+
+
+        // extract caption
+        captionBlock = editor.dom.getParents( imageNode, '.wp-caption' );
+
+        if ( captionBlock.length ) {
+            captionBlock = captionBlock[0];
+
+            classes = captionBlock.className.split( ' ' );
+            tinymce.each( classes, function( name ) {
+                if ( /^align/.test( name ) ) {
+                    metadata.align = name.replace( 'align', '' );
+                }
+            } );
+            caption = editor.dom.select( 'dd.wp-caption-dd', captionBlock );
+            if ( caption.length ) {
+                caption = caption[0];
+                // need to do some more thinking about this
+                metadata.caption = editor.serializer.serialize( caption )
+                    .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
+
+            }
+        }
+
+        // extract linkTo
+        if ( imageNode.parentNode.nodeName === 'A' ) {
+            metadata.linkUrl = editor.dom.getAttrib( imageNode.parentNode, 'href' );
+        }
+
+        return metadata;
+
+    }
+
+    function updateImage( imageNode, imageData ) {
+        var className, width, node, html, captionNode, nodeToReplace, uid;
+
+        if ( imageData.caption ) {
+
+            html = createImageAndLink( imageData, 'html' );
+
+            width = imageData.width + 10;
+            className = 'align' + imageData.align;
+
+            //TODO: shouldn't add the id attribute if it isn't an attachment
+
+            // should create a new function for genrating the caption markup
+            html =  '<dl id="'+ imageData.attachment_id +'" class="wp-caption '+ className +'" style="width: '+ width +'px">' +
+                '<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
+
+            node = editor.dom.create( 'div', { 'class': 'mceTemp', draggable: 'true' }, html );
+        } else {
+            node = createImageAndLink( imageData, 'node' );
+        }
+
+        nodeToReplace = imageNode;
+
+        captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
+
+        if ( captionNode ) {
+            nodeToReplace = captionNode;
+        } else {
+            if ( imageNode.parentNode.nodeName === 'A' ) {
+                nodeToReplace = imageNode.parentNode;
+            }
+        }
+        // uniqueId isn't super exciting, so maybe we want to use something else
+        uid = editor.dom.uniqueId( 'wp_' );
+        editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
+        editor.dom.replace( node, nodeToReplace );
+
+        // find the updated node
+        node = editor.dom.select( '[data-wp-replace-id="' + uid + '"]' )[0];
+
+        editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
+
+        if ( node.nodeName === 'IMG' ) {
+            editor.selection.select( node );
+        } else {
+            editor.selection.select( editor.dom.select( 'img', node )[0] );
+        }
+        editor.nodeChanged();
+
+    }
+
+    function createImageAndLink( imageData, mode ) {
+        var classes = [],
+            props;
+
+        mode = mode ? mode : 'node';
+
+
+        if ( ! imageData.caption ) {
+            classes.push( 'align' + imageData.align );
+        }
+
+        if ( imageData.attachment_id ) {
+            classes.push( 'wp-image-' + imageData.attachment_id );
+            if ( imageData.size ) {
+                classes.push( 'size-' + imageData.size );
+            }
+        }
+
+        props = {
+            src: imageData.url,
+            width: imageData.width,
+            height: imageData.height,
+            alt: imageData.alt
+        };
+
+        if ( classes.length ) {
+            props['class'] = classes.join( ' ' );
+        }
+
+        if ( imageData.linkUrl ) {
+            if ( mode === 'node' ) {
+                return editor.dom.create( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
+            } else if ( mode === 'html' ) {
+                return editor.dom.createHTML( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
+            }
+        } else {
+            if ( mode === 'node' ) {
+                return editor.dom.create( 'img', props );
+            } else if ( mode === 'html' ) {
+                return editor.dom.createHTML( 'img', props );
+            }
+
+        }
     }
 
@@ -453 +623 @@
     });
 
+    editor.on( 'mousedown', function( e ) {
+        var imageNode, frame, callback;
+        if ( e.target.nodeName === 'IMG' && editor.selection.getNode() === e.target ) {
+            // Don't trigger on right-click
+            if ( e.button !== 2 ) {
+
+                // Don't attempt to edit placeholders
+                if ( editor.dom.hasClass( e.target, 'mceItem' ) || '1' === editor.dom.getAttrib( e.target, 'data-mce-placeholder' ) ) {
+                    return;
+                }
+
+                imageNode = e.target;
+
+                frame = wp.media({
+                    frame: 'image',
+                    state: 'image-details',
+                    metadata: extractImageData( imageNode )
+                } );
+
+                callback = function( imageData ) {
+                    updateImage( imageNode, imageData );
+                    editor.focus();
+                };
+
+                frame.state('image-details').on( 'update', callback );
+                frame.state('replace-image').on( 'replace', callback );
+
+                frame.open();
+
+
+            }
+        }
+    } );
+
     editor.wpSetImgCaption = function( content ) {
         return parseShortcode( content );

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

@@ -501 +501 @@
         </style>
     </script>
+
+    <script type="text/html" id="tmpl-image-details">
+        <?php // reusing .media-embed to pick up the styles for now ?>
+        <div class="media-embed">
+            <div class="embed-image-settings">
+                <div class="thumbnail">
+                    <img src="{{ data.model.url }}" draggable="false" />
+                </div>
+
+                <div class="setting url">
+                    <?php // might want to make the url editable if it isn't an attachment ?>
+                    <input type="text" disabled="disabled" value="{{ data.model.url }}" />
+                </div>
+
+                <?php
+                /** This filter is documented in wp-admin/includes/media.php */
+                if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
+                    <label class="setting caption">
+                        <span><?php _e('Caption'); ?></span>
+                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
+                    </label>
+                <?php endif; ?>
+
+                <label class="setting alt-text">
+                    <span><?php _e('Alt Text'); ?></span>
+                    <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
+                </label>
+
+                <div class="setting align">
+                    <span><?php _e('Align'); ?></span>
+                    <div class="button-group button-large" data-setting="align">
+                        <button class="button" value="left">
+                            <?php esc_attr_e('Left'); ?>
+                        </button>
+                        <button class="button" value="center">
+                            <?php esc_attr_e('Center'); ?>
+                        </button>
+                        <button class="button" value="right">
+                            <?php esc_attr_e('Right'); ?>
+                        </button>
+                        <button class="button active" value="none">
+                            <?php esc_attr_e('None'); ?>
+                        </button>
+                    </div>
+                </div>
+                <div class="setting link-to">
+                <span><?php _e('Link To'); ?></span>
+
+                <# if ( data.attachment ) { #>
+                    <div class="button-group button-large" data-setting="link">
+                        <button class="button" value="file">
+                            <?php esc_attr_e('Media File'); ?>
+                        </button>
+                        <button class="button" value="post">
+                            <?php esc_attr_e('Attachment Page'); ?>
+                        </button>
+                        <button class="button" value="custom">
+                            <?php esc_attr_e('Custom URL'); ?>
+                        </button>
+                        <button class="button active" value="none">
+                            <?php esc_attr_e('None'); ?>
+                        </button>
+                    </div>
+                    <input type="text" class="link-to-custom" data-setting="linkUrl" />
+
+                <# } else { #>
+                    <div class="button-group button-large" data-setting="link">
+                        <button class="button" value="file">
+                            <?php esc_attr_e('Image URL'); ?>
+                        </button>
+                        <button class="button" value="custom">
+                            <?php esc_attr_e('Custom URL'); ?>
+                        </button>
+                        <button class="button active" value="none">
+                            <?php esc_attr_e('None'); ?>
+                        </button>
+                    </div>
+                    <input type="text" class="link-to-custom" data-setting="linkUrl" />
+
+                <# } #>
+                </div>
+
+                <# if ( data.attachment ) { #>
+                    <div class="setting size">
+                        <span><?php _e('Size'); ?></span>
+                        <div class="button-group button-large" data-setting="size">
+                        <?php
+                            /** This filter is documented in wp-admin/includes/media.php */
+                            $sizes = apply_filters( 'image_size_names_choose', array(
+                                'thumbnail' => __('Thumbnail'),
+                                'medium'    => __('Medium'),
+                                'large'     => __('Large'),
+                                'full'      => __('Full Size'),
+                            ) );
+
+                            foreach ( $sizes as $value => $name ) : ?>
+                                <#
+                                var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
+                                if ( size ) { #>
+                                    <button class="button" value="<?php echo esc_attr( $value ); ?>">
+                                        <?php echo esc_html( $name ); ?>
+                                        </button>
+                                <# } #>
+                            <?php endforeach; ?>
+                        </div>
+                    </div>
+                <# } #>
+                </div>
+            </div>
+        </div>
+    </script>
     <?php
 

trunk/src/wp-includes/media.php

@@ -1968 +1968 @@
         'select'      => __( 'Select' ),
         'cancel'      => __( 'Cancel' ),
+        'update'      => __( 'Update' ),
+        'replace'     => __( 'Replace' ),
         /* translators: This is a would-be plural string used in the media manager.
            If there is not a word you can use in your language to avoid issues with the
@@ -2006 +2008 @@
         'addToGalleryTitle'  => __( 'Add to Gallery' ),
         'reverseOrder'       => __( 'Reverse order' ),
+
+
+        // Edit Image
+        'imageDetailsTitle'     => __( 'Image Details' ),
+        'imageReplaceTitle'     => __( 'Replace Image' ),
+        'imageDetailsCancel'     => __( 'Cancel Edit' )
     );