WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2016-01-08 19:13:26 +00:00
parent 1f9c29d98f
commit ae1575bd80
15 changed files with 483 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wp-admin/css/common-rtl.css
View File

@ -274,11 +274,11 @@ a:active {
a:focus, a:focus,
a:focus .media-icon img { a:focus .media-icon img {
color: #124964; color: #124964;
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
} }
@ -1670,7 +1670,7 @@ form.upgrade .hint {
} }
.screen-options + .screen-options { .screen-options + .screen-options {
margin-top: 10px; margin-top: 10px;
} }
.metabox-prefs .submit { .metabox-prefs .submit {
@ -2952,10 +2952,10 @@ img {
.js .postbox .handlediv:focus .toggle-indicator:before { .js .postbox .handlediv:focus .toggle-indicator:before {
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
} }

16
wp-admin/css/common.css
View File

@ -274,11 +274,11 @@ a:active {
a:focus, a:focus,
a:focus .media-icon img { a:focus .media-icon img {
color: #124964; color: #124964;
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
} }
@ -1670,7 +1670,7 @@ form.upgrade .hint {
} }
.screen-options + .screen-options { .screen-options + .screen-options {
margin-top: 10px; margin-top: 10px;
} }
.metabox-prefs .submit { .metabox-prefs .submit {
@ -2952,10 +2952,10 @@ img {
.js .postbox .handlediv:focus .toggle-indicator:before { .js .postbox .handlediv:focus .toggle-indicator:before {
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
} }

132
wp-admin/css/media-rtl.css
View File

@ -640,7 +640,7 @@ border color while dragging a file over the uploader drop area */
.edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .left,
.edit-attachment-frame .edit-media-header .right { .edit-attachment-frame .edit-media-header .right {
cursor: pointer; cursor: pointer;
color: #777; color: #72777c;
background-color: transparent; background-color: transparent;
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -650,7 +650,7 @@ border color while dragging a file over the uploader drop area */
border: 0; border: 0;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.upload-php .media-modal-close { .upload-php .media-modal-close {
@ -837,10 +837,16 @@ border color while dragging a file over the uploader drop area */
.imgedit-wrap { .imgedit-wrap {
position: relative; position: relative;
padding-top: 10px;
} }
.imgedit-settings p { .imgedit-settings p,
margin: 8px 0 0; .imgedit-settings fieldset {
margin: 8px 0;
}
.imgedit-settings legend {
margin-bottom: 5px;
} }
.describe .imgedit-wrap .imgedit-settings { .describe .imgedit-wrap .imgedit-settings {
@ -853,13 +859,11 @@ border color while dragging a file over the uploader drop area */
.wp_attachment_holder .imgedit-wrap > div { .wp_attachment_holder .imgedit-wrap > div {
height: auto; height: auto;
overflow: hidden;
} }
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content { .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
padding-left: 16px; padding: 3px 0 0 16px;
width: auto; float: right;
overflow: hidden;
} }
.wp_attachment_holder .imgedit-wrap .imgedit-settings { .wp_attachment_holder .imgedit-wrap .imgedit-settings {
@ -908,7 +912,6 @@ border color while dragging a file over the uploader drop area */
color: grey; color: grey;
} }
.wp_attachment_image,
.A1B1 { .A1B1 {
overflow: hidden; overflow: hidden;
} }
@ -928,41 +931,39 @@ border color while dragging a file over the uploader drop area */
} }
.imgedit-menu { .imgedit-menu {
margin: 0 0 12px;
min-width: 300px; min-width: 300px;
margin: 0 0 12px;
} }
.imgedit-menu div { .imgedit-menu .note-no-rotate {
clear: both;
margin: 0;
padding: 1em 0 0;
}
.image-editor .imgedit-menu .button {
float: right; float: right;
width: 32px; width: 32px;
border: 1px solid #d5d5d5;
background: #f1f1f1;
margin: 0 0 0 8px;
height: 32px; height: 32px;
margin: 0 0 0 8px;
padding: 0;
background: #f1f1f1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; line-height: 16px;
line-height: 28px; color: #72777c;
color: #777;
cursor: pointer;
} }
.imgedit-menu div:before { .imgedit-menu .button:before {
font: normal 20px/1 dashicons; font: normal 20px/1 dashicons;
speak: none; speak: none;
vertical-align: middle; vertical-align: middle;
} }
.imgedit-menu div:hover { .imgedit-menu .button.disabled {
border-color: #c1c1c1;
background-color: #eaeaea;
color: #32373c;
}
.imgedit-menu div.disabled {
border-color: #ccc; border-color: #ccc;
background-color: #ddd; background-color: #ddd;
color: #777; color: #72777c;
filter: alpha(opacity=50); filter: alpha(opacity=50);
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: default;
@ -1028,12 +1029,17 @@ border color while dragging a file over the uploader drop area */
margin: 0 3px 0 8px; margin: 0 3px 0 8px;
} }
.imgedit-applyto img { .imgedit-thumbnail-preview {
margin: 0 0 0 8px; margin: 10px 0 0 8px;
}
.imgedit-thumbnail-preview-caption {
display: block;
} }
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */ #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
#poststuff .imgedit-group-top h2 { #poststuff .imgedit-group-top h2 {
display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
@ -1046,8 +1052,8 @@ border color while dragging a file over the uploader drop area */
} }
.imgedit-applyto .imgedit-label { .imgedit-applyto .imgedit-label {
padding: 2px 0 0;
display: block; display: block;
padding: .5em 0 0;
} }
.imgedit-help { .imgedit-help {
@ -1055,8 +1061,31 @@ border color while dragging a file over the uploader drop area */
font-style: italic; font-style: italic;
} }
a.imgedit-help-toggle { /* higher specificity than buttons */
text-decoration: none; .image-editor .imgedit-settings .imgedit-help-toggle,
.image-editor .imgedit-settings .imgedit-help-toggle:hover,
.image-editor .imgedit-settings .imgedit-help-toggle:active {
border: 1px solid transparent;
margin: -1px -1px 0 0;
padding: 0;
background: transparent;
color: #0074a2;
font-size: 20px;
line-height: 1;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.image-editor .imgedit-settings .imgedit-help-toggle:focus {
color: #0074a2;
border-color: #5b9dd9;
outline: none;
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
} }
.form-table td.imgedit-response { .form-table td.imgedit-response {
@ -1073,6 +1102,8 @@ a.imgedit-help-toggle {
.imgedit-wrap .nowrap { .imgedit-wrap .nowrap {
white-space: nowrap; white-space: nowrap;
font-size: 12px;
line-height: inherit;
} }
span.imgedit-scale-warn { span.imgedit-scale-warn {
@ -1083,11 +1114,36 @@ span.imgedit-scale-warn {
vertical-align: middle; vertical-align: middle;
} }
.imgedit-save-target {
margin: 8px 0;
}
.imgedit-group { .imgedit-group {
margin-bottom: 8px; margin-bottom: 8px;
padding: 10px; padding: 10px;
} }
.imgedit-settings .imgedit-scale input[type="text"],
.imgedit-settings .imgedit-crop-ratio input[type="text"],
.imgedit-settings .imgedit-crop-sel input[type="text"] {
width: 50px;
font-size: 14px;
padding: 3px 5px;
}
.imgedit-separator {
display: inline-block;
width: 7px;
text-align: center;
vertical-align: middle;
font-size: 13px;
color: #444;
}
.imgedit-settings .imgedit-scale .button {
margin-bottom: 0;
}
audio, video { audio, video {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
@ -1131,6 +1187,18 @@ audio, video {
.media-upload-form .media-item .error { .media-upload-form .media-item .error {
padding: 10px 12px 10px 0; padding: 10px 12px 10px 0;
} }
.imgedit-settings .imgedit-scale input[type="text"],
.imgedit-settings .imgedit-crop-ratio input[type="text"],
.imgedit-settings .imgedit-crop-sel input[type="text"] {
width: 60px;
font-size: 16px;
padding: 6px 10px;
}
.imgedit-applyto .imgedit-label {
vertical-align: middle;
}
} }
/** /**

132
wp-admin/css/media.css
View File

@ -640,7 +640,7 @@ border color while dragging a file over the uploader drop area */
.edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .left,
.edit-attachment-frame .edit-media-header .right { .edit-attachment-frame .edit-media-header .right {
cursor: pointer; cursor: pointer;
color: #777; color: #72777c;
background-color: transparent; background-color: transparent;
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -650,7 +650,7 @@ border color while dragging a file over the uploader drop area */
border: 0; border: 0;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.upload-php .media-modal-close { .upload-php .media-modal-close {
@ -837,10 +837,16 @@ border color while dragging a file over the uploader drop area */
.imgedit-wrap { .imgedit-wrap {
position: relative; position: relative;
padding-top: 10px;
} }
.imgedit-settings p { .imgedit-settings p,
margin: 8px 0 0; .imgedit-settings fieldset {
margin: 8px 0;
}
.imgedit-settings legend {
margin-bottom: 5px;
} }
.describe .imgedit-wrap .imgedit-settings { .describe .imgedit-wrap .imgedit-settings {
@ -853,13 +859,11 @@ border color while dragging a file over the uploader drop area */
.wp_attachment_holder .imgedit-wrap > div { .wp_attachment_holder .imgedit-wrap > div {
height: auto; height: auto;
overflow: hidden;
} }
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content { .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
padding-right: 16px; padding: 3px 16px 0 0;
width: auto; float: left;
overflow: hidden;
} }
.wp_attachment_holder .imgedit-wrap .imgedit-settings { .wp_attachment_holder .imgedit-wrap .imgedit-settings {
@ -908,7 +912,6 @@ border color while dragging a file over the uploader drop area */
color: grey; color: grey;
} }
.wp_attachment_image,
.A1B1 { .A1B1 {
overflow: hidden; overflow: hidden;
} }
@ -928,41 +931,39 @@ border color while dragging a file over the uploader drop area */
} }
.imgedit-menu { .imgedit-menu {
margin: 0 0 12px;
min-width: 300px; min-width: 300px;
margin: 0 0 12px;
} }
.imgedit-menu div { .imgedit-menu .note-no-rotate {
clear: both;
margin: 0;
padding: 1em 0 0;
}
.image-editor .imgedit-menu .button {
float: left; float: left;
width: 32px; width: 32px;
border: 1px solid #d5d5d5;
background: #f1f1f1;
margin: 0 8px 0 0;
height: 32px; height: 32px;
margin: 0 8px 0 0;
padding: 0;
background: #f1f1f1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; line-height: 16px;
line-height: 28px; color: #72777c;
color: #777;
cursor: pointer;
} }
.imgedit-menu div:before { .imgedit-menu .button:before {
font: normal 20px/1 dashicons; font: normal 20px/1 dashicons;
speak: none; speak: none;
vertical-align: middle; vertical-align: middle;
} }
.imgedit-menu div:hover { .imgedit-menu .button.disabled {
border-color: #c1c1c1;
background-color: #eaeaea;
color: #32373c;
}
.imgedit-menu div.disabled {
border-color: #ccc; border-color: #ccc;
background-color: #ddd; background-color: #ddd;
color: #777; color: #72777c;
filter: alpha(opacity=50); filter: alpha(opacity=50);
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: default;
@ -1028,12 +1029,17 @@ border color while dragging a file over the uploader drop area */
margin: 0 8px 0 3px; margin: 0 8px 0 3px;
} }
.imgedit-applyto img { .imgedit-thumbnail-preview {
margin: 0 8px 0 0; margin: 10px 8px 0 0;
}
.imgedit-thumbnail-preview-caption {
display: block;
} }
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */ #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
#poststuff .imgedit-group-top h2 { #poststuff .imgedit-group-top h2 {
display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
@ -1046,8 +1052,8 @@ border color while dragging a file over the uploader drop area */
} }
.imgedit-applyto .imgedit-label { .imgedit-applyto .imgedit-label {
padding: 2px 0 0;
display: block; display: block;
padding: .5em 0 0;
} }
.imgedit-help { .imgedit-help {
@ -1055,8 +1061,31 @@ border color while dragging a file over the uploader drop area */
font-style: italic; font-style: italic;
} }
a.imgedit-help-toggle { /* higher specificity than buttons */
text-decoration: none; .image-editor .imgedit-settings .imgedit-help-toggle,
.image-editor .imgedit-settings .imgedit-help-toggle:hover,
.image-editor .imgedit-settings .imgedit-help-toggle:active {
border: 1px solid transparent;
margin: -1px 0 0 -1px;
padding: 0;
background: transparent;
color: #0074a2;
font-size: 20px;
line-height: 1;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.image-editor .imgedit-settings .imgedit-help-toggle:focus {
color: #0074a2;
border-color: #5b9dd9;
outline: none;
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
} }
.form-table td.imgedit-response { .form-table td.imgedit-response {
@ -1073,6 +1102,8 @@ a.imgedit-help-toggle {
.imgedit-wrap .nowrap { .imgedit-wrap .nowrap {
white-space: nowrap; white-space: nowrap;
font-size: 12px;
line-height: inherit;
} }
span.imgedit-scale-warn { span.imgedit-scale-warn {
@ -1083,11 +1114,36 @@ span.imgedit-scale-warn {
vertical-align: middle; vertical-align: middle;
} }
.imgedit-save-target {
margin: 8px 0;
}
.imgedit-group { .imgedit-group {
margin-bottom: 8px; margin-bottom: 8px;
padding: 10px; padding: 10px;
} }
.imgedit-settings .imgedit-scale input[type="text"],
.imgedit-settings .imgedit-crop-ratio input[type="text"],
.imgedit-settings .imgedit-crop-sel input[type="text"] {
width: 50px;
font-size: 14px;
padding: 3px 5px;
}
.imgedit-separator {
display: inline-block;
width: 7px;
text-align: center;
vertical-align: middle;
font-size: 13px;
color: #444;
}
.imgedit-settings .imgedit-scale .button {
margin-bottom: 0;
}
audio, video { audio, video {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
@ -1131,6 +1187,18 @@ audio, video {
.media-upload-form .media-item .error { .media-upload-form .media-item .error {
padding: 10px 0 10px 12px; padding: 10px 0 10px 12px;
} }
.imgedit-settings .imgedit-scale input[type="text"],
.imgedit-settings .imgedit-crop-ratio input[type="text"],
.imgedit-settings .imgedit-crop-sel input[type="text"] {
width: 60px;
font-size: 16px;
padding: 6px 10px;
}
.imgedit-applyto .imgedit-label {
vertical-align: middle;
}
} }
/** /**

4
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

128
wp-admin/includes/image-edit.php
View File

@ -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 id="imgedit-panel-<?php echo $post_id; ?>">
<div class="imgedit-settings"> <div class="imgedit-settings">
<div class="imgedit-group"> <div class="imgedit-group">
<div class="imgedit-group-top"> <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"> <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> <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> </div>
@ -54,9 +55,22 @@ function wp_image_editor($post_id, $msg = false) {
<p><?php printf( __('Original dimensions %s'), $meta['width'] . ' &times; ' . $meta['height'] ); ?></p> <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' &times; ' . $meta['height'] ); ?></p>
<?php endif ?> <?php endif ?>
<div class="imgedit-submit"> <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; ?>" /> &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; ?>" />
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span> <fieldset class="imgedit-scale">
<input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( '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">&times;</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> </div>
</div> </div>
@ -65,7 +79,7 @@ function wp_image_editor($post_id, $msg = false) {
<div class="imgedit-group"> <div class="imgedit-group">
<div class="imgedit-group-top"> <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"> <div class="imgedit-help">
<p><?php _e('Discard any changes and restore the original image.'); <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">
<div class="imgedit-group-top"> <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"> <div class="imgedit-help">
<p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p> <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>
</div> </div>
<p> <fieldset class="imgedit-crop-ratio">
<?php _e('Aspect ratio:'); ?> <legend><?php _e( 'Aspect ratio:' ); ?></legend>
<span class="nowrap"> <div 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;" /> <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)" />
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" /> </label>
</span> <span class="imgedit-separator">:</span>
</p> <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">&times;</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;" />
&times;
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
</span>
</p>
</div> </div>
<?php if ( $thumb && $sub_sizes ) { <?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 imgedit-applyto">
<div class="imgedit-group-top"> <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> <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> </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" /> <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'); ?> <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
</p> </figure>
<p id="imgedit-save-target-<?php echo $post_id; ?>"> <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
<strong><?php _e('Apply changes to:'); ?></strong><br /> <fieldset>
<legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
<label class="imgedit-label"> <label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" /> <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"> <label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" /> <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
<?php _e('All sizes except thumbnail'); ?></label> <?php _e('All sizes except thumbnail'); ?></label>
</p> </fieldset>
</div>
</div> </div>
<?php } ?> <?php } ?>
</div> </div>
<div class="imgedit-panel-content"> <div class="imgedit-panel-content wp-clearfix">
<?php echo $note; ?> <?php echo $note; ?>
<div class="imgedit-menu"> <div class="imgedit-menu wp-clearfix">
<div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php <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 // 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' ) ) ) ) { ?> 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> $note_no_rotate = '';
<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.');
?> ?>
<div class="imgedit-rleft 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>
<div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div> <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 } ?> <?php } ?>
<div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></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>
<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(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> <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>
<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> <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>
<br class="clear" /> <?php echo $note_no_rotate; ?>
</div> </div>
<input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" /> <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; ?>" /> <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"> <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&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;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&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="" />
</div> </div>
<div class="imgedit-submit"> <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' ); ?>" /> <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>
</div> </div>
@ -562,8 +591,9 @@ function stream_preview_image( $post_id ) {
$img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) ); $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
if ( is_wp_error( $img ) ) if ( is_wp_error( $img ) ) {
return false; return false;
}
$changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null; $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
if ( $changes ) if ( $changes )

4
wp-admin/includes/media.php
View File

@ -2701,7 +2701,7 @@ function edit_form_image_editor( $post ) {
$alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true ); $alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
$att_url = wp_get_attachment_url( $post->ID ); ?> $att_url = wp_get_attachment_url( $post->ID ); ?>
<div class="wp_attachment_holder"> <div class="wp_attachment_holder wp-clearfix">
<?php <?php
if ( wp_attachment_is_image( $post->ID ) ) : if ( wp_attachment_is_image( $post->ID ) ) :
$image_edit_button = ''; $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 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 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> <p><?php echo $image_edit_button; ?></p>
</div> </div>

80
wp-admin/js/image-edit.js
View File

@ -11,13 +11,17 @@ var imageEdit = window.imageEdit = {
return f | 0; return f | 0;
}, },
setDisabled : function(el, s) { setDisabled : function( el, s ) {
/*
* `el` can be a single form element or a fieldset. Before #28864, the disabled state on
* some text fields was handled targeting $('input', el). Now we need to handle the
* disabled state on buttons too so we can just target `el` regardless if it's a single
* element or a fieldset because when a fieldset is disabled, its descendants are disabled too.
*/
if ( s ) { if ( s ) {
el.removeClass('disabled'); el.removeClass( 'disabled' ).prop( 'disabled', false );
$('input', el).removeAttr('disabled');
} else { } else {
el.addClass('disabled'); el.addClass( 'disabled' ).prop( 'disabled', true );
$('input', el).prop('disabled', true);
} }
}, },
@ -63,7 +67,11 @@ var imageEdit = window.imageEdit = {
}, },
toggleHelp : function(el) { toggleHelp : function(el) {
$( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); var $el = $( el );
$el
.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
return false; return false;
}, },
@ -166,8 +174,25 @@ var imageEdit = window.imageEdit = {
}; };
img = $( '<img id="image-preview-' + postid + '" alt="" />' ) img = $( '<img id="image-preview-' + postid + '" alt="" />' )
.on('load', function() { .on( 'load', { history: data.history }, function( event ) {
var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit; var max1, max2,
parent = $( '#imgedit-crop-' + postid ),
t = imageEdit,
historyObj;
if ( '' !== event.data.history ) {
historyObj = JSON.parse( event.data.history );
// If last executed action in history is a crop action.
if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
/*
* A crop action has completed and the crop button gets disabled
* ensure the undo button is enabled.
*/
t.setDisabled( $( '#image-undo-' + postid) , true );
// Move focus to the undo button to avoid a focus loss.
$( '#image-undo-' + postid ).focus();
}
}
parent.empty().append(img); parent.empty().append(img);
@ -305,7 +330,14 @@ var imageEdit = window.imageEdit = {
var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid), var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner'); btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
btn.prop('disabled', true); /*
* Instead of disabling the button, which causes a focus loss and makes screen
* readers announce "unavailable", return if the button was already clicked.
*/
if ( btn.hasClass( 'button-activated' ) ) {
return;
}
spin.addClass( 'is-active' ); spin.addClass( 'is-active' );
data = { data = {
@ -318,12 +350,15 @@ var imageEdit = window.imageEdit = {
dfd = $.ajax({ dfd = $.ajax({
url: ajaxurl, url: ajaxurl,
type: 'post', type: 'post',
data: data data: data,
beforeSend: function() {
btn.addClass( 'button-activated' );
}
}).done(function( html ) { }).done(function( html ) {
elem.html( html ); elem.html( html );
head.fadeOut('fast', function(){ head.fadeOut('fast', function(){
elem.fadeIn('fast'); elem.fadeIn('fast');
btn.removeAttr('disabled'); btn.removeClass( 'button-activated' );
spin.removeClass( 'is-active' ); spin.removeClass( 'is-active' );
}); });
}); });
@ -337,6 +372,8 @@ var imageEdit = window.imageEdit = {
this.initCrop(postid, img, parent); this.initCrop(postid, img, parent);
this.setCropSelection(postid, 0); this.setCropSelection(postid, 0);
this.toggleEditor(postid, 0); this.toggleEditor(postid, 0);
// Editor is ready, move focus to the first focusable element.
$( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
}, },
initCrop : function(postid, image, parent) { initCrop : function(postid, image, parent) {
@ -429,7 +466,10 @@ var imageEdit = window.imageEdit = {
// In case we are not accessing the image editor in the context of a View, close the editor the old-skool way // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
else { else {
$('#image-editor-' + postid).fadeOut('fast', function() { $('#image-editor-' + postid).fadeOut('fast', function() {
$('#media-head-' + postid).fadeIn('fast'); $( '#media-head-' + postid ).fadeIn( 'fast', function() {
// Move focus back to the Edit Image button. Runs also when saving.
$( '#imgedit-open-btn-' + postid ).focus();
});
$(this).empty(); $(this).empty();
}); });
} }
@ -453,9 +493,9 @@ var imageEdit = window.imageEdit = {
addStep : function(op, postid, nonce) { addStep : function(op, postid, nonce) {
var t = this, elem = $('#imgedit-history-' + postid), var t = this, elem = $('#imgedit-history-' + postid),
history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [], history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
undone = $('#imgedit-undone-' + postid), undone = $( '#imgedit-undone-' + postid ),
pop = t.intval(undone.val()); pop = t.intval( undone.val() );
while ( pop > 0 ) { while ( pop > 0 ) {
history.pop(); history.pop();
@ -516,10 +556,14 @@ var imageEdit = window.imageEdit = {
elem.val(pop); elem.val(pop);
t.refreshEditor(postid, nonce, function() { t.refreshEditor(postid, nonce, function() {
var elem = $('#imgedit-history-' + postid), var elem = $('#imgedit-history-' + postid),
history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : []; history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
t.setDisabled($('#image-redo-' + postid), true); t.setDisabled($('#image-redo-' + postid), true);
t.setDisabled(button, pop < history.length); t.setDisabled(button, pop < history.length);
// When undo gets disabled, move focus to the redo button to avoid a focus loss.
if ( history.length === pop ) {
$( '#image-redo-' + postid ).focus();
}
}); });
}, },
@ -535,6 +579,10 @@ var imageEdit = window.imageEdit = {
t.refreshEditor(postid, nonce, function() { t.refreshEditor(postid, nonce, function() {
t.setDisabled($('#image-undo-' + postid), true); t.setDisabled($('#image-undo-' + postid), true);
t.setDisabled(button, pop > 0); t.setDisabled(button, pop > 0);
// When redo gets disabled, move focus to the undo button to avoid a focus loss.
if ( 0 === pop ) {
$( '#image-undo-' + postid ).focus();
}
}); });
}, },

2
wp-admin/js/image-edit.min.js vendored
View File

File diff suppressed because one or more lines are too long

67
wp-includes/css/media-views-rtl.css
View File

@ -22,6 +22,11 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.media-modal legend,
.media-modal label {
font-size: 13px;
}
.media-frame input, .media-frame input,
.media-frame textarea { .media-frame textarea {
padding: 6px 8px; padding: 6px 8px;
@ -110,7 +115,7 @@
} }
.media-frame :-moz-placeholder { .media-frame :-moz-placeholder {
color: #a9a9a9; color: #a9a9a9;
} }
.media-frame .hidden { .media-frame .hidden {
@ -394,7 +399,7 @@
color: #666; color: #666;
} }
.compat-item label span { .compat-item label span {
text-align: left; text-align: left;
} }
@ -1734,7 +1739,7 @@
.media-modal .imgedit-wrap .imgedit-settings { .media-modal .imgedit-wrap .imgedit-settings {
background: #f3f3f3; background: #f3f3f3;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
padding: 0 16px 16px; padding: 20px 16px 16px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1762,33 +1767,73 @@
padding: 0; padding: 0;
} }
.media-modal .imgedit-group-top {
margin: 0;
}
.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
.media-modal .imgedit-group-top h2 { .media-modal .imgedit-group-top h2,
.media-modal .imgedit-group-top h2 .button-link {
display: inline-block;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
margin: 0; margin: 0;
margin-top: 24px; margin-top: 3px;
} }
.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
.media-modal .imgedit-group-top h2 a { .media-modal .imgedit-group-top h2 a,
.media-modal .imgedit-group-top h2 .button-link {
text-decoration: none; text-decoration: none;
color: #666; color: #666;
} }
.media-modal .imgedit-help-toggle { /* higher specificity than media.css */
margin-top: -2px; .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
border: 1px solid transparent;
margin: 0;
padding: 0;
background: transparent;
color: #0074a2;
font-size: 20px;
line-height: 1;
cursor: pointer; cursor: pointer;
color: #666; -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
color: #0074a2;
border-color: #5b9dd9;
outline: none;
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
}
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
margin-top: -3px;
}
.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
margin-top: -2px;
} }
.media-modal .imgedit-help-toggled span.dashicons:before { .media-modal .imgedit-help-toggled span.dashicons:before {
content: "\f142"; content: "\f142";
} }
.media-modal .imgedit-group img { .media-modal .imgedit-thumbnail-preview {
margin-top: 5px; margin: 10px 0 0 8px;
}
.imgedit-thumbnail-preview-caption {
display: block;
} }
.media-modal .imgedit-wrap div.updated { .media-modal .imgedit-wrap div.updated {

4
wp-includes/css/media-views-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

67
wp-includes/css/media-views.css
View File

@ -22,6 +22,11 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.media-modal legend,
.media-modal label {
font-size: 13px;
}
.media-frame input, .media-frame input,
.media-frame textarea { .media-frame textarea {
padding: 6px 8px; padding: 6px 8px;
@ -110,7 +115,7 @@
} }
.media-frame :-moz-placeholder { .media-frame :-moz-placeholder {
color: #a9a9a9; color: #a9a9a9;
} }
.media-frame .hidden { .media-frame .hidden {
@ -394,7 +399,7 @@
color: #666; color: #666;
} }
.compat-item label span { .compat-item label span {
text-align: right; text-align: right;
} }
@ -1734,7 +1739,7 @@
.media-modal .imgedit-wrap .imgedit-settings { .media-modal .imgedit-wrap .imgedit-settings {
background: #f3f3f3; background: #f3f3f3;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
padding: 0 16px 16px; padding: 20px 16px 16px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -1762,33 +1767,73 @@
padding: 0; padding: 0;
} }
.media-modal .imgedit-group-top {
margin: 0;
}
.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
.media-modal .imgedit-group-top h2 { .media-modal .imgedit-group-top h2,
.media-modal .imgedit-group-top h2 .button-link {
display: inline-block;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
margin: 0; margin: 0;
margin-top: 24px; margin-top: 3px;
} }
.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
.media-modal .imgedit-group-top h2 a { .media-modal .imgedit-group-top h2 a,
.media-modal .imgedit-group-top h2 .button-link {
text-decoration: none; text-decoration: none;
color: #666; color: #666;
} }
.media-modal .imgedit-help-toggle { /* higher specificity than media.css */
margin-top: -2px; .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
border: 1px solid transparent;
margin: 0;
padding: 0;
background: transparent;
color: #0074a2;
font-size: 20px;
line-height: 1;
cursor: pointer; cursor: pointer;
color: #666; -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
color: #0074a2;
border-color: #5b9dd9;
outline: none;
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
}
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
margin-top: -3px;
}
.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
margin-top: -2px;
} }
.media-modal .imgedit-help-toggled span.dashicons:before { .media-modal .imgedit-help-toggled span.dashicons:before {
content: "\f142"; content: "\f142";
} }
.media-modal .imgedit-group img { .media-modal .imgedit-thumbnail-preview {
margin-top: 5px; margin: 10px 8px 0 0;
}
.imgedit-thumbnail-preview-caption {
display: block;
} }
.media-modal .imgedit-wrap div.updated { .media-modal .imgedit-wrap div.updated {

4
wp-includes/css/media-views.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.5-alpha-36222'; $wp_version = '4.5-alpha-36223';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.