WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
06/14/2023 08:40:42 PM (3 years ago)
Author:
joedolson
Message:

Media: Update admin image editor design.

Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values.

A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.

Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r55859 r55919  
    2929    }
    3030
    31     $sizer = $big > 400 ? 400 / $big : 1;
     31    $sizer = $big > 600 ? 600 / $big : 1;
    3232
    3333    $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
    … …  
    5656    <div class="imgedit-wrap wp-clearfix">
    5757    <div id="imgedit-panel-<?php echo $post_id; ?>">
    58 
    59     <div class="imgedit-panel-content wp-clearfix">
    60         <?php echo $note; ?>
     58    <?php echo $note; ?>
     59    <div class="imgedit-panel-content imgedit-panel-tools wp-clearfix">
    6160        <div class="imgedit-menu wp-clearfix">
    62             <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     61            <button type="button" onclick="imageEdit.toggleCropTool( <?php echo "$post_id, '$nonce'"; ?>, this );" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     62            <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
     63            <div class="imgedit-rotate-menu-container">
     64                <button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" onclick="imageEdit.togglePopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
     65                <div id="imgedit-rotate-menu" class="imgedit-popup-menu">
    6366            <?php
    64 
    6567            // On some setups GD library does not provide imagerotate() - Ticket #11536.
    6668            if ( wp_image_editor_supports(
    … …  
    7274                $note_no_rotate = '';
    7375                ?>
    74                 <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
    75                 <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
     76                    <button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° left' ); ?></button>
     77                    <button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° right' ); ?></button>
     78                    <button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 180°' ); ?></button>
    7679                <?php
    7780            } else {
    7881                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    7982                ?>
    80                 <button type="button" class="imgedit-rleft button disabled" disabled></button>
    81                 <button type="button" class="imgedit-rright button disabled" disabled></button>
    82             <?php } ?>
    83 
    84             <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
    85             <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    86 
    87             <br class="imgedit-undo-redo-separator" />
     83                    <button type="button" class="imgedit-rleft button disabled" disabled></button>
     84                    <button type="button" class="imgedit-rright button disabled" disabled></button>
     85                <?php
     86            }
     87            ?>
     88                    <hr />
     89                    <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     90                    <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     91                    <?php echo $note_no_rotate; ?>
     92                </div>
     93            </div>
     94        </div>
     95        <div class="imgedit-submit imgedit-menu">
    8896            <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>
    8997            <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>
    90             <?php echo $note_no_rotate; ?>
    91         </div>
    92 
    93         <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    94         <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    95         <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    96         <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
    97         <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    98         <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    99 
    100         <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    101         <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
    102             src="<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
    103         </div>
    104 
    105         <div class="imgedit-submit">
    106             <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    107             <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' ); ?>" />
     98            <button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel Editing' ); ?></button>
     99            <button type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn"><?php esc_html_e( 'Save Edits' ); ?></button>
    108100        </div>
    109101    </div>
    110102
    111     <div class="imgedit-settings">
    112     <div class="imgedit-group">
    113     <div class="imgedit-group-top">
    114         <h2><?php _e( 'Scale Image' ); ?></h2>
    115         <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    116             <?php
    117             /* translators: Hidden accessibility text. */
    118             esc_html_e( 'Scale Image Help' );
    119             ?>
    120         </span></button>
    121         <div class="imgedit-help">
    122         <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>
     103    <div class="imgedit-panel-content wp-clearfix">
     104        <div class="imgedit-tools">
     105            <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
     106            <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     107            <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     108            <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     109            <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     110            <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     111            <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     112
     113            <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     114            <div class="imgedit-crop-grid"></div>
     115            <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     116                src="<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
     117            </div>
    123118        </div>
    124         <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
    125         <p>
    126             <?php
    127             printf(
    128                 /* translators: %s: Image width and height in pixels. */
    129                 __( 'Original dimensions %s' ),
    130                 '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
    131             );
    132             ?>
    133         </p>
    134         <?php endif; ?>
    135         <div class="imgedit-submit">
    136 
    137         <fieldset class="imgedit-scale">
    138         <legend><?php _e( 'New dimensions:' ); ?></legend>
    139         <div class="nowrap">
    140         <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
    141             <?php
    142             /* translators: Hidden accessibility text. */
    143             _e( 'scale width' );
    144             ?>
    145         </label>
    146         <input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" step="1" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    147         <span class="imgedit-separator" aria-hidden="true">&times;</span>
    148         <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
    149             <?php
    150             /* translators: Hidden accessibility text. */
    151             _e( 'scale height' );
    152             ?>
    153         </label>
    154         <input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" step="1" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    155         <div class="imgedit-scale-button-wrapper"><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' ); ?>" /></div>
     119        <div class="imgedit-settings">
     120            <div class="imgedit-tool-active">
     121                <div class="imgedit-group">
     122                <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     123                    <div class="imgedit-group-top">
     124                        <h2><?php _e( 'Scale Image' ); ?></h2>
     125                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     126                        <?php
     127                        /* translators: Hidden accessibility text. */
     128                        esc_html_e( 'Scale Image Help' );
     129                        ?>
     130                        </span></button>
     131                        <div class="imgedit-help">
     132                        <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>
     133                        </div>
     134                        <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     135                        <p>
     136                            <?php
     137                            printf(
     138                                /* translators: %s: Image width and height in pixels. */
     139                                __( 'Original dimensions %s' ),
     140                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     141                            );
     142                            ?>
     143                        </p>
     144                        <?php endif; ?>
     145                        <div class="imgedit-submit">
     146                        <fieldset class="imgedit-scale-controls">
     147                            <legend><?php _e( 'New dimensions:' ); ?></legend>
     148                            <div class="nowrap">
     149                            <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
     150                            <?php
     151                            /* translators: Hidden accessibility text. */
     152                            _e( 'scale height' );
     153                            ?>
     154                            </label>
     155                            <input type="number" step="1" min="0" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>"  id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     156                            <span class="imgedit-separator" aria-hidden="true">&times;</span>
     157                            <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     158                            <input type="number" step="1" min="0" max="<?php echo isset( $meta['height'] ) ? $meta['width'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     159                            <button id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary"><?php esc_html_e( 'Scale' ); ?></button>
     160                            <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
     161                            </div>
     162                        </fieldset>
     163                        </div>
     164                    </div>
     165                </div>
     166            </div>
     167
     168        <?php if ( $can_restore ) { ?>
     169                <div class="imgedit-group">
     170                <div class="imgedit-group-top">
     171                    <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
     172                    <div class="imgedit-help imgedit-restore">
     173                    <p>
     174                    <?php
     175                    _e( 'Discard any changes and restore the original image.' );
     176                    if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     177                        echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     178                    }
     179                    ?>
     180                    </p>
     181                    <div class="imgedit-submit">
     182                        <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
     183                    </div>
     184                </div>
     185            </div>
     186            </div>
     187        <?php } ?>
     188            <div class="imgedit-group">
     189                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     190                <div class="imgedit-group-top">
     191                    <h2><?php _e( 'Crop Image' ); ?></h2>
     192                    <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     193                    <?php
     194                    /* translators: Hidden accessibility text. */
     195                    _e( 'Image Crop Help' );
     196                    ?>
     197                    </span></button>
     198                    <div class="imgedit-help">
     199                        <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     200                        <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     201                        <?php _e( 'The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.' ); ?></p>
     202
     203                        <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     204                        <?php _e( 'Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.' ); ?></p>
     205                    </div>
     206                </div>
     207                <fieldset class="imgedit-crop-ratio">
     208                    <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     209                    <div class="nowrap">
     210                    <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
     211                    <?php
     212                    /* translators: Hidden accessibility text. */
     213                    _e( 'crop ratio width' );
     214                    ?>
     215                    </label>
     216                    <input type="number" step="1" min="1" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     217                    <span class="imgedit-separator" aria-hidden="true">:</span>
     218                    <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
     219                    <?php
     220                    /* translators: Hidden accessibility text. */
     221                    _e( 'crop ratio height' );
     222                    ?>
     223                    </label>
     224                    <input  type="number" step="1" min="0" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     225                    </div>
     226                </fieldset>
     227                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     228                    <legend><?php _e( 'Selection:' ); ?></legend>
     229                    <div class="nowrap">
     230                    <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
     231                    <?php
     232                    /* translators: Hidden accessibility text. */
     233                    _e( 'selection width' );
     234                    ?>
     235                    </label>
     236                    <input  type="number" step="1" min="0" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     237                    <span class="imgedit-separator" aria-hidden="true">&times;</span>
     238                    <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
     239                    <?php
     240                    /* translators: Hidden accessibility text. */
     241                    _e( 'selection height' );
     242                    ?>
     243                    </label>
     244                    <input  type="number" step="1" min="0" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     245                    </div>
     246                </fieldset>
     247                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     248                    <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     249                    <div class="nowrap">
     250                    <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text">
     251                    <?php
     252                    /* translators: Hidden accessibility text. */
     253                    _e( 'horizontal start position' );
     254                    ?>
     255                    </label>
     256                    <input  type="number" step="1" min="0" id="imgedit-start-x-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
     257                    <span class="imgedit-separator" aria-hidden="true">&times;</span>
     258                    <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
     259                    <?php
     260                    /* translators: Hidden accessibility text. */
     261                    _e( 'vertical start position' );
     262                    ?>
     263                    </label>
     264                    <input  type="number" step="1" min="0" id="imgedit-start-y-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
     265                    </div>
     266                </fieldset>
     267                <div class="imgedit-crop-apply imgedit-menu container">
     268                    <button class="button-primary" type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
     269                </div>
     270            </div>
    156271        </div>
    157         <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
    158 
    159         </fieldset>
    160 
    161         </div>
    162     </div>
    163     </div>
    164 
    165     <?php if ( $can_restore ) { ?>
    166 
    167     <div class="imgedit-group">
    168     <div class="imgedit-group-top">
    169         <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
    170         <div class="imgedit-help imgedit-restore">
    171         <p>
    172             <?php
    173             _e( 'Discard any changes and restore the original image.' );
    174 
    175             if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
    176                 echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
    177             }
    178             ?>
    179         </p>
    180         <div class="imgedit-submit">
    181         <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
    182         </div>
    183         </div>
    184     </div>
    185     </div>
    186 
    187     <?php } ?>
    188 
    189     <div class="imgedit-group">
    190     <div class="imgedit-group-top">
    191         <h2><?php _e( 'Image Crop' ); ?></h2>
    192         <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    193             <?php
    194             /* translators: Hidden accessibility text. */
    195             esc_html_e( 'Image Crop Help' );
    196             ?>
    197         </span></button>
    198 
    199         <div class="imgedit-help">
    200         <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    201 
    202         <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
    203         <?php _e( 'The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.' ); ?></p>
    204 
    205         <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
    206         <?php _e( 'Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.' ); ?></p>
    207         </div>
    208     </div>
    209 
    210     <fieldset class="imgedit-crop-ratio">
    211         <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    212         <div class="nowrap">
    213         <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
    214             <?php
    215             /* translators: Hidden accessibility text. */
    216             _e( 'crop ratio width' );
    217             ?>
    218         </label>
    219         <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
    220         <span class="imgedit-separator" aria-hidden="true">:</span>
    221         <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
    222             <?php
    223             /* translators: Hidden accessibility text. */
    224             _e( 'crop ratio height' );
    225             ?>
    226         </label>
    227         <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
    228         </div>
    229     </fieldset>
    230 
    231     <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    232         <legend><?php _e( 'Selection:' ); ?></legend>
    233         <div class="nowrap">
    234         <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
    235             <?php
    236             /* translators: Hidden accessibility text. */
    237             _e( 'selection width' );
    238             ?>
    239         </label>
    240         <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    241         <span class="imgedit-separator" aria-hidden="true">&times;</span>
    242         <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
    243             <?php
    244             /* translators: Hidden accessibility text. */
    245             _e( 'selection height' );
    246             ?>
    247         </label>
    248         <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    249         </div>
    250     </fieldset>
    251 
    252272    </div>
    253273
    … …  
    258278
    259279    <div class="imgedit-group imgedit-applyto">
    260     <div class="imgedit-group-top">
    261         <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    262         <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     280        <div class="imgedit-group-top">
     281            <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     282            <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    263283            <?php
    264284            /* translators: Hidden accessibility text. */
    265285            esc_html_e( 'Thumbnail Settings Help' );
    266286            ?>
    267         </span></button>
    268         <div class="imgedit-help">
    269         <p><?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>
     287            </span></button>
     288            <div class="imgedit-help">
     289            <p><?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>
     290            </div>
     291        </div>
     292        <div class="imgedit-thumbnail-preview-group">
     293            <figure class="imgedit-thumbnail-preview">
     294                <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
     295                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     296            </figure>
     297            <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     298            <fieldset>
     299                <legend><?php _e( 'Apply changes to:' ); ?></legend>
     300
     301                <span class="imgedit-label">
     302                    <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     303                    <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     304                </span>
     305
     306                <span class="imgedit-label">
     307                    <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     308                    <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     309                </span>
     310 
     311                <span class="imgedit-label">
     312                    <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     313                    <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     314                </span>
     315
     316                <?php
     317                if ( $edit_custom_sizes ) {
     318                    if ( ! is_array( $edit_custom_sizes ) ) {
     319                        $edit_custom_sizes = get_intermediate_image_sizes();
     320                    }
     321                    foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     322                        if ( array_key_exists( $size, $meta['sizes'] ) ) {
     323                            if ( 'thumbnail' === $size ) {
     324                                continue;
     325                            }
     326                            ?>
     327                            <span class="imgedit-label">
     328                            <input type="radio" id="imgedit-target-custom<?php echo esc_attr( $key ); ?>" name="imgedit-target-<?php echo $post_id; ?>" value="<?php echo esc_attr( $size ); ?>" />
     329                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     330                            </span>
     331                            <?php
     332                        }
     333                    }
     334                }
     335                ?>
     336                </fieldset>
     337            </div>
    270338        </div>
    271339    </div>
    272 
    273     <figure class="imgedit-thumbnail-preview">
    274         <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
    275         <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
    276     </figure>
    277 
    278     <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    279     <fieldset>
    280         <legend><?php _e( 'Apply changes to:' ); ?></legend>
    281 
    282         <span class="imgedit-label">
    283             <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    284             <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
    285         </span>
    286 
    287         <span class="imgedit-label">
    288             <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    289             <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
    290         </span>
    291 
    292         <span class="imgedit-label">
    293             <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    294             <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
    295         </span>
    296         <?php
    297         if ( $edit_custom_sizes ) {
    298             if ( ! is_array( $edit_custom_sizes ) ) {
    299                 $edit_custom_sizes = get_intermediate_image_sizes();
    300             }
    301             foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
    302                 if ( array_key_exists( $size, $meta['sizes'] ) ) {
    303                     if ( 'thumbnail' === $size ) {
    304                         continue;
    305                     }
    306                     ?>
    307                     <span class="imgedit-label">
    308                         <input type="radio" id="imgedit-target-custom<?php echo esc_attr( $key ); ?>" name="imgedit-target-<?php echo $post_id; ?>" value="<?php echo esc_attr( $size ); ?>" />
    309                         <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
    310                     </span>
    311                     <?php
    312                 }
    313             }
    314         }
    315         ?>
    316     </fieldset>
     340    <?php } ?>
     341        </div>
    317342    </div>
     343
    318344    </div>
    319 
    320     <?php } ?>
    321 
    322     </div>
     345    <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
     346    <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>
    323347
    324348    </div>
    … …  
    510534function _image_get_preview_ratio( $w, $h ) {
    511535    $max = max( $w, $h );
    512     return $max > 400 ? ( 400 / $max ) : 1;
     536    return $max > 600 ? ( 600 / $max ) : 1;
    513537}
    514538
Note: See TracChangeset for help on using the changeset viewer.