Media: make the Image Editor usable with a keyboard.
For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
@@ -40,13 +40,14 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="imgedit-wrap">
|
||||
<div class="imgedit-wrap wp-clearfix">
|
||||
<div id="imgedit-panel-<?php echo $post_id; ?>">
|
||||
|
||||
<div class="imgedit-settings">
|
||||
<div class="imgedit-group">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
|
||||
<h2><?php _e( 'Scale Image' ); ?></h2>
|
||||
<button type="button" class="dashicons dashicons-editor-help 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>
|
||||
<div class="imgedit-help">
|
||||
<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>
|
||||
</div>
|
||||
@@ -54,9 +55,22 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
<p><?php printf( __('Original dimensions %s'), $meta['width'] . ' × ' . $meta['height'] ); ?></p>
|
||||
<?php endif ?>
|
||||
<div class="imgedit-submit">
|
||||
<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; ?>" /> × <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; ?>" />
|
||||
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
|
||||
<input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
|
||||
|
||||
<fieldset class="imgedit-scale">
|
||||
<legend><?php _e( 'New dimensions:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
|
||||
<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; ?>" />
|
||||
</label>
|
||||
<span class="imgedit-separator">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
|
||||
<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; ?>" />
|
||||
</label>
|
||||
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
|
||||
<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>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +79,7 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
|
||||
<div class="imgedit-group">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
|
||||
<h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
|
||||
<div class="imgedit-help">
|
||||
<p><?php _e('Discard any changes and restore the original image.');
|
||||
|
||||
@@ -84,7 +98,8 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
|
||||
<div class="imgedit-group">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
|
||||
<h2><?php _e( 'Image Crop' ); ?></h2>
|
||||
<button type="button" class="dashicons dashicons-editor-help 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>
|
||||
|
||||
<div class="imgedit-help">
|
||||
<p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
|
||||
@@ -97,23 +112,32 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<?php _e('Aspect ratio:'); ?>
|
||||
<span class="nowrap">
|
||||
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
|
||||
:
|
||||
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
|
||||
</span>
|
||||
</p>
|
||||
<fieldset class="imgedit-crop-ratio">
|
||||
<legend><?php _e( 'Aspect ratio:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
|
||||
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
|
||||
</label>
|
||||
<span class="imgedit-separator">:</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
|
||||
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
|
||||
<legend><?php _e( 'Selection:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
|
||||
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
|
||||
</label>
|
||||
<span class="imgedit-separator">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
|
||||
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<p id="imgedit-crop-sel-<?php echo $post_id; ?>">
|
||||
<?php _e('Selection:'); ?>
|
||||
<span class="nowrap">
|
||||
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
|
||||
×
|
||||
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php if ( $thumb && $sub_sizes ) {
|
||||
@@ -122,17 +146,19 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
|
||||
<div class="imgedit-group imgedit-applyto">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
|
||||
<h2><?php _e( 'Thumbnail Settings' ); ?></h2>
|
||||
<button type="button" class="dashicons dashicons-editor-help 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<figure class="imgedit-thumbnail-preview">
|
||||
<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" />
|
||||
<br /><?php _e('Current thumbnail'); ?>
|
||||
</p>
|
||||
<figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
|
||||
</figure>
|
||||
|
||||
<p id="imgedit-save-target-<?php echo $post_id; ?>">
|
||||
<strong><?php _e('Apply changes to:'); ?></strong><br />
|
||||
<div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
|
||||
<fieldset>
|
||||
<legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
|
||||
|
||||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
|
||||
@@ -145,35 +171,38 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
|
||||
<?php _e('All sizes except thumbnail'); ?></label>
|
||||
</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php } ?>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="imgedit-panel-content">
|
||||
<div class="imgedit-panel-content wp-clearfix">
|
||||
<?php echo $note; ?>
|
||||
<div class="imgedit-menu">
|
||||
<div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
|
||||
<div class="imgedit-menu wp-clearfix">
|
||||
<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
|
||||
|
||||
// On some setups GD library does not provide imagerotate() - Ticket #11536
|
||||
if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
|
||||
<div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
|
||||
<div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
|
||||
<?php } else {
|
||||
$note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
|
||||
if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
|
||||
$note_no_rotate = '';
|
||||
?>
|
||||
<div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>
|
||||
<div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
|
||||
<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>
|
||||
<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>
|
||||
<?php } else {
|
||||
$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
|
||||
?>
|
||||
<button type="button" class="imgedit-rleft button disabled" disabled></button>
|
||||
<button type="button" class="imgedit-rright button disabled" disabled></button>
|
||||
<?php } ?>
|
||||
|
||||
<div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
|
||||
<div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<br class="clear" />
|
||||
<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>
|
||||
<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>
|
||||
<?php echo $note_no_rotate; ?>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
|
||||
@@ -184,11 +213,11 @@ function wp_image_editor($post_id, $msg = false) {
|
||||
<input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
|
||||
|
||||
<div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
|
||||
<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&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" alt="<?php esc_attr_e( 'Image preview' ); ?>" />
|
||||
<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&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="imgedit-submit">
|
||||
<input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
|
||||
<input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
|
||||
<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' ); ?>" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -562,8 +591,9 @@ function stream_preview_image( $post_id ) {
|
||||
|
||||
$img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
|
||||
|
||||
if ( is_wp_error( $img ) )
|
||||
return false;
|
||||
if ( is_wp_error( $img ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
|
||||
if ( $changes )
|
||||
|
||||
@@ -2701,7 +2701,7 @@ function edit_form_image_editor( $post ) {
|
||||
$alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
|
||||
|
||||
$att_url = wp_get_attachment_url( $post->ID ); ?>
|
||||
<div class="wp_attachment_holder">
|
||||
<div class="wp_attachment_holder wp-clearfix">
|
||||
<?php
|
||||
if ( wp_attachment_is_image( $post->ID ) ) :
|
||||
$image_edit_button = '';
|
||||
@@ -2713,7 +2713,7 @@ function edit_form_image_editor( $post ) {
|
||||
|
||||
<div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
|
||||
|
||||
<div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
|
||||
<div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>">
|
||||
<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>
|
||||
<p><?php echo $image_edit_button; ?></p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user