WordPress.org
Get WordPress

Make WordPress Core

Ticket #28864: 28864.6.patch

File 28864.6.patch, 25.9 KB (added by afercia, 10 years ago)

ensure the undo button is enabled before moving 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

     
    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;
    … …  
    916927}
    917928
    918929.imgedit-menu {
     930        min-width: 300px;
    919931        margin: 0 0 12px;
    920         min-width: 300px;
     932        padding-left: 3px;
    921933}
    922934
    923 .imgedit-menu div {
     935.imgedit-menu .note-no-rotate {
     936        clear: both;
     937        margin: 0;
     938        padding: 1em 0 0;
     939}
     940
     941.image-editor .imgedit-menu .button {
    924942        float: left;
     943        -webkit-box-sizing: content-box;
     944        -moz-box-sizing: content-box;
     945        box-sizing: content-box;
    925946        width: 32px;
    926         border: 1px solid #d5d5d5;
     947        height: 32px;
     948        margin: 0 8px 0 0;
     949        padding: 0;
    927950        background: #f1f1f1;
    928         margin: 0 8px 0 0;
    929         height: 32px;
    930951        -webkit-font-smoothing: antialiased;
    931952        -moz-osx-font-smoothing: grayscale;
    932         text-align: center;
    933         line-height: 28px;
     953        line-height: 16px;
    934954        color: #777;
    935955        cursor: pointer;
    936956}
    937957
    938 .imgedit-menu div:before {
     958.imgedit-menu .button:before {
    939959        font: normal 20px/1 'dashicons';
    940960        speak: none;
    941961        vertical-align: middle;
    942962}
    943963
    944 .imgedit-menu div:hover {
     964.imgedit-menu .button:hover,
     965.imgedit-menu .button:focus {
    945966        border-color: #c1c1c1;
    946967        background-color: #eaeaea;
    947968        color: #333;
    948969}
    949970
    950 .imgedit-menu div.disabled {
     971.imgedit-menu .button.disabled {
    951972        border-color: #ccc;
    952973        background-color: #ddd;
    953974        color: #777;
    … …  
    10251046}
    10261047
    10271048#poststuff .imgedit-group-top h3 {
     1049        display: inline-block;
    10281050        padding: 0;
    10291051}
    10301052
    … …  
    10331055}
    10341056
    10351057.imgedit-applyto .imgedit-label {
    1036         padding: 2px 0 0;
     1058        padding: .5em 0 0;
    10371059        display: block;
     1060        vertical-align: bottom;
    10381061}
    10391062
    10401063.imgedit-help {
    … …  
    10421065        font-style: italic;
    10431066}
    10441067
    1045 a.imgedit-help-toggle {
    1046         text-decoration: none;
     1068/* higher specificity than buttons */
     1069.image-editor .imgedit-settings .imgedit-help-toggle,
     1070.image-editor .imgedit-settings .imgedit-help-toggle:hover,
     1071.image-editor .imgedit-settings .imgedit-help-toggle:active {
     1072        border: none;
     1073        height: auto;
     1074        padding: 0;
     1075        background: transparent;
     1076        color: #0074a2;
     1077        font-size: 20px;
     1078        line-height: 1;
     1079        cursor: pointer;
     1080        -webkit-box-shadow: none;
     1081        box-shadow: none;
    10471082}
    10481083
     1084.image-editor .imgedit-settings .imgedit-help-toggle:focus {
     1085        color: #0074a2;
     1086        -webkit-box-shadow:
     1087                0 0 0 1px #5b9dd9,
     1088                0 0 2px 1px rgba(30, 140, 190, .8);
     1089        box-shadow:
     1090                0 0 0 1px #5b9dd9,
     1091                0 0 2px 1px rgba(30, 140, 190, .8);
     1092}
     1093
    10491094.form-table td.imgedit-response {
    10501095        padding: 0;
    10511096}
    … …  
    10601105
    10611106.imgedit-wrap .nowrap {
    10621107        white-space: nowrap;
     1108        font-size: 12px;
     1109        line-height: 1.4em;
    10631110}
    10641111
    10651112span.imgedit-scale-warn {
    … …  
    10701117        vertical-align: middle;
    10711118}
    10721119
     1120.imgedit-save-target {
     1121        margin: 8px 0;
     1122}
     1123
    10731124.imgedit-group {
    10741125        margin-bottom: 8px;
    10751126        padding: 2px 10px;
    10761127}
    10771128
     1129.imgedit-settings .imgedit-scale input[type="text"],
     1130.imgedit-settings .imgedit-crop-ratio input[type="text"],
     1131.imgedit-settings .imgedit-crop-sel input[type="text"] {
     1132        width: 3.57142857em;
     1133        font-size: 14px;
     1134        padding: 3px 5px;
     1135}
     1136
     1137.imgedit-separator {
     1138        display: inline-block;
     1139        width: 0.53846153em;
     1140        text-align: center;
     1141        vertical-align: middle;
     1142        font-size: 13px;
     1143        color: #444;
     1144}
     1145
     1146.imgedit-settings .imgedit-scale .button {
     1147        margin-bottom: 0;
     1148}
     1149
    10781150audio, video {
    10791151        display: inline-block;
    10801152        max-width: 100%;
    … …  
    11191191        .media-upload-form .media-item .error {
    11201192                padding: 10px 0 10px 12px;
    11211193        }
     1194
     1195        .imgedit-settings .imgedit-scale input[type="text"],
     1196        .imgedit-settings .imgedit-crop-ratio input[type="text"],
     1197        .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1198                width: 3.75em;
     1199                font-size: 16px;
     1200                padding: 6px 10px;
     1201        }
     1202
     1203        .imgedit-applyto .imgedit-label {
     1204                vertical-align: middle;
     1205        }
    11221206}
    11231207
    11241208/**

  • 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

     
    26452645
    26462646                <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    26472647
    2648                 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2648                <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>">
    26492649                        <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>
    26502650                        <p><?php echo $image_edit_button; ?></p>
    26512651                </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                                                // ensure the undo button is enabled
     184                                                t.setDisabled( $( '#image-undo-' + postid) , true );
     185                                                // move focus to the undo button otherwise focus is lost
     186                                                $( '#image-undo-' + postid ).focus();
     187                                        }
     188                                }
     189
    172190                                parent.empty().append(img);
    173191
    174192                                // w, h are the new full size dims
    … …  
    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 the 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 the 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;
    … …  
    8692}
    8793
    8894.media-frame input:disabled,
    89 .media-frame textarea:disabled,
     95.media-frame textarea:disabled {
     96        background: rgba( 255, 255, 255, 0.5 );
     97        border-color: rgba( 222, 222, 222, 0.75 );
     98        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     99        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     100        color: rgba( 51, 51, 51, 0.5 );
     101}
     102
    90103.media-frame input[readonly],
    91104.media-frame textarea[readonly] {
    92105        background-color: #eee;
    … …  
    389402        margin: 1px;
    390403        width: 65%;
    391404        float: right;
     405        line-height: 1.35714285;
    392406}
    393407
    394408.media-sidebar .setting .value,
    … …  
    16841698.media-modal .imgedit-wrap .imgedit-settings {
    16851699        background: #f3f3f3;
    16861700        border-left: 1px solid #ddd;
    1687         padding: 0 16px 16px;
     1701        padding: 20px 16px 16px;
    16881702        position: absolute;
    16891703        top: 0;
    16901704        right: 0;
    … …  
    17121726        padding: 0;
    17131727}
    17141728
     1729.media-modal .imgedit-group-top {
     1730        margin: 0;
     1731}
     1732
    17151733.media-modal .imgedit-group-top h3 {
     1734        display: inline-block;
    17161735        text-transform: uppercase;
    17171736        font-size: 12px;
    17181737        color: #666;
    17191738        margin: 0;
    1720         margin-top: 24px;
     1739        margin-top: 4px;
    17211740}
    17221741
    17231742.media-modal .imgedit-group-top h3 a {
    … …  
    17251744        color: #666;
    17261745}
    17271746
    1728 .media-modal .imgedit-help-toggle {
    1729         margin-top: -2px;
     1747/* higher specificity */
     1748.wp-core-ui.media-modal .image-editor .imgedit-help-toggle {
     1749        margin-top: 2px;
    17301750        cursor: pointer;
    1731         color: #666;
     1751        color: #0074a2;
    17321752}
    17331753
     1754.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
     1755        margin-top: -2px;
     1756}
     1757
    17341758.media-modal .imgedit-help-toggled span.dashicons:before {
    17351759        content: '\f142';
    17361760}