Ticket #28864: 28864.8.patch
File 28864.8.patch, 30.2 KB (added by , 9 years ago) |
---|
-
src/wp-admin/css/common.css
267 267 a:focus, 268 268 a:focus .media-icon img { 269 269 color: #124964; 270 271 270 -webkit-box-shadow: 271 0 0 0 1px #5b9dd9, 272 272 0 0 2px 1px rgba(30, 140, 190, .8); 273 274 273 box-shadow: 274 0 0 0 1px #5b9dd9, 275 275 0 0 2px 1px rgba(30, 140, 190, .8); 276 276 } 277 277 … … 1663 1663 } 1664 1664 1665 1665 .screen-options + .screen-options { 1666 1666 margin-top: 10px; 1667 1667 } 1668 1668 1669 1669 .metabox-prefs .submit { … … 2065 2065 } 2066 2066 2067 2067 /* contain floats */ 2068 .wp-clearfix:after, 2068 2069 .nav-tab-wrapper:after { 2069 2070 content: ""; 2070 2071 display: table; … … 2938 2939 2939 2940 .js .postbox .handlediv:focus .toggle-indicator:before { 2940 2941 -webkit-box-shadow: 2941 2942 0 0 0 1px #5b9dd9, 2942 2943 0 0 2px 1px rgba(30, 140, 190, .8); 2943 2944 2944 box-shadow: 2945 0 0 0 1px #5b9dd9, 2945 2946 0 0 2px 1px rgba(30, 140, 190, .8); 2946 2947 } 2947 2948 -
src/wp-admin/css/media.css
640 640 .edit-attachment-frame .edit-media-header .left, 641 641 .edit-attachment-frame .edit-media-header .right { 642 642 cursor: pointer; 643 color: #7 77;643 color: #72777c; 644 644 background-color: transparent; 645 645 height: 50px; 646 646 width: 50px; … … 650 650 border: 0; 651 651 border-left: 1px solid #ddd; 652 652 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; 653 653 transition: color .1s ease-in-out, background .1s ease-in-out; 654 654 } 655 655 656 656 .upload-php .media-modal-close { … … 837 837 838 838 .imgedit-wrap { 839 839 position: relative; 840 padding-top: 10px; 840 841 } 841 842 842 .imgedit-settings p { 843 margin: 8px 0 0; 843 .imgedit-settings p, 844 .imgedit-settings fieldset { 845 margin: 8px 0; 844 846 } 845 847 848 .imgedit-settings legend { 849 margin-bottom: 5px; 850 } 851 846 852 .describe .imgedit-wrap .imgedit-settings { 847 853 padding: 0 5px; 848 854 } … … 853 859 854 860 .wp_attachment_holder .imgedit-wrap > div { 855 861 height: auto; 856 overflow: hidden;857 862 } 858 863 859 864 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content { 860 padding-right: 16px; 861 width: auto; 862 overflow: hidden; 865 padding: 3px 16px 0 0; 866 float: left; 863 867 } 864 868 865 869 .wp_attachment_holder .imgedit-wrap .imgedit-settings { … … 908 912 color: grey; 909 913 } 910 914 911 .wp_attachment_image,912 915 .A1B1 { 913 916 overflow: hidden; 914 917 } … … 928 931 } 929 932 930 933 .imgedit-menu { 934 min-width: 300px; 931 935 margin: 0 0 12px; 932 min-width: 300px;933 936 } 934 937 935 .imgedit-menu div { 938 .imgedit-menu .note-no-rotate { 939 clear: both; 940 margin: 0; 941 padding: 1em 0 0; 942 } 943 944 .image-editor .imgedit-menu .button { 936 945 float: left; 937 946 width: 32px; 938 border: 1px solid #d5d5d5; 947 height: 32px; 948 margin: 0 8px 0 0; 949 padding: 0; 939 950 background: #f1f1f1; 940 margin: 0 8px 0 0;941 height: 32px;942 951 -webkit-font-smoothing: antialiased; 943 952 -moz-osx-font-smoothing: grayscale; 944 text-align: center; 945 line-height: 28px; 946 color: #777; 947 cursor: pointer; 953 line-height: 16px; 954 color: #72777c; 948 955 } 949 956 950 .imgedit-menu div:before {957 .imgedit-menu .button:before { 951 958 font: normal 20px/1 dashicons; 952 959 speak: none; 953 960 vertical-align: middle; 954 961 } 955 962 956 .imgedit-menu div:hover { 957 border-color: #c1c1c1; 958 background-color: #eaeaea; 959 color: #32373c; 960 } 961 962 .imgedit-menu div.disabled { 963 .imgedit-menu .button.disabled { 963 964 border-color: #ccc; 964 965 background-color: #ddd; 965 color: #7 77;966 color: #72777c; 966 967 filter: alpha(opacity=50); 967 968 opacity: 0.5; 968 969 cursor: default; … … 1028 1029 margin: 0 8px 0 3px; 1029 1030 } 1030 1031 1031 .imgedit- applyto img{1032 margin: 08px 0 0;1032 .imgedit-thumbnail-preview { 1033 margin: 10px 8px 0 0; 1033 1034 } 1034 1035 1036 .imgedit-thumbnail-preview-caption { 1037 display: block; 1038 } 1039 1035 1040 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */ 1036 1041 #poststuff .imgedit-group-top h2 { 1042 display: inline-block; 1037 1043 margin: 0; 1038 1044 padding: 0; 1039 1045 font-size: 14px; … … 1046 1052 } 1047 1053 1048 1054 .imgedit-applyto .imgedit-label { 1049 padding: 2px 0 0;1050 1055 display: block; 1056 padding: .5em 0 0; 1051 1057 } 1052 1058 1053 1059 .imgedit-help { … … 1055 1061 font-style: italic; 1056 1062 } 1057 1063 1058 a.imgedit-help-toggle { 1059 text-decoration: none; 1064 /* higher specificity than buttons */ 1065 .image-editor .imgedit-settings .imgedit-help-toggle, 1066 .image-editor .imgedit-settings .imgedit-help-toggle:hover, 1067 .image-editor .imgedit-settings .imgedit-help-toggle:active { 1068 border: 1px solid transparent; 1069 margin: -1px 0 0 -1px; 1070 padding: 0; 1071 background: transparent; 1072 color: #0074a2; 1073 font-size: 20px; 1074 line-height: 1; 1075 cursor: pointer; 1076 -webkit-box-sizing: content-box; 1077 -moz-box-sizing: content-box; 1078 box-sizing: content-box; 1079 -webkit-box-shadow: none; 1080 box-shadow: none; 1060 1081 } 1061 1082 1083 .image-editor .imgedit-settings .imgedit-help-toggle:focus { 1084 color: #0074a2; 1085 border-color: #5b9dd9; 1086 outline: none; 1087 -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1088 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1089 } 1090 1062 1091 .form-table td.imgedit-response { 1063 1092 padding: 0; 1064 1093 } … … 1073 1102 1074 1103 .imgedit-wrap .nowrap { 1075 1104 white-space: nowrap; 1105 font-size: 12px; 1106 line-height: inherit; 1076 1107 } 1077 1108 1078 1109 span.imgedit-scale-warn { … … 1083 1114 vertical-align: middle; 1084 1115 } 1085 1116 1117 .imgedit-save-target { 1118 margin: 8px 0; 1119 } 1120 1086 1121 .imgedit-group { 1087 1122 margin-bottom: 8px; 1088 1123 padding: 10px; 1089 1124 } 1090 1125 1126 .imgedit-settings .imgedit-scale input[type="text"], 1127 .imgedit-settings .imgedit-crop-ratio input[type="text"], 1128 .imgedit-settings .imgedit-crop-sel input[type="text"] { 1129 width: 50px; 1130 font-size: 14px; 1131 padding: 3px 5px; 1132 } 1133 1134 .imgedit-separator { 1135 display: inline-block; 1136 width: 7px; 1137 text-align: center; 1138 vertical-align: middle; 1139 font-size: 13px; 1140 color: #444; 1141 } 1142 1143 .imgedit-settings .imgedit-scale .button { 1144 margin-bottom: 0; 1145 } 1146 1091 1147 audio, video { 1092 1148 display: inline-block; 1093 1149 max-width: 100%; … … 1131 1187 .media-upload-form .media-item .error { 1132 1188 padding: 10px 0 10px 12px; 1133 1189 } 1190 1191 .imgedit-settings .imgedit-scale input[type="text"], 1192 .imgedit-settings .imgedit-crop-ratio input[type="text"], 1193 .imgedit-settings .imgedit-crop-sel input[type="text"] { 1194 width: 60px; 1195 font-size: 16px; 1196 padding: 6px 10px; 1197 } 1198 1199 .imgedit-applyto .imgedit-label { 1200 vertical-align: middle; 1201 } 1134 1202 } 1135 1203 1136 1204 /** -
src/wp-admin/includes/image-edit.php
40 40 } 41 41 42 42 ?> 43 <div class="imgedit-wrap ">43 <div class="imgedit-wrap wp-clearfix"> 44 44 <div id="imgedit-panel-<?php echo $post_id; ?>"> 45 45 46 46 <div class="imgedit-settings"> 47 47 <div class="imgedit-group"> 48 48 <div class="imgedit-group-top"> 49 <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2> 49 <h2><?php _e( 'Scale Image' ); ?></h2> 50 <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> 50 51 <div class="imgedit-help"> 51 52 <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> 52 53 </div> … … 54 55 <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' × ' . $meta['height'] ); ?></p> 55 56 <?php endif ?> 56 57 <div class="imgedit-submit"> 57 <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; ?>" /> 58 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span> 59 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /> 58 59 <fieldset class="imgedit-scale"> 60 <legend><?php _e( 'New dimensions:' ); ?></legend> 61 <div class="nowrap"> 62 <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span> 63 <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; ?>" /> 64 </label> 65 <span class="imgedit-separator">×</span> 66 <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span> 67 <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; ?>" /> 68 </label> 69 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span> 70 <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' ); ?>" /> 71 </div> 72 </fieldset> 73 60 74 </div> 61 75 </div> 62 76 </div> … … 65 79 66 80 <div class="imgedit-group"> 67 81 <div class="imgedit-group-top"> 68 <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>82 <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> 69 83 <div class="imgedit-help"> 70 84 <p><?php _e('Discard any changes and restore the original image.'); 71 85 … … 84 98 85 99 <div class="imgedit-group"> 86 100 <div class="imgedit-group-top"> 87 <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2> 101 <h2><?php _e( 'Image Crop' ); ?></h2> 102 <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> 88 103 89 104 <div class="imgedit-help"> 90 105 <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p> … … 97 112 </div> 98 113 </div> 99 114 100 <p> 101 <?php _e('Aspect ratio:'); ?> 102 <span class="nowrap"> 103 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" /> 104 : 105 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" /> 106 </span> 107 </p> 115 <fieldset class="imgedit-crop-ratio"> 116 <legend><?php _e( 'Aspect ratio:' ); ?></legend> 117 <div class="nowrap"> 118 <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span> 119 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" /> 120 </label> 121 <span class="imgedit-separator">:</span> 122 <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span> 123 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" /> 124 </label> 125 </div> 126 </fieldset> 108 127 109 <p id="imgedit-crop-sel-<?php echo $post_id; ?>"> 110 <?php _e('Selection:'); ?> 111 <span class="nowrap"> 112 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> 113 × 114 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> 115 </span> 116 </p> 128 <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel"> 129 <legend><?php _e( 'Selection:' ); ?></legend> 130 <div class="nowrap"> 131 <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span> 132 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" /> 133 </label> 134 <span class="imgedit-separator">×</span> 135 <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span> 136 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" /> 137 </label> 138 </div> 139 </fieldset> 140 117 141 </div> 118 142 119 143 <?php if ( $thumb && $sub_sizes ) { … … 122 146 123 147 <div class="imgedit-group imgedit-applyto"> 124 148 <div class="imgedit-group-top"> 125 <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2> 149 <h2><?php _e( 'Thumbnail Settings' ); ?></h2> 150 <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> 126 151 <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> 127 152 </div> 128 153 129 < p>154 <figure class="imgedit-thumbnail-preview"> 130 155 <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" /> 131 < br /><?php _e('Current thumbnail'); ?>132 </ p>156 <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption> 157 </figure> 133 158 134 <p id="imgedit-save-target-<?php echo $post_id; ?>"> 135 <strong><?php _e('Apply changes to:'); ?></strong><br /> 159 <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target"> 160 <fieldset> 161 <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend> 136 162 137 163 <label class="imgedit-label"> 138 164 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" /> … … 145 171 <label class="imgedit-label"> 146 172 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" /> 147 173 <?php _e('All sizes except thumbnail'); ?></label> 148 </ p>174 </fieldset> 149 175 </div> 176 </div> 150 177 151 178 <?php } ?> 152 179 153 180 </div> 154 181 155 <div class="imgedit-panel-content ">182 <div class="imgedit-panel-content wp-clearfix"> 156 183 <?php echo $note; ?> 157 <div class="imgedit-menu ">158 < div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php184 <div class="imgedit-menu wp-clearfix"> 185 <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 159 186 160 187 // On some setups GD library does not provide imagerotate() - Ticket #11536 161 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?> 162 <div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div> 163 <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div> 188 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { 189 $note_no_rotate = ''; 190 ?> 191 <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> 192 <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> 164 193 <?php } else { 165 $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');194 $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>'; 166 195 ?> 167 <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>168 <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>196 <button type="button" class="imgedit-rleft button disabled" disabled></button> 197 <button type="button" class="imgedit-rright button disabled" disabled></button> 169 198 <?php } ?> 170 199 171 < div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>172 < div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>200 <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> 201 <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> 173 202 174 < 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>175 < 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>176 < br class="clear" />203 <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> 204 <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> 205 <?php echo $note_no_rotate; ?> 177 206 </div> 178 207 179 208 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" /> … … 184 213 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" /> 185 214 186 215 <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap"> 187 <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' ); ?>" />216 <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="" /> 188 217 </div> 189 218 190 219 <div class="imgedit-submit"> 191 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button " value="<?php esc_attr_e( 'Cancel' ); ?>" />220 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" /> 192 221 <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' ); ?>" /> 193 222 </div> 194 223 </div> … … 562 591 563 592 $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) ); 564 593 565 if ( is_wp_error( $img ) ) 566 return false; 594 if ( is_wp_error( $img ) ) { 595 return false; 596 } 567 597 568 598 $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null; 569 599 if ( $changes ) -
src/wp-admin/includes/media.php
2701 2701 $alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true ); 2702 2702 2703 2703 $att_url = wp_get_attachment_url( $post->ID ); ?> 2704 <div class="wp_attachment_holder ">2704 <div class="wp_attachment_holder wp-clearfix"> 2705 2705 <?php 2706 2706 if ( wp_attachment_is_image( $post->ID ) ) : 2707 2707 $image_edit_button = ''; … … 2713 2713 2714 2714 <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div> 2715 2715 2716 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image " id="media-head-<?php echo $attachment_id; ?>">2716 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>"> 2717 2717 <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> 2718 2718 <p><?php echo $image_edit_button; ?></p> 2719 2719 </div> -
src/wp-admin/js/image-edit.js
11 11 return f | 0; 12 12 }, 13 13 14 setDisabled : function(el, s) { 14 setDisabled : function( el, s ) { 15 /* 16 * `el` can be a single form element or a fieldset. Before #28864, the disabled state on 17 * some text fields was handled targeting $('input', el). Now we need to handle the 18 * disabled state on buttons too so we can just target `el` regardless if it's a single 19 * element or a fieldset because when a fieldset is disabled, its descendants are disabled too. 20 */ 15 21 if ( s ) { 16 el.removeClass('disabled'); 17 $('input', el).removeAttr('disabled'); 22 el.removeClass( 'disabled' ).prop( 'disabled', false ); 18 23 } else { 19 el.addClass('disabled'); 20 $('input', el).prop('disabled', true); 24 el.addClass( 'disabled' ).prop( 'disabled', true ); 21 25 } 22 26 }, 23 27 … … 63 67 }, 64 68 65 69 toggleHelp : function(el) { 66 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 70 var $el = $( el ); 71 $el 72 .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' ) 73 .parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 74 67 75 return false; 68 76 }, 69 77 … … 166 174 }; 167 175 168 176 img = $( '<img id="image-preview-' + postid + '" alt="" />' ) 169 .on( 'load', function() {170 var max1, max2, parent = $( '#imgedit-crop-' + postid), t = imageEdit;177 .on( 'load', { history: data.history }, function( event ) { 178 var max1, max2, parent = $( '#imgedit-crop-' + postid ), t = imageEdit, historyObj; 171 179 180 if ( '' !== event.data.history ) { 181 historyObj = JSON.parse( event.data.history ); 182 // If last executed action in history is a crop action. 183 if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) { 184 /* 185 * A crop action has completed and the crop button gets disabled 186 * ensure the undo button is enabled. 187 */ 188 t.setDisabled( $( '#image-undo-' + postid) , true ); 189 // Move focus to the undo button to avoid a focus loss. 190 $( '#image-undo-' + postid ).focus(); 191 } 192 } 193 172 194 parent.empty().append(img); 173 195 174 196 // w, h are the new full size dims … … 305 327 var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid), 306 328 btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner'); 307 329 308 btn.prop('disabled', true); 330 /* 331 * Instead of disabling the button, which causes a focus loss and makes screen 332 * readers announce "unavailable", return if the button was already clicked. 333 */ 334 if ( btn.hasClass( 'button-activated' ) ) { 335 return; 336 } 337 309 338 spin.addClass( 'is-active' ); 310 339 311 340 data = { … … 318 347 dfd = $.ajax({ 319 348 url: ajaxurl, 320 349 type: 'post', 321 data: data 350 data: data, 351 beforeSend: function() { 352 btn.addClass( 'button-activated' ); 353 } 322 354 }).done(function( html ) { 323 355 elem.html( html ); 324 356 head.fadeOut('fast', function(){ 325 357 elem.fadeIn('fast'); 326 btn.remove Attr('disabled');358 btn.removeClass( 'button-activated' ); 327 359 spin.removeClass( 'is-active' ); 328 360 }); 329 361 }); … … 337 369 this.initCrop(postid, img, parent); 338 370 this.setCropSelection(postid, 0); 339 371 this.toggleEditor(postid, 0); 372 // Editor is ready, move focus to the first focusable element. 373 $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus(); 340 374 }, 341 375 342 376 initCrop : function(postid, image, parent) { … … 429 463 // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way 430 464 else { 431 465 $('#image-editor-' + postid).fadeOut('fast', function() { 432 $('#media-head-' + postid).fadeIn('fast'); 466 $( '#media-head-' + postid ).fadeIn( 'fast', function() { 467 // Move focus back to the Edit Image button. Runs also when saving. 468 $( '#imgedit-open-btn-' + postid ).focus(); 469 }); 433 470 $(this).empty(); 434 471 }); 435 472 } … … 453 490 454 491 addStep : function(op, postid, nonce) { 455 492 var t = this, elem = $('#imgedit-history-' + postid), 456 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],457 undone = $('#imgedit-undone-' + postid),458 pop = t.intval(undone.val());493 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [], 494 undone = $( '#imgedit-undone-' + postid ), 495 pop = t.intval( undone.val() ); 459 496 460 497 while ( pop > 0 ) { 461 498 history.pop(); … … 516 553 elem.val(pop); 517 554 t.refreshEditor(postid, nonce, function() { 518 555 var elem = $('#imgedit-history-' + postid), 519 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];556 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : []; 520 557 521 558 t.setDisabled($('#image-redo-' + postid), true); 522 559 t.setDisabled(button, pop < history.length); 560 // When undo gets disabled, move focus to the redo button to avoid a focus loss. 561 if ( pop === history.length ) { 562 $( '#image-redo-' + postid ).focus(); 563 } 523 564 }); 524 565 }, 525 566 … … 535 576 t.refreshEditor(postid, nonce, function() { 536 577 t.setDisabled($('#image-undo-' + postid), true); 537 578 t.setDisabled(button, pop > 0); 579 // When redo gets disabled, move focus to the undo button to avoid a focus loss. 580 if ( 0 === pop ) { 581 $( '#image-undo-' + postid ).focus(); 582 } 538 583 }); 539 584 }, 540 585 -
src/wp-includes/css/media-views.css
22 22 -webkit-overflow-scrolling: touch; 23 23 } 24 24 25 .media-modal legend, 26 .media-modal label { 27 font-size: 13px; 28 } 29 25 30 .media-frame input, 26 31 .media-frame textarea { 27 32 padding: 6px 8px; … … 110 115 } 111 116 112 117 .media-frame :-moz-placeholder { 113 118 color: #a9a9a9; 114 119 } 115 120 116 121 .media-frame .hidden { … … 394 399 color: #666; 395 400 } 396 401 397 .compat-item label span 402 .compat-item label span { 398 403 text-align: right; 399 404 } 400 405 … … 1734 1739 .media-modal .imgedit-wrap .imgedit-settings { 1735 1740 background: #f3f3f3; 1736 1741 border-left: 1px solid #ddd; 1737 padding: 016px 16px;1742 padding: 20px 16px 16px; 1738 1743 position: absolute; 1739 1744 top: 0; 1740 1745 right: 0; … … 1762 1767 padding: 0; 1763 1768 } 1764 1769 1770 .media-modal .imgedit-group-top { 1771 margin: 0; 1772 } 1773 1765 1774 .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ 1766 .media-modal .imgedit-group-top h2 { 1775 .media-modal .imgedit-group-top h2, 1776 .media-modal .imgedit-group-top h2 .button-link { 1777 display: inline-block; 1767 1778 text-transform: uppercase; 1768 1779 font-size: 12px; 1769 1780 color: #666; 1770 1781 margin: 0; 1771 margin-top: 24px;1782 margin-top: 3px; 1772 1783 } 1773 1784 1774 1785 .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ 1775 .media-modal .imgedit-group-top h2 a { 1786 .media-modal .imgedit-group-top h2 a, 1787 .media-modal .imgedit-group-top h2 .button-link { 1776 1788 text-decoration: none; 1777 1789 color: #666; 1778 1790 } 1779 1791 1780 .media-modal .imgedit-help-toggle { 1781 margin-top: -2px; 1792 /* higher specificity than media.css */ 1793 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle, 1794 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover, 1795 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active { 1796 border: 1px solid transparent; 1797 margin: 0; 1798 padding: 0; 1799 background: transparent; 1800 color: #0074a2; 1801 font-size: 20px; 1802 line-height: 1; 1782 1803 cursor: pointer; 1783 color: #666; 1804 -webkit-box-sizing: content-box; 1805 -moz-box-sizing: content-box; 1806 box-sizing: content-box; 1807 -webkit-box-shadow: none; 1808 box-shadow: none; 1784 1809 } 1785 1810 1811 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { 1812 color: #0074a2; 1813 border-color: #5b9dd9; 1814 outline: none; 1815 -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1816 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1817 } 1818 1819 .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle { 1820 margin-top: -3px; 1821 } 1822 1823 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { 1824 margin-top: -2px; 1825 } 1826 1786 1827 .media-modal .imgedit-help-toggled span.dashicons:before { 1787 1828 content: "\f142"; 1788 1829 } 1789 1830 1790 .media-modal .imgedit- group img{1791 margin -top: 5px;1831 .media-modal .imgedit-thumbnail-preview { 1832 margin: 10px 8px 0 0; 1792 1833 } 1793 1834 1835 .imgedit-thumbnail-preview-caption { 1836 display: block; 1837 } 1838 1794 1839 .media-modal .imgedit-wrap div.updated { 1795 1840 margin: 0; 1796 1841 margin-bottom: 16px;