WordPress.org
Get WordPress

Make WordPress Core

Ticket #50523: 50523.9.diff

File 50523.9.diff, 47.9 KB (added by joedolson, 3 years ago)

Refresh patch following r55859

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

    (this hunk was shorter than expected) 
    2222        _view : false,
    2323
    2424        /**
    25          * Handle crop tool clicks.
     25         * Enable crop tool.
    2626         */
    27         handleCropToolClick: function( postid, nonce, cropButton ) {
     27        toggleCropTool: function( postid, nonce, cropButton ) {
    2828                var img = $( '#image-preview-' + postid ),
    2929                        selection = this.iasapi.getSelection();
    3030
    31                 // Ensure selection is available, otherwise reset to full image.
    32                 if ( isNaN( selection.x1 ) ) {
    33                         this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
    34                         selection = this.iasapi.getSelection();
     31                imageEdit.toggleControls( cropButton );
     32                var $el = $( cropButton );
     33                var state = ( $el.attr( 'aria-expanded' ) === 'true' ) ? 'true' : 'false';
     34                // Crop tools have been closed.
     35                if ( 'false' === state ) {
     36                        // Cancel selection, but do not unset inputs.
     37                        this.iasapi.cancelSelection();
     38                        imageEdit.setDisabled($('.imgedit-crop-clear'), 0);
     39                } else {
     40                        imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     41                        // Get values from inputs to restore previous selection.
     42                        var startX = ( $( '#imgedit-start-x-' + postid ).val() ) ? $('#imgedit-start-x-' + postid).val() : 0;
     43                        var startY = ( $( '#imgedit-start-y-' + postid ).val() ) ? $('#imgedit-start-y-' + postid).val() : 0;
     44                        var width = ( $( '#imgedit-sel-width-' + postid ).val() ) ? $('#imgedit-sel-width-' + postid).val() : img.innerWidth();
     45                        var height = ( $( '#imgedit-sel-height-' + postid ).val() ) ? $('#imgedit-sel-height-' + postid).val() : img.innerHeight();
     46                        // Ensure selection is available, otherwise reset to full image.
     47                        if ( isNaN( selection.x1 ) ) {
     48                                this.setCropSelection( postid, { 'x1': startX, 'y1': startY, 'x2': width, 'y2': height, 'width': width, 'height': height } );
     49                                selection = this.iasapi.getSelection();
     50                        }
     51
     52                        // If we don't already have a selection, select the entire image.
     53                        if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
     54                                this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
     55                                this.iasapi.setOptions( { show: true } );
     56                                this.iasapi.update();
     57                        } else {
     58                                this.iasapi.setSelection( startX, startY, width, height, true );
     59                                this.iasapi.setOptions( { show: true } );
     60                                this.iasapi.update();
     61                        }
    3562                }
     63        },
    3664
    37                 // If we don't already have a selection, select the entire image.
    38                 if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
    39                         this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
    40                         this.iasapi.setOptions( { show: true } );
    41                         this.iasapi.update();
     65        /**
     66         * Handle crop tool clicks.
     67         */
     68        handleCropToolClick: function( postid, nonce, cropButton ) {
     69
     70                if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) {
     71                        this.iasapi.cancelSelection();
     72                        imageEdit.setDisabled($('.imgedit-crop-apply'), 0);
     73
     74                        $('#imgedit-sel-width-' + postid).val('');
     75                        $('#imgedit-sel-height-' + postid).val('');
     76                        $('#imgedit-start-x-' + postid).val('0');
     77                        $('#imgedit-start-y-' + postid).val('0');
     78                        $('#imgedit-selection-' + postid).val('');
    4279                } else {
    43 
    4480                        // Otherwise, perform the crop.
    4581                        imageEdit.crop( postid, nonce , cropButton );
    4682                }
    … …  
    122159                t.postid = postid;
    123160                $('#imgedit-response-' + postid).empty();
    124161
     162                $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     163                        var nonce = $( '#imgedit-nonce-' + postid ).val();
     164                        if ( e.which === 26 && e.ctrlKey ) {
     165                                imageEdit.undo( postid, nonce );
     166                        }
     167
     168                        if ( e.which === 25 && e.ctrlKey ) {
     169                                imageEdit.redo( postid, nonce );
     170                        }
     171                });
     172
    125173                $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126174                        var k = e.keyCode;
    127175
    … …  
    190238        },
    191239
    192240        /**
     241         * Shows or hides image edit input fields when enabled.
     242         *
     243         * @since 6.3.0
     244         *
     245         * @memberof imageEdit
     246         *
     247         * @param {HTMLElement} el The element to trigger the edit panel.
     248         *
     249         * @return {boolean} Always returns false.
     250         */
     251        toggleControls : function(el) {
     252                var $el = $( el );
     253                var $target = $( '#' + $el.attr( 'aria-controls' ) );
     254                $el
     255                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     256                $target
     257                        .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
     258
     259                return false;
     260        },
     261
     262        /**
    193263         * Gets the value from the image edit target.
    194264         *
    195265         * The image edit target contains the image sizes where the (possible) changes
    … …  
    405475                                }
    406476
    407477                                if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
    408                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
     478                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
    409479                                } else {
    410                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
     480                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
    411481                                }
    412482
    413483                                t.toggleEditor(postid, 0);
    … …  
    713783                var t = this,
    714784                        selW = $('#imgedit-sel-width-' + postid),
    715785                        selH = $('#imgedit-sel-height-' + postid),
     786                        selX = $('#imgedit-start-x-' + postid),
     787                        selY = $('#imgedit-start-y-' + postid),
    716788                        $image = $( image ),
    717789                        $img;
    718790
    … …  
    771843                         */
    772844                        onSelectStart: function() {
    773845                                imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
     846                                imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     847                                imageEdit.setDisabled($('.imgedit-crop-apply'), 1);
    774848                        },
    775849                        /**
    776850                         * Event triggered when the selection is ended.
    … …  
    784858                         */
    785859                        onSelectEnd: function(img, c) {
    786860                                imageEdit.setCropSelection(postid, c);
     861                                if ( ! $('#imgedit-crop > *').is(':visible') ) {
     862                                        imageEdit.toggleControls($('.imgedit-crop.button'));
     863                                }
    787864                        },
    788865
    789866                        /**
    … …  
    800877                                var sizer = imageEdit.hold.sizer;
    801878                                selW.val( imageEdit.round(c.width / sizer) );
    802879                                selH.val( imageEdit.round(c.height / sizer) );
     880                                selX.val( imageEdit.round(c.x1 / sizer) );
     881                                selY.val( imageEdit.round(c.y1 / sizer) );
    803882                        }
    804883                });
    805884        },
    … …  
    826905                        this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
    827906                        $('#imgedit-sel-width-' + postid).val('');
    828907                        $('#imgedit-sel-height-' + postid).val('');
     908                        $('#imgedit-start-x-' + postid).val('0');
     909                        $('#imgedit-start-y-' + postid).val('0');
    829910                        $('#imgedit-selection-' + postid).val('');
    830911                        return false;
    831912                }
    … …  
    10141095                // Clear the selection fields after cropping.
    10151096                $('#imgedit-sel-width-' + postid).val('');
    10161097                $('#imgedit-sel-height-' + postid).val('');
     1098                $('#imgedit-start-x-' + postid).val('0');
     1099                $('#imgedit-start-y-' + postid).val('0');
    10171100        },
    10181101
    10191102        /**
    … …  
    10971180         */
    10981181        setNumSelection : function( postid, el ) {
    10991182                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1183                        elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1184                        xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    11001185                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    11011186                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    11021187                        sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
    … …  
    11151200                        return false;
    11161201                }
    11171202
    1118                 if ( x && y && ( sel = ias.getSelection() ) ) {
     1203                if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11191204                        x2 = sel.x1 + Math.round( x * sizer );
    11201205                        y2 = sel.y1 + Math.round( y * sizer );
    1121                         x1 = sel.x1;
    1122                         y1 = sel.y1;
     1206                        x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1207                        y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11231208
    11241209                        if ( x2 > imgw ) {
    11251210                                x1 = 0;
    … …  
    12051290
    12061291                                if ( r > h ) {
    12071292                                        r = h;
     1293                                        var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' );
     1294
     1295                                        $( '#imgedit-crop-' + postid )
     1296                                                .prepend( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
     1297
     1298                                        wp.a11y.speak( errorMessage, 'assertive' );
    12081299                                        if ( n ) {
    1209                                                 $('#imgedit-crop-height-' + postid).val('');
     1300                                                $('#imgedit-crop-height-' + postid).val( '' );
    12101301                                        } else {
    1211                                                 $('#imgedit-crop-width-' + postid).val('');
     1302                                                $('#imgedit-crop-width-' + postid).val( '');
    12121303                                        }
     1304                                } else {
     1305                                        var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' );
     1306                                        if ( 'undefined' !== typeof( error ) ) {
     1307                                                error.remove();
     1308                                        }
    12131309                                }
    12141310
    12151311                                this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r );
    … …  
    12311327         *                        void when it is.
    12321328         */
    12331329        validateNumeric: function( el ) {
    1234                 if ( ! this.intval( $( el ).val() ) ) {
     1330                if ( false === this.intval( $( el ).val() ) ) {
    12351331                        $( el ).val( '' );
    12361332                        return false;
    12371333                }

  • 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}
    … …  
    11731199}
    11741200
    11751201.imgedit-group {
    1176         margin-bottom: 8px;
    1177         padding: 10px;
     1202        margin-bottom: 20px;
    11781203}
    11791204
    1180 .imgedit-settings .imgedit-original-dimensions {
     1205.image-editor .imgedit-original-dimensions {
    11811206        display: inline-block;
    11821207}
    11831208
    1184 .imgedit-settings .imgedit-scale input[type="text"],
    1185 .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1186 .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"] {
    11871212        width: 80px;
    11881213        font-size: 14px;
    11891214        padding: 0 8px;
    … …  
    11971222        color: #3c434a;
    11981223}
    11991224
    1200 .imgedit-settings .imgedit-scale-button-wrapper {
     1225.image-editor .imgedit-scale-button-wrapper {
    12011226        margin-top: 0.3077em;
    12021227        display: block;
    12031228}
    12041229
    1205 .imgedit-settings .imgedit-scale .button {
     1230.image-editor .imgedit-scale-controls .button {
    12061231        margin-bottom: 0;
    12071232}
    12081233
    … …  
    12711296                padding: 10px 0 10px 12px;
    12721297        }
    12731298
    1274         .imgedit-settings .imgedit-scale input[type="text"],
    1275         .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1276         .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"] {
    12771302                font-size: 16px;
    12781303                padding: 6px 10px;
    12791304        }
    12801305
    12811306        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1282         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1307        .wp_attachment_holder .imgedit-wrap .image-editor {
    12831308                float: none;
    12841309                width: auto;
    12851310                max-width: none;
    … …  
    12961321        }
    12971322
    12981323        .media-modal .imgedit-wrap .imgedit-panel-content,
    1299         .media-modal .imgedit-wrap .imgedit-settings {
     1324        .media-modal .imgedit-wrap .image-editor {
    13001325                position: initial !important;
    13011326        }
    13021327
    1303         .media-modal .imgedit-wrap .imgedit-settings {
     1328        .media-modal .imgedit-wrap .image-editor {
    13041329                box-sizing: border-box;
    13051330                width: 100% !important;
    13061331        }
    13071332
    1308         .imgedit-settings .imgedit-scale-button-wrapper {
     1333        .image-editor .imgedit-scale-button-wrapper {
    13091334                display: inline-block;
    13101335        }
    13111336}

  • 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        <?php echo $note; ?>
     59        <div class="imgedit-panel-content wp-clearfix" role="menu" tabindex="0" aria-label="
     60                <?php
     61                        // translators: Hidden accessibility text.
     62                        esc_attr_e( 'Image Editing Tools' );
     63                ?>
     64                ">
     65                <div class="imgedit-menu wp-clearfix">
     66                        <button role="menuitem" type="button" onclick="imageEdit.toggleCropTool( <?php echo "$post_id, '$nonce'"; ?>, this );" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     67                        <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>
    5868
    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>
    6369                        <?php
    64 
    6570                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
    6671                        if ( wp_image_editor_supports(
    6772                                array(
    … …  
    7176                        ) ) {
    7277                                $note_no_rotate = '';
    7378                                ?>
    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>
     79                                <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>
     80                                <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>
    7681                                <?php
    7782                        } else {
    7883                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    7984                                ?>
    80                                 <button type="button" class="imgedit-rleft button disabled" disabled></button>
    81                                 <button type="button" class="imgedit-rright button disabled" disabled></button>
    82                         <?php } ?>
    83 
    84                         <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
    85                         <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    86 
    87                         <br class="imgedit-undo-redo-separator" />
    88                         <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
    89                         <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
    90                         <?php echo $note_no_rotate; ?>
    91                 </div>
    92 
    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; ?>" />
    99 
    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>
    104 
    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>
    110 
    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>
    123                 </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="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" step="1" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, 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="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" step="1" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onchange="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                 <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>
    156                 </div>
    157                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
    158 
    159                 </fieldset>
    160 
    161                 </div>
    162         </div>
    163         </div>
    164 
    165         <?php if ( $can_restore ) { ?>
    166 
    167         <div class="imgedit-group">
    168         <div class="imgedit-group-top">
    169                 <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>
    170                 <div class="imgedit-help imgedit-restore">
    171                 <p>
    172                         <?php
    173                         _e( 'Discard any changes and restore the original image.' );
    174 
    175                         if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
    176                                 echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     85                                <button role="menuitem" type="button" class="imgedit-rleft button disabled" disabled></button>
     86                                <button role="menuitem" type="button" class="imgedit-rright button disabled" disabled></button>
     87                                <?php
    17788                        }
    17889                        ?>
    179                 </p>
    180                 <div class="imgedit-submit">
    181                 <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; ?> />
     90                        <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>
     91                        <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>
     92                        <?php echo $note_no_rotate; ?>
     93                </div>
     94                <div class="imgedit-submit imgedit-menu">
     95                        <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>
     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>
     97                        <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>
     98                        <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>
    18299                </div>
    183                 </div>
    184100        </div>
    185         </div>
    186101
    187         <?php } ?>
     102        <div class="imgedit-panel-content wp-clearfix">
     103                <div class="imgedit-tools">
     104                        <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
     105                        <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     106                        <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     107                        <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     108                        <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     109                        <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     110                        <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    188111
    189         <div class="imgedit-group">
    190         <div class="imgedit-group-top">
    191                 <h2><?php _e( 'Image Crop' ); ?></h2>
    192                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    193                         <?php
    194                         /* translators: Hidden accessibility text. */
    195                         esc_html_e( 'Image Crop Help' );
    196                         ?>
    197                 </span></button>
    198 
    199                 <div class="imgedit-help">
    200                 <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    201 
    202                 <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
    203                 <?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>
    204 
    205                 <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
    206                 <?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>
     112                        <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     113                        <div class="imgedit-crop-grid"></div>
     114                        <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     115                                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="" />
     116                        </div>
    207117                </div>
    208         </div>
     118                <div class="imgedit-settings">
     119                        <div class="imgedit-tool-active">
     120                                <div class="imgedit-group">
     121                                <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     122                                        <div class="imgedit-group-top">
     123                                                <h2><?php _e( 'Scale Image' ); ?></h2>
     124                                                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     125                                                <?php
     126                                                /* translators: Hidden accessibility text. */
     127                                                esc_html_e( 'Scale Image Help' );
     128                                                ?>
     129                                                </span></button>
     130                                                <div class="imgedit-help">
     131                                                <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>
     132                                                </div>
     133                                                <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     134                                                <p>
     135                                                        <?php
     136                                                        printf(
     137                                                                /* translators: %s: Image width and height in pixels. */
     138                                                                __( 'Original dimensions %s' ),
     139                                                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     140                                                        );
     141                                                        ?>
     142                                                </p>
     143                                                <?php endif; ?>
     144                                                <div class="imgedit-submit">
     145                                                <fieldset class="imgedit-scale-controls">
     146                                                        <legend><?php _e( 'New dimensions:' ); ?></legend>
     147                                                        <div class="nowrap">
     148                                                        <label for="imgedit-scale-width-<?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="number" step="1" min="0" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>"  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; ?>" />
     155                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     156                                                        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     157                                                        <input type="number" step="1" min="0" max="<?php echo isset( $meta['height'] ) ? $meta['width'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" 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; ?>" />
     158                                                        <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>
     159                                                        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
     160                                                        </div>
     161                                                </fieldset>
     162                                                </div>
     163                                        </div>
     164                                </div>
     165                        </div>
    209166
    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>
     167                <?php if ( $can_restore ) { ?>
     168                                <div class="imgedit-group">
     169                                <div class="imgedit-group-top">
     170                                        <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>
     171                                        <div class="imgedit-help imgedit-restore">
     172                                        <p>
     173                                        <?php
     174                                        _e( 'Discard any changes and restore the original image.' );
     175                                        if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     176                                                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     177                                        }
     178                                        ?>
     179                                        </p>
     180                                        <div class="imgedit-submit">
     181                                                <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; ?> />
     182                                        </div>
     183                                </div>
     184                        </div>
     185                        </div>
     186                <?php } ?>
     187                        <div class="imgedit-group">
     188                                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     189                                <div class="imgedit-group-top">
     190                                        <h2><?php _e( 'Crop Image' ); ?></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                                        _e( 'Image Crop Help' );
     195                                        ?>
     196                                        </span></button>
     197                                        <div class="imgedit-help">
     198                                                <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     199                                                <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     200                                                <?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>
    230201
    231         <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    232                 <legend><?php _e( 'Selection:' ); ?></legend>
    233                 <div class="nowrap">
    234                 <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
    235                         <?php
    236                         /* translators: Hidden accessibility text. */
    237                         _e( 'selection width' );
    238                         ?>
    239                 </label>
    240                 <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)" />
    241                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    242                 <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
    243                         <?php
    244                         /* translators: Hidden accessibility text. */
    245                         _e( 'selection height' );
    246                         ?>
    247                 </label>
    248                 <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)" />
     202                                                <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     203                                                <?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>
     204                                        </div>
     205                                </div>
     206                                <fieldset class="imgedit-crop-ratio">
     207                                        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     208                                        <div class="nowrap">
     209                                        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
     210                                        <?php
     211                                        /* translators: Hidden accessibility text. */
     212                                        _e( 'crop ratio width' );
     213                                        ?>
     214                                        </label>
     215                                        <input type="number" step="1" min="1" 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)" />
     216                                        <span class="imgedit-separator" aria-hidden="true">:</span>
     217                                        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
     218                                        <?php
     219                                        /* translators: Hidden accessibility text. */
     220                                        _e( 'crop ratio height' );
     221                                        ?>
     222                                        </label>
     223                                        <input  type="number" step="1" min="0" 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)" />
     224                                        </div>
     225                                </fieldset>
     226                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     227                                        <legend><?php _e( 'Selection:' ); ?></legend>
     228                                        <div class="nowrap">
     229                                        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
     230                                        <?php
     231                                        /* translators: Hidden accessibility text. */
     232                                        _e( 'selection width' );
     233                                        ?>
     234                                        </label>
     235                                        <input  type="number" step="1" min="0" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     236                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     237                                        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
     238                                        <?php
     239                                        /* translators: Hidden accessibility text. */
     240                                        _e( 'selection height' );
     241                                        ?>
     242                                        </label>
     243                                        <input  type="number" step="1" min="0" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     244                                        </div>
     245                                </fieldset>
     246                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     247                                        <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     248                                        <div class="nowrap">
     249                                        <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text">
     250                                        <?php
     251                                        /* translators: Hidden accessibility text. */
     252                                        _e( 'horizontal start position' );
     253                                        ?>
     254                                        </label>
     255                                        <input  type="number" step="1" min="0" 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" />
     256                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     257                                        <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
     258                                        <?php
     259                                        /* translators: Hidden accessibility text. */
     260                                        _e( 'vertical start position' );
     261                                        ?>
     262                                        </label>
     263                                        <input  type="number" step="1" min="0" 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" />
     264                                        </div>
     265                                </fieldset>
     266                                <div class="imgedit-crop-apply imgedit-menu container">
     267                                        <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>
     268                                </div>
     269                        </div>
    249270                </div>
    250         </fieldset>
    251 
    252271        </div>
    253272
    254273        <?php
    … …  
    257276                ?>
    258277
    259278        <div class="imgedit-group imgedit-applyto">
    260         <div class="imgedit-group-top">
    261                 <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    262                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     279                <div class="imgedit-group-top">
     280                        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     281                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    263282                        <?php
    264283                        /* translators: Hidden accessibility text. */
    265284                        esc_html_e( 'Thumbnail Settings Help' );
    266285                        ?>
    267                 </span></button>
    268                 <div class="imgedit-help">
    269                 <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>
     286                        </span></button>
     287                        <div class="imgedit-help">
     288                        <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>
     289                        </div>
    270290                </div>
    271         </div>
     291                <div class="imgedit-thumbnail-preview-group">
     292                        <figure class="imgedit-thumbnail-preview">
     293                                <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" />
     294                                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     295                        </figure>
     296                        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     297                        <fieldset>
     298                                <legend><?php _e( 'Apply changes to:' ); ?></legend>
    272299
    273         <figure class="imgedit-thumbnail-preview">
    274                 <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" />
    275                 <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
    276         </figure>
     300                                <span class="imgedit-label">
     301                                        <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     302                                        <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     303                                </span>
    277304
    278         <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    279         <fieldset>
    280                 <legend><?php _e( 'Apply changes to:' ); ?></legend>
     305                                <span class="imgedit-label">
     306                                        <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     307                                        <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     308                                </span>
     309 
     310                                <span class="imgedit-label">
     311                                        <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     312                                        <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     313                                </span>
    281314
    282                 <span class="imgedit-label">
    283                         <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    284                         <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
    285                 </span>
    286 
    287                 <span class="imgedit-label">
    288                         <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    289                         <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
    290                 </span>
    291 
    292                 <span class="imgedit-label">
    293                         <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    294                         <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
    295                 </span>
    296                 <?php
    297                 if ( $edit_custom_sizes ) {
    298                         if ( ! is_array( $edit_custom_sizes ) ) {
    299                                 $edit_custom_sizes = get_intermediate_image_sizes();
    300                         }
    301                         foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
    302                                 if ( array_key_exists( $size, $meta['sizes'] ) ) {
    303                                         if ( 'thumbnail' === $size ) {
    304                                                 continue;
     315                                <?php
     316                                if ( $edit_custom_sizes ) {
     317                                        if ( ! is_array( $edit_custom_sizes ) ) {
     318                                                $edit_custom_sizes = get_intermediate_image_sizes();
    305319                                        }
    306                                         ?>
    307                                         <span class="imgedit-label">
    308                                                 <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 ); ?>" />
    309                                                 <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
    310                                         </span>
    311                                         <?php
     320                                        foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     321                                                if ( array_key_exists( $size, $meta['sizes'] ) ) {
     322                                                        if ( 'thumbnail' === $size ) {
     323                                                                continue;
     324                                                        }
     325                                                        ?>
     326                                                        <span class="imgedit-label">
     327                                                        <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 ); ?>" />
     328                                                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     329                                                        </span>
     330                                                        <?php
     331                                                }
     332                                        }
    312333                                }
    313                         }
    314                 }
    315                 ?>
    316         </fieldset>
     334                                ?>
     335                                </fieldset>
     336                        </div>
     337                </div>
    317338        </div>
     339        <?php } ?>
     340                </div>
    318341        </div>
    319342
    320         <?php } ?>
    321 
    322343        </div>
     344        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
     345        <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>
    323346
    324347        </div>
    325348        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    … …  
    509532 */
    510533function _image_get_preview_ratio( $w, $h ) {
    511534        $max = max( $w, $h );
    512         return $max > 400 ? ( 400 / $max ) : 1;
     535        return $max > 600 ? ( 600 / $max ) : 1;
    513536}
    514537
    515538/**

  • 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 {
    … …  
    20792050
    20802051.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
    20812052.media-modal .imgedit-wrap .notice {
    2082         margin: 0;
    2083         margin-bottom: 16px;
     2053        margin: 0 16px;
    20842054}
    20852055
    20862056/**
    … …  
    28192789}
    28202790
    28212791@media screen and (max-width: 782px) {
     2792        .imgedit-panel-content {
     2793                grid-template-columns: auto;
     2794        }
     2795
    28222796        .attachments-browser .media-toolbar {
    28232797                height: 82px;
    28242798        }