WordPress.org

Make WordPress Core

Ticket #28864: 28864.9.patch

File 28864.9.patch, 30.1 KB (added by afercia, 5 years ago)
  • src/wp-admin/css/common.css

     
    274274a:focus,
    275275a:focus .media-icon img {
    276276        color: #124964;
    277     -webkit-box-shadow:
    278         0 0 0 1px #5b9dd9,
     277        -webkit-box-shadow:
     278                0 0 0 1px #5b9dd9,
    279279                0 0 2px 1px rgba(30, 140, 190, .8);
    280     box-shadow:
    281         0 0 0 1px #5b9dd9,
     280        box-shadow:
     281                0 0 0 1px #5b9dd9,
    282282                0 0 2px 1px rgba(30, 140, 190, .8);
    283283}
    284284
     
    16701670}
    16711671
    16721672.screen-options + .screen-options {
    1673     margin-top: 10px;
     1673        margin-top: 10px;
    16741674}
    16751675
    16761676.metabox-prefs .submit {
     
    29522952
    29532953.js .postbox .handlediv:focus .toggle-indicator:before {
    29542954        -webkit-box-shadow:
    2955         0 0 0 1px #5b9dd9,
     2955                0 0 0 1px #5b9dd9,
    29562956                0 0 2px 1px rgba(30, 140, 190, .8);
    2957     box-shadow:
    2958         0 0 0 1px #5b9dd9,
     2957        box-shadow:
     2958                0 0 0 1px #5b9dd9,
    29592959                0 0 2px 1px rgba(30, 140, 190, .8);
    29602960}
    29612961
  • 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
    842 .imgedit-settings p {
    843         margin: 8px 0 0;
     843.imgedit-settings p,
     844.imgedit-settings fieldset {
     845        margin: 8px 0;
    844846}
    845847
     848.imgedit-settings legend {
     849        margin-bottom: 5px;
     850}
     851
    846852.describe .imgedit-wrap .imgedit-settings {
    847853        padding: 0 5px;
    848854}
     
    853859
    854860.wp_attachment_holder .imgedit-wrap > div {
    855861        height: auto;
    856         overflow: hidden;
    857862}
    858863
    859864.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    860         padding-right: 16px;
    861         width: auto;
    862         overflow: hidden;
     865        padding: 3px 16px 0 0;
     866        float: left;
    863867}
    864868
    865869.wp_attachment_holder .imgedit-wrap .imgedit-settings {
     
    908912        color: grey;
    909913}
    910914
    911 .wp_attachment_image,
    912915.A1B1 {
    913916        overflow: hidden;
    914917}
     
    928931}
    929932
    930933.imgedit-menu {
     934        min-width: 300px;
    931935        margin: 0 0 12px;
    932         min-width: 300px;
    933936}
    934937
    935 .imgedit-menu div {
     938.imgedit-menu .note-no-rotate {
     939        clear: both;
     940        margin: 0;
     941        padding: 1em 0 0;
     942}
     943
     944.image-editor .imgedit-menu .button {
    936945        float: left;
    937946        width: 32px;
    938         border: 1px solid #d5d5d5;
     947        height: 32px;
     948        margin: 0 8px 0 0;
     949        padding: 0;
    939950        background: #f1f1f1;
    940         margin: 0 8px 0 0;
    941         height: 32px;
    942951        -webkit-font-smoothing: antialiased;
    943952        -moz-osx-font-smoothing: grayscale;
    944         text-align: center;
    945         line-height: 28px;
    946         color: #777;
    947         cursor: pointer;
     953        line-height: 16px;
     954        color: #72777c;
    948955}
    949956
    950 .imgedit-menu div:before {
     957.imgedit-menu .button:before {
    951958        font: normal 20px/1 dashicons;
    952959        speak: none;
    953960        vertical-align: middle;
    954961}
    955962
    956 .imgedit-menu div:hover {
    957         border-color: #c1c1c1;
    958         background-color: #eaeaea;
    959         color: #32373c;
    960 }
    961 
    962 .imgedit-menu div.disabled {
     963.imgedit-menu .button.disabled {
    963964        border-color: #ccc;
    964965        background-color: #ddd;
    965         color: #777;
     966        color: #72777c;
    966967        filter: alpha(opacity=50);
    967968        opacity: 0.5;
    968969        cursor: default;
     
    10281029        margin: 0 8px 0 3px;
    10291030}
    10301031
    1031 .imgedit-applyto img {
    1032         margin: 0 8px 0 0;
     1032.imgedit-thumbnail-preview {
     1033        margin: 10px 8px 0 0;
    10331034}
    10341035
     1036.imgedit-thumbnail-preview-caption {
     1037        display: block;
     1038}
     1039
    10351040#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    10361041#poststuff .imgedit-group-top h2 {
     1042        display: inline-block;
    10371043        margin: 0;
    10381044        padding: 0;
    10391045        font-size: 14px;
     
    10461052}
    10471053
    10481054.imgedit-applyto .imgedit-label {
    1049         padding: 2px 0 0;
    10501055        display: block;
     1056        padding: .5em 0 0;
    10511057}
    10521058
    10531059.imgedit-help {
     
    10551061        font-style: italic;
    10561062}
    10571063
    1058 a.imgedit-help-toggle {
    1059         text-decoration: none;
     1064/* higher specificity than buttons */
     1065.image-editor .imgedit-settings .imgedit-help-toggle,
     1066.image-editor .imgedit-settings .imgedit-help-toggle:hover,
     1067.image-editor .imgedit-settings .imgedit-help-toggle:active {
     1068        border: 1px solid transparent;
     1069        margin: -1px 0 0 -1px;
     1070        padding: 0;
     1071        background: transparent;
     1072        color: #0074a2;
     1073        font-size: 20px;
     1074        line-height: 1;
     1075        cursor: pointer;
     1076        -webkit-box-sizing: content-box;
     1077        -moz-box-sizing: content-box;
     1078        box-sizing: content-box;
     1079        -webkit-box-shadow: none;
     1080        box-shadow: none;
    10601081}
    10611082
     1083.image-editor .imgedit-settings .imgedit-help-toggle:focus {
     1084        color: #0074a2;
     1085        border-color: #5b9dd9;
     1086        outline: none;
     1087        -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1088        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1089}
     1090
    10621091.form-table td.imgedit-response {
    10631092        padding: 0;
    10641093}
     
    10731102
    10741103.imgedit-wrap .nowrap {
    10751104        white-space: nowrap;
     1105        font-size: 12px;
     1106        line-height: inherit;
    10761107}
    10771108
    10781109span.imgedit-scale-warn {
     
    10831114        vertical-align: middle;
    10841115}
    10851116
     1117.imgedit-save-target {
     1118        margin: 8px 0;
     1119}
     1120
    10861121.imgedit-group {
    10871122        margin-bottom: 8px;
    10881123        padding: 10px;
    10891124}
    10901125
     1126.imgedit-settings .imgedit-scale input[type="text"],
     1127.imgedit-settings .imgedit-crop-ratio input[type="text"],
     1128.imgedit-settings .imgedit-crop-sel input[type="text"] {
     1129        width: 50px;
     1130        font-size: 14px;
     1131        padding: 3px 5px;
     1132}
     1133
     1134.imgedit-separator {
     1135        display: inline-block;
     1136        width: 7px;
     1137        text-align: center;
     1138        vertical-align: middle;
     1139        font-size: 13px;
     1140        color: #444;
     1141}
     1142
     1143.imgedit-settings .imgedit-scale .button {
     1144        margin-bottom: 0;
     1145}
     1146
    10911147audio, video {
    10921148        display: inline-block;
    10931149        max-width: 100%;
     
    11311187        .media-upload-form .media-item .error {
    11321188                padding: 10px 0 10px 12px;
    11331189        }
     1190
     1191        .imgedit-settings .imgedit-scale input[type="text"],
     1192        .imgedit-settings .imgedit-crop-ratio input[type="text"],
     1193        .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1194                width: 60px;
     1195                font-size: 16px;
     1196                padding: 6px 10px;
     1197        }
     1198
     1199        .imgedit-applyto .imgedit-label {
     1200                vertical-align: middle;
     1201        }
    11341202}
    11351203
    11361204/**
  • src/wp-admin/includes/image-edit.php

     
    4040        }
    4141
    4242        ?>
    43         <div class="imgedit-wrap">
     43        <div class="imgedit-wrap 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
    129         <p>
     154        <figure class="imgedit-thumbnail-preview">
    130155                <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" />
    131                 <br /><?php _e('Current thumbnail'); ?>
    132         </p>
     156                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     157        </figure>
    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                 * `el` can be a single form element or a fieldset. Before #28864, the disabled state on
     17                 * some text fields  was handled targeting $('input', el). Now we need to handle the
     18                 * disabled state on buttons too so we can just target `el` regardless if it's a single
     19                 * element or a fieldset because when a fieldset is disabled, its descendants are disabled too.
     20                 */
    1521                if ( s ) {
    16                         el.removeClass('disabled');
    17                         $('input', el).removeAttr('disabled');
     22                        el.removeClass( 'disabled' ).prop( 'disabled', false );
    1823                } else {
    19                         el.addClass('disabled');
    20                         $('input', el).prop('disabled', true);
     24                        el.addClass( 'disabled' ).prop( 'disabled', true );
    2125                }
    2226        },
    2327
     
    6367        },
    6468
    6569        toggleHelp : function(el) {
    66                 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     70                var $el = $( el );
     71                $el
     72                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
     73                        .parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     74
    6775                return false;
    6876        },
    6977
     
    166174                };
    167175
    168176                img = $( '<img id="image-preview-' + postid + '" alt="" />' )
    169                         .on('load', function() {
    170                                 var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
     177                        .on( 'load', { history: data.history }, function( event ) {
     178                                var max1, max2,
     179                                        parent = $( '#imgedit-crop-' + postid ),
     180                                        t = imageEdit,
     181                                        historyObj;
    171182
     183                                if ( '' !== event.data.history ) {
     184                                        historyObj = JSON.parse( event.data.history );
     185                                        // If last executed action in history is a crop action.
     186                                        if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
     187                                                /*
     188                                                 * A crop action has completed and the crop button gets disabled
     189                                                 * ensure the undo button is enabled.
     190                                                 */
     191                                                t.setDisabled( $( '#image-undo-' + postid) , true );
     192                                                // Move focus to the undo button to avoid a focus loss.
     193                                                $( '#image-undo-' + postid ).focus();
     194                                        }
     195                                }
     196
    172197                                parent.empty().append(img);
    173198
    174199                                // w, h are the new full size dims
     
    305330                var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
    306331                        btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
    307332
    308                 btn.prop('disabled', true);
     333                /*
     334                 * Instead of disabling the button, which causes a focus loss and makes screen
     335                 * readers announce "unavailable", return if the button was already clicked.
     336                 */
     337                if ( btn.hasClass( 'button-activated' ) ) {
     338                        return;
     339                }
     340
    309341                spin.addClass( 'is-active' );
    310342
    311343                data = {
     
    318350                dfd = $.ajax({
    319351                        url:  ajaxurl,
    320352                        type: 'post',
    321                         data: data
     353                        data: data,
     354                        beforeSend: function() {
     355                                btn.addClass( 'button-activated' );
     356                        }
    322357                }).done(function( html ) {
    323358                        elem.html( html );
    324359                        head.fadeOut('fast', function(){
    325360                                elem.fadeIn('fast');
    326                                 btn.removeAttr('disabled');
     361                                btn.removeClass( 'button-activated' );
    327362                                spin.removeClass( 'is-active' );
    328363                        });
    329364                });
     
    337372                this.initCrop(postid, img, parent);
    338373                this.setCropSelection(postid, 0);
    339374                this.toggleEditor(postid, 0);
     375                // Editor is ready, move focus to the first focusable element.
     376                $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
    340377        },
    341378
    342379        initCrop : function(postid, image, parent) {
     
    429466                // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
    430467                else {
    431468                        $('#image-editor-' + postid).fadeOut('fast', function() {
    432                                 $('#media-head-' + postid).fadeIn('fast');
     469                                $( '#media-head-' + postid ).fadeIn( 'fast', function() {
     470                                        // Move focus back to the Edit Image button. Runs also when saving.
     471                                        $( '#imgedit-open-btn-' + postid ).focus();
     472                                });
    433473                                $(this).empty();
    434474                        });
    435475                }
     
    453493
    454494        addStep : function(op, postid, nonce) {
    455495                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());
     496                        history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
     497                        undone = $( '#imgedit-undone-' + postid ),
     498                        pop = t.intval( undone.val() );
    459499
    460500                while ( pop > 0 ) {
    461501                        history.pop();
     
    516556                elem.val(pop);
    517557                t.refreshEditor(postid, nonce, function() {
    518558                        var elem = $('#imgedit-history-' + postid),
    519                         history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
     559                                history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
    520560
    521561                        t.setDisabled($('#image-redo-' + postid), true);
    522562                        t.setDisabled(button, pop < history.length);
     563                        // When undo gets disabled, move focus to the redo button to avoid a focus loss.
     564                        if ( pop === history.length ) {
     565                                $( '#image-redo-' + postid ).focus();
     566                        }
    523567                });
    524568        },
    525569
     
    535579                t.refreshEditor(postid, nonce, function() {
    536580                        t.setDisabled($('#image-undo-' + postid), true);
    537581                        t.setDisabled(button, pop > 0);
     582                        // When redo gets disabled, move focus to the undo button to avoid a focus loss.
     583                        if ( 0 === pop ) {
     584                                $( '#image-undo-' + postid ).focus();
     585                        }
    538586                });
    539587        },
    540588
  • 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
     
    17341739.media-modal .imgedit-wrap .imgedit-settings {
    17351740        background: #f3f3f3;
    17361741        border-left: 1px solid #ddd;
    1737         padding: 0 16px 16px;
     1742        padding: 20px 16px 16px;
    17381743        position: absolute;
    17391744        top: 0;
    17401745        right: 0;
     
    17621767        padding: 0;
    17631768}
    17641769
     1770.media-modal .imgedit-group-top {
     1771        margin: 0;
     1772}
     1773
    17651774.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    1766 .media-modal .imgedit-group-top h2 {
     1775.media-modal .imgedit-group-top h2,
     1776.media-modal .imgedit-group-top h2 .button-link {
     1777        display: inline-block;
    17671778        text-transform: uppercase;
    17681779        font-size: 12px;
    17691780        color: #666;
    17701781        margin: 0;
    1771         margin-top: 24px;
     1782        margin-top: 3px;
    17721783}
    17731784
    17741785.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
    1775 .media-modal .imgedit-group-top h2 a {
     1786.media-modal .imgedit-group-top h2 a,
     1787.media-modal .imgedit-group-top h2 .button-link {
    17761788        text-decoration: none;
    17771789        color: #666;
    17781790}
    17791791
    1780 .media-modal .imgedit-help-toggle {
    1781         margin-top: -2px;
     1792/* higher specificity than media.css */
     1793.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
     1794.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
     1795.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
     1796        border: 1px solid transparent;
     1797        margin: 0;
     1798        padding: 0;
     1799        background: transparent;
     1800        color: #0074a2;
     1801        font-size: 20px;
     1802        line-height: 1;
    17821803        cursor: pointer;
    1783         color: #666;
     1804        -webkit-box-sizing: content-box;
     1805        -moz-box-sizing: content-box;
     1806        box-sizing: content-box;
     1807        -webkit-box-shadow: none;
     1808        box-shadow: none;
    17841809}
    17851810
     1811.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
     1812        color: #0074a2;
     1813        border-color: #5b9dd9;
     1814        outline: none;
     1815        -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1816        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1817}
     1818
     1819.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
     1820        margin-top: -3px;
     1821}
     1822
     1823.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
     1824        margin-top: -2px;
     1825}
     1826
    17861827.media-modal .imgedit-help-toggled span.dashicons:before {
    17871828        content: "\f142";
    17881829}
    17891830
    1790 .media-modal .imgedit-group img {
    1791         margin-top: 5px;
     1831.media-modal .imgedit-thumbnail-preview {
     1832        margin: 10px 8px 0 0;
    17921833}
    17931834
     1835.imgedit-thumbnail-preview-caption {
     1836        display: block;
     1837}
     1838
    17941839.media-modal .imgedit-wrap div.updated {
    17951840        margin: 0;
    17961841        margin-bottom: 16px;