<!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>[32649] trunk/src: Customizer: Replace accordion behavior of sections with a slide-in navigation.</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/32649">32649</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/32649","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ocean90</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-05-29 13:56:39 +0000 (Fri, 29 May 2015)</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'>Customizer: Replace accordion behavior of sections with a slide-in navigation.
This allows users to focus on the contents of the active section more easily and separating the navigation from the content/controls in the Customizer.
props valendesigns, celloexpressions.
see <a href="https://core.trac.wordpress.org/ticket/31336">#31336</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizewidgetscss">trunk/src/wp-admin/css/customize-widgets.css</a></li>
<li><a href="#trunksrcwpadmincustomizephp">trunk/src/wp-admin/customize.php</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjscustomizewidgetsjs">trunk/src/wp-admin/js/customize-widgets.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizepanelphp">trunk/src/wp-includes/class-wp-customize-panel.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizesectionphp">trunk/src/wp-includes/class-wp-customize-section.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizewidgetsphp">trunk/src/wp-includes/class-wp-customize-widgets.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></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/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-admin/css/customize-controls.css 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -20,7 +20,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"> #customize-controls .description {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #666666;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #555;
</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"> #customize-header-actions .button-primary {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -50,71 +50,132 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow-x: hidden;
</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">-#customize-info {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info {
</ins><span class="cx" style="display: block; padding: 0 10px"> border: none;
</span><span class="cx" style="display: block; padding: 0 10px"> border-top: 1px solid #ddd;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom: 1px solid #ddd;
+ margin-bottom: 15px;
</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">-#customize-info .accordion-section-title {
- background-color: #fff;
- color: #666666;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .accordion-section-title {
+ background: #fff;
+ color: #555;
</ins><span class="cx" style="display: block; padding: 0 10px"> border-left: none;
</span><span class="cx" style="display: block; padding: 0 10px"> border-right: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-bottom: 1px solid #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom: none;
+ cursor: default;
</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">-#customize-info.open .accordion-section-title:after,
-#customize-info .accordion-section-title:hover:after,
-#customize-info .accordion-section-title:focus:after {
- color: #555555;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info.open .accordion-section-title:after,
+#customize-controls .customize-info .accordion-section-title:hover:after,
+#customize-controls .customize-info .accordion-section-title:focus:after {
+ color: #333;
</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">-#customize-info .preview-notice {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .accordion-section-title:after {
+ display: none;
+}
+
+#customize-controls .customize-info .preview-notice {
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 24px;
</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">-#customize-info .theme-name {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section .customize-section-title h3,
+#customize-controls .control-section h3.customize-section-title,
+#customize-controls .customize-info .panel-title {
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 200;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 24px;
</span><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">+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
</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">-#customize-info .theme-screenshot {
- width: 258px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-section-title span.customize-action {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
</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">-#customize-info .theme-description {
- margin-top: 1em;
- color: #666666;
- line-height: 20px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .customize-help-toggle {
+ position: absolute;
+ top: 4px;
+ right: 1px;
+ padding: 20px 20px 10px 10px;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ -webkit-appearance: none;
+ background: transparent;
+ color: #555;
+ border: 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">+#customize-controls .customize-info .customize-help-toggle:before {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+}
+
+#customize-controls .customize-info.open .customize-help-toggle,
+#customize-controls .customize-info .customize-help-toggle:focus,
+#customize-controls .customize-info .customize-help-toggle:hover {
+ color: #0073aa;
+}
+
+#customize-controls .customize-info .customize-panel-description {
+ color: #555;
+ display: none;
+ background: #fff;
+ padding: 12px 15px;
+ border-top: 1px solid #ddd;
+}
+
+#customize-controls .customize-info .customize-panel-description p:first-child {
+ margin-top: 0;
+}
+
+#customize-controls .customize-info .customize-panel-description p:last-child {
+ margin-bottom: 0;
+}
+
+#customize-controls .current-panel .control-section > h3.accordion-section-title {
+ padding-right: 30px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section {
</span><span class="cx" style="display: block; padding: 0 10px"> border: none;
</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"> #customize-theme-controls .accordion-section-title {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #555555;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #555;
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-bottom: 1px solid #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom: 1px solid #eee;
</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">+#customize-theme-controls .accordion-section-title:after {
+ content: "\f345";
+}
+
+.rtl #customize-theme-controls .accordion-section-title:after {
+ content: "\f341";
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .accordion-section-content {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #555555;
- background: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #555;
+ background: transparent;
</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">-#customize-info.open .accordion-section-title,
-#customize-info .accordion-section-title:hover,
-#customize-info .accordion-section-title:focus,
-#customize-theme-controls .control-section:hover > .accordion-section-title,
-#customize-theme-controls .control-section .accordion-section-title:hover,
-#customize-theme-controls .control-section.open .accordion-section-title,
-#customize-theme-controls .control-section .accordion-section-title:focus {
- color: #23282d;
- background: #f5f5f5;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section:hover > .accordion-section-title,
+#customize-controls .control-section .accordion-section-title:hover,
+#customize-controls .control-section.open .accordion-section-title,
+#customize-controls .control-section .accordion-section-title:focus {
+ color: #fff;
+ background: #0073aa;
</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"> .js .control-section:hover .accordion-section-title,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -128,16 +189,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section .accordion-section-title:hover:after,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section.open .accordion-section-title:after,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section .accordion-section-title:focus:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #555;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #fff;
</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">-#customize-info.open,
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section.open {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-bottom: 1px solid #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom: 1px solid #eee;
</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"> #customize-theme-controls .control-section.open .accordion-section-title {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-bottom-color: #eeeeee !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom-color: #eee !important;
</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"> #customize-theme-controls .control-section:last-of-type.open,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -145,50 +205,87 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-bottom-color: #ddd;
</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">-#customize-theme-controls > ul,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls > ul {
+ margin: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .accordion-section-content {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: absolute;
+ left: 100%;
+ top: 0;
+ width: -webkit-calc(100% - 24px);
+ width: calc(100% - 24px);
+ padding: 12px;
</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">-.control-section.control-panel > .accordion-section-title {
- padding-right: 54px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-section-description-container {
+ margin-bottom: 15px;
</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">-.control-section.control-panel > .accordion-section-title:after {
- content: "\f345";
- background: #f5f5f5;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-section-title {
+ margin: -12px;
+ border-bottom: 1px solid #ddd;
+ background: #fff;
+}
+
+#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
+ border-bottom: 1px solid #ddd;
+ padding: 12px 12px 12px 12px;
+}
+
+.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
+ padding: 12px 12px 13px 12px;
+}
+
+.customize-section-title h3,
+h3.customize-section-title {
+ padding: 10px 10px 12px 14px;
+ margin: 0;
+ line-height: 21px;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #555;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: 38px;
- height: 100%;
- margin: -11px -10px -11px 0; /* compensate for positioning */
- line-height: 45px;
- padding-left: 5px;
- border-left: 1px solid #eee;
- z-index: 0;
</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">-#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
-#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
- background: #ddd;
- color: #000;
- border: 1px solid #d9d9d9;
- border-right: none;
- margin-top: -12px;
- line-height: 44px;
- z-index: 1;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
+ margin-top: 12px;
</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">+#customize-theme-controls {
+ position: relative;
+ left: 0;
+ -webkit-transition: .18s left ease-in-out;
+ transition: .18s left ease-in-out;
+}
+
+.ios #customize-theme-controls {
+ -webkit-transition: left 0s;
+ transition: left 0s;
+}
+
+.section-open #customize-info,
+.section-open #customize-theme-controls {
+ left: -100%;
+}
+
+.section-open .control-panel-back {
+ display: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .accordion-sub-container.control-panel-content {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 300px;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 300px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-top: 1px solid #ddd;
</del><span class="cx" style="display: block; padding: 0 10px"> -webkit-transition: left ease-in-out .18s;
</span><span class="cx" style="display: block; padding: 0 10px"> transition: left ease-in-out .18s;
</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">+.ios .accordion-sub-container.control-panel-content {
+ -webkit-transition: left 0s;
+ transition: left 0s;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .accordion-sub-container.control-panel-content.animating {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -242,15 +339,53 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
</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">-.ios .control-panel-back {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-panel-back,
+.customize-section-back {
+ display: block;
+ float: left;
+ width: 48px;
+ height: 69px;
+ padding: 0 24px 0 0;
+ margin: 0;
+ background: #fff;
+ border: none;
+ border-right: 1px solid #ddd;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ cursor: pointer;
+ -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
+ transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
+}
+
+.customize-section-back {
+ height: 70px;
+}
+
+.ios .control-panel-back,
+.ios .customize-panel-back,
+.ios .customize-section-back {
</ins><span class="cx" style="display: block; padding: 0 10px"> -webkit-transition: left 0s;
</span><span class="cx" style="display: block; padding: 0 10px"> transition: left 0s;
</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">-.collapsed .control-panel-back {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.collapsed .control-panel-back,
+.ios .customize-panel-back {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</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">+.ios .expanded.in-sub-panel .customize-panel-back {
+ display: block;
+}
+
+.panel-meta.customize-info .accordion-section-title {
+ margin-left: 48px;
+}
+
+#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
+ background: #fff;
+ color: #555;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-overlay-close:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-overlay-close:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-controls-close:focus,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -267,6 +402,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</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">+.customize-panel-back:hover,
+.customize-panel-back:focus,
+.customize-section-back:hover,
+.customize-section-back:focus {
+ background: #0073aa;
+ border-color: #ccc;
+ color: #fff;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-overlay-close:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-controls-close:before {
</span><span class="cx" style="display: block; padding: 0 10px"> font: normal 22px/45px dashicons;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -276,6 +423,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> left: 13px;
</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">+.customize-panel-back:before,
+.customize-section-back:before {
+ font: normal 20px/69px dashicons;
+ content: "\f341";
+ position: relative;
+ left: 13px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .control-panel-back:before {
</span><span class="cx" style="display: block; padding: 0 10px"> font: normal 20px/45px dashicons;
</span><span class="cx" style="display: block; padding: 0 10px"> content: "\f341";
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -284,14 +439,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> left: 13px;
</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">-.in-sub-panel .control-panel-back {
- left: 0;
-}
-
-.current-panel > .accordion-section-title {
- height: 22px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-full-overlay-sidebar .wp-full-overlay-header {
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-transition: padding ease-in-out .18s;
</span><span class="cx" style="display: block; padding: 0 10px"> transition: padding ease-in-out .18s;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -345,28 +492,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transition: left 0s;
</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">-.control-section.control-panel .accordion-section-title .panel-title {
- font-size: 20px;
- font-weight: 200;
- line-height: 24px;
- display: block;
- border: none;
-}
-
-.control-section.control-panel .preview-notice {
- font-size: 13px;
- line-height: 24px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> p.customize-section-description {
</span><span class="cx" style="display: block; padding: 0 10px"> font-style: normal;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 22px;
+ margin-bottom: 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"> .customize-control {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-bottom: 8px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-bottom: 12px;
</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"> .customize-control select,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -498,7 +634,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"> .wp-full-overlay-sidebar {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #eee;
</ins><span class="cx" style="display: block; padding: 0 10px"> border-right: 1px solid #ddd;
</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">@@ -542,7 +678,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 4px 5px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border: 2px solid #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 2px solid #eee;
</ins><span class="cx" style="display: block; padding: 0 10px"> -webkit-user-select: none;
</span><span class="cx" style="display: block; padding: 0 10px"> -moz-user-select: none;
</span><span class="cx" style="display: block; padding: 0 10px"> -ms-user-select: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -555,7 +691,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 20px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #eee;
</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"> .customize-control .dropdown-arrow:after {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -575,7 +711,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control .dropdown-status {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #32373c;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #eeeeee;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #eee;
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 112px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -595,7 +731,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"> .customize-control-color .dropdown .dropdown-content {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #555555;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: #555;
</ins><span class="cx" style="display: block; padding: 0 10px"> border: 1px solid rgba(0, 0, 0, 0.15);
</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">@@ -897,7 +1033,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section-themes .accordion-section-title:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section-themes .accordion-section-title:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #555555;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #555;
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</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">@@ -913,8 +1049,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 100px; /* Space for the button */
</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">-.control-section-themes .accordion-section-title span {
- font-size: small;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section-themes .accordion-section-title span.customize-action,
+#customize-controls .customize-section-title span.customize-action {
+ font-size: 13px;
</ins><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 400;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -928,6 +1065,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: normal;
</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">+.control-section-themes .accordion-section-title:before {
+ display: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-themes-panel {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0 8px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -938,7 +1079,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> box-sizing: border-box;
</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">+.customize-themes-panel .accordion-section-title:first-child {
+ margin-top: 0;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
+ font-size: 14px;
+ font-weight: 600;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-themes-panel > h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 15px 8px 0 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -956,6 +1105,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 8px;
</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">+#customize-theme-controls .themes.accordion-section-content {
+ position: relative;
+ left: 0;
+ padding: 0;
+ width: 100%;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-browser .themes {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-bottom: 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1170,14 +1326,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 4px;
</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">- .adding-widget #customize-header-actions .primary-actions {
- display: none;
- }
-
- .adding-widget #customize-header-actions .secondary-actions {
- display: block;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-header-actions .button-primary {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 6px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizewidgetscss"></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/customize-widgets.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-widgets.css 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-admin/css/customize-widgets.css 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -14,6 +14,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</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">+.control-section.control-section-sidebar .accordion-section-content.ui-sortable {
+ overflow: visible;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-widget_form .widget-top {
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-transition: opacity 0.5s;
</span><span class="cx" style="display: block; padding: 0 10px"> transition: opacity 0.5s;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -348,12 +352,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 300px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 1;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #fff !important;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- border-right: 1px solid #dddddd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #eee !important;
+ -webkit-transition: left .18s;
+ transition: left .18s;
+ border-right: 1px solid #ddd;
</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">+.ios #available-widgets {
+ -webkit-transition: left 0s;
+ transition: left 0s;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #available-widgets-list {
</span><span class="cx" style="display: block; padding: 0 10px"> top: 46px;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -384,6 +393,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #available-widgets .widget-tpl {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 20px 15px 20px 60px;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #fff;
</ins><span class="cx" style="display: block; padding: 0 10px"> border-bottom: 1px solid #e4e4e4;
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -391,7 +401,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #available-widgets .widget-tpl:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> #available-widgets .widget-tpl.selected {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #fafafa;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #eee;
+ border-bottom-color: #ccc;
</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"> #available-widgets .widget-top,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -583,9 +594,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #available-widgets [class*="tweet"] .widget-title:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#available-widgets .customize-section-title {
+ display: none;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media screen and (max-height: 700px) and (min-width: 981px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .customize-control {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .customize-control-widget {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .widget-top {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -628,9 +642,46 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</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">+ #available-widgets .customize-section-title {
+ display: block;
+ margin: 0;
+ }
+
+ #available-widgets .customize-section-back {
+ height: 69px;
+ }
+
+ #available-widgets .customize-section-title h3 {
+ font-size: 20px;
+ font-weight: 200;
+ padding: 9px 10px 12px 14px;
+ margin: 0;
+ line-height: 24px;
+ color: #555;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ #available-widgets .customize-section-title .customize-action {
+ font-size: 13px;
+ display: block;
+ font-weight: 400;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #available-widgets-filter {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: static;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #fff;
</ins><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 10px 15px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ #available-widgets-list {
+ top: 140px;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincustomizephp"></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/customize.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/customize.php 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-admin/customize.php 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -147,13 +147,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="wp-full-overlay-sidebar-content" tabindex="-1">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div id="customize-info" class="accordion-section">
- <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div id="customize-info" class="accordion-section customize-info">
+ <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="preview-notice"><?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?></span>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="accordion-section-content"><?php
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="customize-panel-description"><?php
</ins><span class="cx" style="display: block; padding: 0 10px"> _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
</span><span class="cx" style="display: block; padding: 0 10px"> ?></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></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/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-admin/js/customize-controls.js 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -443,10 +443,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.1.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> attachEvents: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = this;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var section = this,
+ backBtn = section.container.find( '.customize-section-back' ),
+ sectionTitle = section.container.find( '.accordion-section-title' ).first();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Expand/Collapse accordion sections on click.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -454,8 +456,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( section.expanded() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> section.collapse();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ backBtn.attr( 'tabindex', '-1' );
+ sectionTitle.attr( 'tabindex', '0' );
+ sectionTitle.focus();
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> section.expand();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ sectionTitle.attr( 'tabindex', '-1' );
+ backBtn.attr( 'tabindex', '0' );
+ backBtn.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">@@ -499,18 +507,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} args
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeExpanded: function ( expanded, args ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = this,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var position, scroll, section = this,
+ container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> content = section.container.find( '.accordion-section-content' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ overlay = section.container.closest( '.wp-full-overlay' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> expand;
</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 ( expanded ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( expanded && ! section.container.hasClass( 'open' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.unchanged ) {
</span><span class="cx" style="display: block; padding: 0 10px"> expand = args.completeCallback;
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.scrollTop( 0 );
</ins><span class="cx" style="display: block; padding: 0 10px"> expand = function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content.stop().slideDown( args.duration, args.completeCallback );
</del><span class="cx" style="display: block; padding: 0 10px"> section.container.addClass( 'open' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ overlay.addClass( 'section-open' );
+ position = content.offset().top;
+ scroll = container.scrollTop();
+ content.css( 'margin-top', ( 45 - position - scroll ) );
</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">@@ -531,9 +545,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> expand();
</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">- } else {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } else if ( section.container.hasClass( 'open' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.container.removeClass( 'open' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content.slideUp( args.duration, args.completeCallback );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ overlay.removeClass( 'section-open' );
+ content.css( 'margin-top', 'inherit' );
+ container.scrollTop( 0 );
+ section.container.find( '.accordion-section-title' ).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">@@ -718,7 +735,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overlay = section.closest( '.wp-full-overlay' ),
</span><span class="cx" style="display: block; padding: 0 10px"> container = section.closest( '.wp-full-overlay-sidebar-content' ),
</span><span class="cx" style="display: block; padding: 0 10px"> siblings = container.find( '.open' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
</del><span class="cx" style="display: block; padding: 0 10px"> customizeBtn = section.find( '.customize-theme' ),
</span><span class="cx" style="display: block; padding: 0 10px"> changeBtn = section.find( '.change-theme' ),
</span><span class="cx" style="display: block; padding: 0 10px"> content = section.find( '.control-panel-content' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -748,8 +764,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</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">- topPanel.attr( 'tabindex', '-1' );
- changeBtn.attr( 'tabindex', '-1' );
</del><span class="cx" style="display: block; padding: 0 10px"> customizeBtn.focus();
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> siblings.removeClass( 'open' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -762,7 +776,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</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">- topPanel.attr( 'tabindex', '0' );
</del><span class="cx" style="display: block; padding: 0 10px"> customizeBtn.attr( 'tabindex', '0' );
</span><span class="cx" style="display: block; padding: 0 10px"> changeBtn.focus();
</span><span class="cx" style="display: block; padding: 0 10px"> container.scrollTop( 0 );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1012,9 +1025,21 @@
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Close panel.
+ panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+ return;
+ }
+ event.preventDefault(); // Keep this AFTER the key filter above
+
+ if ( panel.expanded() ) {
+ panel.collapse();
+ }
+ });
+
</ins><span class="cx" style="display: block; padding: 0 10px"> meta = panel.container.find( '.panel-meta:first' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1024,13 +1049,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</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">- var content = meta.find( '.accordion-section-content:first' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var content = meta.find( '.customize-panel-description:first' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( meta.hasClass( 'open' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> meta.toggleClass( 'open' );
</span><span class="cx" style="display: block; padding: 0 10px"> content.slideUp( panel.defaultExpandedArguments.duration );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( this ).attr( 'aria-expanded', false );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> content.slideDown( panel.defaultExpandedArguments.duration );
</span><span class="cx" style="display: block; padding: 0 10px"> meta.toggleClass( 'open' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( this ).attr( 'aria-expanded', 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">@@ -1089,12 +1116,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Note: there is a second argument 'args' passed
</span><span class="cx" style="display: block; padding: 0 10px"> var position, scroll,
</span><span class="cx" style="display: block; padding: 0 10px"> panel = this,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section = panel.container.closest( '.accordion-section' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
</ins><span class="cx" style="display: block; padding: 0 10px"> overlay = section.closest( '.wp-full-overlay' ),
</span><span class="cx" style="display: block; padding: 0 10px"> container = section.closest( '.wp-full-overlay-sidebar-content' ),
</span><span class="cx" style="display: block; padding: 0 10px"> siblings = container.find( '.open' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
- backBtn = overlay.find( '.control-panel-back' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
+ backBtn = section.find( '.customize-panel-back' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> panelTitle = section.find( '.accordion-section-title' ).first(),
</span><span class="cx" style="display: block; padding: 0 10px"> content = section.find( '.control-panel-content' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2573,7 +2600,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var parent, topFocus,
</span><span class="cx" style="display: block; padding: 0 10px"> body = $( document.body ),
</span><span class="cx" style="display: block; padding: 0 10px"> overlay = body.children( '.wp-full-overlay' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- title = $( '#customize-info .theme-name.site-title' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ title = $( '#customize-info .panel-title.site-title' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> closeBtn = $( '.customize-controls-close' ),
</span><span class="cx" style="display: block; padding: 0 10px"> saveBtn = $( '#save' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2588,14 +2615,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"> // Expand/Collapse the main customizer customize info.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault(); // Keep this AFTER the key filter above
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = $( this ).parent(),
- content = section.find( '.accordion-section-content:first' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var section = $( this ).closest( '.accordion-section' ),
+ content = section.find( '.customize-panel-description:first' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( section.hasClass( 'cannot-expand' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2604,9 +2631,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( section.hasClass( 'open' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> section.toggleClass( 'open' );
</span><span class="cx" style="display: block; padding: 0 10px"> content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( this ).attr( 'aria-expanded', false );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
</span><span class="cx" style="display: block; padding: 0 10px"> section.toggleClass( 'open' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( this ).attr( 'aria-expanded', 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></pre></div>
<a id="trunksrcwpadminjscustomizewidgetsjs"></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/customize-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-widgets.js 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-admin/js/customize-widgets.js 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -176,8 +176,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // If the available widgets panel is open and the customize controls are
</span><span class="cx" style="display: block; padding: 0 10px"> // interacted with (i.e. available widgets panel is blurred) then close the
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // available widgets panel.
- $( '#customize-controls, .customize-overlay-close' ).on( 'click keydown', function( e ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // available widgets panel. Also close on back button click.
+ $( '#customize-controls, .customize-overlay-close, #available-widgets .customize-section-title' ).on( 'click keydown', function( e ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
</span><span class="cx" style="display: block; padding: 0 10px"> self.close();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -366,7 +366,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> this.close( { returnFocus: true } );
</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">- if ( isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( this.currentSidebarControl && isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1270,7 +1270,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expanded ) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- self.expandControlSection();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'undefined' != typeof api.section( self.section ) && ! api.section( self.section ).expanded() ) {
+ self.expandControlSection();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Close all other widget controls before expanding this one
</span><span class="cx" style="display: block; padding: 0 10px"> api.control.each( function( otherControl ) {
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizepanelphp"></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/class-wp-customize-panel.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-panel.php 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-includes/class-wp-customize-panel.php 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -315,15 +315,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> protected function render_content() {
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <li class="panel-meta accordion-section control-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
- <div class="accordion-section-title" tabindex="0">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <li class="panel-meta customize-info accordion-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
+ <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
+ <div class="accordion-section-title">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="preview-notice"><?php
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s is the site/panel title in the Customizer */
</span><span class="cx" style="display: block; padding: 0 10px"> echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
</span><span class="cx" style="display: block; padding: 0 10px"> ?></span>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( ! empty( $this->description ) ) : ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="accordion-section-content description">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="description customize-panel-description">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php echo $this->description; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizesectionphp"></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/class-wp-customize-section.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-section.php 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-includes/class-wp-customize-section.php 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -305,14 +305,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
</span><span class="cx" style="display: block; padding: 0 10px"> <h3 class="accordion-section-title" tabindex="0">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php echo esc_html( $this->title ); ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
</ins><span class="cx" style="display: block; padding: 0 10px"> </h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <ul class="accordion-section-content">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php if ( ! empty( $this->description ) ) : ?>
- <li class="customize-section-description-container">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <li class="customize-section-description-container">
+ <div class="customize-section-title">
+ <button class="customize-section-back" tabindex="-1">
+ <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
+ </button>
+ <h3>
+ <span class="customize-action"><?php
+ if ( $this->panel ) {
+ /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
+ echo sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
+ } else {
+ _e( 'Customizing' );
+ }
+ ?></span>
+ <?php echo esc_html( $this->title ); ?>
+ </h3>
+ </div>
+ <?php if ( ! empty( $this->description ) ) : ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="description customize-section-description"><?php echo $this->description; ?></p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </li>
- <?php endif; ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php endif; ?>
+ </li>
</ins><span class="cx" style="display: block; padding: 0 10px"> </ul>
</span><span class="cx" style="display: block; padding: 0 10px"> </li>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -353,29 +369,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $this->manager->is_theme_active() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: theme name */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- printf( __( '<span>Active theme</span> %s' ), $this->title );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: theme name */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- printf( __( '<span>Previewing theme</span> %s' ), $this->title );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-themes-panel control-panel-content themes-php">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h3 class="accordion-section-title customize-section-title">
+ <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php _e( 'Themes' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </h2>
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </h3>
</ins><span class="cx" style="display: block; padding: 0 10px"> <h3 class="accordion-section-title customize-section-title">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $this->manager->is_theme_active() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: theme name */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- printf( __( '<span>Active theme</span> %s' ), $this->title );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: theme name */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- printf( __( '<span>Previewing theme</span> %s' ), $this->title );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
</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"> <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizewidgetsphp"></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/class-wp-customize-widgets.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-widgets.php 2015-05-29 13:09:26 UTC (rev 32648)
+++ trunk/src/wp-includes/class-wp-customize-widgets.php 2015-05-29 13:56:39 UTC (rev 32649)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -681,6 +681,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="available-widgets">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="customize-section-title">
+ <button class="customize-section-back" tabindex="-1">
+ <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
+ </button>
+ <h3>
+ <span class="customize-action"><?php
+ /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
+ echo sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'widgets' )->title ) );
+ ?></span>
+ <?php _e( 'Add a Widget' ); ?>
+ </h3>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div id="available-widgets-filter">
</span><span class="cx" style="display: block; padding: 0 10px"> <label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets…' ) ?>" />
</span></span></pre>
</div>
</div>
</body>
</html>