WordPress.org
Get WordPress

Make WordPress Core

Ticket #50523: 50523.2.diff

File 50523.2.diff, 36.0 KB (added by joedolson, 4 years ago)

Work in progress patch for discussion

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

     
    190190        },
    191191
    192192        /**
     193         * Shows or hides image edit input fields when enabled.
     194         *
     195         * @since 6.1.0
     196         *
     197         * @memberof imageEdit
     198         *
     199         * @param {HTMLElement} el The element to trigger the edit panel.
     200         *
     201         * @return {boolean} Always returns false.
     202         */
     203        toggleControls : function(el) {
     204                var $el = $( el );
     205                var $target = $( '#' + $el.attr( 'aria-controls' ) );
     206                $el
     207                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     208                $target
     209                        .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
     210
     211                return false;
     212        },
     213
     214        /**
    193215         * Gets the value from the image edit target.
    194216         *
    195217         * The image edit target contains the image sizes where the (possible) changes
    … …  
    10941116         */
    10951117        setNumSelection : function( postid, el ) {
    10961118                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1119                        elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1120                        xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    10971121                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    10981122                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    10991123                        sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
    … …  
    11121136                        return false;
    11131137                }
    11141138
    1115                 if ( x && y && ( sel = ias.getSelection() ) ) {
     1139                if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11161140                        x2 = sel.x1 + Math.round( x * sizer );
    11171141                        y2 = sel.y1 + Math.round( y * sizer );
    1118                         x1 = sel.x1;
    1119                         y1 = sel.y1;
     1142                        x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1143                        y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11201144
    11211145                        if ( x2 > imgw ) {
    11221146                                x1 = 0;
    … …  
    12281252         *                        void when it is.
    12291253         */
    12301254        validateNumeric: function( el ) {
    1231                 if ( ! this.intval( $( el ).val() ) ) {
     1255                if ( false === this.intval( $( el ).val() ) ) {
    12321256                        $( el ).val( '' );
    12331257                        return false;
    12341258                }

  • 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: grid;
     898        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
     899        column-gap: 20px;
    901900}
    902901
    903 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     902.imgedit-group-controls > * {
     903        display: none;
     904}
     905
     906.imgedit-panel-active .imgedit-group-controls > * {
     907        display: block;
     908}
     909
     910.wp_attachment_holder .imgedit-wrap .image-editor {
    904911        float: right;
    905912        width: 250px;
    906913}
    907914
    908 .imgedit-settings input {
     915.image-editor input {
    909916        margin-top: 0;
    910917        vertical-align: middle;
    911918}
    … …  
    940947}
    941948
    942949.media-disabled,
    943 .imgedit-settings .disabled {
     950.image-editor .disabled {
    944951        /* WCAG 1.4.3 Text or images of text that are part of an inactive user
    945952           interface component ... have no contrast requirement. */
    946953        color: #a7aaad;
    … …  
    10091016        content: "\f165";
    10101017}
    10111018
     1019.imgedit-scale:before {
     1020        content: "\f211";
     1021}
     1022
    10121023.imgedit-rleft:before {
    10131024        content: "\f166";
    10141025}
    … …  
    10711082        margin: 0 8px 0 3px;
    10721083}
    10731084
     1085.imgedit-thumbnail-preview-group {
     1086        display: flex;
     1087        flex-wrap: wrap;
     1088        column-gap: 10px;
     1089}
     1090
    10741091.imgedit-thumbnail-preview {
    10751092        margin: 10px 8px 0 0;
    10761093}
    … …  
    11071124}
    11081125
    11091126/* 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 {
     1127.image-editor .image-editor .imgedit-help-toggle,
     1128.image-editor .image-editor .imgedit-help-toggle:hover,
     1129.image-editor .image-editor .imgedit-help-toggle:active {
    11131130        border: 1px solid transparent;
    11141131        margin: -1px 0 0 -1px;
    11151132        padding: 0;
    … …  
    11221139        box-shadow: none;
    11231140}
    11241141
    1125 .image-editor .imgedit-settings .imgedit-help-toggle:focus {
     1142.image-editor .image-editor .imgedit-help-toggle:focus {
    11261143        color: #2271b1;
    11271144        border-color: #4f94d4;
    11281145        box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
    … …  
    11691186        padding: 10px;
    11701187}
    11711188
    1172 .imgedit-settings .imgedit-original-dimensions {
     1189.image-editor .imgedit-original-dimensions {
    11731190        display: inline-block;
    11741191}
    11751192
    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"] {
     1193.image-editor .imgedit-scale-controls input[type="text"],
     1194.image-editor .imgedit-crop-ratio input[type="text"],
     1195.image-editor .imgedit-crop-sel input[type="text"] {
    11791196        width: 80px;
    11801197        font-size: 14px;
    11811198        padding: 0 8px;
    … …  
    11891206        color: #3c434a;
    11901207}
    11911208
    1192 .imgedit-settings .imgedit-scale-button-wrapper {
     1209.image-editor .imgedit-scale-button-wrapper {
    11931210        margin-top: 0.3077em;
    11941211        display: block;
    11951212}
    11961213
    1197 .imgedit-settings .imgedit-scale .button {
     1214.image-editor .imgedit-scale-controls .button {
    11981215        margin-bottom: 0;
    11991216}
    12001217
    … …  
    12501267                padding: 10px 0 10px 12px;
    12511268        }
    12521269
    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"] {
     1270        .image-editor .imgedit-scale input[type="text"],
     1271        .image-editor .imgedit-crop-ratio input[type="text"],
     1272        .image-editor .imgedit-crop-sel input[type="text"] {
    12561273                font-size: 16px;
    12571274                padding: 6px 10px;
    12581275        }
    12591276
    12601277        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1261         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1278        .wp_attachment_holder .imgedit-wrap .image-editor {
    12621279                float: none;
    12631280                width: auto;
    12641281                max-width: none;
    … …  
    12751292        }
    12761293
    12771294        .media-modal .imgedit-wrap .imgedit-panel-content,
    1278         .media-modal .imgedit-wrap .imgedit-settings {
     1295        .media-modal .imgedit-wrap .image-editor {
    12791296                position: initial !important;
    12801297        }
    12811298
    1282         .media-modal .imgedit-wrap .imgedit-settings {
     1299        .media-modal .imgedit-wrap .image-editor {
    12831300                box-sizing: border-box;
    12841301                width: 100% !important;
    12851302        }
    12861303
    1287         .imgedit-settings .imgedit-scale-button-wrapper {
     1304        .image-editor .imgedit-scale-button-wrapper {
    12881305                display: inline-block;
    12891306        }
    12901307}

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

     
    2828                die( __( 'Image data does not exist. Please re-upload the image.' ) );
    2929        }
    3030
    31         $sizer = $big > 400 ? 400 / $big : 1;
     31        $sizer = $big > 600 ? 600 / $big : 1;
    3232
    3333        $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
    3434        $can_restore  = false;
    … …  
    5555        ?>
    5656        <div class="imgedit-wrap wp-clearfix">
    5757        <div id="imgedit-panel-<?php echo $post_id; ?>">
    58 
    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 
    9358                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    9459                <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    9560                <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    … …  
    9762                <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    9863                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    9964
    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>
     65                <div class="imgedit-panel-content wp-clearfix">
     66                        <div class="imgedit-tools">
     67                                <?php echo $note; ?>
     68                                <div class="imgedit-menu wp-clearfix">
     69                                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );imageEdit.toggleControls(this);" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     70                                        <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
    10471
    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>
     72                                        <?php
    11073
    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">
     74                                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
     75                                        if ( wp_image_editor_supports(
     76                                                array(
     77                                                        'mime_type' => get_post_mime_type( $post_id ),
     78                                                        'methods'   => array( 'rotate' ),
     79                                                )
     80                                        ) ) {
     81                                                $note_no_rotate = '';
     82                                                ?>
     83                                                <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
     84                                                <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
     85                                                <?php
     86                                        } else {
     87                                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
     88                                                ?>
     89                                                <button type="button" class="imgedit-rleft button disabled" disabled></button>
     90                                                <button type="button" class="imgedit-rright button disabled" disabled></button>
     91                                        <?php } ?>
    13192
    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>
     93                                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     94                                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    14495
    145                 </div>
    146         </div>
    147         </div>
     96                                        <?php echo $note_no_rotate; ?>
     97                                </div>
    14898
    149         <?php if ( $can_restore ) { ?>
     99                                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     100                                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     101                                        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="" />
     102                                </div>
     103                        </div>
     104                        <div class="imgedit-settings">
     105                                <div class="imgedit-tool-active">
     106                                        <div class="imgedit-group">
     107                                        <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     108                                        <div class="imgedit-group-top">
     109                                                <h2><?php _e( 'Scale Image' ); ?></h2>
     110                                                <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>
     111                                                <div class="imgedit-help">
     112                                                <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>
     113                                                </div>
     114                                                <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     115                                                <p>
     116                                                        <?php
     117                                                        printf(
     118                                                                /* translators: %s: Image width and height in pixels. */
     119                                                                __( 'Original dimensions %s' ),
     120                                                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     121                                                        );
     122                                                        ?>
     123                                                </p>
     124                                                <?php endif; ?>
     125                                                <div class="imgedit-submit">
    150126
    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.' );
     127                                                <fieldset class="imgedit-scale-controls">
     128                                                        <legend><?php _e( 'New dimensions:' ); ?></legend>
     129                                                        <div class="nowrap">
     130                                                        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
     131                                                        <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; ?>" />
     132                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     133                                                        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     134                                                        <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; ?>" />
     135                                                        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     136                                                        <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>
     137                                                        </div>
     138                                                </fieldset>
    158139
    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>
     140                                                </div>
     141                                        </div>
     142                                        </div>
     143                                        </div>
    170144
    171         <?php } ?>
     145                                        <?php if ( $can_restore ) { ?>
    172146
    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>
     147                                        <div class="imgedit-group">
     148                                        <div class="imgedit-group-top">
     149                                                <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>
     150                                                <div class="imgedit-help imgedit-restore">
     151                                                <p>
     152                                                        <?php
     153                                                        _e( 'Discard any changes and restore the original image.' );
    177154
    178                 <div class="imgedit-help">
    179                 <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     155                                                        if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     156                                                                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     157                                                        }
     158                                                        ?>
     159                                                </p>
     160                                                <div class="imgedit-submit">
     161                                                <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; ?> />
     162                                                </div>
     163                                                </div>
     164                                        </div>
     165                                        </div>
    180166
    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>
     167                                        <?php } ?>
    183168
    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>
     169                                        <div class="imgedit-group">
     170                                                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     171                                                <div class="imgedit-group-top">
     172                                                        <h2><?php _e( 'Crop Image' ); ?></h2>
     173                                                        <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>
    188174
    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>
     175                                                        <div class="imgedit-help">
     176                                                        <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    199177
    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>
     178                                                        <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     179                                                        <?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>
    210180
    211         </div>
     181                                                        <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     182                                                        <?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>
     183                                                        </div>
     184                                                </div>
    212185
    213         <?php
    214         if ( $thumb && $sub_sizes ) {
    215                 $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
    216                 ?>
     186                                                <fieldset class="imgedit-crop-ratio">
     187                                                        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     188                                                        <div class="nowrap">
     189                                                        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Crop Ratio Width' ); ?></label>
     190                                                        <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)" />
     191                                                        <span class="imgedit-separator" aria-hidden="true">:</span>
     192                                                        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Crop Ratio Height' ); ?></label>
     193                                                        <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)" />
     194                                                        </div>
     195                                                </fieldset>
    217196
    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>
     197                                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     198                                                        <legend><?php _e( 'Selection:' ); ?></legend>
     199                                                        <div class="nowrap">
     200                                                        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Width' ); ?></label>
     201                                                        <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)" />
     202                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     203                                                        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Height' ); ?></label>
     204                                                        <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)" />
     205                                                        </div>
     206                                                </fieldset>
    226207
    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>
     208                                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     209                                                        <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     210                                                        <div class="nowrap">
     211                                                        <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'X Position' ); ?></label>
     212                                                        <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" />
     213                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     214                                                        <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'Y Position' ); ?></label>
     215                                                        <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" />
     216                                                        </div>
     217                                                </fieldset>
     218                                                </div>
     219                                        </div>
    231220
    232         <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    233         <fieldset>
    234                 <legend><?php _e( 'Apply changes to:' ); ?></legend>
     221                                </div>
    235222
    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>
     223                                <?php
     224                                if ( $thumb && $sub_sizes ) {
     225                                        $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 );
     226                                        ?>
    240227
    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>
     228                                <div class="imgedit-group imgedit-applyto">
     229                                <div class="imgedit-group-top">
     230                                        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     231                                        <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>
     232                                        <div class="imgedit-help">
     233                                        <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>
     234                                        </div>
     235                                </div>
     236                                <div class="imgedit-thumbnail-preview-group">
     237                                        <figure class="imgedit-thumbnail-preview">
     238                                                <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" />
     239                                                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     240                                        </figure>
    245241
    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>
     242                                        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     243                                        <fieldset>
     244                                                <legend><?php _e( 'Apply changes to:' ); ?></legend>
    273245
    274         <?php } ?>
     246                                                <span class="imgedit-label">
     247                                                        <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     248                                                        <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     249                                                </span>
    275250
    276         </div>
     251                                                <span class="imgedit-label">
     252                                                        <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     253                                                        <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     254                                                </span>
    277255
     256                                                <span class="imgedit-label">
     257                                                        <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     258                                                        <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     259                                                </span>
     260                                                <?php
     261                                                if ( $edit_custom_sizes ) {
     262                                                        if ( ! is_array( $edit_custom_sizes ) ) {
     263                                                                $edit_custom_sizes = get_intermediate_image_sizes();
     264                                                        }
     265                                                        foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     266                                                                if ( array_key_exists( $size, $meta['sizes'] ) ) {
     267                                                                        if ( 'thumbnail' === $size ) {
     268                                                                                continue;
     269                                                                        }
     270                                                                        ?>
     271                                                                        <span class="imgedit-label">
     272                                                                                <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 ); ?>" />
     273                                                                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     274                                                                        </span>
     275                                                                        <?php
     276                                                                }
     277                                                        }
     278                                                }
     279                                                ?>
     280                                        </fieldset>
     281                                        </div>
     282                                        </div>
     283                                </div>
     284
     285                                <?php } ?>
     286
     287                                <div class="imgedit-submit imgedit-menu">
     288                                        <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>
     289                                        <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>
     290                                        <button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel' ); ?></button>
     291                                        <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>
     292                                </div>
     293                        </div>
     294                </div>
     295
    278296        </div>
    279297        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    280298        <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>
    … …  
    449467 */
    450468function _image_get_preview_ratio( $w, $h ) {
    451469        $max = max( $w, $h );
    452         return $max > 400 ? ( 400 / $max ) : 1;
     470        return $max > 600 ? ( 600 / $max ) : 1;
    453471}
    454472
    455473/**

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