WordPress.org
Get WordPress

Make WordPress Core

Changeset 55919


Ignore:
Timestamp:
06/14/2023 08:40:42 PM (15 months ago)
Author:
joedolson
Message:

Media: Update admin image editor design.

Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values.

A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.

Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/.env

    r54096 r55919  
    1313
    1414# Where to run WordPress from. Valid options are 'src' and 'build'.
    15 LOCAL_DIR=src
     15LOCAL_DIR=build
    1616
    1717# The PHP version to use. Valid options are 'latest', and '{version}-fpm'.

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

    r55859 r55919  
    2323
    2424    /**
    25      * Handle crop tool clicks.
    26      */
    27     handleCropToolClick: function( postid, nonce, cropButton ) {
     25     * Enable crop tool.
     26     */
     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();
    35         }
    36 
    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();
     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);
    4239        } else {
    43 
     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            }
     62        }
     63    },
     64
     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('');
     79        } else {
    4480            // Otherwise, perform the crop.
    4581            imageEdit.crop( postid, nonce , cropButton );
    … …  
    123159        $('#imgedit-response-' + postid).empty();
    124160
     161        $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     162            var nonce = $( '#imgedit-nonce-' + postid ).val();
     163            if ( e.which === 26 && e.ctrlKey ) {
     164                imageEdit.undo( postid, nonce );
     165            }
     166
     167            if ( e.which === 25 && e.ctrlKey ) {
     168                imageEdit.redo( postid, nonce );
     169            }
     170        });
     171
    125172        $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126173            var k = e.keyCode;
    … …  
    171218
    172219    /**
     220     * Shows or hides image menu popup.
     221     *
     222     * @since 6.3.0
     223     *
     224     * @memberof imageEdit
     225     *
     226     * @param {HTMLElement} el The activated control element.
     227     *
     228     * @return {boolean} Always returns false.
     229     */
     230    togglePopup : function(el) {
     231        var $el = $( el );
     232        var $targetEl = $( el ).attr( 'aria-controls' );
     233        var $target = $( '#' + $targetEl );
     234        $el
     235            .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     236        // Open menu and set z-index to appear above image crop area if it is enabled.
     237        $target
     238            .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ).css( { 'z-index' : 200000 } );
     239        // Move focus to first item in menu.
     240        $target.find( 'button' ).first().trigger( 'focus' );
     241
     242        return false;
     243    },
     244
     245    /**
     246     * Navigate popup menu by arrow keys.
     247     *
     248     * @since 6.3.0
     249     *
     250     * @memberof imageEdit
     251     *
     252     * @param {HTMLElement} el The current element.
     253     *
     254     * @return {boolean} Always returns false.
     255     */
     256    browsePopup : function(el) {
     257        var $el = $( el );
     258        var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' );
     259        var $index = $collection.index( $el );
     260        var $prev = $index - 1;
     261        var $next = $index + 1;
     262        var $last = $collection.length;
     263        if ( $prev < 0 ) {
     264            $prev = $last - 1;
     265        }
     266        if ( $next === $last ) {
     267            $next = 0;
     268        }
     269        var $target = false;
     270        if ( event.keyCode === 40 ) {
     271            $target = $collection.get( $next );
     272        } else if ( event.keyCode === 38 ) {
     273            $target = $collection.get( $prev );
     274        }
     275        if ( $target ) {
     276            $target.focus();
     277            event.preventDefault();
     278        }
     279
     280        return false;
     281    },
     282
     283    /**
     284     * Close popup menu and reset focus on feature activation.
     285     *
     286     * @since 6.3.0
     287     *
     288     * @memberof imageEdit
     289     *
     290     * @param {HTMLElement} el The current element.
     291     *
     292     * @return {boolean} Always returns false.
     293     */
     294    closePopup : function(el) {
     295        var $parent = $(el).parent( '.imgedit-popup-menu' );
     296        var $controlledID = $parent.attr( 'id' );
     297        var $target = $( 'button[aria-controls="' + $controlledID + '"]' );
     298        $target
     299            .attr( 'aria-expanded', 'false' ).trigger( 'focus' );
     300        $parent
     301            .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' );
     302
     303        return false;
     304    },
     305
     306    /**
    173307     * Shows or hides the image edit help box.
    174308     *
    … …  
    186320            .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
    187321            .parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     322
     323        return false;
     324    },
     325
     326    /**
     327     * Shows or hides image edit input fields when enabled.
     328     *
     329     * @since 6.3.0
     330     *
     331     * @memberof imageEdit
     332     *
     333     * @param {HTMLElement} el The element to trigger the edit panel.
     334     *
     335     * @return {boolean} Always returns false.
     336     */
     337    toggleControls : function(el) {
     338        var $el = $( el );
     339        var $target = $( '#' + $el.attr( 'aria-controls' ) );
     340        $el
     341            .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     342        $target
     343            .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
    188344
    189345        return false;
    … …  
    406562
    407563                if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
    408                     $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
     564                    $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
    409565                } else {
    410                     $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
     566                    $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
    411567                }
     568                var successMessage = __( 'Image updated.' );
    412569
    413570                t.toggleEditor(postid, 0);
     571                wp.a11y.speak( successMessage, 'assertive' );
    414572            })
    415573            .on( 'error', function() {
    … …  
    714872            selW = $('#imgedit-sel-width-' + postid),
    715873            selH = $('#imgedit-sel-height-' + postid),
     874            selX = $('#imgedit-start-x-' + postid),
     875            selY = $('#imgedit-start-y-' + postid),
    716876            $image = $( image ),
    717877            $img;
    … …  
    772932            onSelectStart: function() {
    773933                imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
     934                imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     935                imageEdit.setDisabled($('.imgedit-crop-apply'), 1);
    774936            },
    775937            /**
    … …  
    785947            onSelectEnd: function(img, c) {
    786948                imageEdit.setCropSelection(postid, c);
     949                if ( ! $('#imgedit-crop > *').is(':visible') ) {
     950                    imageEdit.toggleControls($('.imgedit-crop.button'));
     951                }
    787952            },
    788953
    … …  
    801966                selW.val( imageEdit.round(c.width / sizer) );
    802967                selH.val( imageEdit.round(c.height / sizer) );
     968                selX.val( imageEdit.round(c.x1 / sizer) );
     969                selY.val( imageEdit.round(c.y1 / sizer) );
    803970            }
    804971        });
    … …  
    827994            $('#imgedit-sel-width-' + postid).val('');
    828995            $('#imgedit-sel-height-' + postid).val('');
     996            $('#imgedit-start-x-' + postid).val('0');
     997            $('#imgedit-start-y-' + postid).val('0');
    829998            $('#imgedit-selection-' + postid).val('');
    830999            return false;
    … …  
    9571126            return false;
    9581127        }
    959 
     1128        this.closePopup(t);
    9601129        this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
    9611130    },
    … …  
    9791148            return false;
    9801149        }
    981 
     1150        this.closePopup(t);
    9821151        this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
    9831152    },
    … …  
    10151184        $('#imgedit-sel-width-' + postid).val('');
    10161185        $('#imgedit-sel-height-' + postid).val('');
     1186        $('#imgedit-start-x-' + postid).val('0');
     1187        $('#imgedit-start-y-' + postid).val('0');
    10171188    },
    10181189
    … …  
    10981269    setNumSelection : function( postid, el ) {
    10991270        var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1271            elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1272            xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    11001273            x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    11011274            img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    … …  
    11161289        }
    11171290
    1118         if ( x && y && ( sel = ias.getSelection() ) ) {
     1291        if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11191292            x2 = sel.x1 + Math.round( x * sizer );
    11201293            y2 = sel.y1 + Math.round( y * sizer );
    1121             x1 = sel.x1;
    1122             y1 = sel.y1;
     1294            x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1295            y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11231296
    11241297            if ( x2 > imgw ) {
    … …  
    12061379                if ( r > h ) {
    12071380                    r = h;
     1381                    var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' );
     1382
     1383                    $( '#imgedit-crop-' + postid )
     1384                        .prepend( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
     1385
     1386                    wp.a11y.speak( errorMessage, 'assertive' );
    12081387                    if ( n ) {
    1209                         $('#imgedit-crop-height-' + postid).val('');
     1388                        $('#imgedit-crop-height-' + postid).val( '' );
    12101389                    } else {
    1211                         $('#imgedit-crop-width-' + postid).val('');
     1390                        $('#imgedit-crop-width-' + postid).val( '');
     1391                    }
     1392                } else {
     1393                    var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' );
     1394                    if ( 'undefined' !== typeof( error ) ) {
     1395                        error.remove();
    12121396                    }
    12131397                }
    … …  
    12321416     */
    12331417    validateNumeric: function( el ) {
    1234         if ( ! this.intval( $( el ).val() ) ) {
     1418        if ( false === this.intval( $( el ).val() ) ) {
    12351419            $( el ).val( '' );
    12361420            return false;

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

    r54928 r55919  
    957957             */
    958958            if (!parseInt($handles.css('width')) >= 0)
    959                 $handles.width(5).height(5);
     959                $handles.width(10).height(10);
    960960
    961961            /*

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

    r55307 r55919  
    192192.popular-tags,
    193193.feature-filter,
    194 .imgedit-group,
    195194.comment-ays {
    196195    border: 1px solid #c3c4c7;
    … …  
    205204.popular-tags,
    206205.feature-filter,
    207 .imgedit-group,
    208206.comment-ays {
    209207    background: #fff;

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

    r55859 r55919  
    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}
    … …  
    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 );
    906 }
    907 
    908 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     901.imgedit-panel-content {
     902    display: grid;
     903    grid-template-columns: 640px 1fr;
     904    gap: 20px;
     905}
     906
     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;
    … …  
    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. */
    … …  
    968985.A1B1 .spinner {
    969986    float: left;
    970 }
    971 
    972 .imgedit-menu {
    973     margin: 0 0 12px;
    974987}
    975988
    … …  
    986999    font-size: 13px;
    9871000    line-height: 2;
    988     margin: 0 8px 8px 0;
    9891001    padding: 0 10px;
    9901002}
    … …  
    10151027}
    10161028
    1017 .imgedit-rleft:before {
    1018     content: "\f166";
    1019 }
    1020 
    1021 .imgedit-rright:before {
     1029.imgedit-scale:before {
     1030    content: "\f211";
     1031}
     1032
     1033.imgedit-rotate:before {
    10221034    content: "\f167";
    1023 }
    1024 
    1025 .imgedit-flipv:before {
    1026     content: "\f168";
    1027 }
    1028 
    1029 .imgedit-fliph:before {
    1030     content: "\f169";
    10311035}
    10321036
    … …  
    10491053}
    10501054
     1055.imgedit-crop-wrap {
     1056    padding: 20px;
     1057    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);
     1058    background-position: 0 0, 10px 10px;
     1059    background-size: 20px 20px;
     1060}
     1061
     1062
    10511063.imgedit-crop {
    10521064    margin: 0 8px 0 0;
    10531065}
    10541066
    1055 .imgedit-rleft {
    1056     margin: 0 3px;
    1057 }
    1058 
    1059 .imgedit-rright {
    1060     margin: 0 8px 0 3px;
    1061 }
    1062 
    1063 .imgedit-flipv {
    1064     margin: 0 3px;
    1065 }
    1066 
    1067 .imgedit-fliph {
     1067.imgedit-rotate {
    10681068    margin: 0 8px 0 3px;
    10691069}
    … …  
    10751075.imgedit-redo {
    10761076    margin: 0 8px 0 3px;
     1077}
     1078
     1079.imgedit-thumbnail-preview-group {
     1080    display: flex;
     1081    flex-wrap: wrap;
     1082    column-gap: 10px;
    10771083}
    10781084
    … …  
    11031109}
    11041110
     1111.imgedit-popup-menu,
    11051112.imgedit-help {
    11061113    display: none;
    11071114    padding-bottom: 8px;
     1115}
     1116
     1117.imgedit-panel-tools > .imgedit-menu {
     1118    display: flex;
     1119    column-gap: 4px;
     1120    align-items: start;
     1121}
     1122
     1123.imgedit-popup-menu {
     1124    width: fit-content;
     1125    position: absolute;
     1126    left: calc( 100% + 4px );
     1127    top: -3px;
     1128}
     1129
     1130.image-editor .imgedit-menu .imgedit-popup-menu button {
     1131    display: block;
     1132    margin: 2px 0;
     1133    width: 100%;
     1134}
     1135
     1136.imgedit-rotate-menu-container {
     1137    position: relative;
    11081138}
    11091139
    … …  
    11401170}
    11411171
    1142 .imgedit-submit {
    1143     margin: 8px 0 0;
    1144 }
    1145 
    11461172.imgedit-submit-btn {
    11471173    margin-left: 20px;
    … …  
    11741200
    11751201.imgedit-group {
    1176     margin-bottom: 8px;
    1177     padding: 10px;
    1178 }
    1179 
    1180 .imgedit-settings .imgedit-original-dimensions {
     1202    margin-bottom: 20px;
     1203}
     1204
     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;
    … …  
    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}
    … …  
    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;
    … …  
    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;
    … …  
    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    }

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

    r55859 r55919  
    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 );
    … …  
    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; ?>
     58    <?php echo $note; ?>
     59    <div class="imgedit-panel-content imgedit-panel-tools wp-clearfix">
    6160        <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>
     61            <button 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>
     62            <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
     63            <div class="imgedit-rotate-menu-container">
     64                <button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" onclick="imageEdit.togglePopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
     65                <div id="imgedit-rotate-menu" class="imgedit-popup-menu">
    6366            <?php
    64 
    6567            // On some setups GD library does not provide imagerotate() - Ticket #11536.
    6668            if ( wp_image_editor_supports(
    … …  
    7274                $note_no_rotate = '';
    7375                ?>
    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                    <button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° left' ); ?></button>
     77                    <button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° right' ); ?></button>
     78                    <button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 180°' ); ?></button>
    7679                <?php
    7780            } else {
    7881                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    7982                ?>
    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" />
     83                    <button type="button" class="imgedit-rleft button disabled" disabled></button>
     84                    <button type="button" class="imgedit-rright button disabled" disabled></button>
     85                <?php
     86            }
     87            ?>
     88                    <hr />
     89                    <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     90                    <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     91                    <?php echo $note_no_rotate; ?>
     92                </div>
     93            </div>
     94        </div>
     95        <div class="imgedit-submit imgedit-menu">
    8896            <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>
    8997            <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' ); ?>" />
     98            <button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel Editing' ); ?></button>
     99            <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 Edits' ); ?></button>
    108100        </div>
    109101    </div>
    110102
    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>
     103    <div class="imgedit-panel-content wp-clearfix">
     104        <div class="imgedit-tools">
     105            <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
     106            <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     107            <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     108            <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     109            <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     110            <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     111            <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     112
     113            <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     114            <div class="imgedit-crop-grid"></div>
     115            <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     116                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="" />
     117            </div>
    123118        </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>
     119        <div class="imgedit-settings">
     120            <div class="imgedit-tool-active">
     121                <div class="imgedit-group">
     122                <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     123                    <div class="imgedit-group-top">
     124                        <h2><?php _e( 'Scale Image' ); ?></h2>
     125                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     126                        <?php
     127                        /* translators: Hidden accessibility text. */
     128                        esc_html_e( 'Scale Image Help' );
     129                        ?>
     130                        </span></button>
     131                        <div class="imgedit-help">
     132                        <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>
     133                        </div>
     134                        <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     135                        <p>
     136                            <?php
     137                            printf(
     138                                /* translators: %s: Image width and height in pixels. */
     139                                __( 'Original dimensions %s' ),
     140                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     141                            );
     142                            ?>
     143                        </p>
     144                        <?php endif; ?>
     145                        <div class="imgedit-submit">
     146                        <fieldset class="imgedit-scale-controls">
     147                            <legend><?php _e( 'New dimensions:' ); ?></legend>
     148                            <div class="nowrap">
     149                            <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
     150                            <?php
     151                            /* translators: Hidden accessibility text. */
     152                            _e( 'scale height' );
     153                            ?>
     154                            </label>
     155                            <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; ?>" />
     156                            <span class="imgedit-separator" aria-hidden="true">&times;</span>
     157                            <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     158                            <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; ?>" />
     159                            <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>
     160                            <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>
     161                            </div>
     162                        </fieldset>
     163                        </div>
     164                    </div>
     165                </div>
     166            </div>
     167
     168        <?php if ( $can_restore ) { ?>
     169                <div class="imgedit-group">
     170                <div class="imgedit-group-top">
     171                    <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>
     172                    <div class="imgedit-help imgedit-restore">
     173                    <p>
     174                    <?php
     175                    _e( 'Discard any changes and restore the original image.' );
     176                    if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     177                        echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     178                    }
     179                    ?>
     180                    </p>
     181                    <div class="imgedit-submit">
     182                        <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; ?> />
     183                    </div>
     184                </div>
     185            </div>
     186            </div>
     187        <?php } ?>
     188            <div class="imgedit-group">
     189                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     190                <div class="imgedit-group-top">
     191                    <h2><?php _e( 'Crop Image' ); ?></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                    _e( 'Image Crop Help' );
     196                    ?>
     197                    </span></button>
     198                    <div class="imgedit-help">
     199                        <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     200                        <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     201                        <?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>
     202
     203                        <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     204                        <?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>
     205                    </div>
     206                </div>
     207                <fieldset class="imgedit-crop-ratio">
     208                    <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     209                    <div class="nowrap">
     210                    <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
     211                    <?php
     212                    /* translators: Hidden accessibility text. */
     213                    _e( 'crop ratio width' );
     214                    ?>
     215                    </label>
     216                    <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)" />
     217                    <span class="imgedit-separator" aria-hidden="true">:</span>
     218                    <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
     219                    <?php
     220                    /* translators: Hidden accessibility text. */
     221                    _e( 'crop ratio height' );
     222                    ?>
     223                    </label>
     224                    <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)" />
     225                    </div>
     226                </fieldset>
     227                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     228                    <legend><?php _e( 'Selection:' ); ?></legend>
     229                    <div class="nowrap">
     230                    <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
     231                    <?php
     232                    /* translators: Hidden accessibility text. */
     233                    _e( 'selection width' );
     234                    ?>
     235                    </label>
     236                    <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)" />
     237                    <span class="imgedit-separator" aria-hidden="true">&times;</span>
     238                    <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
     239                    <?php
     240                    /* translators: Hidden accessibility text. */
     241                    _e( 'selection height' );
     242                    ?>
     243                    </label>
     244                    <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)" />
     245                    </div>
     246                </fieldset>
     247                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     248                    <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     249                    <div class="nowrap">
     250                    <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text">
     251                    <?php
     252                    /* translators: Hidden accessibility text. */
     253                    _e( 'horizontal start position' );
     254                    ?>
     255                    </label>
     256                    <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" />
     257                    <span class="imgedit-separator" aria-hidden="true">&times;</span>
     258                    <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
     259                    <?php
     260                    /* translators: Hidden accessibility text. */
     261                    _e( 'vertical start position' );
     262                    ?>
     263                    </label>
     264                    <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" />
     265                    </div>
     266                </fieldset>
     267                <div class="imgedit-crop-apply imgedit-menu container">
     268                    <button class="button-primary" 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>
     269                </div>
     270            </div>
    156271        </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.' );
    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 
    187     <?php } ?>
    188 
    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>
    207         </div>
    208     </div>
    209 
    210     <fieldset class="imgedit-crop-ratio">
    211         <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    212         <div class="nowrap">
    213         <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
    214             <?php
    215             /* translators: Hidden accessibility text. */
    216             _e( 'crop ratio width' );
    217             ?>
    218         </label>
    219         <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
    220         <span class="imgedit-separator" aria-hidden="true">:</span>
    221         <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
    222             <?php
    223             /* translators: Hidden accessibility text. */
    224             _e( 'crop ratio height' );
    225             ?>
    226         </label>
    227         <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
    228         </div>
    229     </fieldset>
    230 
    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)" />
    249         </div>
    250     </fieldset>
    251 
    252272    </div>
    253273
    … …  
    258278
    259279    <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">
     280        <div class="imgedit-group-top">
     281            <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     282            <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    263283            <?php
    264284            /* translators: Hidden accessibility text. */
    265285            esc_html_e( 'Thumbnail Settings Help' );
    266286            ?>
    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>
     287            </span></button>
     288            <div class="imgedit-help">
     289            <p><?php _e( 'You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.' ); ?></p>
     290            </div>
     291        </div>
     292        <div class="imgedit-thumbnail-preview-group">
     293            <figure class="imgedit-thumbnail-preview">
     294                <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" />
     295                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     296            </figure>
     297            <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     298            <fieldset>
     299                <legend><?php _e( 'Apply changes to:' ); ?></legend>
     300
     301                <span class="imgedit-label">
     302                    <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     303                    <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     304                </span>
     305
     306                <span class="imgedit-label">
     307                    <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     308                    <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     309                </span>
     310 
     311                <span class="imgedit-label">
     312                    <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     313                    <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     314                </span>
     315
     316                <?php
     317                if ( $edit_custom_sizes ) {
     318                    if ( ! is_array( $edit_custom_sizes ) ) {
     319                        $edit_custom_sizes = get_intermediate_image_sizes();
     320                    }
     321                    foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     322                        if ( array_key_exists( $size, $meta['sizes'] ) ) {
     323                            if ( 'thumbnail' === $size ) {
     324                                continue;
     325                            }
     326                            ?>
     327                            <span class="imgedit-label">
     328                            <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 ); ?>" />
     329                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     330                            </span>
     331                            <?php
     332                        }
     333                    }
     334                }
     335                ?>
     336                </fieldset>
     337            </div>
    270338        </div>
    271339    </div>
    272 
    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>
    277 
    278     <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    279     <fieldset>
    280         <legend><?php _e( 'Apply changes to:' ); ?></legend>
    281 
    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;
    305                     }
    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
    312                 }
    313             }
    314         }
    315         ?>
    316     </fieldset>
     340    <?php } ?>
     341        </div>
    317342    </div>
     343
    318344    </div>
    319 
    320     <?php } ?>
    321 
    322     </div>
     345    <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
     346    <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>
    323347
    324348    </div>
    … …  
    510534function _image_get_preview_ratio( $w, $h ) {
    511535    $max = max( $w, $h );
    512     return $max > 400 ? ( 400 / $max ) : 1;
     536    return $max > 600 ? ( 600 / $max ) : 1;
    513537}
    514538

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

    r55896 r55919  
    19581958.media-modal .imgedit-wrap .imgedit-panel-content {
    19591959    padding: 16px 16px 0;
    1960     position: absolute;
    1961     top: 0;
    1962     right: 282px;
    1963     bottom: 0;
    1964     left: 0;
    1965     overflow: auto;
    1966 }
    1967 
    1968 /*
    1969  * Implementation of bottom padding in overflow content differs across browsers.
    1970  * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
    1971  */
    1972 .media-modal .imgedit-wrap .imgedit-submit {
    1973     margin-bottom: 16px;
    1974 }
    1975 
    1976 .media-modal .imgedit-wrap .imgedit-settings {
    1977     background: #f6f7f7;
    1978     border-left: 1px solid #dcdcde;
    1979     padding: 20px 16px 0;
    1980     position: absolute;
    1981     top: 0;
    1982     right: 0;
    1983     bottom: 0;
    1984     width: 250px;
    1985     overflow: auto;
     1960    overflow: visible;
    19861961}
    19871962
    … …  
    19971972    background: none;
    19981973    border: none;
    1999     border-bottom: 1px solid #dcdcde;
    20001974    box-shadow: none;
    20011975    margin: 0;
     1976    padding: 0;
     1977    position: relative; /* RTL fix, #WP29352 */
     1978}
     1979
     1980.media-modal .imgedit-group.imgedit-panel-active {
    20021981    margin-bottom: 16px;
    2003     padding: 0;
    20041982    padding-bottom: 16px;
    2005     position: relative; /* RTL fix, #WP29352 */
    2006 }
    2007 
    2008 .media-modal .imgedit-group:last-of-type {
    2009     border: none;
    2010     margin: 0;
    2011     padding: 0;
    20121983}
    20131984
    … …  
    20782049.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
    20792050.media-modal .imgedit-wrap .notice {
    2080     margin: 0;
    2081     margin-bottom: 16px;
     2051    margin: 0 16px;
    20822052}
    20832053
    … …  
    28282798
    28292799@media screen and (max-width: 782px) {
     2800    .imgedit-panel-content {
     2801        grid-template-columns: auto;
     2802    }
     2803
    28302804    .media-frame-toolbar .media-toolbar {
    28312805        bottom: -54px;
Note: See TracChangeset for help on using the changeset viewer.