<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[36223] trunk/src: Media: make the Image Editor usable with a keyboard.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/36223">36223</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/36223","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>afercia</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-01-08 19:12:11 +0000 (Fri, 08 Jan 2016)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/28864">#28864</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincssmediacss">trunk/src/wp-admin/css/media.css</a></li>
<li><a href="#trunksrcwpadminincludesimageeditphp">trunk/src/wp-admin/includes/image-edit.php</a></li>
<li><a href="#trunksrcwpadminincludesmediaphp">trunk/src/wp-admin/includes/media.php</a></li>
<li><a href="#trunksrcwpadminjsimageeditjs">trunk/src/wp-admin/js/image-edit.js</a></li>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2016-01-08 19:00:39 UTC (rev 36222)
+++ trunk/src/wp-admin/css/common.css 2016-01-08 19:12:11 UTC (rev 36223)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -274,11 +274,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> a:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> a:focus .media-icon img {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #124964;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- -webkit-box-shadow:
- 0 0 0 1px #5b9dd9,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ -webkit-box-shadow:
+ 0 0 0 1px #5b9dd9,
</ins><span class="cx" style="display: block; padding: 0 10px"> 0 0 2px 1px rgba(30, 140, 190, .8);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- box-shadow:
- 0 0 0 1px #5b9dd9,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ box-shadow:
+ 0 0 0 1px #5b9dd9,
</ins><span class="cx" style="display: block; padding: 0 10px"> 0 0 2px 1px rgba(30, 140, 190, .8);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1670,7 +1670,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .screen-options + .screen-options {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 10px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 10px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .metabox-prefs .submit {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2952,10 +2952,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .js .postbox .handlediv:focus .toggle-indicator:before {
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-shadow:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 0 0 0 1px #5b9dd9,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 0 0 0 1px #5b9dd9,
</ins><span class="cx" style="display: block; padding: 0 10px"> 0 0 2px 1px rgba(30, 140, 190, .8);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- box-shadow:
- 0 0 0 1px #5b9dd9,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ box-shadow:
+ 0 0 0 1px #5b9dd9,
</ins><span class="cx" style="display: block; padding: 0 10px"> 0 0 2px 1px rgba(30, 140, 190, .8);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadmincssmediacss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/media.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/media.css 2016-01-08 19:00:39 UTC (rev 36222)
+++ trunk/src/wp-admin/css/media.css 2016-01-08 19:12:11 UTC (rev 36223)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -640,7 +640,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .edit-attachment-frame .edit-media-header .left,
</span><span class="cx" style="display: block; padding: 0 10px"> .edit-attachment-frame .edit-media-header .right {
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #777;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #72777c;
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> height: 50px;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 50px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -650,7 +650,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> border-left: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- transition: color .1s ease-in-out, background .1s ease-in-out;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ transition: color .1s ease-in-out, background .1s ease-in-out;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .upload-php .media-modal-close {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -837,12 +837,18 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .imgedit-wrap {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-top: 10px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.imgedit-settings p {
- margin: 8px 0 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-settings p,
+.imgedit-settings fieldset {
+ margin: 8px 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-settings legend {
+ margin-bottom: 5px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .describe .imgedit-wrap .imgedit-settings {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0 5px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -853,13 +859,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp_attachment_holder .imgedit-wrap > div {
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- overflow: hidden;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding-right: 16px;
- width: auto;
- overflow: hidden;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 3px 16px 0 0;
+ float: left;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp_attachment_holder .imgedit-wrap .imgedit-settings {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -908,7 +912,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: grey;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp_attachment_image,
</del><span class="cx" style="display: block; padding: 0 10px"> .A1B1 {
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -928,41 +931,39 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .imgedit-menu {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ min-width: 300px;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 0 0 12px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- min-width: 300px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.imgedit-menu div {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-menu .note-no-rotate {
+ clear: both;
+ margin: 0;
+ padding: 1em 0 0;
+}
+
+.image-editor .imgedit-menu .button {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 32px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border: 1px solid #d5d5d5;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: 32px;
+ margin: 0 8px 0 0;
+ padding: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> background: #f1f1f1;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0 8px 0 0;
- height: 32px;
</del><span class="cx" style="display: block; padding: 0 10px"> -webkit-font-smoothing: antialiased;
</span><span class="cx" style="display: block; padding: 0 10px"> -moz-osx-font-smoothing: grayscale;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- text-align: center;
- line-height: 28px;
- color: #777;
- cursor: pointer;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 16px;
+ color: #72777c;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.imgedit-menu div:before {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-menu .button:before {
</ins><span class="cx" style="display: block; padding: 0 10px"> font: normal 20px/1 dashicons;
</span><span class="cx" style="display: block; padding: 0 10px"> speak: none;
</span><span class="cx" style="display: block; padding: 0 10px"> vertical-align: middle;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.imgedit-menu div:hover {
- border-color: #c1c1c1;
- background-color: #eaeaea;
- color: #32373c;
-}
-
-.imgedit-menu div.disabled {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-menu .button.disabled {
</ins><span class="cx" style="display: block; padding: 0 10px"> border-color: #ccc;
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #ddd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #777;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #72777c;
</ins><span class="cx" style="display: block; padding: 0 10px"> filter: alpha(opacity=50);
</span><span class="cx" style="display: block; padding: 0 10px"> opacity: 0.5;
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: default;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1028,12 +1029,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 8px 0 3px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.imgedit-applyto img {
- margin: 0 8px 0 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-thumbnail-preview {
+ margin: 10px 8px 0 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-thumbnail-preview-caption {
+ display: block;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
</span><span class="cx" style="display: block; padding: 0 10px"> #poststuff .imgedit-group-top h2 {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: inline-block;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 14px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1046,8 +1052,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .imgedit-applyto .imgedit-label {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 2px 0 0;
</del><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: .5em 0 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .imgedit-help {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1055,10 +1061,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-style: italic;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-a.imgedit-help-toggle {
- text-decoration: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* higher specificity than buttons */
+.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;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.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 );
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .form-table td.imgedit-response {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1073,6 +1102,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .imgedit-wrap .nowrap {
</span><span class="cx" style="display: block; padding: 0 10px"> white-space: nowrap;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-size: 12px;
+ line-height: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> span.imgedit-scale-warn {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1083,11 +1114,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> vertical-align: middle;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-save-target {
+ margin: 8px 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .imgedit-group {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 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;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> audio, video {
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1131,6 +1187,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .media-upload-form .media-item .error {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 10px 0 10px 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 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: 60px;
+ font-size: 16px;
+ padding: 6px 10px;
+ }
+
+ .imgedit-applyto .imgedit-label {
+ vertical-align: middle;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span></span></pre></div>
<a id="trunksrcwpadminincludesimageeditphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/image-edit.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/image-edit.php 2016-01-08 19:00:39 UTC (rev 36222)
+++ trunk/src/wp-admin/includes/image-edit.php 2016-01-08 19:12:11 UTC (rev 36223)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -40,13 +40,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="imgedit-wrap">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="imgedit-wrap wp-clearfix">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div id="imgedit-panel-<?php echo $post_id; ?>">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-settings">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help">
</span><span class="cx" style="display: block; padding: 0 10px"> <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>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,9 +55,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' × ' . $meta['height'] ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endif ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-submit">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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' ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <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>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,7 +79,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help">
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e('Discard any changes and restore the original image.');
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -84,7 +98,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help">
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -97,23 +112,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( $thumb && $sub_sizes ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -122,17 +146,19 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group imgedit-applyto">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px"> <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>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <figure class="imgedit-thumbnail-preview">
</ins><span class="cx" style="display: block; padding: 0 10px"> <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" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <br /><?php _e('Current thumbnail'); ?>
- </p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
+ </figure>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p id="imgedit-save-target-<?php echo $post_id; ?>">
- <strong><?php _e('Apply changes to:'); ?></strong><br />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
+ <fieldset>
+ <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <label class="imgedit-label">
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -145,35 +171,38 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <label class="imgedit-label">
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
</span><span class="cx" style="display: block; padding: 0 10px"> <?php _e('All sizes except thumbnail'); ?></label>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </fieldset>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php } ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="imgedit-panel-content">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="imgedit-panel-content wp-clearfix">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php echo $note; ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // On some setups GD library does not provide imagerotate() - Ticket #11536
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
+ $note_no_rotate = '';
+ ?>
+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>
- <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="imgedit-rleft button disabled" disabled></button>
+ <button type="button" class="imgedit-rright button disabled" disabled></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php } ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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; ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -184,11 +213,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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' ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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="" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-submit">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <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' ); ?>" />
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -562,8 +591,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( is_wp_error( $img ) )
- return false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( is_wp_error( $img ) ) {
+ return false;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $changes )
</span></span></pre></div>
<a id="trunksrcwpadminincludesmediaphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/media.php 2016-01-08 19:00:39 UTC (rev 36222)
+++ trunk/src/wp-admin/includes/media.php 2016-01-08 19:12:11 UTC (rev 36223)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2701,7 +2701,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $att_url = wp_get_attachment_url( $post->ID ); ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="wp_attachment_holder">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="wp_attachment_holder wp-clearfix">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> if ( wp_attachment_is_image( $post->ID ) ) :
</span><span class="cx" style="display: block; padding: 0 10px"> $image_edit_button = '';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2713,7 +2713,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <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>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php echo $image_edit_button; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpadminjsimageeditjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/image-edit.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/image-edit.js 2016-01-08 19:00:39 UTC (rev 36222)
+++ trunk/src/wp-admin/js/image-edit.js 2016-01-08 19:12:11 UTC (rev 36223)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11,13 +11,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return f | 0;
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- setDisabled : function(el, s) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( s ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- el.removeClass('disabled');
- $('input', el).removeAttr('disabled');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ el.removeClass( 'disabled' ).prop( 'disabled', false );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- el.addClass('disabled');
- $('input', el).prop('disabled', true);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ el.addClass( 'disabled' ).prop( 'disabled', true );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,7 +67,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> toggleHelp : function(el) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -166,9 +174,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> img = $( '<img id="image-preview-' + postid + '" alt="" />' )
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .on('load', function() {
- var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .on( 'load', { history: data.history }, function( event ) {
+ var max1, max2,
+ parent = $( '#imgedit-crop-' + postid ),
+ t = imageEdit,
+ historyObj;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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();
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> parent.empty().append(img);
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // w, h are the new full size dims
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -305,7 +330,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
</span><span class="cx" style="display: block; padding: 0 10px"> btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- btn.prop('disabled', true);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * 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;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> spin.addClass( 'is-active' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> data = {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -318,12 +350,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> dfd = $.ajax({
</span><span class="cx" style="display: block; padding: 0 10px"> url: ajaxurl,
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'post',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- data: data
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ data: data,
+ beforeSend: function() {
+ btn.addClass( 'button-activated' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }).done(function( html ) {
</span><span class="cx" style="display: block; padding: 0 10px"> elem.html( html );
</span><span class="cx" style="display: block; padding: 0 10px"> head.fadeOut('fast', function(){
</span><span class="cx" style="display: block; padding: 0 10px"> elem.fadeIn('fast');
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- btn.removeAttr('disabled');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ btn.removeClass( 'button-activated' );
</ins><span class="cx" style="display: block; padding: 0 10px"> spin.removeClass( 'is-active' );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -337,6 +372,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> this.initCrop(postid, img, parent);
</span><span class="cx" style="display: block; padding: 0 10px"> this.setCropSelection(postid, 0);
</span><span class="cx" style="display: block; padding: 0 10px"> this.toggleEditor(postid, 0);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Editor is ready, move focus to the first focusable element.
+ $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> initCrop : function(postid, image, parent) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -429,7 +466,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
</span><span class="cx" style="display: block; padding: 0 10px"> else {
</span><span class="cx" style="display: block; padding: 0 10px"> $('#image-editor-' + postid).fadeOut('fast', function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $('#media-head-' + postid).fadeIn('fast');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '#media-head-' + postid ).fadeIn( 'fast', function() {
+ // Move focus back to the Edit Image button. Runs also when saving.
+ $( '#imgedit-open-btn-' + postid ).focus();
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> $(this).empty();
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -453,9 +493,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> addStep : function(op, postid, nonce) {
</span><span class="cx" style="display: block; padding: 0 10px"> var t = this, elem = $('#imgedit-history-' + postid),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
- undone = $('#imgedit-undone-' + postid),
- pop = t.intval(undone.val());
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
+ undone = $( '#imgedit-undone-' + postid ),
+ pop = t.intval( undone.val() );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> while ( pop > 0 ) {
</span><span class="cx" style="display: block; padding: 0 10px"> history.pop();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -516,10 +556,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> elem.val(pop);
</span><span class="cx" style="display: block; padding: 0 10px"> t.refreshEditor(postid, nonce, function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var elem = $('#imgedit-history-' + postid),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> t.setDisabled($('#image-redo-' + postid), true);
</span><span class="cx" style="display: block; padding: 0 10px"> t.setDisabled(button, pop < history.length);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // When undo gets disabled, move focus to the redo button to avoid a focus loss.
+ if ( history.length === pop ) {
+ $( '#image-redo-' + postid ).focus();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -535,6 +579,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> t.refreshEditor(postid, nonce, function() {
</span><span class="cx" style="display: block; padding: 0 10px"> t.setDisabled($('#image-undo-' + postid), true);
</span><span class="cx" style="display: block; padding: 0 10px"> t.setDisabled(button, pop > 0);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // When redo gets disabled, move focus to the undo button to avoid a focus loss.
+ if ( 0 === pop ) {
+ $( '#image-undo-' + postid ).focus();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/media-views.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/media-views.css 2016-01-08 19:00:39 UTC (rev 36222)
+++ trunk/src/wp-includes/css/media-views.css 2016-01-08 19:12:11 UTC (rev 36223)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -22,6 +22,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-overflow-scrolling: touch;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal legend,
+.media-modal label {
+ font-size: 13px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-frame input,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame textarea {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px 8px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,7 +115,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame :-moz-placeholder {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #a9a9a9;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #a9a9a9;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame .hidden {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -394,7 +399,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #666;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.compat-item label span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.compat-item label span {
</ins><span class="cx" style="display: block; padding: 0 10px"> text-align: right;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1734,7 +1739,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-wrap .imgedit-settings {
</span><span class="cx" style="display: block; padding: 0 10px"> background: #f3f3f3;
</span><span class="cx" style="display: block; padding: 0 10px"> border-left: 1px solid #ddd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 0 16px 16px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 20px 16px 16px;
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1762,35 +1767,75 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal .imgedit-group-top {
+ margin: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-modal .imgedit-group-top h2 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal .imgedit-group-top h2,
+.media-modal .imgedit-group-top h2 .button-link {
+ display: inline-block;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-transform: uppercase;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #666;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 24px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 3px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-modal .imgedit-group-top h2 a {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal .imgedit-group-top h2 a,
+.media-modal .imgedit-group-top h2 .button-link {
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #666;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-modal .imgedit-help-toggle {
- margin-top: -2px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* higher specificity than media.css */
+.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;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #666;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ -webkit-box-shadow: none;
+ box-shadow: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.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;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-help-toggled span.dashicons:before {
</span><span class="cx" style="display: block; padding: 0 10px"> content: "\f142";
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-modal .imgedit-group img {
- margin-top: 5px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal .imgedit-thumbnail-preview {
+ margin: 10px 8px 0 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.imgedit-thumbnail-preview-caption {
+ display: block;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-wrap div.updated {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 16px;
</span></span></pre>
</div>
</div>
</body>
</html>