WordPress.org

Make WordPress Core

Ticket #28864: 28864.4.patch

File 28864.4.patch, 24.7 KB (added by afercia, 6 years ago)

handles buttons disabled state and focus

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

     
    114114        clear: both;
    115115}
    116116
     117.contain-floats:after {
     118        content: '';
     119        display: table;
     120        clear: both;
     121}
     122
    117123/* Hide visually but not from screen readers */
    118124.screen-reader-text,
    119125.screen-reader-text span,
  • src/wp-admin/css/media.css

     
    772772        line-height: 16px;
    773773}
    774774
     775.edit-attachment-frame .imgedit-settings input[type="text"] {
     776        padding: 4px 6px;
     777}
     778
    775779.edit-attachment-frame .attachment-info {
    776780        overflow: auto;
    777781        -webkit-box-sizing: border-box;
     
    837841
    838842.imgedit-wrap {
    839843        position: relative;
     844        padding-top: 10px;
    840845}
    841846
    842847.imgedit-settings p {
     
    843848        margin: 8px 0 0;
    844849}
    845850
     851.imgedit-settings fieldset {
     852        margin: 8px 0;
     853}
     854
     855.imgedit-settings legend {
     856        margin-bottom: 5px;
     857}
     858
    846859.describe .imgedit-wrap .imgedit-settings {
    847860        padding: 0 5px;
    848861}
     
    853866
    854867.wp_attachment_holder .imgedit-wrap > div {
    855868        height: auto;
    856         overflow: hidden;
    857869}
    858870
    859871.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    860         padding-right: 16px;
    861         width: auto;
    862         overflow: hidden;
     872        padding: 3px 16px 0 0;
     873        float: left;
    863874}
    864875
    865876.wp_attachment_holder .imgedit-wrap .imgedit-settings {
     
    874885
    875886.imgedit-wait {
    876887        position: absolute;
    877         top: 0;
     888        top: 10px;
    878889        background: #fff url(../images/spinner.gif) no-repeat center;
    879890        -webkit-background-size: 20px 20px;
    880891        background-size: 20px 20px;
     
    899910        overflow: hidden;
    900911}
    901912
     913.imgedit-response + .wp_attachment_image {
     914        overflow: visible;
     915}
     916
    902917.wp_attachment_image .button,
    903918.A1B1 .button {
    904919        float: left;
     
    916931}
    917932
    918933.imgedit-menu {
     934        min-width: 300px;
    919935        margin: 0 0 12px;
    920         min-width: 300px;
     936        padding-left: 3px;
    921937}
    922938
    923 .imgedit-menu div {
     939.imgedit-menu .note-no-rotate {
     940        clear: both;
     941        margin: 0;
     942        padding: 1em 0 0;
     943}
     944
     945.wp-core-ui .imgedit-menu button {
    924946        float: left;
     947        -webkit-box-sizing: content-box;
     948        -moz-box-sizing: content-box;
     949        box-sizing: content-box;
    925950        width: 32px;
    926         border: 1px solid #d5d5d5;
     951        height: 32px;
     952        margin: 0 8px 0 0;
     953        padding: 0;
    927954        background: #f1f1f1;
    928         margin: 0 8px 0 0;
    929         height: 32px;
    930955        -webkit-font-smoothing: antialiased;
    931956        -moz-osx-font-smoothing: grayscale;
    932         text-align: center;
    933         line-height: 28px;
     957        line-height: 16px;
    934958        color: #777;
    935959        cursor: pointer;
    936960}
    937961
    938 .imgedit-menu div:before {
     962.imgedit-menu button:before {
    939963        font: normal 20px/1 'dashicons';
    940964        speak: none;
    941965        vertical-align: middle;
    942966}
    943967
    944 .imgedit-menu div:hover {
     968.imgedit-menu button:hover,
     969.imgedit-menu button:focus {
    945970        border-color: #c1c1c1;
    946971        background-color: #eaeaea;
    947972        color: #333;
    948973}
    949974
    950 .imgedit-menu div.disabled {
     975.imgedit-menu button.disabled {
    951976        border-color: #ccc;
    952977        background-color: #ddd;
    953978        color: #777;
     
    10251050}
    10261051
    10271052#poststuff .imgedit-group-top h3 {
     1053        display: inline-block;
    10281054        padding: 0;
    10291055}
    10301056
     
    10331059}
    10341060
    10351061.imgedit-applyto .imgedit-label {
    1036         padding: 2px 0 0;
     1062        padding: .5em 0 0;
    10371063        display: block;
     1064        vertical-align: bottom;
    10381065}
    10391066
    10401067.imgedit-help {
     
    10421069        font-style: italic;
    10431070}
    10441071
    1045 a.imgedit-help-toggle {
    1046         text-decoration: none;
     1072/* higher specificity */
     1073.wp-core-ui .image-editor .imgedit-help-toggle {
     1074        border: none;
     1075        height: auto;
     1076        padding: 0;
     1077        background: transparent;
     1078        color: #0074a2;
     1079        font-size: 20px;
     1080        line-height: 1;
     1081        cursor: pointer;
     1082        -webkit-box-shadow: none;
     1083        box-shadow: none;
    10471084}
    10481085
    10491086.form-table td.imgedit-response {
     
    10701107        vertical-align: middle;
    10711108}
    10721109
     1110.imgedit-save-target {
     1111        margin: 8px 0;
     1112}
     1113
    10731114.imgedit-group {
    10741115        margin-bottom: 8px;
    10751116        padding: 2px 10px;
    10761117}
    10771118
     1119.imgedit-scale input[type="text"],
     1120.imgedit-crop-ratio input[type="text"],
     1121.imgedit-crop-sel input[type="text"] {
     1122        width: 3.57142857em;
     1123        line-height: 1.35714285;
     1124}
     1125
     1126.imgedit-separator {
     1127        display: inline-block;
     1128        width: 0.53846153em;
     1129        text-align: center;
     1130        vertical-align: middle;
     1131        font-size: 13px;
     1132        color: #444;
     1133}
     1134
    10781135audio, video {
    10791136        display: inline-block;
    10801137        max-width: 100%;
  • src/wp-admin/includes/image-edit.php

     
    3838
    3939        ?>
    4040        <div class="imgedit-wrap">
    41         <div id="imgedit-panel-<?php echo $post_id; ?>">
     41        <div id="imgedit-panel-<?php echo $post_id; ?>" class="contain-floats">
    4242
    4343        <div class="imgedit-settings">
    4444        <div class="imgedit-group">
    4545        <div class="imgedit-group-top">
    46                 <h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     46                <h3><?php _e( 'Scale Image' ); ?></h3>
     47                <button type="button" class="dashicons dashicons-editor-help button 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>
    4748                <div class="imgedit-help">
    4849                <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>
    4950                </div>
     
    5152                <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' &times; ' . $meta['height'] ); ?></p>
    5253                <?php endif ?>
    5354                <div class="imgedit-submit">
    54                 <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; ?>" />
    55                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
    56                 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
     55
     56                <fieldset class="imgedit-scale">
     57                <legend><?php _e( 'New dimensions:' ); ?></legend>
     58                <div class="nowrap">
     59                <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
     60                <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; ?>" />
     61                </label>
     62                <span class="imgedit-separator">&times;</span>
     63                <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
     64                <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; ?>" />
     65                </label>
     66                <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     67                <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' ); ?>" />
    5768                </div>
     69                </fieldset>
     70                </div>
    5871        </div>
    5972        </div>
    6073
     
    8194
    8295        <div class="imgedit-group">
    8396        <div class="imgedit-group-top">
    84                 <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     97                <h3><?php _e( 'Image Crop' ); ?></h3>
     98                <button type="button" class="dashicons dashicons-editor-help button 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>
    8599
    86100                <div class="imgedit-help">
    87101                <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
     
    94108                </div>
    95109        </div>
    96110
    97         <p>
    98                 <?php _e('Aspect ratio:'); ?>
    99                 <span  class="nowrap">
    100                 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
    101                 :
    102                 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
    103                 </span>
    104         </p>
     111        <fieldset class="imgedit-crop-ratio">
     112                <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     113                <div class="nowrap">
     114                <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     115                <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     116                </label>
     117                <span class="imgedit-separator">:</span>
     118                <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     119                <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     120                </label>
     121                </div>
     122        </fieldset>
    105123
    106         <p id="imgedit-crop-sel-<?php echo $post_id; ?>">
    107                 <?php _e('Selection:'); ?>
    108                 <span  class="nowrap">
    109                 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    110                 &times;
    111                 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    112                 </span>
    113         </p>
     124        <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     125                <legend><?php _e( 'Selection:' ); ?></legend>
     126                <div class="nowrap">
     127                <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     128                <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     129                </label>
     130                <span class="imgedit-separator">&times;</span>
     131                <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     132                <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     133                </label>
     134                </div>
     135        </fieldset>
    114136        </div>
    115137
    116138        <?php if ( $thumb && $sub_sizes ) {
     
    119141
    120142        <div class="imgedit-group imgedit-applyto">
    121143        <div class="imgedit-group-top">
    122                 <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     144                <h3><?php _e( 'Thumbnail Settings' ); ?></h3>
     145                <button type="button" class="dashicons dashicons-editor-help button 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>
    123146                <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>
    124147        </div>
    125148
     
    128151                <br /><?php _e('Current thumbnail'); ?>
    129152        </p>
    130153
    131         <p id="imgedit-save-target-<?php echo $post_id; ?>">
    132                 <strong><?php _e('Apply changes to:'); ?></strong><br />
     154        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     155        <fieldset>
     156                <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
    133157
    134158                <label class="imgedit-label">
    135159                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     
    142166                <label class="imgedit-label">
    143167                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    144168                <?php _e('All sizes except thumbnail'); ?></label>
    145         </p>
     169        </fieldset>
    146170        </div>
     171        </div>
    147172
    148173        <?php } ?>
    149174
    150175        </div>
    151176
    152         <div class="imgedit-panel-content">
     177        <div class="imgedit-panel-content contain-floats">
    153178                <?php echo $note; ?>
    154                 <div class="imgedit-menu">
    155                         <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
     179                <div class="imgedit-menu contain-floats">
     180                        <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
    156181
    157182                // On some setups GD library does not provide imagerotate() - Ticket #11536
    158                 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
    159                         <div class="imgedit-rleft"  onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
    160                         <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
     183                if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
     184                        $note_no_rotate = '';
     185        ?>
     186                        <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>
     187                        <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>
    161188        <?php } else {
    162                         $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
     189                        $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    163190        ?>
    164                     <div class="imgedit-rleft disabled"  title="<?php echo $note_no_rotate; ?>"></div>
    165                     <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
     191                        <button type="button" class="imgedit-rleft button disabled" disabled></button>
     192                        <button type="button" class="imgedit-rright button disabled" disabled></button>
    166193        <?php } ?>
    167194
    168                         <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
    169                         <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
     195                        <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>
     196                        <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>
    170197
    171                         <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>
    172                         <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>
    173                         <br class="clear" />
     198                        <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>
     199                        <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>
     200                        <?php echo $note_no_rotate; ?>
    174201                </div>
    175202
    176203                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     
    181208                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    182209
    183210                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    184                 <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); ?>" />
     211                <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="" />
    185212                </div>
    186213
    187214                <div class="imgedit-submit">
    188                         <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
     215                        <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    189216                        <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' ); ?>" />
    190217                </div>
    191218        </div>
     
    538565
    539566        $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
    540567
    541     if ( is_wp_error( $img ) )
    542         return false;
     568        if ( is_wp_error( $img ) )
     569                return false;
    543570
    544571        $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
    545572        if ( $changes )
  • src/wp-admin/includes/media.php

     
    26442644
    26452645                <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    26462646
    2647                 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2647                <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>">
    26482648                        <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>
    26492649                        <p><?php echo $image_edit_button; ?></p>
    26502650                </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                // see #28864
     16                // disabled state on inputs #imgedit-sel-width-' + postid and #imgedit-sel-height-' + postid
     17                // was done targeting $('input', el) now we need to handle disabled state on buttons too and
     18                // inputs are already handled by the disabled state on their fieldset $( el )
    1519                if ( s ) {
    16                         el.removeClass('disabled');
    17                         $('input', el).removeAttr('disabled');
     20                        el.removeClass( 'disabled' );
     21                        $( el ).prop( 'disabled', false );
    1822                } else {
    19                         el.addClass('disabled');
    20                         $('input', el).prop('disabled', true);
     23                        el.addClass( 'disabled' );
     24                        $( el ).prop( 'disabled', true );
    2125                }
    2226        },
    2327
     
    5660                var wait = $('#imgedit-wait-' + postid);
    5761
    5862                if ( toggle ) {
    59                         wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
     63                        wait.innerHeight( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
    6064                } else {
    6165                        wait.fadeOut('fast');
    6266                }
     
    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.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     72                $el.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
    6773                return false;
    6874        },
    6975
     
    165171                        'rand': t.intval(Math.random() * 1000000)
    166172                };
    167173
    168                 img = $('<img id="image-preview-' + postid + '" />')
    169                         .on('load', function() {
    170                                 var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
     174                img = $( '<img id="image-preview-' + postid + '" />' )
     175                        .on( 'load', { history: data.history }, function( event ) {
     176                                var max1, max2, parent = $( '#imgedit-crop-' + postid ), t = imageEdit, historyObj;
    171177
     178                                if ( '' !== event.data.history ) {
     179                                        historyObj = JSON.parse( event.data.history );
     180                                        // if last executed action in history is a crop action
     181                                        if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
     182                                                // a crop action has completed and the crop button gets disabled
     183                                                // move focus to undo button otherwise focus is lost
     184                                                $( '#image-undo-' + postid ).focus();
     185                                        }
     186                                }
     187
    172188                                parent.empty().append(img);
    173189
    174190                                // w, h are the new full size dims
     
    179195                                t.initCrop(postid, img, parent);
    180196                                t.setCropSelection(postid, 0);
    181197
     198                                // throw new Error('stopped');
     199
    182200                                if ( (typeof callback !== 'undefined') && callback !== null ) {
    183201                                        callback();
    184202                                }
     
    246264                        if ( t._view ) {
    247265                                t._view.refresh();
    248266                        }
     267                        // Restore focus on the 'Scale' button after frame is refreshed.
     268                        $( '#imgedit-scale-button' ).focus();
    249269                });
    250270        },
    251271
     
    434454                        });
    435455                }
    436456
    437 
    438457        },
    439458
    440459        notsaved : function(postid) {
     
    453472
    454473        addStep : function(op, postid, nonce) {
    455474                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());
     475                        history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
     476                        undone = $('#imgedit-undone-' + postid),
     477                        pop = t.intval(undone.val());
    459478
    460479                while ( pop > 0 ) {
    461480                        history.pop();
     
    516535                elem.val(pop);
    517536                t.refreshEditor(postid, nonce, function() {
    518537                        var elem = $('#imgedit-history-' + postid),
    519                         history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
     538                                history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
    520539
    521540                        t.setDisabled($('#image-redo-' + postid), true);
    522541                        t.setDisabled(button, pop < history.length);
     542                        // when undo gets disabled, move focus to redo button otherwise focus is lost
     543                        if ( pop === history.length ) {
     544                                $( '#image-redo-' + postid ).focus();
     545                        }
    523546                });
    524547        },
    525548
     
    535558                t.refreshEditor(postid, nonce, function() {
    536559                        t.setDisabled($('#image-undo-' + postid), true);
    537560                        t.setDisabled(button, pop > 0);
     561                        // when redo gets disabled, move focus to undo button otherwise focus is lost
     562                        if ( 0 === pop ) {
     563                                $( '#image-undo-' + postid ).focus();
     564                        }
    538565                });
    539566        },
    540567
  • src/wp-includes/css/media-views.css

     
    99
    1010.media-frame input,
    1111.media-frame select,
    12 .media-frame textarea {
     12.media-frame textarea,
     13.media-modal input {
    1314    -webkit-box-sizing: border-box;
    1415    -moz-box-sizing: border-box;
    1516    box-sizing: border-box;
     
    2122        font-size: 12px;
    2223}
    2324
     25.media-modal legend,
     26.media-modal label {
     27        font-size: 13px;
     28}
     29
    2430.media-frame input,
    2531.media-frame textarea {
    2632        padding: 6px 8px;
     
    389395        margin: 1px;
    390396        width: 65%;
    391397        float: right;
     398        line-height: 1.35714285;
    392399}
    393400
    394401.media-sidebar .setting .value,
     
    16841691.media-modal .imgedit-wrap .imgedit-settings {
    16851692        background: #f3f3f3;
    16861693        border-left: 1px solid #ddd;
    1687         padding: 0 16px 16px;
     1694        padding: 20px 16px 16px;
    16881695        position: absolute;
    16891696        top: 0;
    16901697        right: 0;
     
    17121719        padding: 0;
    17131720}
    17141721
     1722.media-modal .imgedit-group-top {
     1723        margin: 0;
     1724}
     1725
    17151726.media-modal .imgedit-group-top h3 {
     1727        display: inline-block;
    17161728        text-transform: uppercase;
    17171729        font-size: 12px;
    17181730        color: #666;
    17191731        margin: 0;
    1720         margin-top: 24px;
     1732        margin-top: 4px;
    17211733}
    17221734
    17231735.media-modal .imgedit-group-top h3 a {
     
    17251737        color: #666;
    17261738}
    17271739
    1728 .media-modal .imgedit-help-toggle {
    1729         margin-top: -2px;
     1740/* higher specificity */
     1741.wp-core-ui.media-modal .image-editor .imgedit-help-toggle {
     1742        margin-top: 2px;
    17301743        cursor: pointer;
    17311744        color: #666;
    17321745}
    17331746
     1747.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
     1748        margin-top: -2px;
     1749}
     1750
    17341751.media-modal .imgedit-help-toggled span.dashicons:before {
    17351752        content: '\f142';
    17361753}