Ticket #27366: 27366-09.patch

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

@@ -1640 +1640 @@
 }
 
 .image-details .advanced-toggle {
-        font-style: italic;
         color: #666;
         text-decoration: none;
-        margin: 20px;
         display: block;
 }
 
@@ -1663 +1661 @@
         margin-top: 0;
 }
 
+.image-details .embed-media-settings .size {
+        margin-bottom: 4px;
+}
+
+.image-details .custom-size span {
+        display: block;
+}
+
+.image-details .custom-size label {
+        display: block;
+        float: left;
+}
+
+.image-details .custom-size span small {
+        color: #999;
+        font-size: inherit;
+}
+
+.image-details .custom-size input {
+        width: 5em;
+}
+
+.image-details .custom-size .sep {
+        float: left;
+        margin: 26px 6px 0 6px;
+}
+
+.image-details .custom-size::after {
+    content: '';
+        display: table;
+    clear: both;
+}
+
 .media-embed .thumbnail {
         max-width: 100%;
         max-height: 200px;
@@ -1724 +1755 @@
 }
 
 .image-details .embed-media-settings .setting input.link-to-custom,
-.image-details .embed-media-settings .link-target {
+.image-details .embed-media-settings .link-target,
+.image-details .embed-media-settings .custom-size {
         margin-left: 27%;
         width: 70%;
 }

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

@@ -369 +369 @@
                         this.on( 'change:size', this.updateSize, this );
 
                         this.setLinkTypeFromUrl();
+
+                        this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
+                        this.set( 'originalUrl', attributes.url );
                 },
 
                 bindAttachmentListeners: function() {
@@ -447 +450 @@
                                 return;
                         }
 
+                        if ( this.get( 'size' ) === 'custom' ) {
+                                this.set( 'width', this.get( 'customWidth' ) );
+                                this.set( 'height', this.get( 'customHeight' ) );
+                                this.set( 'url', this.get( 'originalUrl' ) );
+                                return;
+                        }
+
                         size = this.attachment.get( 'sizes' )[ this.get( 'size' ) ];
 
                         if ( ! size ) {

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

@@ -6059 +6059 @@
                 events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
                         'click .edit-attachment': 'editAttachment',
                         'click .replace-attachment': 'replaceAttachment',
-                        'click .advanced-toggle': 'toggleAdvanced'
+                        'click .advanced-toggle': 'toggleAdvanced',
+                        'change [data-setting="customWidth"]': 'syncCustomSize',
+                        'change [data-setting="customHeight"]': 'syncCustomSize',
+                        'keyup [data-setting="customWidth"]': 'syncCustomSize',
+                        'keyup [data-setting="customHeight"]': 'syncCustomSize'
                 } ),
                 initialize: function() {
                         // used in AttachmentDisplay.prototype.updateLinkTo
                         this.options.attachment = this.model.attachment;
                         this.listenTo( this.model, 'change:url', this.updateUrl );
                         this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
+                        this.listenTo( this.model, 'change:size', this.toggleCustomSize );
                         media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
                 },
 
@@ -6123 +6128 @@
                         }
                 },
 
