Ticket #24291: 24291.5.diff

wp-admin/css/wp-admin.css

@@ -4007 +4007 @@
         overflow: hidden;
         width: 40%;
         height: auto;
-        padding: 55px 0 20px;
         border: 1px dashed #dfdfdf;
         background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
+        box-sizing: border-box;
 }
 
 .wp-format-media-holder:hover {
@@ -4020 +4020 @@
         margin-bottom: 20px;
 }
 
+#image-preview img {
+        width: auto;
+        max-height: 300px;
+}
+
+.wp-format-image p.use-url-or-html {
+        padding-top: 10px;
+        clear: both;
+        width: 40%;
+        text-align: center;
+}
+
 .wp-format-status #titlewrap,
 .wp-format-image .wp-media-buttons .insert-media,
 .wp-format-audio .wp-media-buttons .insert-media,
@@ -4036 +4048 @@
 
 .wp-format-media-select {
         display: block;
-        height: 200px;
+        height: 20px;
+        padding: 55px 0 20px;
         text-align: center;
 }
 
@@ -4045 +4058 @@
         max-height: 100%;
 }
 
-.wp-format-media-select {
-        height: 20px;
-}
-
 .empty .wp-format-media-metaedit {
         height: 20px;
         display: block;

wp-admin/includes/post-formats.php

@@ -38 +38 @@
                                 ?>
                         </div>
                         <?php endif ?>
-                        <label for="wp_format_image"><?php
-                                if ( current_user_can( 'unfiltered_html' ) )
-                                        _e( 'Image HTML or URL' );
-                                else
-                                        _e( 'Image URL' );
-                        ?></label>
-                        <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
                         <div data-format="image" class="wp-format-media-holder hide-if-no-js">
                                 <a href="#" class="wp-format-media-select"
                                         data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
@@ -52 +45 @@
                                         <?php _e( 'Select / Upload Image' ); ?>
                                 </a>
                         </div>
+                        <div class="wp-format-image-textarea hide-if-js">
+                                <label for="wp_format_image"><?php
+                                        if ( current_user_can( 'unfiltered_html' ) )
+                                                _e( 'Image HTML or URL' );
+                                        else
+                                                _e( 'Image URL' );
+                                ?></label>
+                                <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
+                        </div>
+                        <p class="use-url-or-html hide-if-no-js"><span><?php printf( __( '(or %suse an image URL or HTML%s)' ), '<a href="#">', '</a>' ); ?></span>
+                                <span style="display: none"><?php printf( __( '(or %sselect/upload an image%s)' ), '<a href="#">', '</a>' ); ?></span></p>
                 </div>
 
                 <div class="field wp-format-link">

wp-admin/js/post-formats.js

@@ -17 +17 @@
                 shortContentFormats = ['status', 'aside'],
                 noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
 
+        var imageFormatUploadSuccess = function ( attachment ) {
+                $('.wp-format-media-holder[data-format=image]').parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
+                        '<img src="', attachment.get('url'), '"',
+                        attachment.get('width') ? ' width="' + attachment.get('width') + '"' : '',
+                        attachment.get('height') ? ' height="' + attachment.get('height') + '"' : '',
+                        ' />',
+                '</div>'].join( '' ) );
+        }
+
+        var uploader = $.extend({
+                //container: this.container,
+                //browser:   this.container.find('.upload'),
+                dropzone:  $('.wp-format-media-holder[data-format=image]'),
+                success:   imageFormatUploadSuccess,
+                plupload:  {},
+                params:    {}
+        }, {} );
+        uploader = new wp.Uploader( uploader );
+
         function switchFormatClass( format ) {
                 formatField.val( format );
 
@@ -163 +182 @@
                         switchFormat( $( e.currentTarget ) );
                 } );
 
+                // Toggle select/upload and URL/HTML for images
+                $( '.use-url-or-html' ).on( 'click', 'a', function(e) {
+                        e.preventDefault();
+                        $( '.wp-format-media-holder, .wp-format-image-textarea' ).toggle();
+                        $(this).closest( 'p' ).find( 'span' ).toggle();
+                });
+
+
                 // Media selection
                 $( '.wp-format-media-select' ).click( function (e) {
                         e.preventDefault();

wp-includes/script-loader.php

@@ -407 +407 @@
                         'comma' => _x( ',', 'tag delimiter' ),
                 ) );
 
-                $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 );
+                $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
 
                 $scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );