WordPress.org
Get WordPress

Make WordPress Core

Ticket #50523: 50523.3.diff

File 50523.3.diff, 39.4 KB (added by joedolson, 3 years ago)

Updated work in progress

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

     
    122122                t.postid = postid;
    123123                $('#imgedit-response-' + postid).empty();
    124124
     125                $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     126                        var nonce = $( '#imgedit-nonce-' + postid ).val();
     127                        if ( e.which === 26 && e.ctrlKey ) {
     128                                imageEdit.undo( postid, nonce );
     129                        }
     130
     131                        if ( e.which === 25 && e.ctrlKey ) {
     132                                imageEdit.redo( postid, nonce );
     133                        }
     134                });
     135
    125136                $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126137                        var k = e.keyCode;
    127138
    … …  
    190201        },
    191202
    192203        /**
     204         * Shows or hides image edit input fields when enabled.
     205         *
     206         * @since 6.1.0
     207         *
     208         * @memberof imageEdit
     209         *
     210         * @param {HTMLElement} el The element to trigger the edit panel.
     211         *
     212         * @return {boolean} Always returns false.
     213         */
     214        toggleControls : function(el) {
     215                var $el = $( el );
     216                var $target = $( '#' + $el.attr( 'aria-controls' ) );
     217                $el
     218                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     219                $target
     220                        .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
     221
     222                return false;
     223        },
     224
     225        /**
    193226         * Gets the value from the image edit target.
    194227         *
    195228         * The image edit target contains the image sizes where the (possible) changes
    … …  
    402435                                }
    403436
    404437                                if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
    405                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
     438                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
    406439                                } else {
    407                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
     440                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
    408441                                }
    409442
    410443                                t.toggleEditor(postid, 0);
    … …  
    710743                var t = this,
    711744                        selW = $('#imgedit-sel-width-' + postid),
    712745                        selH = $('#imgedit-sel-height-' + postid),
     746                        selX = $('#imgedit-start-x-' + postid),
     747                        selY = $('#imgedit-start-y-' + postid),
    713748                        $image = $( image ),
    714749                        $img;
    715750
    … …  
    781816                         */
    782817                        onSelectEnd: function(img, c) {
    783818                                imageEdit.setCropSelection(postid, c);
     819                                if ( ! $('#imgedit-crop > *').is(":visible") ) {
     820                                        imageEdit.toggleControls($('.imgedit-crop.button'));
     821                                }
    784822                        },
    785823
    786824                        /**
    … …  
    797835                                var sizer = imageEdit.hold.sizer;
    798836                                selW.val( imageEdit.round(c.width / sizer) );
    799837                                selH.val( imageEdit.round(c.height / sizer) );
     838                                selX.val( imageEdit.round(c.x1 / sizer) );
     839                                selY.val( imageEdit.round(c.y1 / sizer) );
    800840                        }
    801841                });
    802842        },
    … …  
    823863                        this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
    824864                        $('#imgedit-sel-width-' + postid).val('');
    825865                        $('#imgedit-sel-height-' + postid).val('');
     866                        $('#imgedit-start-x-' + postid).val('0');
     867                        $('#imgedit-start-y-' + postid).val('0');
    826868                        $('#imgedit-selection-' + postid).val('');
    827869                        return false;
    828870                }
    … …  
    10111053                // Clear the selection fields after cropping.
    10121054                $('#imgedit-sel-width-' + postid).val('');
    10131055                $('#imgedit-sel-height-' + postid).val('');
     1056                $('#imgedit-start-x-' + postid).val('0');
     1057                $('#imgedit-start-y-' + postid).val('0');
    10141058        },
    10151059
    10161060        /**
    … …  
    10941138         */
    10951139        setNumSelection : function( postid, el ) {
    10961140                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1141                        elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1142                        xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    10971143                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    10981144                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    10991145                        sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
    … …  
    11121158                        return false;
    11131159                }
    11141160
    1115                 if ( x && y && ( sel = ias.getSelection() ) ) {
     1161                if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11161162                        x2 = sel.x1 + Math.round( x * sizer );
    11171163                        y2 = sel.y1 + Math.round( y * sizer );
    1118                         x1 = sel.x1;
    1119                         y1 = sel.y1;
     1164                        x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1165                        y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11201166
    11211167                        if ( x2 > imgw ) {
    11221168                                x1 = 0;
    … …  
    12281274         *                        void when it is.
    12291275         */
    12301276        validateNumeric: function( el ) {
    1231                 if ( ! this.intval( $( el ).val() ) ) {
     1277                if ( false === this.intval( $( el ).val() ) ) {
    12321278                        $( el ).val( '' );
    12331279                        return false;
    12341280                }

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

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

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

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

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

     
    872872        padding-top: 10px;
    873873}
    874874
    875 .imgedit-settings p,
    876 .imgedit-settings fieldset {
     875.image-editor p,
     876.image-editor fieldset {
    877877        margin: 8px 0;
    878878}
    879879
    880 .imgedit-settings legend {
     880.image-editor legend {
    881881        margin-bottom: 5px;
    882882}
    883883
    884 .describe .imgedit-wrap .imgedit-settings {
     884.describe .imgedit-wrap .image-editor {
    885885        padding: 0 5px;
    886886}
    887887
    … …  
    893893        height: auto;
    894894}
    895895
    896 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    897         float: left;
    898         padding: 3px 16px 0 0;
    899         min-width: 400px;
    900         max-width: calc( 100% - 266px );
     896.imgedit-panel-content {
     897        display: flex;
     898        flex-wrap: wrap;
     899        column-gap: 20px;
    901900}
    902901
    903 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     902.imgedit-settings {
     903        max-width: 400px; /* Prevent reflow when help info is expanded. */
     904}
     905
     906.imgedit-group-controls > * {
     907        display: none;
     908}
     909
     910.imgedit-panel-active .imgedit-group-controls > * {
     911        display: block;
     912}
     913
     914.wp_attachment_holder .imgedit-wrap .image-editor {
    904915        float: right;
    905916        width: 250px;
    906917}
    907918
    908 .imgedit-settings input {
     919.image-editor input {
    909920        margin-top: 0;
    910921        vertical-align: middle;
    911922}
    … …  
    940951}
    941952
    942953.media-disabled,
    943 .imgedit-settings .disabled {
     954.image-editor .disabled {
    944955        /* WCAG 1.4.3 Text or images of text that are part of an inactive user
    945956           interface component ... have no contrast requirement. */
    946957        color: #a7aaad;
    … …  
    10091020        content: "\f165";
    10101021}
    10111022
     1023.imgedit-scale:before {
     1024        content: "\f211";
     1025}
     1026
    10121027.imgedit-rleft:before {
    10131028        content: "\f166";
    10141029}
    … …  
    10711086        margin: 0 8px 0 3px;
    10721087}
    10731088
     1089.imgedit-thumbnail-preview-group {
     1090        display: flex;
     1091        flex-wrap: wrap;
     1092        column-gap: 10px;
     1093}
     1094
    10741095.imgedit-thumbnail-preview {
    10751096        margin: 10px 8px 0 0;
    10761097}
    … …  
    11071128}
    11081129
    11091130/* higher specificity than buttons */
    1110 .image-editor .imgedit-settings .imgedit-help-toggle,
    1111 .image-editor .imgedit-settings .imgedit-help-toggle:hover,
    1112 .image-editor .imgedit-settings .imgedit-help-toggle:active {
     1131.image-editor .image-editor .imgedit-help-toggle,
     1132.image-editor .image-editor .imgedit-help-toggle:hover,
     1133.image-editor .image-editor .imgedit-help-toggle:active {
    11131134        border: 1px solid transparent;
    11141135        margin: -1px 0 0 -1px;
    11151136        padding: 0;
    … …  
    11221143        box-shadow: none;
    11231144}
    11241145
    1125 .image-editor .imgedit-settings .imgedit-help-toggle:focus {
     1146.image-editor .image-editor .imgedit-help-toggle:focus {
    11261147        color: #2271b1;
    11271148        border-color: #4f94d4;
    11281149        box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
    … …  
    11691190        padding: 10px;
    11701191}
    11711192
    1172 .imgedit-settings .imgedit-original-dimensions {
     1193.image-editor .imgedit-original-dimensions {
    11731194        display: inline-block;
    11741195}
    11751196
    1176 .imgedit-settings .imgedit-scale input[type="text"],
    1177 .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1178 .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1197.image-editor .imgedit-scale-controls input[type="text"],
     1198.image-editor .imgedit-crop-ratio input[type="text"],
     1199.image-editor .imgedit-crop-sel input[type="text"] {
    11791200        width: 80px;
    11801201        font-size: 14px;
    11811202        padding: 0 8px;
    … …  
    11891210        color: #3c434a;
    11901211}
    11911212
    1192 .imgedit-settings .imgedit-scale-button-wrapper {
     1213.image-editor .imgedit-scale-button-wrapper {
    11931214        margin-top: 0.3077em;
    11941215        display: block;
    11951216}
    11961217
    1197 .imgedit-settings .imgedit-scale .button {
     1218.image-editor .imgedit-scale-controls .button {
    11981219        margin-bottom: 0;
    11991220}
    12001221
    … …  
    12501271                padding: 10px 0 10px 12px;
    12511272        }
    12521273
    1253         .imgedit-settings .imgedit-scale input[type="text"],
    1254         .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1255         .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1274        .image-editor .imgedit-scale input[type="text"],
     1275        .image-editor .imgedit-crop-ratio input[type="text"],
     1276        .image-editor .imgedit-crop-sel input[type="text"] {
    12561277                font-size: 16px;
    12571278                padding: 6px 10px;
    12581279        }
    12591280
    12601281        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1261         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1282        .wp_attachment_holder .imgedit-wrap .image-editor {
    12621283                float: none;
    12631284                width: auto;
    12641285                max-width: none;
    … …  
    12751296        }
    12761297
    12771298        .media-modal .imgedit-wrap .imgedit-panel-content,
    1278         .media-modal .imgedit-wrap .imgedit-settings {
     1299        .media-modal .imgedit-wrap .image-editor {
    12791300                position: initial !important;
    12801301        }
    12811302
    1282         .media-modal .imgedit-wrap .imgedit-settings {
     1303        .media-modal .imgedit-wrap .image-editor {
    12831304                box-sizing: border-box;
    12841305                width: 100% !important;
    12851306        }
    12861307
    1287         .imgedit-settings .imgedit-scale-button-wrapper {
     1308        .image-editor .imgedit-scale-button-wrapper {
    12881309                display: inline-block;
    12891310        }
    12901311}

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

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

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

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