WordPress.org
Get WordPress

Make WordPress Core

Ticket #28864: 28864.7.patch

File 28864.7.patch, 28.7 KB (added by afercia, 9 years ago)

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

     
    267267a:focus,
    268268a:focus .media-icon img {
    269269        color: #124964;
    270     -webkit-box-shadow:
    271         0 0 0 1px #5b9dd9,
     270        -webkit-box-shadow:
     271                0 0 0 1px #5b9dd9,
    272272                0 0 2px 1px rgba(30, 140, 190, .8);
    273     box-shadow:
    274         0 0 0 1px #5b9dd9,
     273        box-shadow:
     274                0 0 0 1px #5b9dd9,
    275275                0 0 2px 1px rgba(30, 140, 190, .8);
    276276}
    277277
    … …  
    16591659}
    16601660
    16611661.screen-options + .screen-options {
    1662     margin-top: 10px;
     1662        margin-top: 10px;
    16631663}
    16641664
    16651665.metabox-prefs .submit {
    … …  
    20612061}
    20622062
    20632063/* contain floats */
     2064.wp-clearfix:after,
    20642065.nav-tab-wrapper:after {
    20652066        content: "";
    20662067        display: table;
    … …  
    29342935
    29352936.js .postbox .handlediv:focus .toggle-indicator:before {
    29362937        -webkit-box-shadow:
    2937         0 0 0 1px #5b9dd9,
     2938                0 0 0 1px #5b9dd9,
    29382939                0 0 2px 1px rgba(30, 140, 190, .8);
    2939     box-shadow:
    2940         0 0 0 1px #5b9dd9,
     2940        box-shadow:
     2941                0 0 0 1px #5b9dd9,
    29412942                0 0 2px 1px rgba(30, 140, 190, .8);
    29422943}
    29432944

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

     
    640640.edit-attachment-frame .edit-media-header .left,
    641641.edit-attachment-frame .edit-media-header .right {
    642642        cursor: pointer;
    643         color: #777;
     643        color: #72777c;
    644644        background-color: transparent;
    645645        height: 50px;
    646646        width: 50px;
    … …  
    650650        border: 0;
    651651        border-left: 1px solid #ddd;
    652652        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    653     transition: color .1s ease-in-out, background .1s ease-in-out;
     653        transition: color .1s ease-in-out, background .1s ease-in-out;
    654654}
    655655
    656656.upload-php .media-modal-close {
    … …  
    837837
    838838.imgedit-wrap {
    839839        position: relative;
     840        padding-top: 10px;
    840841}
    841842
    842843.imgedit-settings p {
    843         margin: 8px 0 0;
     844        margin: 8px 0;
    844845}
    845846
     847.imgedit-settings fieldset {
     848        margin: 8px 0;
     849}
     850
     851.imgedit-settings legend {
     852        margin-bottom: 5px;
     853}
     854
    846855.describe .imgedit-wrap .imgedit-settings {
    847856        padding: 0 5px;
    848857}
    … …  
    853862
    854863.wp_attachment_holder .imgedit-wrap > div {
    855864        height: auto;
    856         overflow: hidden;
    857865}
    858866
    859867.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    860         padding-right: 16px;
    861         width: auto;
    862         overflow: hidden;
     868        padding: 3px 16px 0 0;
     869        float: left;
    863870}
    864871
    865872.wp_attachment_holder .imgedit-wrap .imgedit-settings {
    … …  
    874881
    875882.imgedit-wait {
    876883        position: absolute;
    877         top: 0;
     884        top: 10px;
    878885        background: #fff url(../images/spinner.gif) no-repeat center;
    879886        -webkit-background-size: 20px 20px;
    880887        background-size: 20px 20px;
    … …  
    899906        overflow: hidden;
    900907}
    901908
     909.imgedit-response + .wp_attachment_image {
     910        overflow: visible;
     911}
     912
    902913.wp_attachment_image .button,
    903914.A1B1 .button {
    904915        float: left;
    … …  
    914925}
    915926
    916927.imgedit-menu {
     928        min-width: 300px;
    917929        margin: 0 0 12px;
    918         min-width: 300px;
     930        padding-left: 3px;
    919931}
    920932
    921 .imgedit-menu div {
     933.imgedit-menu .note-no-rotate {
     934        clear: both;
     935        margin: 0;
     936        padding: 1em 0 0;
     937}
     938
     939.image-editor .imgedit-menu .button {
    922940        float: left;
    923941        width: 32px;
    924         border: 1px solid #d5d5d5;
     942        height: 32px;
     943        margin: 0 8px 0 0;
     944        padding: 0;
    925945        background: #f1f1f1;
    926         margin: 0 8px 0 0;
    927         height: 32px;
    928946        -webkit-font-smoothing: antialiased;
    929947        -moz-osx-font-smoothing: grayscale;
    930         text-align: center;
    931         line-height: 28px;
    932         color: #777;
    933         cursor: pointer;
     948        line-height: 16px;
     949        color: #72777c;
    934950}
    935951
    936 .imgedit-menu div:before {
     952.imgedit-menu .button:before {
    937953        font: normal 20px/1 dashicons;
    938954        speak: none;
    939955        vertical-align: middle;
    940956}
    941957
    942 .imgedit-menu div:hover {
    943         border-color: #c1c1c1;
    944         background-color: #eaeaea;
    945         color: #32373c;
    946 }
    947 
    948 .imgedit-menu div.disabled {
     958.imgedit-menu .button.disabled {
    949959        border-color: #ccc;
    950960        background-color: #ddd;
    951         color: #777;
     961        color: #72777c;
    952962        filter: alpha(opacity=50);
    953963        opacity: 0.5;
    954964        cursor: default;
    … …  
    10201030
    10211031#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    10221032#poststuff .imgedit-group-top h2 {
     1033        display: inline-block;
    10231034        margin: 0;
    10241035        padding: 0;
    10251036        font-size: 14px;
    … …  
    10321043}
    10331044
    10341045.imgedit-applyto .imgedit-label {
    1035         padding: 2px 0 0;
    10361046        display: block;
     1047        padding: .5em 0 0;
    10371048}
    10381049
    10391050.imgedit-help {
    … …  
    10411052        font-style: italic;
    10421053}
    10431054
    1044 a.imgedit-help-toggle {
    1045         text-decoration: none;
     1055/* higher specificity than buttons */
     1056.image-editor .imgedit-settings .imgedit-help-toggle,
     1057.image-editor .imgedit-settings .imgedit-help-toggle:hover,
     1058.image-editor .imgedit-settings .imgedit-help-toggle:active {
     1059        border: 1px solid transparent;
     1060        margin: -1px 0 0 -1px;
     1061        padding: 0;
     1062        background: transparent;
     1063        color: #0074a2;
     1064        font-size: 20px;
     1065        line-height: 1;
     1066        cursor: pointer;
     1067        -webkit-box-sizing: content-box;
     1068        -moz-box-sizing: content-box;
     1069        box-sizing: content-box;
     1070        -webkit-box-shadow: none;
     1071        box-shadow: none;
    10461072}
    10471073
     1074.image-editor .imgedit-settings .imgedit-help-toggle:focus {
     1075        color: #0074a2;
     1076        border-color: #5b9dd9;
     1077        outline: none;
     1078        -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1079        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1080}
     1081
    10481082.form-table td.imgedit-response {
    10491083        padding: 0;
    10501084}
    … …  
    10591093
    10601094.imgedit-wrap .nowrap {
    10611095        white-space: nowrap;
     1096        font-size: 12px;
     1097        line-height: inherit;
    10621098}
    10631099
    10641100span.imgedit-scale-warn {
    … …  
    10691105        vertical-align: middle;
    10701106}
    10711107
     1108.imgedit-save-target {
     1109        margin: 8px 0;
     1110}
     1111
    10721112.imgedit-group {
    10731113        margin-bottom: 8px;
    10741114        padding: 10px;
    10751115}
    10761116
     1117.imgedit-settings .imgedit-scale input[type="text"],
     1118.imgedit-settings .imgedit-crop-ratio input[type="text"],
     1119.imgedit-settings .imgedit-crop-sel input[type="text"] {
     1120        width: 3.57142857em;
     1121        font-size: 14px;
     1122        padding: 3px 5px;
     1123}
     1124
     1125.imgedit-separator {
     1126        display: inline-block;
     1127        width: 0.53846153em;
     1128        text-align: center;
     1129        vertical-align: middle;
     1130        font-size: 13px;
     1131        color: #444;
     1132}
     1133
     1134.imgedit-settings .imgedit-scale .button {
     1135        margin-bottom: 0;
     1136}
     1137
    10771138audio, video {
    10781139        display: inline-block;
    10791140        max-width: 100%;
    … …  
    11171178        .media-upload-form .media-item .error {
    11181179                padding: 10px 0 10px 12px;
    11191180        }
     1181
     1182        .imgedit-settings .imgedit-scale input[type="text"],
     1183        .imgedit-settings .imgedit-crop-ratio input[type="text"],
     1184        .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1185                width: 3.75em;
     1186                font-size: 16px;
     1187                padding: 6px 10px;
     1188        }
     1189
     1190        .imgedit-applyto .imgedit-label {
     1191                vertical-align: middle;
     1192        }
    11201193}
    11211194
    11221195/**

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

     
    4040        }
    4141
    4242        ?>
    43         <div class="imgedit-wrap">
     43        <div class="imgedit-wrap" class="wp-clearfix">
    4444        <div id="imgedit-panel-<?php echo $post_id; ?>">
    4545
    4646        <div class="imgedit-settings">
    4747        <div class="imgedit-group">
    4848        <div class="imgedit-group-top">
    49                 <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
     49                <h2><?php _e( 'Scale Image' ); ?></h2>
     50                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
    5051                <div class="imgedit-help">
    5152                <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>
    5253                </div>
    … …  
    5455                <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' &times; ' . $meta['height'] ); ?></p>
    5556                <?php endif ?>
    5657                <div class="imgedit-submit">
    57                 <span class="nowrap"><input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" style="width:4em;" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> &times; <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" style="width:4em;" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    58                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
    59                 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
     58
     59                <fieldset class="imgedit-scale">
     60                <legend><?php _e( 'New dimensions:' ); ?></legend>
     61                <div class="nowrap">
     62                <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
     63                <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     64                </label>
     65                <span class="imgedit-separator">&times;</span>
     66                <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
     67                <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     68                </label>
     69                <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     70                <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' ); ?>" />
     71                </div>
     72                </fieldset>
     73
    6074                </div>
    6175        </div>
    6276        </div>
    … …  
    6579
    6680        <div class="imgedit-group">
    6781        <div class="imgedit-group-top">
    68                 <h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
     82                <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
    6983                <div class="imgedit-help">
    7084                <p><?php _e('Discard any changes and restore the original image.');
    7185
    … …  
    8498
    8599        <div class="imgedit-group">
    86100        <div class="imgedit-group-top">
    87                 <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
     101                <h2><?php _e( 'Image Crop' ); ?></h2>
     102                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
    88103
    89104                <div class="imgedit-help">
    90105                <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
    … …  
    97112                </div>
    98113        </div>
    99114
    100         <p>
    101                 <?php _e('Aspect ratio:'); ?>
    102                 <span  class="nowrap">
    103                 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
    104                 :
    105                 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
    106                 </span>
    107         </p>
     115        <fieldset class="imgedit-crop-ratio">
     116                <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     117                <div class="nowrap">
     118                <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     119                <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     120                </label>
     121                <span class="imgedit-separator">:</span>
     122                <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     123                <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     124                </label>
     125                </div>
     126        </fieldset>
    108127
    109         <p id="imgedit-crop-sel-<?php echo $post_id; ?>">
    110                 <?php _e('Selection:'); ?>
    111                 <span  class="nowrap">
    112                 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    113                 &times;
    114                 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    115                 </span>
    116         </p>
     128        <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     129                <legend><?php _e( 'Selection:' ); ?></legend>
     130                <div class="nowrap">
     131                <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     132                <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     133                </label>
     134                <span class="imgedit-separator">&times;</span>
     135                <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     136                <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     137                </label>
     138                </div>
     139        </fieldset>
     140
    117141        </div>
    118142
    119143        <?php if ( $thumb && $sub_sizes ) {
    … …  
    122146
    123147        <div class="imgedit-group imgedit-applyto">
    124148        <div class="imgedit-group-top">
    125                 <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
     149                <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     150                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
    126151                <p class="imgedit-help"><?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>
    127152        </div>
    128153
    … …  
    131156                <br /><?php _e('Current thumbnail'); ?>
    132157        </p>
    133158
    134         <p id="imgedit-save-target-<?php echo $post_id; ?>">
    135                 <strong><?php _e('Apply changes to:'); ?></strong><br />
     159        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     160        <fieldset>
     161                <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
    136162
    137163                <label class="imgedit-label">
    138164                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    … …  
    145171                <label class="imgedit-label">
    146172                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    147173                <?php _e('All sizes except thumbnail'); ?></label>
    148         </p>
     174        </fieldset>
    149175        </div>
     176        </div>
    150177
    151178        <?php } ?>
    152179
    153180        </div>
    154181
    155         <div class="imgedit-panel-content">
     182        <div class="imgedit-panel-content wp-clearfix">
    156183                <?php echo $note; ?>
    157                 <div class="imgedit-menu">
    158                         <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
     184                <div class="imgedit-menu wp-clearfix">
     185                        <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php
    159186
    160187                // On some setups GD library does not provide imagerotate() - Ticket #11536
    161                 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
    162                         <div class="imgedit-rleft"  onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
    163                         <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
     188                if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
     189                        $note_no_rotate = '';
     190        ?>
     191                        <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
     192                        <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
    164193        <?php } else {
    165                         $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
     194                        $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    166195        ?>
    167                     <div class="imgedit-rleft disabled"  title="<?php echo $note_no_rotate; ?>"></div>
    168                     <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
     196                        <button type="button" class="imgedit-rleft button disabled" disabled></button>
     197                        <button type="button" class="imgedit-rright button disabled" disabled></button>
    169198        <?php } ?>
    170199
    171                         <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
    172                         <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
     200                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
     201                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
    173202
    174                         <div id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo disabled" title="<?php esc_attr_e( 'Undo' ); ?>"></div>
    175                         <div id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo disabled" title="<?php esc_attr_e( 'Redo' ); ?>"></div>
    176                         <br class="clear" />
     203                        <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><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
     204                        <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><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
     205                        <?php echo $note_no_rotate; ?>
    177206                </div>
    178207
    179208                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    … …  
    184213                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    185214
    186215                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    187                 <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="<?php esc_attr_e( 'Image preview' ); ?>" />
     216                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="" />
    188217                </div>
    189218
    190219                <div class="imgedit-submit">
    191                         <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
     220                        <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    192221                        <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' ); ?>" />
    193222                </div>
    194223        </div>
    … …  
    562591
    563592        $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
    564593
    565     if ( is_wp_error( $img ) )
    566         return false;
     594        if ( is_wp_error( $img ) ) {
     595                return false;
     596        }
    567597
    568598        $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
    569599        if ( $changes )

  • src/wp-admin/includes/media.php

     
    27012701        $alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
    27022702
    27032703        $att_url = wp_get_attachment_url( $post->ID ); ?>
    2704         <div class="wp_attachment_holder">
     2704        <div class="wp_attachment_holder wp-clearfix">
    27052705        <?php
    27062706        if ( wp_attachment_is_image( $post->ID ) ) :
    27072707                $image_edit_button = '';
    … …  
    27132713
    27142714                <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    27152715
    2716                 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2716                <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>">
    27172717                        <p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
    27182718                        <p><?php echo $image_edit_button; ?></p>
    27192719                </div>

  • src/wp-admin/js/image-edit.js

     
    1111                return f | 0;
    1212        },
    1313
    14         setDisabled : function(el, s) {
     14        setDisabled : function( el, s ) {
     15                /*
     16                 * Disabled state on inputs #imgedit-sel-width-' + postid and #imgedit-sel-height-' + postid
     17                 * was done targeting $('input', el). After #28864 we need to handle disabled state on buttons
     18                 * too and all inputs can be handled by the disabled state on their fieldset $( el ).
     19                 */
    1520                if ( s ) {
    16                         el.removeClass('disabled');
    17                         $('input', el).removeAttr('disabled');
     21                        el.removeClass( 'disabled' );
     22                        $( el ).prop( 'disabled', false );
    1823                } else {
    19                         el.addClass('disabled');
    20                         $('input', el).prop('disabled', true);
     24                        el.addClass( 'disabled' );
     25                        $( el ).prop( 'disabled', true );
    2126                }
    2227        },
    2328
    … …  
    5661                var wait = $('#imgedit-wait-' + postid);
    5762
    5863                if ( toggle ) {
    59                         wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
     64                        wait.innerHeight( $( '#imgedit-panel-' + postid ).height() ).fadeIn( 'fast' );
    6065                } else {
    6166                        wait.fadeOut('fast');
    6267                }
    … …  
    6368        },
    6469
    6570        toggleHelp : function(el) {
    66                 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     71                var $el = $( el );
     72                $el.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     73                $el.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
    6774                return false;
    6875        },
    6976
    … …  
    166173                };
    167174
    168175                img = $( '<img id="image-preview-' + postid + '" alt="" />' )
    169                         .on('load', function() {
    170                                 var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
     176                        .on( 'load', { history: data.history }, function( event ) {
     177                                var max1, max2, parent = $( '#imgedit-crop-' + postid ), t = imageEdit, historyObj;
    171178
     179                                if ( '' !== event.data.history ) {
     180                                        historyObj = JSON.parse( event.data.history );
     181                                        // If last executed action in history is a crop action.
     182                                        if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
     183                                                /*
     184                                                 * A crop action has completed and the crop button gets disabled
     185                                                 * ensure the undo button is enabled.
     186                                                 */
     187                                                t.setDisabled( $( '#image-undo-' + postid) , true );
     188                                                // Move focus to the undo button to avoid a focus loss.
     189                                                $( '#image-undo-' + postid ).focus();
     190                                        }
     191                                }
     192
    172193                                parent.empty().append(img);
    173194
    174195                                // w, h are the new full size dims
    … …  
    337358                this.initCrop(postid, img, parent);
    338359                this.setCropSelection(postid, 0);
    339360                this.toggleEditor(postid, 0);
     361                // Editor is ready, move focus to the first focusable element.
     362                $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
    340363        },
    341364
    342365        initCrop : function(postid, image, parent) {
    … …  
    453476
    454477        addStep : function(op, postid, nonce) {
    455478                var t = this, elem = $('#imgedit-history-' + postid),
    456                 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
    457                 undone = $('#imgedit-undone-' + postid),
    458                 pop = t.intval(undone.val());
     479                        history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
     480                        undone = $( '#imgedit-undone-' + postid ),
     481                        pop = t.intval( undone.val() );
    459482
    460483                while ( pop > 0 ) {
    461484                        history.pop();
    … …  
    516539                elem.val(pop);
    517540                t.refreshEditor(postid, nonce, function() {
    518541                        var elem = $('#imgedit-history-' + postid),
    519                         history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
     542                                history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
    520543
    521544                        t.setDisabled($('#image-redo-' + postid), true);
    522545                        t.setDisabled(button, pop < history.length);
     546                        // When undo gets disabled, move focus to the redo button to avoid a focus loss.
     547                        if ( pop === history.length ) {
     548                                $( '#image-redo-' + postid ).focus();
     549                        }
    523550                });
    524551        },
    525552
    … …  
    535562                t.refreshEditor(postid, nonce, function() {
    536563                        t.setDisabled($('#image-undo-' + postid), true);
    537564                        t.setDisabled(button, pop > 0);
     565                        // When redo gets disabled, move focus to the undo button to avoid a focus loss.
     566                        if ( 0 === pop ) {
     567                                $( '#image-undo-' + postid ).focus();
     568                        }
    538569                });
    539570        },
    540571

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

     
    2222        -webkit-overflow-scrolling: touch;
    2323}
    2424
     25.media-modal legend,
     26.media-modal label {
     27        font-size: 13px;
     28}
     29
    2530.media-frame input,
    2631.media-frame textarea {
    2732        padding: 6px 8px;
    … …  
    110115}
    111116
    112117.media-frame :-moz-placeholder {
    113    color: #a9a9a9;
     118        color: #a9a9a9;
    114119}
    115120
    116121.media-frame .hidden {
    … …  
    394399        color: #666;
    395400}
    396401
    397 .compat-item label span  {
     402.compat-item label span {
    398403        text-align: right;
    399404}
    400405
    … …  
    422427        margin: 1px;
    423428        width: 65%;
    424429        float: right;
     430        line-height: 1.35714285;
    425431}
    426432
    427433.media-sidebar .setting .value,
    … …  
    17411747.media-modal .imgedit-wrap .imgedit-settings {
    17421748        background: #f3f3f3;
    17431749        border-left: 1px solid #ddd;
    1744         padding: 0 16px 16px;
     1750        padding: 20px 16px 16px;
    17451751        position: absolute;
    17461752        top: 0;
    17471753        right: 0;
    … …  
    17691775        padding: 0;
    17701776}
    17711777
     1778.media-modal .imgedit-group-top {
     1779        margin: 0;
     1780}
     1781
    17721782.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    1773 .media-modal .imgedit-group-top h2 {
     1783.media-modal .imgedit-group-top h2,
     1784.media-modal .imgedit-group-top h2 .button-link {
     1785        display: inline-block;
    17741786        text-transform: uppercase;
    17751787        font-size: 12px;
    17761788        color: #666;
    17771789        margin: 0;
    1778         margin-top: 24px;
     1790        margin-top: 3px;
    17791791}
    17801792
    17811793.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
    1782 .media-modal .imgedit-group-top h2 a {
     1794.media-modal .imgedit-group-top h2 a,
     1795.media-modal .imgedit-group-top h2 .button-link {
    17831796        text-decoration: none;
    17841797        color: #666;
    17851798}
    17861799
    1787 .media-modal .imgedit-help-toggle {
    1788         margin-top: -2px;
     1800/* higher specificity than media.css */
     1801.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
     1802.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
     1803.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
     1804        border: 1px solid transparent;
     1805        margin: 0;
     1806        padding: 0;
     1807        background: transparent;
     1808        color: #0074a2;
     1809        font-size: 20px;
     1810        line-height: 1;
    17891811        cursor: pointer;
    1790         color: #666;
     1812        -webkit-box-sizing: content-box;
     1813        -moz-box-sizing: content-box;
     1814        box-sizing: content-box;
     1815        -webkit-box-shadow: none;
     1816        box-shadow: none;
    17911817}
    17921818
     1819.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
     1820        color: #0074a2;
     1821        border-color: #5b9dd9;
     1822        outline: none;
     1823        -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1824        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1825}
     1826
     1827.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
     1828        margin-top: -3px;
     1829}
     1830
     1831.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
     1832        margin-top: -2px;
     1833}
     1834
    17931835.media-modal .imgedit-help-toggled span.dashicons:before {
    17941836        content: "\f142";
    17951837}