Ticket #27366: 27366-04.patch

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

@@ -1669 +1669 @@
         margin: 10px 0;
 }
 
+.image-details .hidden {
+        display: none;
+}
+
 .media-embed .setting input[type="text"],
 .media-embed .setting textarea {
         display: block;
@@ -1709 +1713 @@
         margin-top: 10px;
 }
 
-.advanced .hidden {
-        display: none;
-}
-
 /* Drag & drop on the editor upload */
 #wp-fullscreen-body .uploader-editor,
 .wp-editor-wrap .uploader-editor {

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

@@ -6064 +6064 @@
                 initialize: function() {
                         // used in AttachmentDisplay.prototype.updateLinkTo
                         this.options.attachment = this.model.attachment;
-                        if ( this.model.attachment ) {
-                                this.listenTo( this.model, 'change:url', this.updateUrl );
-                                this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
-                        }
+                        this.listenTo( this.model, 'change:url', this.updateUrl );
+                        this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
                         media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
                 },
 
@@ -6113 +6111 @@
                 },
 
                 updateUrl: function() {
-                        this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
-                        this.$( '.url' ).val( this.model.get('url' ) );
+                        this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
+                        this.$( '.url' ).val( this.model.get( 'url' ) );
                 },
 
                 toggleLinkSettings: function() {

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

@@ -114 +114 @@
         }
 
         function extractImageData( imageNode ) {
-                var classes, metadata, captionBlock, caption, link,
+                var classes, extraClasses, metadata, captionBlock, caption, link,
                         dom = editor.dom;
 
                 // default attributes
@@ -127 +127 @@
                         caption: '',
                         alt: '',
                         align: 'none',
+                        extraClasses: '',
                         link: false,
                         linkUrl: '',
                         linkClassName: '',
                         linkTargetBlank: false,
                         linkRel: '',
-                        title: '',
-                        className: ''
+                        title: ''
                 };
 
                 metadata.url = dom.getAttrib( imageNode, 'src' );
@@ -141 +141 @@
                 metadata.title = dom.getAttrib( imageNode, 'title' );
                 metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
                 metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
-                metadata.className = imageNode.className;
 
-                classes = metadata.className.split( ' ' );
+                classes = tinymce.explode( imageNode.className, ' ' );
+                extraClasses = [];
+
                 tinymce.each( classes, function( name ) {
 
                         if ( /^wp-image/.test( name ) ) {
                                 metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
-                        }
-
-                        if ( /^align/.test( name ) ) {
+                        } else if ( /^align/.test( name ) ) {
                                 metadata.align = name.replace( 'align', '' );
-                        }
-
-                        if ( /^size/.test( name ) ) {
+                        } else if ( /^size/.test( name ) ) {
                                 metadata.size = name.replace( 'size-', '' );
+                        } else {
+                                extraClasses.push( name );
                         }
+
                 } );
 
+                metadata.extraClasses = extraClasses.join( ' ' );
+
                 // Extract caption
                 captionBlock = dom.getParents( imageNode, '.wp-caption' );
 
@@ -251 +253 @@
         }
 
         function createImageAndLink( imageData, mode ) {
-                var classes = [],
+                var classes = tinymce.explode( imageData.extraClasses, ' ' ),
                         attrs, linkAttrs;
 
                 mode = mode ? mode : 'node';

src/wp-includes/media-template.php

@@ -663 +663 @@
                                                                 <span><?php _e('Title Attribute'); ?></span>
                                                                 <input type="text" data-setting="title" value="{{ data.model.title }}" />
                                                         </label>
+                                                        <label class="setting extra-classes">
+                                                                <span><?php _e('CSS Class'); ?></span>
+                                                                <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+                                                        </label>
                                                 </div>
                                         </div>