WordPress.org
Get WordPress

Make WordPress Core

Ticket #47136: 47136.1.diff

File 47136.1.diff, 8.6 KB (added by sabernhardt, 4 years ago)

bugfix option: switch order of the two image editor columns, adjust spacing on mobile screens, change first focused element

  • src/js/_enqueues/lib/image-edit.js

     
    622622
    623623                this.toggleEditor(postid, 0);
    624624                // Editor is ready, move focus to the first focusable element.
    625                 $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
     625                $( '.imgedit-wrap .imgedit-menu .button' ).eq( 0 ).focus();
    626626        },
    627627
    628628        /**

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

     
    12141214                float: none;
    12151215                width: auto;
    12161216                max-width: none;
     1217                padding-bottom: 16px;
    12171218        }
    12181219}
    12191220

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

     
    4848        <div class="imgedit-wrap wp-clearfix">
    4949        <div id="imgedit-panel-<?php echo $post_id; ?>">
    5050
     51        <div class="imgedit-panel-content wp-clearfix">
     52                <?php echo $note; ?>
     53                <div class="imgedit-menu wp-clearfix">
     54                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     55                        <?php
     56
     57                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
     58                        if ( wp_image_editor_supports(
     59                                array(
     60                                        'mime_type' => get_post_mime_type( $post_id ),
     61                                        'methods'   => array( 'rotate' ),
     62                                )
     63                        ) ) {
     64                                $note_no_rotate = '';
     65                                ?>
     66                                <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
     67                                <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
     68                                <?php
     69                        } else {
     70                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
     71                                ?>
     72                                <button type="button" class="imgedit-rleft button disabled" disabled></button>
     73                                <button type="button" class="imgedit-rright button disabled" disabled></button>
     74                        <?php } ?>
     75
     76                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     77                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     78
     79                        <br class="imgedit-undo-redo-separator" />
     80                        <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><?php esc_html_e( 'Undo' ); ?></button>
     81                        <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><?php esc_html_e( 'Redo' ); ?></button>
     82                        <?php echo $note_no_rotate; ?>
     83                </div>
     84
     85                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     86                <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     87                <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     88                <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     89                <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     90                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     91
     92                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     93                <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="" />
     94                </div>
     95
     96                <div class="imgedit-submit">
     97                        <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
     98                        <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' ); ?>" />
     99                </div>
     100        </div>
     101
    51102        <div class="imgedit-settings">
    52103        <div class="imgedit-group">
    53104        <div class="imgedit-group-top">
    … …  
    195246
    196247        </div>
    197248
    198         <div class="imgedit-panel-content wp-clearfix">
    199                 <?php echo $note; ?>
    200                 <div class="imgedit-menu wp-clearfix">
    201                         <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
    202                         <?php
    203 
    204                         // On some setups GD library does not provide imagerotate() - Ticket #11536.
    205                         if ( wp_image_editor_supports(
    206                                 array(
    207                                         'mime_type' => get_post_mime_type( $post_id ),
    208                                         'methods'   => array( 'rotate' ),
    209                                 )
    210                         ) ) {
    211                                 $note_no_rotate = '';
    212                                 ?>
    213                                 <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
    214                                 <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
    215                                 <?php
    216                         } else {
    217                                 $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    218                                 ?>
    219                                 <button type="button" class="imgedit-rleft button disabled" disabled></button>
    220                                 <button type="button" class="imgedit-rright button disabled" disabled></button>
    221                         <?php } ?>
    222 
    223                         <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
    224                         <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    225 
    226                         <br class="imgedit-undo-redo-separator" />
    227                         <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><?php esc_html_e( 'Undo' ); ?></button>
    228                         <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><?php esc_html_e( 'Redo' ); ?></button>
    229                         <?php echo $note_no_rotate; ?>
    230                 </div>
    231 
    232                 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    233                 <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    234                 <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    235                 <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
    236                 <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    237                 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    238 
    239                 <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    240                 <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="" />
    241                 </div>
    242 
    243                 <div class="imgedit-submit">
    244                         <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    245                         <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' ); ?>" />
    246                 </div>
    247249        </div>
    248 
    249         </div>
    250250        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    251251        <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e( "There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor." ); ?></div>
    252252        </div>