WordPress.org
Get WordPress

Make WordPress Core

Ticket #50523: 50523.6.diff

File 50523.6.diff, 44.4 KB (added by joedolson, 3 years ago)

Refreshed patch

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

     
    3434                        selection = this.iasapi.getSelection();
    3535                }
    3636
     37                if ( ! cropButton.classList.contains( 'imgedit-crop-clear' ) ) {
     38                        imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     39                } else {
     40                        imageEdit.setDisabled($('.imgedit-crop-clear'), 0);
     41                }
     42
    3743                // If we don't already have a selection, select the entire image.
    3844                if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
    3945                        this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
    … …  
    4147                        this.iasapi.update();
    4248                } else {
    4349
    44                         // Otherwise, perform the crop.
    45                         imageEdit.crop( postid, nonce , cropButton );
     50                        if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) {
     51                                this.iasapi.cancelSelection();
     52                                imageEdit.setDisabled($('.imgedit-crop-apply'), 0);
     53
     54                                $('#imgedit-sel-width-' + postid).val('');
     55                                $('#imgedit-sel-height-' + postid).val('');
     56                                $('#imgedit-start-x-' + postid).val('0');
     57                                $('#imgedit-start-y-' + postid).val('0');
     58                                $('#imgedit-selection-' + postid).val('');
     59                        } else {
     60                                // Otherwise, perform the crop.
     61                                imageEdit.crop( postid, nonce , cropButton );
     62                        }
    4663                }
    4764        },
    4865
    … …  
    122139                t.postid = postid;
    123140                $('#imgedit-response-' + postid).empty();
    124141
     142                $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     143                        var nonce = $( '#imgedit-nonce-' + postid ).val();
     144                        if ( e.which === 26 && e.ctrlKey ) {
     145                                imageEdit.undo( postid, nonce );
     146                        }
     147
     148                        if ( e.which === 25 && e.ctrlKey ) {
     149                                imageEdit.redo( postid, nonce );
     150                        }
     151                });
     152
    125153                $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126154                        var k = e.keyCode;
    127155
    … …  
    190218        },
    191219
    192220        /**
     221         * Shows or hides image edit input fields when enabled.
     222         *
     223         * @since 6.1.0
     224         *
     225         * @memberof imageEdit
     226         *
     227         * @param {HTMLElement} el The element to trigger the edit panel.
     228         *
     229         * @return {boolean} Always returns false.
     230         */
     231        toggleControls : function(el) {
     232                var $el = $( el );
     233                var $target = $( '#' + $el.attr( 'aria-controls' ) );
     234                $el
     235                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     236                $target
     237                        .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
     238
     239                return false;
     240        },
     241
     242        /**
    193243         * Gets the value from the image edit target.
    194244         *
    195245         * The image edit target contains the image sizes where the (possible) changes
    … …  
    402452                                }
    403453
    404454                                if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
    405                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
     455                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
    406456                                } else {
    407                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
     457                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
    408458                                }
    409459
    410460                                t.toggleEditor(postid, 0);
    … …  
    710760                var t = this,
    711761                        selW = $('#imgedit-sel-width-' + postid),
    712762                        selH = $('#imgedit-sel-height-' + postid),
     763                        selX = $('#imgedit-start-x-' + postid),
     764                        selY = $('#imgedit-start-y-' + postid),
    713765                        $image = $( image ),
    714766                        $img;
    715767
    … …  
    768820                         */
    769821                        onSelectStart: function() {
    770822                                imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
     823                                imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     824                                imageEdit.setDisabled($('.imgedit-crop-apply'), 1);
    771825                        },
    772826                        /**
    773827                         * Event triggered when the selection is ended.
    … …  
    781835                         */
    782836                        onSelectEnd: function(img, c) {
    783837                                imageEdit.setCropSelection(postid, c);
     838                                if ( ! $('#imgedit-crop > *').is(':visible') ) {
     839                                        imageEdit.toggleControls($('.imgedit-crop.button'));
     840                                }
    784841                        },
    785842
    786843                        /**
    … …  
    797854                                var sizer = imageEdit.hold.sizer;
    798855                                selW.val( imageEdit.round(c.width / sizer) );
    799856                                selH.val( imageEdit.round(c.height / sizer) );
     857                                selX.val( imageEdit.round(c.x1 / sizer) );
     858                                selY.val( imageEdit.round(c.y1 / sizer) );
    800859                        }
    801860                });
    802861        },
    … …  
    823882                        this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
    824883                        $('#imgedit-sel-width-' + postid).val('');
    825884                        $('#imgedit-sel-height-' + postid).val('');
     885                        $('#imgedit-start-x-' + postid).val('0');
     886                        $('#imgedit-start-y-' + postid).val('0');
    826887                        $('#imgedit-selection-' + postid).val('');
    827888                        return false;
    828889                }
    … …  
    10111072                // Clear the selection fields after cropping.
    10121073                $('#imgedit-sel-width-' + postid).val('');
    10131074                $('#imgedit-sel-height-' + postid).val('');
     1075                $('#imgedit-start-x-' + postid).val('0');
     1076                $('#imgedit-start-y-' + postid).val('0');
    10141077        },
    10151078
    10161079        /**
    … …  
    10941157         */
    10951158        setNumSelection : function( postid, el ) {
    10961159                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1160                        elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1161                        xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    10971162                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    10981163                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    10991164                        sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
    … …  
    11121177                        return false;
    11131178                }
    11141179
    1115                 if ( x && y && ( sel = ias.getSelection() ) ) {
     1180                if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11161181                        x2 = sel.x1 + Math.round( x * sizer );
    11171182                        y2 = sel.y1 + Math.round( y * sizer );
    1118                         x1 = sel.x1;
    1119                         y1 = sel.y1;
     1183                        x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1184                        y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11201185
    11211186                        if ( x2 > imgw ) {
    11221187                                x1 = 0;
    … …  
    12021267
    12031268                                if ( r > h ) {
    12041269                                        r = h;
     1270                                        var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' );
     1271
     1272                                        $( '#imgedit-crop-' + postid )
     1273                                                .prepend( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
     1274
     1275                                        wp.a11y.speak( errorMessage, 'assertive' );
    12051276                                        if ( n ) {
    1206                                                 $('#imgedit-crop-height-' + postid).val('');
     1277                                                $('#imgedit-crop-height-' + postid).val( '' );
    12071278                                        } else {
    1208                                                 $('#imgedit-crop-width-' + postid).val('');
     1279                                                $('#imgedit-crop-width-' + postid).val( '');
    12091280                                        }
     1281                                } else {
     1282                                        var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' );
     1283                                        if ( 'undefined' !== typeof( error ) ) {
     1284                                                error.remove();
     1285                                        }
    12101286                                }
    12111287
    12121288                                this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r );
    … …  
    12281304         *                        void when it is.
    12291305         */
    12301306        validateNumeric: function( el ) {
    1231                 if ( ! this.intval( $( el ).val() ) ) {
     1307                if ( false === this.intval( $( el ).val() ) ) {
    12321308                        $( el ).val( '' );
    12331309                        return false;
    12341310                }

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

     
    956956             * default 5px
    957957             */
    958958            if (!parseInt($handles.css('width')) >= 0)
    959                 $handles.width(5).height(5);
     959                $handles.width(10).height(10);
    960960
    961961            /*
    962962             * If the borderWidth option is in use, add a solid border to

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

     
    191191.wp-editor-container,
    192192.popular-tags,
    193193.feature-filter,
    194 .imgedit-group,
    195194.comment-ays {
    196195        border: 1px solid #c3c4c7;
    197196        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    … …  
    204203.widgets-holder-wrap,
    205204.popular-tags,
    206205.feature-filter,
    207 .imgedit-group,
    208206.comment-ays {
    209207        background: #fff;
    210208}

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

     
    877877        padding-top: 10px;
    878878}
    879879
    880 .imgedit-settings p,
    881 .imgedit-settings fieldset {
     880.image-editor p,
     881.image-editor fieldset {
    882882        margin: 8px 0;
    883883}
    884884
    885 .imgedit-settings legend {
     885.image-editor legend {
    886886        margin-bottom: 5px;
    887887}
    888888
    889 .describe .imgedit-wrap .imgedit-settings {
     889.describe .imgedit-wrap .image-editor {
    890890        padding: 0 5px;
    891891}
    892892
    … …  
    898898        height: auto;
    899899}
    900900
    901 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    902         float: left;
    903         padding: 3px 16px 0 0;
    904         min-width: 400px;
    905         max-width: calc( 100% - 266px );
     901.imgedit-panel-content {
     902        display: flex;
     903        flex-wrap: wrap;
     904        column-gap: 20px;
    906905}
    907906
    908 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     907.imgedit-settings {
     908        max-width: 400px; /* Prevent reflow when help info is expanded. */
     909}
     910
     911.imgedit-group-controls > * {
     912        display: none;
     913}
     914
     915.imgedit-panel-active .imgedit-group-controls > * {
     916        display: block;
     917}
     918
     919.wp_attachment_holder .imgedit-wrap .image-editor {
    909920        float: right;
    910921        width: 250px;
    911922}
    912923
    913 .imgedit-settings input {
     924.image-editor input {
    914925        margin-top: 0;
    915926        vertical-align: middle;
    916927}
    … …  
    945956}
    946957
    947958.media-disabled,
    948 .imgedit-settings .disabled {
     959.image-editor .disabled {
    949960        /* WCAG 1.4.3 Text or images of text that are part of an inactive user
    950961           interface component ... have no contrast requirement. */
    951962        color: #a7aaad;
    … …  
    10141025        content: "\f165";
    10151026}
    10161027
     1028.imgedit-scale:before {
     1029        content: "\f211";
     1030}
     1031
    10171032.imgedit-rleft:before {
    10181033        content: "\f166";
    10191034}
    … …  
    10481063        background-size: 20px 20px;
    10491064}
    10501065
     1066.imgedit-crop-wrap {
     1067        padding: 20px;
     1068        background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
     1069        background-position: 0 0, 10px 10px;
     1070        background-size: 20px 20px;
     1071}
     1072
     1073
    10511074.imgedit-crop {
    10521075        margin: 0 8px 0 0;
    10531076}
    … …  
    10761099        margin: 0 8px 0 3px;
    10771100}
    10781101
     1102.imgedit-thumbnail-preview-group {
     1103        display: flex;
     1104        flex-wrap: wrap;
     1105        column-gap: 10px;
     1106}
     1107
    10791108.imgedit-thumbnail-preview {
    10801109        margin: 10px 8px 0 0;
    10811110}
    … …  
    11701199}
    11711200
    11721201.imgedit-group {
    1173         margin-bottom: 8px;
    1174         padding: 10px;
     1202        margin-bottom: 20px;
    11751203}
    11761204
    1177 .imgedit-settings .imgedit-original-dimensions {
     1205.image-editor .imgedit-original-dimensions {
    11781206        display: inline-block;
    11791207}
    11801208
    1181 .imgedit-settings .imgedit-scale input[type="text"],
    1182 .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1183 .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1209.image-editor .imgedit-scale-controls input[type="text"],
     1210.image-editor .imgedit-crop-ratio input[type="text"],
     1211.image-editor .imgedit-crop-sel input[type="text"] {
    11841212        width: 80px;
    11851213        font-size: 14px;
    11861214        padding: 0 8px;
    … …  
    11941222        color: #3c434a;
    11951223}
    11961224
    1197 .imgedit-settings .imgedit-scale-button-wrapper {
     1225.image-editor .imgedit-scale-button-wrapper {
    11981226        margin-top: 0.3077em;
    11991227        display: block;
    12001228}
    12011229
    1202 .imgedit-settings .imgedit-scale .button {
     1230.image-editor .imgedit-scale-controls .button {
    12031231        margin-bottom: 0;
    12041232}
    12051233
    … …  
    12681296                padding: 10px 0 10px 12px;
    12691297        }
    12701298
    1271         .imgedit-settings .imgedit-scale input[type="text"],
    1272         .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1273         .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1299        .image-editor .imgedit-scale input[type="text"],
     1300        .image-editor .imgedit-crop-ratio input[type="text"],
     1301        .image-editor .imgedit-crop-sel input[type="text"] {
    12741302                font-size: 16px;
    12751303                padding: 6px 10px;
    12761304        }
    12771305
    12781306        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1279         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1307        .wp_attachment_holder .imgedit-wrap .image-editor {
    12801308                float: none;
    12811309                width: auto;
    12821310                max-width: none;
    … …  
    12931321        }
    12941322
    12951323        .media-modal .imgedit-wrap .imgedit-panel-content,
    1296         .media-modal .imgedit-wrap .imgedit-settings {
     1324        .media-modal .imgedit-wrap .image-editor {
    12971325                position: initial !important;
    12981326        }
    12991327
    1300         .media-modal .imgedit-wrap .imgedit-settings {
     1328        .media-modal .imgedit-wrap .image-editor {
    13011329                box-sizing: border-box;
    13021330                width: 100% !important;
    13031331        }
    13041332
    1305         .imgedit-settings .imgedit-scale-button-wrapper {
     1333        .image-editor .imgedit-scale-button-wrapper {
    13061334                display: inline-block;
    13071335        }
    13081336}

  • 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 > 600 ? 600 / $big : 1;
    3232
    3333        $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
    3434        $can_restore  = false;
    … …  
    5757        <div id="imgedit-panel-<?php echo $post_id; ?>">
    5858
    5959        <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
     60                <div class="imgedit-tools">
     61                        <?php echo $note; ?>
     62                        <div class="imgedit-menu wp-clearfix">
     63                                <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>
     64                                <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
    6465
    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>
    7666                                <?php
    77                         } else {
    78                                 $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
     67                                // On some setups GD library does not provide imagerotate() - Ticket #11536.
     68                                if ( wp_image_editor_supports(
     69                                        array(
     70                                                'mime_type' => get_post_mime_type( $post_id ),
     71                                                'methods'   => array( 'rotate' ),
     72                                        )
     73                                ) ) {
     74                                        $note_no_rotate = '';
     75                                        ?>
     76                                        <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
     77                                        <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
     78                                        <?php
     79                                } else {
     80                                        $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
     81                                        ?>
     82                                        <button type="button" class="imgedit-rleft button disabled" disabled></button>
     83                                        <button type="button" class="imgedit-rright button disabled" disabled></button>
     84                                        <?php
     85                                }
    7986                                ?>
    80                                 <button type="button" class="imgedit-rleft button disabled" disabled></button>
    81                                 <button type="button" class="imgedit-rright button disabled" disabled></button>
    82                         <?php } ?>
     87                                <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     88                                <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     89                                <?php echo $note_no_rotate; ?>
     90                        </div>
    8391
    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>
     92                        <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
     93                        <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     94                        <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     95                        <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     96                        <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     97                        <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     98                        <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    8699
    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; ?>
     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>
    91105                </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">
     113                                                <?php
     114                                                /* translators: Hidden accessibility text. */
     115                                                esc_html_e( 'Scale Image Help' );
     116                                                ?>
     117                                                </span></button>
     118                                                <div class="imgedit-help">
     119                                                <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>
     120                                                </div>
     121                                                <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     122                                                <p>
     123                                                        <?php
     124                                                        printf(
     125                                                                /* translators: %s: Image width and height in pixels. */
     126                                                                __( 'Original dimensions %s' ),
     127                                                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     128                                                        );
     129                                                        ?>
     130                                                </p>
     131                                                <?php endif; ?>
     132                                                <div class="imgedit-submit">
     133                                                <fieldset class="imgedit-scale-controls">
     134                                                        <legend><?php _e( 'New dimensions:' ); ?></legend>
     135                                                        <div class="nowrap">
     136                                                        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
     137                                                        <?php
     138                                                        /* translators: Hidden accessibility text. */
     139                                                        _e( 'scale height' );
     140                                                        ?>
     141                                                        </label>
     142                                                        <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; ?>" />
     143                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     144                                                        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     145                                                        <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; ?>" />
     146                                                        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     147                                                        <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>
     148                                                        </div>
     149                                                </fieldset>
     150                                                </div>
     151                                        </div>
     152                                </div>
     153                                </div>
    92154
    93                 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    94                 <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    95                 <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    96                 <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
    97                 <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    98                 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     155                <?php if ( $can_restore ) { ?>
     156                                <div class="imgedit-group">
     157                                <div class="imgedit-group-top">
     158                                        <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>
     159                                        <div class="imgedit-help imgedit-restore">
     160                                        <p>
     161                                        <?php
     162                                        _e( 'Discard any changes and restore the original image.' );
     163                                        if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     164                                                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     165                                        }
     166                                        ?>
     167                                        </p>
     168                                        <div class="imgedit-submit">
     169                                                <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; ?> />
     170                                        </div>
     171                                </div>
     172                        </div>
     173                        </div>
     174                <?php } ?>
     175                        <div class="imgedit-group">
     176                                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     177                                <div class="imgedit-group-top">
     178                                        <h2><?php _e( 'Crop Image' ); ?></h2>
     179                                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     180                                        <?php
     181                                        /* translators: Hidden accessibility text. */
     182                                        _e( 'Image Crop Help' );
     183                                        ?>
     184                                        </span></button>
    99185
    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>
     186                                        <div class="imgedit-help">
     187                                                <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    104188
    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>
     189                                                <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     190                                                <?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>
    110191
    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">
    116                         <?php
    117                         /* translators: Hidden accessibility text. */
    118                         esc_html_e( 'Scale Image Help' );
    119                         ?>
    120                 </span></button>
    121                 <div class="imgedit-help">
    122                 <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>
     192                                                <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     193                                                <?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>
     194                                        </div>
     195                                </div>
     196                                <fieldset class="imgedit-crop-ratio">
     197                                        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     198                                        <div class="nowrap">
     199                                        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
     200                                        <?php
     201                                        /* translators: Hidden accessibility text. */
     202                                        _e( 'crop ratio width' );
     203                                        ?>
     204                                        </label>
     205                                        <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)" />
     206                                        <span class="imgedit-separator" aria-hidden="true">:</span>
     207                                        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
     208                                        <?php
     209                                        /* translators: Hidden accessibility text. */
     210                                        _e( 'crop ratio height' );
     211                                        ?>
     212                                        </label>
     213                                        <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)" />
     214                                        </div>
     215                                </fieldset>
     216                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     217                                        <legend><?php _e( 'Selection:' ); ?></legend>
     218                                        <div class="nowrap">
     219                                        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
     220                                        <?php
     221                                        /* translators: Hidden accessibility text. */
     222                                        _e( 'selection width' );
     223                                        ?>
     224                                        </label>
     225                                        <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)" />
     226                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     227                                        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
     228                                        <?php
     229                                        /* translators: Hidden accessibility text. */
     230                                        _e( 'selection height' );
     231                                        ?>
     232                                        </label>
     233                                        <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)" />
     234                                        </div>
     235                                </fieldset>
     236                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     237                                        <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     238                                        <div class="nowrap">
     239                                        <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text">
     240                                        <?php
     241                                        /* translators: Hidden accessibility text. */
     242                                        _e( 'horizontal start position' );
     243                                        ?>
     244                                        </label>
     245                                        <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" />
     246                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     247                                        <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
     248                                        <?php
     249                                        /* translators: Hidden accessibility text. */
     250                                        _e( 'vertical start position' );
     251                                        ?>
     252                                        </label>
     253                                        <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" />
     254                                        </div>
     255                                </fieldset>
     256                                <div class="imgedit-crop-apply imgedit-menu container">
     257                                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
     258                                </div>
     259                        </div>
    123260                </div>
    124                 <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
    125                 <p>
    126                         <?php
    127                         printf(
    128                                 /* translators: %s: Image width and height in pixels. */
    129                                 __( 'Original dimensions %s' ),
    130                                 '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
    131                         );
    132                         ?>
    133                 </p>
    134                 <?php endif; ?>
    135                 <div class="imgedit-submit">
    136 
    137                 <fieldset class="imgedit-scale">
    138                 <legend><?php _e( 'New dimensions:' ); ?></legend>
    139                 <div class="nowrap">
    140                 <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
    141                         <?php
    142                         /* translators: Hidden accessibility text. */
    143                         _e( 'scale width' );
    144                         ?>
    145                 </label>
    146                 <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; ?>" />
    147                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    148                 <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
    149                         <?php
    150                         /* translators: Hidden accessibility text. */
    151                         _e( 'scale height' );
    152                         ?>
    153                 </label>
    154                 <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; ?>" />
    155                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
    156                 <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>
    157                 </div>
    158                 </fieldset>
    159 
    160                 </div>
    161261        </div>
    162         </div>
    163262
    164         <?php if ( $can_restore ) { ?>
    165 
    166         <div class="imgedit-group">
    167         <div class="imgedit-group-top">
    168                 <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>
    169                 <div class="imgedit-help imgedit-restore">
    170                 <p>
    171                         <?php
    172                         _e( 'Discard any changes and restore the original image.' );
    173 
    174                         if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
    175                                 echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
    176                         }
    177                         ?>
    178                 </p>
    179                 <div class="imgedit-submit">
    180                 <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; ?> />
    181                 </div>
    182                 </div>
    183         </div>
    184         </div>
    185 
    186         <?php } ?>
    187 
    188         <div class="imgedit-group">
    189         <div class="imgedit-group-top">
    190                 <h2><?php _e( 'Image Crop' ); ?></h2>
    191                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    192                         <?php
    193                         /* translators: Hidden accessibility text. */
    194                         esc_html_e( 'Image Crop Help' );
    195                         ?>
    196                 </span></button>
    197 
    198                 <div class="imgedit-help">
    199                 <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    200 
    201                 <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
    202                 <?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>
    203 
    204                 <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
    205                 <?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>
    206                 </div>
    207         </div>
    208 
    209         <fieldset class="imgedit-crop-ratio">
    210                 <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    211                 <div class="nowrap">
    212                 <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
    213                         <?php
    214                         /* translators: Hidden accessibility text. */
    215                         _e( 'crop ratio width' );
    216                         ?>
    217                 </label>
    218                 <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)" />
    219                 <span class="imgedit-separator" aria-hidden="true">:</span>
    220                 <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
    221                         <?php
    222                         /* translators: Hidden accessibility text. */
    223                         _e( 'crop ratio height' );
    224                         ?>
    225                 </label>
    226                 <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)" />
    227                 </div>
    228         </fieldset>
    229 
    230         <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    231                 <legend><?php _e( 'Selection:' ); ?></legend>
    232                 <div class="nowrap">
    233                 <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
    234                         <?php
    235                         /* translators: Hidden accessibility text. */
    236                         _e( 'selection width' );
    237                         ?>
    238                 </label>
    239                 <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)" />
    240                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    241                 <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
    242                         <?php
    243                         /* translators: Hidden accessibility text. */
    244                         _e( 'selection height' );
    245                         ?>
    246                 </label>
    247                 <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)" />
    248                 </div>
    249         </fieldset>
    250 
    251         </div>
    252 
    253263        <?php
    254264        if ( $thumb && $sub_sizes ) {
    255265                $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
    … …  
    256266                ?>
    257267
    258268        <div class="imgedit-group imgedit-applyto">
    259         <div class="imgedit-group-top">
    260                 <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    261                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     269                <div class="imgedit-group-top">
     270                        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     271                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    262272                        <?php
    263273                        /* translators: Hidden accessibility text. */
    264274                        esc_html_e( 'Thumbnail Settings Help' );
    265275                        ?>
    266                 </span></button>
    267                 <div class="imgedit-help">
    268                 <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>
     276                        </span></button>
     277                        <div class="imgedit-help">
     278                        <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>
     279                        </div>
    269280                </div>
    270         </div>
     281                <div class="imgedit-thumbnail-preview-group">
     282                        <figure class="imgedit-thumbnail-preview">
     283                                <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" />
     284                                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     285                        </figure>
     286                        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     287                        <fieldset>
     288                                <legend><?php _e( 'Apply changes to:' ); ?></legend>
    271289
    272         <figure class="imgedit-thumbnail-preview">
    273                 <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" />
    274                 <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
    275         </figure>
     290                                <span class="imgedit-label">
     291                                        <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     292                                        <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     293                                </span>
    276294
    277         <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    278         <fieldset>
    279                 <legend><?php _e( 'Apply changes to:' ); ?></legend>
     295                                <span class="imgedit-label">
     296                                        <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     297                                        <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     298                                </span>
     299 
     300                                <span class="imgedit-label">
     301                                        <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     302                                        <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     303                                </span>
    280304
    281                 <span class="imgedit-label">
    282                         <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    283                         <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
    284                 </span>
    285 
    286                 <span class="imgedit-label">
    287                         <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    288                         <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
    289                 </span>
    290 
    291                 <span class="imgedit-label">
    292                         <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    293                         <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
    294                 </span>
    295                 <?php
    296                 if ( $edit_custom_sizes ) {
    297                         if ( ! is_array( $edit_custom_sizes ) ) {
    298                                 $edit_custom_sizes = get_intermediate_image_sizes();
    299                         }
    300                         foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
    301                                 if ( array_key_exists( $size, $meta['sizes'] ) ) {
    302                                         if ( 'thumbnail' === $size ) {
    303                                                 continue;
     305                                <?php
     306                                if ( $edit_custom_sizes ) {
     307                                        if ( ! is_array( $edit_custom_sizes ) ) {
     308                                                $edit_custom_sizes = get_intermediate_image_sizes();
    304309                                        }
    305                                         ?>
    306                                         <span class="imgedit-label">
    307                                                 <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 ); ?>" />
    308                                                 <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
    309                                         </span>
    310                                         <?php
     310                                        foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     311                                                if ( array_key_exists( $size, $meta['sizes'] ) ) {
     312                                                        if ( 'thumbnail' === $size ) {
     313                                                                continue;
     314                                                        }
     315                                                        ?>
     316                                                        <span class="imgedit-label">
     317                                                        <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 ); ?>" />
     318                                                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     319                                                        </span>
     320                                                        <?php
     321                                                }
     322                                        }
    311323                                }
    312                         }
    313                 }
    314                 ?>
    315         </fieldset>
     324                                ?>
     325                                </fieldset>
     326                        </div>
     327                </div>
    316328        </div>
    317         </div>
    318 
    319329        <?php } ?>
     330                        <div class="imgedit-submit imgedit-menu">
     331                                <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>
    320332
     333                                <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>
     334
     335                                <button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel' ); ?></button>
     336
     337                                <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>
     338                        </div>
     339                </div>
    321340        </div>
    322341
    323342        </div>
    324343        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
     344        <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>
     345
     346        </div>
     347        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    325348        <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>
    326349        </div>
    327350        <?php
    … …  
    508531 */
    509532function _image_get_preview_ratio( $w, $h ) {
    510533        $max = max( $w, $h );
    511         return $max > 400 ? ( 400 / $max ) : 1;
     534        return $max > 600 ? ( 600 / $max ) : 1;
    512535}
    513536
    514537/**

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

     
    19591959
    19601960.media-modal .imgedit-wrap .imgedit-panel-content {
    19611961        padding: 16px 16px 0;
    1962         position: absolute;
    1963         top: 0;
    1964         right: 282px;
    1965         bottom: 0;
    1966         left: 0;
    19671962        overflow: auto;
    19681963}
    19691964
    … …  
    19711966 * Implementation of bottom padding in overflow content differs across browsers.
    19721967 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
    19731968 */
    1974 .media-modal .imgedit-wrap .imgedit-submit {
    1975         margin-bottom: 16px;
    1976 }
    1977 
    1978 .media-modal .imgedit-wrap .imgedit-settings {
    1979         background: #f6f7f7;
    1980         border-left: 1px solid #dcdcde;
    1981         padding: 20px 16px 0;
    1982         position: absolute;
    1983         top: 0;
    1984         right: 0;
    1985         bottom: 0;
    1986         width: 250px;
    1987         overflow: auto;
    1988 }
    1989 
    1990 /*
    1991  * Implementation of bottom padding in overflow content differs across browsers.
    1992  * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
    1993  */
    19941969.media-modal .imgedit-wrap .imgedit-save-target {
    19951970        margin: 8px 0 24px;
    19961971}
    … …  
    19981973.media-modal .imgedit-group {
    19991974        background: none;
    20001975        border: none;
    2001         border-bottom: 1px solid #dcdcde;
    20021976        box-shadow: none;
    20031977        margin: 0;
    2004         margin-bottom: 16px;
    20051978        padding: 0;
    2006         padding-bottom: 16px;
    20071979        position: relative; /* RTL fix, #WP29352 */
    20081980}
    20091981
    2010 .media-modal .imgedit-group:last-of-type {
    2011         border: none;
    2012         margin: 0;
    2013         padding: 0;
     1982.media-modal .imgedit-group.imgedit-panel-active {
     1983        margin-bottom: 16px;
     1984        padding-bottom: 16px;
    20141985}
    20151986
    20161987.media-modal .imgedit-group-top {
    … …  
    28192790}
    28202791
    28212792@media screen and (max-width: 782px) {
     2793        .imgedit-panel-content {
     2794                grid-template-columns: auto;
     2795        }
     2796
    28222797        .attachments-browser .media-toolbar {
    28232798                height: 82px;
    28242799        }