WordPress.org

Make WordPress Core

Ticket #24291: 24291.11.diff

File 24291.11.diff, 6.1 KB (added by aaroncampbell, 5 years ago)
  • wp-includes/script-loader.php

     
    407407                        'comma' => _x( ',', 'tag delimiter' ),
    408408                ) );
    409409
    410                 $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 );
     410                $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
    411411
    412412                $scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );
    413413
  • wp-admin/css/wp-admin.css

     
    40074007        overflow: hidden;
    40084008        width: 40%;
    40094009        height: auto;
    4010         padding: 55px 0 20px;
    40114010        border: 1px dashed #dfdfdf;
    40124011        background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
     4012        box-sizing: border-box;
    40134013}
    40144014
    40154015.wp-format-media-holder:hover {
     
    40204020        margin-bottom: 20px;
    40214021}
    40224022
     4023#image-preview img {
     4024        width: auto;
     4025        max-height: 300px;
     4026}
     4027
     4028.wp-format-image p.use-url-or-html {
     4029        padding-top: 10px;
     4030        clear: both;
     4031        width: 40%;
     4032        text-align: center;
     4033}
     4034
    40234035.wp-format-status #titlewrap,
    40244036.wp-format-image .wp-media-buttons .insert-media,
    40254037.wp-format-audio .wp-media-buttons .insert-media,
     
    40364048
    40374049.wp-format-media-select {
    40384050        display: block;
    4039         height: 200px;
     4051        height: 20px;
     4052        padding: 55px 0 20px;
    40404053        text-align: center;
    40414054}
    40424055
     
    40454058        max-height: 100%;
    40464059}
    40474060
    4048 .wp-format-media-select {
    4049         height: 20px;
    4050 }
    4051 
    40524061.empty .wp-format-media-metaedit {
    40534062        height: 20px;
    40544063        display: block;
     
    40654074#wp_format_video {
    40664075        float: left;
    40674076        margin-right: 23px;
    4068         max-width: 50%;
     4077        max-width: 40%;
    40694078        min-height: 97px;
    40704079}
    40714080
  • wp-admin/includes/post-formats.php

     
    3838                                ?>
    3939                        </div>
    4040                        <?php endif ?>
    41                         <label for="wp_format_image"><?php
    42                                 if ( current_user_can( 'unfiltered_html' ) )
    43                                         _e( 'Image HTML or URL' );
    44                                 else
    45                                         _e( 'Image URL' );
    46                         ?></label>
    47                         <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
    4841                        <div data-format="image" class="wp-format-media-holder hide-if-no-js">
    4942                                <a href="#" class="wp-format-media-select"
    5043                                        data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
     
    5245                                        <?php _e( 'Select / Upload Image' ); ?>
    5346                                </a>
    5447                        </div>
     48                        <div class="wp-format-image-textarea hide-if-js">
     49                                <label for="wp_format_image"><?php
     50                                        if ( current_user_can( 'unfiltered_html' ) )
     51                                                _e( 'Image HTML or URL' );
     52                                        else
     53                                                _e( 'Image URL' );
     54                                ?></label>
     55                                <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
     56                        </div>
     57                        <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>
     58                                <span style="display: none"><?php printf( __( '(or %sselect/upload an image%s)' ), '<a href="#">', '</a>' ); ?></span></p>
    5559                </div>
    5660
    5761                <div class="field wp-format-link">
  • wp-admin/js/post-formats.js

     
    1717                shortContentFormats = ['status', 'aside'],
    1818                noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
    1919
     20        var imageFormatUploadProgress = function ( uploader, file ) {
     21                var $bar = $( '#' + uploader.settings.drop_element + ' .media-progress-bar div' );
     22                $bar.width( file.percent + '%' );
     23        }
     24        var imageFormatUploadStart = function ( uploader ) {
     25                $( '#' + uploader.settings.drop_element + ' .wp-format-media-select' ).append('<div class="media-progress-bar"><div></div></div>');
     26        }
     27        var imageFormatUploadSuccess = function ( attachment ) {
     28                var $holder, $field, html = wp.media.string.image({
     29                        align : getUserSetting( 'align' ),
     30                        size : getUserSetting( 'imgsize' ),
     31                        link : getUserSetting( 'urlbutton' )
     32                }, {
     33                        url : attachment.get('url'),
     34                        width : attachment.get('width'),
     35                        height : attachment.get('height')
     36                });
     37
     38                $holder = $('.wp-format-media-holder[data-format=image]');
     39                $( '.media-progress-bar', $holder ).remove();
     40                $field = $( '#wp_format_' + $holder.data( 'format' ) );
     41
     42                // set the hidden input's value
     43                $field.val( html );
     44
     45                $( '#image-preview' ).remove();
     46
     47                $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
     48                        '<img src="', attachment.get('url'), '"',
     49                        attachment.get('width') ? ' width="' + attachment.get('width') + '"' : '',
     50                        attachment.get('height') ? ' height="' + attachment.get('height') + '"' : '',
     51                        ' />',
     52                '</div>'].join( '' ) );
     53        }
     54
     55        var uploader = $.extend({
     56                dropzone:  $('.wp-format-media-holder[data-format=image]'),
     57                success:   imageFormatUploadSuccess,
     58                plupload:  {},
     59                params:    {}
     60        }, {} );
     61        uploader = new wp.Uploader( uploader );
     62        uploader.uploader.bind( 'BeforeUpload', imageFormatUploadStart );
     63        uploader.uploader.bind( 'UploadProgress', imageFormatUploadProgress );
     64        //queue.on( 'add remove reset', this.visibility, this );
     65        //queue.on( 'add remove reset change:percent', this.progress, this );
     66        //queue.on( 'add remove reset change:uploading', this.info, this );
     67
    2068        function switchFormatClass( format ) {
    2169                formatField.val( format );
    2270
     
    163211                        switchFormat( $( e.currentTarget ) );
    164212                } );
    165213
     214                // Toggle select/upload and URL/HTML for images
     215                $( '.use-url-or-html' ).on( 'click', 'a', function(e) {
     216                        e.preventDefault();
     217                        $( '.wp-format-media-holder, .wp-format-image-textarea' ).toggle();
     218                        $(this).closest( 'p' ).find( 'span' ).toggle();
     219                });
     220
    166221                // Media selection
    167222                $( '.wp-format-media-select' ).click( function (e) {
    168223                        e.preventDefault();