WordPress.org
Get WordPress

Make WordPress Core

Ticket #50523: 50523.7.diff

File 50523.7.diff, 89.2 KB (added by joedolson, 3 years ago)

Updates to patch - group controls in menu, layout changes

  • 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: grid;
     903        grid-template-columns: 640px 1fr;
     904        gap: 20px;
    906905}
    907906
    908 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     907@media screen and (max-width: 1120px) {
     908        .imgedit-panel-content {
     909                grid-template-columns: 1fr;
     910        }
     911}
     912
     913.imgedit-settings {
     914        max-width: 400px; /* Prevent reflow when help info is expanded. */
     915}
     916
     917.imgedit-group-controls > * {
     918        display: none;
     919}
     920
     921.imgedit-panel-active .imgedit-group-controls > * {
     922        display: block;
     923}
     924
     925.wp_attachment_holder .imgedit-wrap .image-editor {
    909926        float: right;
    910927        width: 250px;
    911928}
    912929
    913 .imgedit-settings input {
     930.image-editor input {
    914931        margin-top: 0;
    915932        vertical-align: middle;
    916933}
    … …  
    945962}
    946963
    947964.media-disabled,
    948 .imgedit-settings .disabled {
     965.image-editor .disabled {
    949966        /* WCAG 1.4.3 Text or images of text that are part of an inactive user
    950967           interface component ... have no contrast requirement. */
    951968        color: #a7aaad;
    … …  
    969986        float: left;
    970987}
    971988
    972 .imgedit-menu {
    973         margin: 0 0 12px;
    974 }
    975 
    976989.imgedit-menu .note-no-rotate {
    977990        clear: both;
    978991        margin: 0;
    … …  
    985998        min-height: 28px;
    986999        font-size: 13px;
    9871000        line-height: 2;
    988         margin: 0 8px 8px 0;
    9891001        padding: 0 10px;
    9901002}
    9911003
    … …  
    10141026        content: "\f165";
    10151027}
    10161028
     1029.imgedit-scale:before {
     1030        content: "\f211";
     1031}
     1032
    10171033.imgedit-rleft:before {
    10181034        content: "\f166";
    10191035}
    … …  
    10481064        background-size: 20px 20px;
    10491065}
    10501066
     1067.imgedit-crop-wrap {
     1068        padding: 20px;
     1069        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);
     1070        background-position: 0 0, 10px 10px;
     1071        background-size: 20px 20px;
     1072}
     1073
     1074
    10511075.imgedit-crop {
    10521076        margin: 0 8px 0 0;
    10531077}
    … …  
    10761100        margin: 0 8px 0 3px;
    10771101}
    10781102
     1103.imgedit-thumbnail-preview-group {
     1104        display: flex;
     1105        flex-wrap: wrap;
     1106        column-gap: 10px;
     1107}
     1108
    10791109.imgedit-thumbnail-preview {
    10801110        margin: 10px 8px 0 0;
    10811111}
    … …  
    11391169        padding: 0;
    11401170}
    11411171
    1142 .imgedit-submit {
    1143         margin: 8px 0 0;
    1144 }
    1145 
    11461172.imgedit-submit-btn {
    11471173        margin-left: 20px;
    11481174}
    … …  
    11701196}
    11711197
    11721198.imgedit-group {
    1173         margin-bottom: 8px;
    1174         padding: 10px;
     1199        margin-bottom: 20px;
    11751200}
    11761201
    1177 .imgedit-settings .imgedit-original-dimensions {
     1202.image-editor .imgedit-original-dimensions {
    11781203        display: inline-block;
    11791204}
    11801205
    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"] {
     1206.image-editor .imgedit-scale-controls input[type="text"],
     1207.image-editor .imgedit-crop-ratio input[type="text"],
     1208.image-editor .imgedit-crop-sel input[type="text"] {
    11841209        width: 80px;
    11851210        font-size: 14px;
    11861211        padding: 0 8px;
    … …  
    11941219        color: #3c434a;
    11951220}
    11961221
    1197 .imgedit-settings .imgedit-scale-button-wrapper {
     1222.image-editor .imgedit-scale-button-wrapper {
    11981223        margin-top: 0.3077em;
    11991224        display: block;
    12001225}
    12011226
    1202 .imgedit-settings .imgedit-scale .button {
     1227.image-editor .imgedit-scale-controls .button {
    12031228        margin-bottom: 0;
    12041229}
    12051230
    … …  
    12681293                padding: 10px 0 10px 12px;
    12691294        }
    12701295
    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"] {
     1296        .image-editor .imgedit-scale input[type="text"],
     1297        .image-editor .imgedit-crop-ratio input[type="text"],
     1298        .image-editor .imgedit-crop-sel input[type="text"] {
    12741299                font-size: 16px;
    12751300                padding: 6px 10px;
    12761301        }
    12771302
    12781303        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1279         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1304        .wp_attachment_holder .imgedit-wrap .image-editor {
    12801305                float: none;
    12811306                width: auto;
    12821307                max-width: none;
    … …  
    12931318        }
    12941319
    12951320        .media-modal .imgedit-wrap .imgedit-panel-content,
    1296         .media-modal .imgedit-wrap .imgedit-settings {
     1321        .media-modal .imgedit-wrap .image-editor {
    12971322                position: initial !important;
    12981323        }
    12991324
    1300         .media-modal .imgedit-wrap .imgedit-settings {
     1325        .media-modal .imgedit-wrap .image-editor {
    13011326                box-sizing: border-box;
    13021327                width: 100% !important;
    13031328        }
    13041329
    1305         .imgedit-settings .imgedit-scale-button-wrapper {
     1330        .image-editor .imgedit-scale-button-wrapper {
    13061331                display: inline-block;
    13071332        }
    13081333}

  • 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;
    … …  
    5555        ?>
    5656        <div class="imgedit-wrap wp-clearfix">
    5757        <div id="imgedit-panel-<?php echo $post_id; ?>">
     58        <div class="imgedit-panel-content wp-clearfix" role="menu" tabindex="0" aria-label="
     59                <?php
     60                        // translators: Hidden accessibility text.
     61                        esc_attr_e( 'Image Editing Tools' );
     62                ?>
     63                ">
     64                <div class="imgedit-menu wp-clearfix">
     65                        <button role="menuitem" 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>
     66                        <button role="menuitem" type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
    5867
    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>
    6368                        <?php
    64 
    6569                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
    6670                        if ( wp_image_editor_supports(
    6771                                array(
    … …  
    7175                        ) ) {
    7276                                $note_no_rotate = '';
    7377                                ?>
    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>
     78                                <button role="menuitem" type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
     79                                <button role="menuitem" type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
    7680                                <?php
    7781                        } else {
    7882                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    7983                                ?>
    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>
     84                                <button role="menuitem" type="button" class="imgedit-rleft button disabled" disabled></button>
     85                                <button role="menuitem" type="button" class="imgedit-rright button disabled" disabled></button>
     86                                <?php
     87                        }
     88                        ?>
     89                        <button role="menuitem" type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     90                        <button role="menuitem" type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    9091                        <?php echo $note_no_rotate; ?>
    9192                </div>
     93                <div class="imgedit-submit imgedit-menu">
     94                        <button role="menuitem" 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>
    9295
    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; ?>" />
     96                        <button role="menuitem" 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>
    9997
    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>
     98                        <button role="menuitem" type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel Editing' ); ?></button>
    10499
    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' ); ?>" />
     100                        <button role="menuitem" type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn"><?php esc_html_e( 'Save Edits' ); ?></button>
    108101                </div>
    109102        </div>
     103        <div class="imgedit-panel-content wp-clearfix">
     104                        <?php echo $note; ?>
     105                <div class="imgedit-tools">
     106                        <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
     107                        <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     108                        <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     109                        <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     110                        <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     111                        <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     112                        <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    110113
    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>
     114                        <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     115                        <div class="imgedit-crop-grid"></div>
     116                        <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     117                                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="" />
     118                        </div>
    123119                </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">
     120                <div class="imgedit-settings">
     121                        <div class="imgedit-tool-active">
     122                                <div class="imgedit-group">
     123                                <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     124                                        <div class="imgedit-group-top">
     125                                                <h2><?php _e( 'Scale Image' ); ?></h2>
     126                                                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     127                                                <?php
     128                                                /* translators: Hidden accessibility text. */
     129                                                esc_html_e( 'Scale Image Help' );
     130                                                ?>
     131                                                </span></button>
     132                                                <div class="imgedit-help">
     133                                                <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>
     134                                                </div>
     135                                                <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     136                                                <p>
     137                                                        <?php
     138                                                        printf(
     139                                                                /* translators: %s: Image width and height in pixels. */
     140                                                                __( 'Original dimensions %s' ),
     141                                                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     142                                                        );
     143                                                        ?>
     144                                                </p>
     145                                                <?php endif; ?>
     146                                                <div class="imgedit-submit">
     147                                                <fieldset class="imgedit-scale-controls">
     148                                                        <legend><?php _e( 'New dimensions:' ); ?></legend>
     149                                                        <div class="nowrap">
     150                                                        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
     151                                                        <?php
     152                                                        /* translators: Hidden accessibility text. */
     153                                                        _e( 'scale height' );
     154                                                        ?>
     155                                                        </label>
     156                                                        <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; ?>" />
     157                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     158                                                        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     159                                                        <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; ?>" />
     160                                                        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     161                                                        <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>
     162                                                        </div>
     163                                                </fieldset>
     164                                                </div>
     165                                        </div>
     166                                </div>
     167                                </div>
    136168
    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>
     169                <?php if ( $can_restore ) { ?>
     170                                <div class="imgedit-group">
     171                                <div class="imgedit-group-top">
     172                                        <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>
     173                                        <div class="imgedit-help imgedit-restore">
     174                                        <p>
     175                                        <?php
     176                                        _e( 'Discard any changes and restore the original image.' );
     177                                        if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     178                                                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     179                                        }
     180                                        ?>
     181                                        </p>
     182                                        <div class="imgedit-submit">
     183                                                <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; ?> />
     184                                        </div>
     185                                </div>
     186                        </div>
     187                        </div>
     188                <?php } ?>
     189                        <div class="imgedit-group">
     190                                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     191                                <div class="imgedit-group-top">
     192                                        <h2><?php _e( 'Crop Image' ); ?></h2>
     193                                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     194                                        <?php
     195                                        /* translators: Hidden accessibility text. */
     196                                        _e( 'Image Crop Help' );
     197                                        ?>
     198                                        </span></button>
    159199
    160                 </div>
    161         </div>
    162         </div>
     200                                        <div class="imgedit-help">
     201                                                <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    163202
    164         <?php if ( $can_restore ) { ?>
     203                                                <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     204                                                <?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>
    165205
    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; ?> />
     206                                                <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     207                                                <?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>
     208                                        </div>
     209                                </div>
     210                                <fieldset class="imgedit-crop-ratio">
     211                                        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     212                                        <div class="nowrap">
     213                                        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
     214                                        <?php
     215                                        /* translators: Hidden accessibility text. */
     216                                        _e( 'crop ratio width' );
     217                                        ?>
     218                                        </label>
     219                                        <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)" />
     220                                        <span class="imgedit-separator" aria-hidden="true">:</span>
     221                                        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
     222                                        <?php
     223                                        /* translators: Hidden accessibility text. */
     224                                        _e( 'crop ratio height' );
     225                                        ?>
     226                                        </label>
     227                                        <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)" />
     228                                        </div>
     229                                </fieldset>
     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                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     251                                        <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     252                                        <div class="nowrap">
     253                                        <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text">
     254                                        <?php
     255                                        /* translators: Hidden accessibility text. */
     256                                        _e( 'horizontal start position' );
     257                                        ?>
     258                                        </label>
     259                                        <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" />
     260                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     261                                        <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
     262                                        <?php
     263                                        /* translators: Hidden accessibility text. */
     264                                        _e( 'vertical start position' );
     265                                        ?>
     266                                        </label>
     267                                        <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" />
     268                                        </div>
     269                                </fieldset>
     270                                <div class="imgedit-crop-apply imgedit-menu container">
     271                                        <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>
     272                                </div>
     273                        </div>
    181274                </div>
    182                 </div>
    183275        </div>
    184         </div>
    185276
    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 
    253277        <?php
    254278        if ( $thumb && $sub_sizes ) {
    255279                $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
    … …  
    256280                ?>
    257281
    258282        <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">
     283                <div class="imgedit-group-top">
     284                        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     285                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    262286                        <?php
    263287                        /* translators: Hidden accessibility text. */
    264288                        esc_html_e( 'Thumbnail Settings Help' );
    265289                        ?>
    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>
     290                        </span></button>
     291                        <div class="imgedit-help">
     292                        <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>
     293                        </div>
    269294                </div>
    270         </div>
     295                <div class="imgedit-thumbnail-preview-group">
     296                        <figure class="imgedit-thumbnail-preview">
     297                                <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" />
     298                                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     299                        </figure>
     300                        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     301                        <fieldset>
     302                                <legend><?php _e( 'Apply changes to:' ); ?></legend>
    271303
    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>
     304                                <span class="imgedit-label">
     305                                        <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     306                                        <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     307                                </span>
    276308
    277         <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    278         <fieldset>
    279                 <legend><?php _e( 'Apply changes to:' ); ?></legend>
     309                                <span class="imgedit-label">
     310                                        <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     311                                        <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     312                                </span>
     313 
     314                                <span class="imgedit-label">
     315                                        <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     316                                        <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     317                                </span>
    280318
    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;
     319                                <?php
     320                                if ( $edit_custom_sizes ) {
     321                                        if ( ! is_array( $edit_custom_sizes ) ) {
     322                                                $edit_custom_sizes = get_intermediate_image_sizes();
    304323                                        }
    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
     324                                        foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     325                                                if ( array_key_exists( $size, $meta['sizes'] ) ) {
     326                                                        if ( 'thumbnail' === $size ) {
     327                                                                continue;
     328                                                        }
     329                                                        ?>
     330                                                        <span class="imgedit-label">
     331                                                        <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 ); ?>" />
     332                                                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     333                                                        </span>
     334                                                        <?php
     335                                                }
     336                                        }
    311337                                }
    312                         }
    313                 }
    314                 ?>
    315         </fieldset>
     338                                ?>
     339                                </fieldset>
     340                        </div>
     341                </div>
    316342        </div>
     343        <?php } ?>
     344                </div>
    317345        </div>
    318346
    319         <?php } ?>
    320 
    321347        </div>
     348        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
     349        <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>
    322350
    323351        </div>
    324352        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    … …  
    508536 */
    509537function _image_get_preview_ratio( $w, $h ) {
    510538        $max = max( $w, $h );
    511         return $max > 400 ? ( 400 / $max ) : 1;
     539        return $max > 600 ? ( 600 / $max ) : 1;
    512540}
    513541
    514542/**

  • 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        }