WordPress.org
Get WordPress

Make WordPress Core

Ticket #50523: 50523.4.diff

File 50523.4.diff, 39.9 KB (added by joedolson, 4 years ago)

Current state for discussion

  • src/js/_enqueues/lib/image-edit.js

     
    122122                t.postid = postid;
    123123                $('#imgedit-response-' + postid).empty();
    124124
     125                $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     126                        var nonce = $( '#imgedit-nonce-' + postid ).val();
     127                        if ( e.which === 26 && e.ctrlKey ) {
     128                                imageEdit.undo( postid, nonce );
     129                        }
     130
     131                        if ( e.which === 25 && e.ctrlKey ) {
     132                                imageEdit.redo( postid, nonce );
     133                        }
     134                });
     135
    125136                $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126137                        var k = e.keyCode;
    127138
    … …  
    190201        },
    191202
    192203        /**
     204         * Shows or hides image edit input fields when enabled.
     205         *
     206         * @since 6.1.0
     207         *
     208         * @memberof imageEdit
     209         *
     210         * @param {HTMLElement} el The element to trigger the edit panel.
     211         *
     212         * @return {boolean} Always returns false.
     213         */
     214        toggleControls : function(el) {
     215                var $el = $( el );
     216                var $target = $( '#' + $el.attr( 'aria-controls' ) );
     217                $el
     218                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     219                $target
     220                        .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
     221
     222                return false;
     223        },
     224
     225        /**
    193226         * Gets the value from the image edit target.
    194227         *
    195228         * The image edit target contains the image sizes where the (possible) changes
    … …  
    402435                                }
    403436
    404437                                if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
    405                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
     438                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
    406439                                } else {
    407                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
     440                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
    408441                                }
    409442
    410443                                t.toggleEditor(postid, 0);
    … …  
    710743                var t = this,
    711744                        selW = $('#imgedit-sel-width-' + postid),
    712745                        selH = $('#imgedit-sel-height-' + postid),
     746                        selX = $('#imgedit-start-x-' + postid),
     747                        selY = $('#imgedit-start-y-' + postid),
    713748                        $image = $( image ),
    714749                        $img;
    715750
    … …  
    781816                         */
    782817                        onSelectEnd: function(img, c) {
    783818                                imageEdit.setCropSelection(postid, c);
     819                                if ( ! $('#imgedit-crop > *').is(":visible") ) {
     820                                        imageEdit.toggleControls($('.imgedit-crop.button'));
     821                                }
    784822                        },
    785823
    786824                        /**
    … …  
    797835                                var sizer = imageEdit.hold.sizer;
    798836                                selW.val( imageEdit.round(c.width / sizer) );
    799837                                selH.val( imageEdit.round(c.height / sizer) );
     838                                selX.val( imageEdit.round(c.x1 / sizer) );
     839                                selY.val( imageEdit.round(c.y1 / sizer) );
    800840                        }
    801841                });
    802842        },
    … …  
    823863                        this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
    824864                        $('#imgedit-sel-width-' + postid).val('');
    825865                        $('#imgedit-sel-height-' + postid).val('');
     866                        $('#imgedit-start-x-' + postid).val('0');
     867                        $('#imgedit-start-y-' + postid).val('0');
    826868                        $('#imgedit-selection-' + postid).val('');
    827869                        return false;
    828870                }
    … …  
    10111053                // Clear the selection fields after cropping.
    10121054                $('#imgedit-sel-width-' + postid).val('');
    10131055                $('#imgedit-sel-height-' + postid).val('');
     1056                $('#imgedit-start-x-' + postid).val('0');
     1057                $('#imgedit-start-y-' + postid).val('0');
    10141058        },
    10151059
    10161060        /**
    … …  
    10941138         */
    10951139        setNumSelection : function( postid, el ) {
    10961140                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1141                        elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1142                        xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    10971143                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    10981144                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    10991145                        sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
    … …  
    11121158                        return false;
    11131159                }
    11141160
    1115                 if ( x && y && ( sel = ias.getSelection() ) ) {
     1161                if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11161162                        x2 = sel.x1 + Math.round( x * sizer );
    11171163                        y2 = sel.y1 + Math.round( y * sizer );
    1118                         x1 = sel.x1;
    1119                         y1 = sel.y1;
     1164                        x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1165                        y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11201166
    11211167                        if ( x2 > imgw ) {
    11221168                                x1 = 0;
    … …  
    12021248
    12031249                                if ( r > h ) {
    12041250                                        r = h;
     1251                                        var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' );
     1252
     1253                                        $( '#imgedit-crop-' + postid )
     1254                                                .prepend( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
     1255
     1256                                        wp.a11y.speak( errorMessage, 'assertive' );
    12051257                                        if ( n ) {
    1206                                                 $('#imgedit-crop-height-' + postid).val('');
     1258                                                $('#imgedit-crop-height-' + postid).val( '' );
    12071259                                        } else {
    1208                                                 $('#imgedit-crop-width-' + postid).val('');
     1260                                                $('#imgedit-crop-width-' + postid).val( '');
    12091261                                        }
     1262                                } else {
     1263                                        var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' );
     1264                                        if ( 'undefined' !== typeof( error ) ) {
     1265                                                error.remove();
     1266                                        }
    12101267                                }
    12111268
    12121269                                this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r );
    … …  
    12281285         *                        void when it is.
    12291286         */
    12301287        validateNumeric: function( el ) {
    1231                 if ( ! this.intval( $( el ).val() ) ) {
     1288                if ( false === this.intval( $( el ).val() ) ) {
    12321289                        $( el ).val( '' );
    12331290                        return false;
    12341291                }

  • src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js

     
    941941             * default 5px
    942942             */
    943943            if (!parseInt($handles.css('width')) >= 0)
    944                 $handles.width(5).height(5);
     944                $handles.width(10).height(10);
    945945
    946946            /*
    947947             * If the borderWidth option is in use, add a solid border to

  • src/wp-admin/css/common.css

     
    188188.wp-editor-container,
    189189.popular-tags,
    190190.feature-filter,
    191 .imgedit-group,
    192191.comment-ays {
    193192        border: 1px solid #c3c4c7;
    194193        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    … …  
    201200.widgets-holder-wrap,
    202201.popular-tags,
    203202.feature-filter,
    204 .imgedit-group,
    205203.comment-ays {
    206204        background: #fff;
    207205}

  • src/wp-admin/css/media.css

     
    872872        padding-top: 10px;
    873873}
    874874
    875 .imgedit-settings p,
    876 .imgedit-settings fieldset {
     875.image-editor p,
     876.image-editor fieldset {
    877877        margin: 8px 0;
    878878}
    879879
    880 .imgedit-settings legend {
     880.image-editor legend {
    881881        margin-bottom: 5px;
    882882}
    883883
    884 .describe .imgedit-wrap .imgedit-settings {
     884.describe .imgedit-wrap .image-editor {
    885885        padding: 0 5px;
    886886}
    887887
    … …  
    893893        height: auto;
    894894}
    895895
    896 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    897         float: left;
    898         padding: 3px 16px 0 0;
    899         min-width: 400px;
    900         max-width: calc( 100% - 266px );
     896.imgedit-panel-content {
     897        display: flex;
     898        flex-wrap: wrap;
     899        column-gap: 20px;
    901900}
    902901
    903 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     902.imgedit-settings {
     903        max-width: 400px; /* Prevent reflow when help info is expanded. */
     904}
     905
     906.imgedit-group-controls > * {
     907        display: none;
     908}
     909
     910.imgedit-panel-active .imgedit-group-controls > * {
     911        display: block;
     912}
     913
     914.wp_attachment_holder .imgedit-wrap .image-editor {
    904915        float: right;
    905916        width: 250px;
    906917}
    907918
    908 .imgedit-settings input {
     919.image-editor input {
    909920        margin-top: 0;
    910921        vertical-align: middle;
    911922}
    … …  
    940951}
    941952
    942953.media-disabled,
    943 .imgedit-settings .disabled {
     954.image-editor .disabled {
    944955        /* WCAG 1.4.3 Text or images of text that are part of an inactive user
    945956           interface component ... have no contrast requirement. */
    946957        color: #a7aaad;
    … …  
    10091020        content: "\f165";
    10101021}
    10111022
     1023.imgedit-scale:before {
     1024        content: "\f211";
     1025}
     1026
    10121027.imgedit-rleft:before {
    10131028        content: "\f166";
    10141029}
    … …  
    10431058        background-size: 20px 20px;
    10441059}
    10451060
     1061.imgedit-crop-wrap {
     1062        background-size: 40px 40px;
     1063        background-image: linear-gradient(to right, #c3c4c755 1px, transparent 1px), linear-gradient(to bottom, #c3c4c755 1px, transparent 1px);
     1064}
     1065
    10461066.imgedit-crop {
    10471067        margin: 0 8px 0 0;
    10481068}
    … …  
    10711091        margin: 0 8px 0 3px;
    10721092}
    10731093
     1094.imgedit-thumbnail-preview-group {
     1095        display: flex;
     1096        flex-wrap: wrap;
     1097        column-gap: 10px;
     1098}
     1099
    10741100.imgedit-thumbnail-preview {
    10751101        margin: 10px 8px 0 0;
    10761102}
    … …  
    11651191}
    11661192
    11671193.imgedit-group {
    1168         margin-bottom: 8px;
    1169         padding: 10px;
     1194        margin-bottom: 20px;
    11701195}
    11711196
    1172 .imgedit-settings .imgedit-original-dimensions {
     1197.image-editor .imgedit-original-dimensions {
    11731198        display: inline-block;
    11741199}
    11751200
    1176 .imgedit-settings .imgedit-scale input[type="text"],
    1177 .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1178 .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1201.image-editor .imgedit-scale-controls input[type="text"],
     1202.image-editor .imgedit-crop-ratio input[type="text"],
     1203.image-editor .imgedit-crop-sel input[type="text"] {
    11791204        width: 80px;
    11801205        font-size: 14px;
    11811206        padding: 0 8px;
    … …  
    11891214        color: #3c434a;
    11901215}
    11911216
    1192 .imgedit-settings .imgedit-scale-button-wrapper {
     1217.image-editor .imgedit-scale-button-wrapper {
    11931218        margin-top: 0.3077em;
    11941219        display: block;
    11951220}
    11961221
    1197 .imgedit-settings .imgedit-scale .button {
     1222.image-editor .imgedit-scale-controls .button {
    11981223        margin-bottom: 0;
    11991224}
    12001225
    … …  
    12501275                padding: 10px 0 10px 12px;
    12511276        }
    12521277
    1253         .imgedit-settings .imgedit-scale input[type="text"],
    1254         .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1255         .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1278        .image-editor .imgedit-scale input[type="text"],
     1279        .image-editor .imgedit-crop-ratio input[type="text"],
     1280        .image-editor .imgedit-crop-sel input[type="text"] {
    12561281                font-size: 16px;
    12571282                padding: 6px 10px;
    12581283        }
    12591284
    12601285        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1261         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1286        .wp_attachment_holder .imgedit-wrap .image-editor {
    12621287                float: none;
    12631288                width: auto;
    12641289                max-width: none;
    … …  
    12751300        }
    12761301
    12771302        .media-modal .imgedit-wrap .imgedit-panel-content,
    1278         .media-modal .imgedit-wrap .imgedit-settings {
     1303        .media-modal .imgedit-wrap .image-editor {
    12791304                position: initial !important;
    12801305        }
    12811306
    1282         .media-modal .imgedit-wrap .imgedit-settings {
     1307        .media-modal .imgedit-wrap .image-editor {
    12831308                box-sizing: border-box;
    12841309                width: 100% !important;
    12851310        }
    12861311
    1287         .imgedit-settings .imgedit-scale-button-wrapper {
     1312        .image-editor .imgedit-scale-button-wrapper {
    12881313                display: inline-block;
    12891314        }
    12901315}

  • src/wp-admin/includes/image-edit.php

     
    2828                die( __( 'Image data does not exist. Please re-upload the image.' ) );
    2929        }
    3030
    31         $sizer = $big > 400 ? 400 / $big : 1;
     31        $sizer = $big > 640 ? 640 / $big : 1;
    3232
    3333        $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
    3434        $can_restore  = false;
    … …  
    5555        ?>
    5656        <div class="imgedit-wrap wp-clearfix">
    5757        <div id="imgedit-panel-<?php echo $post_id; ?>">
    58 
    59         <div class="imgedit-panel-content wp-clearfix">
    60                 <?php echo $note; ?>
    61                 <div class="imgedit-menu wp-clearfix">
    62                         <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
    63                         <?php
    64 
    65                         // On some setups GD library does not provide imagerotate() - Ticket #11536.
    66                         if ( wp_image_editor_supports(
    67                                 array(
    68                                         'mime_type' => get_post_mime_type( $post_id ),
    69                                         'methods'   => array( 'rotate' ),
    70                                 )
    71                         ) ) {
    72                                 $note_no_rotate = '';
    73                                 ?>
    74                                 <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
    75                                 <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
    76                                 <?php
    77                         } else {
    78                                 $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    79                                 ?>
    80                                 <button type="button" class="imgedit-rleft button disabled" disabled></button>
    81                                 <button type="button" class="imgedit-rright button disabled" disabled></button>
    82                         <?php } ?>
    83 
    84                         <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
    85                         <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    86 
    87                         <br class="imgedit-undo-redo-separator" />
    88                         <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
    89                         <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
    90                         <?php echo $note_no_rotate; ?>
    91                 </div>
    92 
     58                <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
    9359                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    9460                <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    9561                <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    … …  
    9763                <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    9864                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    9965
    100                 <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    101                 <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
    102                         src="<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
    103                 </div>
     66                <div class="imgedit-panel-content wp-clearfix">
     67                        <div class="imgedit-tools">
     68                                <?php echo $note; ?>
     69                                <div class="imgedit-menu wp-clearfix">
     70                                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     71                                        <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
    10472
    105                 <div class="imgedit-submit">
    106                         <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    107                         <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
    108                 </div>
    109         </div>
     73                                        <?php
    11074
    111         <div class="imgedit-settings">
    112         <div class="imgedit-group">
    113         <div class="imgedit-group-top">
    114                 <h2><?php _e( 'Scale Image' ); ?></h2>
    115                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
    116                 <div class="imgedit-help">
    117                 <p><?php _e( 'You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.' ); ?></p>
    118                 </div>
    119                 <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
    120                 <p>
    121                         <?php
    122                         printf(
    123                                 /* translators: %s: Image width and height in pixels. */
    124                                 __( 'Original dimensions %s' ),
    125                                 '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
    126                         );
    127                         ?>
    128                 </p>
    129                 <?php endif; ?>
    130                 <div class="imgedit-submit">
     75                                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
     76                                        if ( wp_image_editor_supports(
     77                                                array(
     78                                                        'mime_type' => get_post_mime_type( $post_id ),
     79                                                        'methods'   => array( 'rotate' ),
     80                                                )
     81                                        ) ) {
     82                                                $note_no_rotate = '';
     83                                                ?>
     84                                                <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
     85                                                <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
     86                                                <?php
     87                                        } else {
     88                                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
     89                                                ?>
     90                                                <button type="button" class="imgedit-rleft button disabled" disabled></button>
     91                                                <button type="button" class="imgedit-rright button disabled" disabled></button>
     92                                        <?php } ?>
    13193
    132                 <fieldset class="imgedit-scale">
    133                 <legend><?php _e( 'New dimensions:' ); ?></legend>
    134                 <div class="nowrap">
    135                 <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
    136                 <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    137                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    138                 <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
    139                 <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    140                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
    141                 <div class="imgedit-scale-button-wrapper"><input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /></div>
    142                 </div>
    143                 </fieldset>
     94                                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     95                                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    14496
    145                 </div>
    146         </div>
    147         </div>
     97                                        <?php echo $note_no_rotate; ?>
     98                                </div>
    14899
    149         <?php if ( $can_restore ) { ?>
     100                                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     101                                <div class="imgedit-crop-grid"></div>
     102                                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     103                                        src="<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
     104                                </div>
     105                        </div>
     106                        <div class="imgedit-settings">
     107                                <div class="imgedit-tool-active">
     108                                        <div class="imgedit-group">
     109                                        <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     110                                        <div class="imgedit-group-top">
     111                                                <h2><?php _e( 'Scale Image' ); ?></h2>
     112                                                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
     113                                                <div class="imgedit-help">
     114                                                <p><?php _e( 'You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.' ); ?></p>
     115                                                </div>
     116                                                <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     117                                                <p>
     118                                                        <?php
     119                                                        printf(
     120                                                                /* translators: %s: Image width and height in pixels. */
     121                                                                __( 'Original dimensions %s' ),
     122                                                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     123                                                        );
     124                                                        ?>
     125                                                </p>
     126                                                <?php endif; ?>
     127                                                <div class="imgedit-submit">
    150128
    151         <div class="imgedit-group">
    152         <div class="imgedit-group-top">
    153                 <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
    154                 <div class="imgedit-help imgedit-restore">
    155                 <p>
    156                         <?php
    157                         _e( 'Discard any changes and restore the original image.' );
     129                                                <fieldset class="imgedit-scale-controls">
     130                                                        <legend><?php _e( 'New dimensions:' ); ?></legend>
     131                                                        <div class="nowrap">
     132                                                        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
     133                                                        <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     134                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     135                                                        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     136                                                        <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     137                                                        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     138                                                        <button id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary"><?php esc_html_e( 'Scale' ); ?></button>
     139                                                        </div>
     140                                                </fieldset>
    158141
    159                         if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
    160                                 echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
    161                         }
    162                         ?>
    163                 </p>
    164                 <div class="imgedit-submit">
    165                 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
    166                 </div>
    167                 </div>
    168         </div>
    169         </div>
     142                                                </div>
     143                                        </div>
     144                                        </div>
     145                                        </div>
    170146
    171         <?php } ?>
     147                                        <?php if ( $can_restore ) { ?>
    172148
    173         <div class="imgedit-group">
    174         <div class="imgedit-group-top">
    175                 <h2><?php _e( 'Image Crop' ); ?></h2>
    176                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
     149                                        <div class="imgedit-group">
     150                                        <div class="imgedit-group-top">
     151                                                <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
     152                                                <div class="imgedit-help imgedit-restore">
     153                                                <p>
     154                                                        <?php
     155                                                        _e( 'Discard any changes and restore the original image.' );
    177156
    178                 <div class="imgedit-help">
    179                 <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     157                                                        if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     158                                                                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     159                                                        }
     160                                                        ?>
     161                                                </p>
     162                                                <div class="imgedit-submit">
     163                                                <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
     164                                                </div>
     165                                                </div>
     166                                        </div>
     167                                        </div>
    180168
    181                 <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
    182                 <?php _e( 'The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.' ); ?></p>
     169                                        <?php } ?>
    183170
    184                 <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
    185                 <?php _e( 'Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.' ); ?></p>
    186                 </div>
    187         </div>
     171                                        <div class="imgedit-group">
     172                                                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     173                                                <div class="imgedit-group-top">
     174                                                        <h2><?php _e( 'Crop Image' ); ?></h2>
     175                                                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
    188176
    189         <fieldset class="imgedit-crop-ratio">
    190                 <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    191                 <div class="nowrap">
    192                 <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
    193                 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
    194                 <span class="imgedit-separator" aria-hidden="true">:</span>
    195                 <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
    196                 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
    197                 </div>
    198         </fieldset>
     177                                                        <div class="imgedit-help">
     178                                                        <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    199179
    200         <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    201                 <legend><?php _e( 'Selection:' ); ?></legend>
    202                 <div class="nowrap">
    203                 <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
    204                 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    205                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    206                 <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
    207                 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    208                 </div>
    209         </fieldset>
     180                                                        <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     181                                                        <?php _e( 'The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.' ); ?></p>
    210182
    211         </div>
     183                                                        <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     184                                                        <?php _e( 'Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.' ); ?></p>
     185                                                        </div>
     186                                                </div>
    212187
    213         <?php
    214         if ( $thumb && $sub_sizes ) {
    215                 $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
    216                 ?>
     188                                                <fieldset class="imgedit-crop-ratio">
     189                                                        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     190                                                        <div class="nowrap">
     191                                                        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Crop Ratio Width' ); ?></label>
     192                                                        <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     193                                                        <span class="imgedit-separator" aria-hidden="true">:</span>
     194                                                        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Crop Ratio Height' ); ?></label>
     195                                                        <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     196                                                        </div>
     197                                                </fieldset>
    217198
    218         <div class="imgedit-group imgedit-applyto">
    219         <div class="imgedit-group-top">
    220                 <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    221                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
    222                 <div class="imgedit-help">
    223                 <p><?php _e( 'You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.' ); ?></p>
    224                 </div>
    225         </div>
     199                                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     200                                                        <legend><?php _e( 'Selection:' ); ?></legend>
     201                                                        <div class="nowrap">
     202                                                        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Width' ); ?></label>
     203                                                        <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     204                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     205                                                        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Height' ); ?></label>
     206                                                        <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     207                                                        </div>
     208                                                </fieldset>
    226209
    227         <figure class="imgedit-thumbnail-preview">
    228                 <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
    229                 <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
    230         </figure>
     210                                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     211                                                        <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     212                                                        <div class="nowrap">
     213                                                        <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'X Position' ); ?></label>
     214                                                        <input type="text" id="imgedit-start-x-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
     215                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     216                                                        <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Y Position' ); ?></label>
     217                                                        <input type="text" id="imgedit-start-y-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
     218                                                        </div>
     219                                                </fieldset>
     220                                                <div class="imgedit-crop-apply container">
     221                                                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button>
     222                                                </div>
     223                                                </div>
     224                                        </div>
    231225
    232         <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    233         <fieldset>
    234                 <legend><?php _e( 'Apply changes to:' ); ?></legend>
     226                                </div>
    235227
    236                 <span class="imgedit-label">
    237                         <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    238                         <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
    239                 </span>
     228                                <?php
     229                                if ( $thumb && $sub_sizes ) {
     230                                        $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
     231                                        ?>
    240232
    241                 <span class="imgedit-label">
    242                         <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    243                         <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
    244                 </span>
     233                                <div class="imgedit-group imgedit-applyto">
     234                                <div class="imgedit-group-top">
     235                                        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     236                                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
     237                                        <div class="imgedit-help">
     238                                        <p><?php _e( 'You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.' ); ?></p>
     239                                        </div>
     240                                </div>
     241                                <div class="imgedit-thumbnail-preview-group">
     242                                        <figure class="imgedit-thumbnail-preview">
     243                                                <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
     244                                                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     245                                        </figure>
    245246
    246                 <span class="imgedit-label">
    247                         <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    248                         <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
    249                 </span>
    250                 <?php
    251                 if ( $edit_custom_sizes ) {
    252                         if ( ! is_array( $edit_custom_sizes ) ) {
    253                                 $edit_custom_sizes = get_intermediate_image_sizes();
    254                         }
    255                         foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
    256                                 if ( array_key_exists( $size, $meta['sizes'] ) ) {
    257                                         if ( 'thumbnail' === $size ) {
    258                                                 continue;
    259                                         }
    260                                         ?>
    261                                         <span class="imgedit-label">
    262                                                 <input type="radio" id="imgedit-target-custom<?php echo esc_attr( $key ); ?>" name="imgedit-target-<?php echo $post_id; ?>" value="<?php echo esc_attr( $size ); ?>" />
    263                                                 <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
    264                                         </span>
    265                                         <?php
    266                                 }
    267                         }
    268                 }
    269                 ?>
    270         </fieldset>
    271         </div>
    272         </div>
     247                                        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     248                                        <fieldset>
     249                                                <legend><?php _e( 'Apply changes to:' ); ?></legend>
    273250
    274         <?php } ?>
     251                                                <span class="imgedit-label">
     252                                                        <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     253                                                        <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     254                                                </span>
    275255
    276         </div>
     256                                                <span class="imgedit-label">
     257                                                        <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     258                                                        <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     259                                                </span>
    277260
     261                                                <span class="imgedit-label">
     262                                                        <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     263                                                        <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     264                                                </span>
     265                                                <?php
     266                                                if ( $edit_custom_sizes ) {
     267                                                        if ( ! is_array( $edit_custom_sizes ) ) {
     268                                                                $edit_custom_sizes = get_intermediate_image_sizes();
     269                                                        }
     270                                                        foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     271                                                                if ( array_key_exists( $size, $meta['sizes'] ) ) {
     272                                                                        if ( 'thumbnail' === $size ) {
     273                                                                                continue;
     274                                                                        }
     275                                                                        ?>
     276                                                                        <span class="imgedit-label">
     277                                                                                <input type="radio" id="imgedit-target-custom<?php echo esc_attr( $key ); ?>" name="imgedit-target-<?php echo $post_id; ?>" value="<?php echo esc_attr( $size ); ?>" />
     278                                                                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     279                                                                        </span>
     280                                                                        <?php
     281                                                                }
     282                                                        }
     283                                                }
     284                                                ?>
     285                                        </fieldset>
     286                                        </div>
     287                                        </div>
     288                                </div>
     289
     290                                <?php } ?>
     291
     292                                <div class="imgedit-submit imgedit-menu">
     293                                        <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
     294                                        <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
     295                                        <button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel' ); ?></button>
     296                                        <button type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn"><?php esc_html_e( 'Save' ); ?></button>
     297                                </div>
     298                        </div>
     299                </div>
     300
    278301        </div>
    279302        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    280303        <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e( "There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor." ); ?></div>
    … …  
    449472 */
    450473function _image_get_preview_ratio( $w, $h ) {
    451474        $max = max( $w, $h );
    452         return $max > 400 ? ( 400 / $max ) : 1;
     475        return $max > 640 ? ( 640 / $max ) : 1;
    453476}
    454477
    455478/**

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

     
    19511951
    19521952.media-modal .imgedit-wrap .imgedit-panel-content {
    19531953        padding: 16px 16px 0;
    1954         position: absolute;
    1955         top: 0;
    1956         right: 282px;
    1957         bottom: 0;
    1958         left: 0;
    19591954        overflow: auto;
    19601955}
    19611956
    … …  
    19631958 * Implementation of bottom padding in overflow content differs across browsers.
    19641959 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
    19651960 */
    1966 .media-modal .imgedit-wrap .imgedit-submit {
    1967         margin-bottom: 16px;
    1968 }
    1969 
    1970 .media-modal .imgedit-wrap .imgedit-settings {
    1971         background: #f6f7f7;
    1972         border-left: 1px solid #dcdcde;
    1973         padding: 20px 16px 0;
    1974         position: absolute;
    1975         top: 0;
    1976         right: 0;
    1977         bottom: 0;
    1978         width: 250px;
    1979         overflow: auto;
    1980 }
    1981 
    1982 /*
    1983  * Implementation of bottom padding in overflow content differs across browsers.
    1984  * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
    1985  */
    19861961.media-modal .imgedit-wrap .imgedit-save-target {
    19871962        margin: 8px 0 24px;
    19881963}
    … …  
    19901965.media-modal .imgedit-group {
    19911966        background: none;
    19921967        border: none;
    1993         border-bottom: 1px solid #dcdcde;
    19941968        box-shadow: none;
    19951969        margin: 0;
    1996         margin-bottom: 16px;
    19971970        padding: 0;
    1998         padding-bottom: 16px;
    19991971        position: relative; /* RTL fix, #WP29352 */
    20001972}
    20011973
    2002 .media-modal .imgedit-group:last-of-type {
    2003         border: none;
    2004         margin: 0;
    2005         padding: 0;
     1974.media-modal .imgedit-group.imgedit-panel-active {
     1975        margin-bottom: 16px;
     1976        padding-bottom: 16px;
    20061977}
    20071978
    20081979.media-modal .imgedit-group-top {
    … …  
    28102781}
    28112782
    28122783@media screen and (max-width: 782px) {
     2784        .imgedit-panel-content {
     2785                grid-template-columns: auto;
     2786        }
     2787
    28132788        .attachments-browser .media-toolbar {
    28142789                height: 82px;
    28152790        }