+                toggleCustomSize: function() {
+                        if ( this.model.get( 'size' ) !== 'custom' ) {
+                                this.$( '.custom-size' ).addClass('hidden');
+                        } else {
+                                this.$( '.custom-size' ).removeClass('hidden');
+                        }
+                },
+
+                syncCustomSize: function( event ) {
+                        var dimension = $( event.target ).data('setting'),
+                                value;
+
+                        if ( dimension === 'customWidth' ) {
+                                value = Math.round( 1 / this.model.get( 'aspectRatio' ) * $( event.target ).val() );
+                                this.model.set( 'customHeight', value, { silent: true } );
+                                this.$( '[data-setting="customHeight"]' ).val( value );
+                        } else {
+                                value = Math.round( this.model.get( 'aspectRatio' ) * $( event.target ).val() );
+                                this.$( '[data-setting="customWidth"]' ).val( value );
+                                this.model.set( 'customWidth', value, { silent: true } );
+                        }
+                },
+
                 toggleAdvanced: function( event ) {
                         var $advanced = $( event.target ).closest( '.advanced' );
                         event.preventDefault();

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

@@ -123 +123 @@
                         url: false,
                         height: '',
                         width: '',
-                        size: false,
+                        customWidth: '',
+                        customHeight: '',
+                        size: 'custom',
                         caption: '',
                         alt: '',
                         align: 'none',
@@ -139 +141 @@
                 metadata.url = dom.getAttrib( imageNode, 'src' );
                 metadata.alt = dom.getAttrib( imageNode, 'alt' );
                 metadata.title = dom.getAttrib( imageNode, 'title' );
-
                 width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
                 height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
-
                 metadata.width = parseInt( width, 10 );
                 metadata.height = parseInt( height, 10 );
+                metadata.customWidth = metadata.width;
+                metadata.customHeight = metadata.height;
 
                 classes = tinymce.explode( imageNode.className, ' ' );
                 extraClasses = [];
@@ -200 +202 @@
         }
 
         function updateImage( imageNode, imageData ) {
-                var classes, className, width, node, html, parent, wrap,
-                        captionNode, dd, dl, id, attrs, linkAttrs,
+                var classes, className, node, html, parent, wrap,
+                        captionNode, dd, dl, id, attrs, linkAttrs, width, height,
                         dom = editor.dom;
 
                 classes = tinymce.explode( imageData.extraClasses, ' ' );
@@ -216 +218 @@
 
                 if ( imageData.attachment_id ) {
                         classes.push( 'wp-image-' + imageData.attachment_id );
-                        if ( imageData.size ) {
+                        if ( imageData.size && imageData.size !== 'custom' ) {
                                 classes.push( 'size-' + imageData.size );
                         }
                 }
 
+                width = imageData.width;
+                height = imageData.height;
+
+                if ( imageData.size === 'custom' ) {
+                        width = imageData.customWidth;
+                        height = imageData.customHeight;
+                }
+
                 attrs = {
                         src: imageData.url,
-                        width: imageData.width || null,
-                        height: imageData.height || null,
+                        width: width || null,
+                        height: height || null,
                         alt: imageData.alt,
                         title: imageData.title || null,
                         'class': classes.join( ' ' ) || null
@@ -239 +249 @@
                         'class': imageData.linkClassName || null
                 };
 
-                if ( imageNode.parentNode.nodeName === 'A' ) {
+                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
                         if ( imageData.linkUrl ) {
                                 dom.setAttribs( imageNode.parentNode, linkAttrs );
                         } else {
@@ -247 +257 @@
                         }
                 } else if ( imageData.linkUrl ) {
                         html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
-                        dom.outerHTML( imageNode, html );
+                        dom.setOuterHTML( imageNode, html );
+                        // Grab the updated image node
+                        imageNode = dom.select( 'img[data-wp-imgselect]' )[0];
                 }
 
                 captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
 
-                if ( imageNode.parentNode.nodeName === 'A' ) {
+                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
                         node = imageNode.parentNode;
                 } else {
                         node = imageNode;
                 }
 
                 if ( imageData.caption ) {
-                        width = parseInt( imageData.width, 10 );
+
                         id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
                         className = 'wp-caption align' + imageData.align;
 
@@ -312 +324 @@
                 }
 
                 editor.nodeChanged();
-                // refresh the toolbar
+                // Refresh the toolbar
                 addToolbar( imageNode );
         }
 
@@ -324 +336 @@
                         return;
                 }
 
-                editor.undoManager.add();
-
                 frame = wp.media({
                         frame: 'image',
                         state: 'image-details',
@@ -333 +343 @@
                 } );
 
                 callback = function( imageData ) {
-                        updateImage( img, imageData );
                         editor.focus();
+                        editor.undoManager.transact( function() {
+                                updateImage( img, imageData );
+                        } );
                         frame.detach();
                 };
 

src/wp-includes/media-template.php

@@ -689 +689 @@
 
                                         <# if ( data.attachment ) { #>
                                                 <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
-                                                        <label class="setting">
+                                                        <label class="setting size">
                                                                 <span><?php _e('Size'); ?></span>
                                                                 <select class="size" name="size"
                                                                         data-setting="size"
@@ -705 +705 @@
                                                                                 'full'      => __('Full Size'),
                                                                         ) );
 
+
                                                                         foreach ( $sizes as $value => $name ) : ?>
                                                                                 <#
                                                                                 var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                                                                                 if ( size ) { #>
-                                                                                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
+                                                                                        <option value="<?php echo esc_attr( $value ); ?>">
                                                                                                 <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                                                                                         </option>
                                                                                 <# } #>
                                                                         <?php endforeach; ?>
+                                                                        <option value="<?php echo esc_attr( 'custom' ); ?>">
+                                                                                <?php _e( 'Custom Size' ); ?>
+                                                                        </option>
                                                                 </select>
                                                         </label>
                                                 <# } #>
+                                                        <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
+                                                                <label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
+                                                        </div>
                                         <# } #>
 
                                         <div class="setting link-to">
@@ -744 +751 @@
                                                 <input type="text" class="link-to-custom" data-setting="linkUrl" />
                                         </div>
                                         <div class="advanced">
-                                                <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
+                                                <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
                                                 <div class="hidden">
                                                         <label class="setting title-text">
                                                                 <span><?php _e('Image Title Attribute'); ?></span>