WordPress.org

Make WordPress Core

Ticket #28864: 28864.2.patch

File 28864.2.patch, 20.0 KB (added by afercia, 6 years ago)

Handle focus after Scale and Restore

  • 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;
     
    843847        margin: 8px 0 0;
    844848}
    845849
     850.imgedit-settings fieldset {
     851        margin: 8px 0;
     852}
     853
     854.imgedit-settings legend {
     855        margin-bottom: 5px;
     856}
     857
    846858.describe .imgedit-wrap .imgedit-settings {
    847859        padding: 0 5px;
    848860}
     
    853865
    854866.wp_attachment_holder .imgedit-wrap > div {
    855867        height: auto;
    856         overflow: hidden;
    857868}
    858869
    859870.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    860         padding-right: 16px;
    861         width: auto;
    862         overflow: hidden;
     871        padding: 5px 16px 0 0;
     872        float: left;
    863873}
    864874
    865875.wp_attachment_holder .imgedit-wrap .imgedit-settings {
     
    899909        overflow: hidden;
    900910}
    901911
     912.imgedit-response + .wp_attachment_image {
     913        overflow: visible;
     914}
     915
    902916.wp_attachment_image .button,
    903917.A1B1 .button {
    904918        float: left;
     
    920934        min-width: 300px;
    921935}
    922936
    923 .imgedit-menu div {
     937.wp-core-ui .imgedit-menu button {
    924938        float: left;
     939        -webkit-box-sizing: content-box;
     940        -moz-box-sizing: content-box;
     941        box-sizing: content-box;
    925942        width: 32px;
    926         border: 1px solid #d5d5d5;
     943        height: 32px;
     944        margin: 0 8px 0 0;
     945        padding: 0;
    927946        background: #f1f1f1;
    928         margin: 0 8px 0 0;
    929         height: 32px;
    930947        -webkit-font-smoothing: antialiased;
    931948        -moz-osx-font-smoothing: grayscale;
    932         text-align: center;
    933         line-height: 28px;
     949        line-height: 16px;
    934950        color: #777;
    935951        cursor: pointer;
    936952}
    937953
    938 .imgedit-menu div:before {
     954.imgedit-menu button:before {
    939955        font: normal 20px/1 'dashicons';
    940956        speak: none;
    941957        vertical-align: middle;
    942958}
    943959
    944 .imgedit-menu div:hover {
     960.imgedit-menu button:hover,
     961.imgedit-menu button:focus {
    945962        border-color: #c1c1c1;
    946963        background-color: #eaeaea;
    947964        color: #333;
    948965}
    949966
    950 .imgedit-menu div.disabled {
     967.imgedit-menu button.disabled {
    951968        border-color: #ccc;
    952969        background-color: #ddd;
    953970        color: #777;
     
    10251042}
    10261043
    10271044#poststuff .imgedit-group-top h3 {
     1045        display: inline-block;
    10281046        padding: 0;
    10291047}
    10301048
     
    10331051}
    10341052
    10351053.imgedit-applyto .imgedit-label {
    1036         padding: 2px 0 0;
     1054        padding: .5em 0 0;
    10371055        display: block;
     1056        vertical-align: bottom;
    10381057}
    10391058
    10401059.imgedit-help {
     
    10421061        font-style: italic;
    10431062}
    10441063
    1045 a.imgedit-help-toggle {
    1046         text-decoration: none;
     1064.wp-core-ui .imgedit-help-toggle {
     1065        -webkit-box-shadow: none;
     1066        box-shadow: none;
    10471067}
     1068/* higher specificity */
     1069.wp-core-ui .image-editor .imgedit-help-toggle {
     1070        border: none;
     1071        height: auto;
     1072        padding: 0;
     1073        background: transparent;
     1074        color: #0074a2;
     1075        font-size: 20px;
     1076        line-height: 1;
     1077        cursor: pointer;
     1078}
    10481079
    10491080.form-table td.imgedit-response {
    10501081        padding: 0;
     
    10701101        vertical-align: middle;
    10711102}
    10721103
     1104.imgedit-save-target {
     1105        margin: 8px 0;
     1106}
     1107
    10731108.imgedit-group {
    10741109        margin-bottom: 8px;
    10751110        padding: 2px 10px;
    10761111}
    10771112
     1113.imgedit-scale input[type="text"],
     1114.imgedit-crop-ratio input[type="text"],
     1115.imgedit-crop-sel input[type="text"] {
     1116        width: 3.57142857em;
     1117}
     1118
     1119.media-modal .imgedit-scale input[type="text"],
     1120.media-modal .imgedit-crop-ratio input[type="text"],
     1121.media-modal .imgedit-crop-sel input[type="text"] {
     1122        width: 3.5em;
     1123        padding: 5px;
     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"><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
    158183                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>
     184                        <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>
     185                        <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>
    161186        <?php } else {
    162187                        $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
    163188        ?>
    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>
     189                        <button type="button" class="imgedit-rleft button disabled" title="<?php echo $note_no_rotate; ?>" disabled></button>
     190                        <button type="button" class="imgedit-rright button disabled" title="<?php echo $note_no_rotate; ?>" disabled></button>
    166191        <?php } ?>
    167192
    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>
     193                        <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>
     194                        <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>
    170195
    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" />
     196                        <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
     197                        <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
    174198                </div>
    175199
    176200                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     
    181205                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    182206
    183207                <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); ?>" />
     208                <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="" />
    185209                </div>
    186210
    187211                <div class="imgedit-submit">
     
    538562
    539563        $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
    540564
    541     if ( is_wp_error( $img ) )
    542         return false;
     565        if ( is_wp_error( $img ) )
     566                return false;
    543567
    544568        $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
    545569        if ( $changes )
  • src/wp-admin/includes/media.php

     
    26532653
    26542654                <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    26552655
    2656                 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2656                <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>">
    26572657                        <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>
    26582658                        <p><?php echo $image_edit_button; ?></p>
    26592659                </div>
  • src/wp-admin/js/image-edit.js

     
    6363        },
    6464
    6565        toggleHelp : function(el) {
    66                 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     66                var $el = $( el );
     67                $el.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     68                $el.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
    6769                return false;
    6870        },
    6971
     
    246248                        if ( t._view ) {
    247249                                t._view.refresh();
    248250                        }
     251                        // Restore focus on the 'Scale' button after frame is refreshed.
     252                        $( '#imgedit-scale-button' ).focus();
    249253                });
    250254        },
    251255
  • 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[type="radio"] {
    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;
     
    16761682.media-modal .imgedit-wrap .imgedit-settings {
    16771683        background: #f3f3f3;
    16781684        border-left: 1px solid #ddd;
    1679         padding: 0 16px 16px;
     1685        padding: 20px 16px 16px;
    16801686        position: absolute;
    16811687        top: 0;
    16821688        right: 0;
     
    17041710        padding: 0;
    17051711}
    17061712
     1713.media-modal .imgedit-group-top {
     1714        margin: 0;
     1715}
     1716
    17071717.media-modal .imgedit-group-top h3 {
     1718        display: inline-block;
    17081719        text-transform: uppercase;
    17091720        font-size: 12px;
    17101721        color: #666;
    17111722        margin: 0;
    1712         margin-top: 24px;
     1723        margin-top: 4px;
    17131724}
    17141725
    17151726.media-modal .imgedit-group-top h3 a {
     
    17171728        color: #666;
    17181729}
    17191730
    1720 .media-modal .imgedit-help-toggle {
    1721         margin-top: -2px;
     1731/* higher specificity */
     1732.wp-core-ui.media-modal .image-editor .imgedit-help-toggle {
     1733        margin-top: 2px;
    17221734        cursor: pointer;
    17231735        color: #666;
    17241736}
    17251737
     1738.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
     1739        margin-top: -2px;
     1740}
     1741
    17261742.media-modal .imgedit-help-toggled span.dashicons:before {
    17271743        content: '\f142';
    17281744}