<!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>[38813] trunk: Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.</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/38813">38813</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/38813","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-10-19 03:19:13 +0000 (Wed, 19 Oct 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'>Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.
Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context.
For details, see https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/
Fixes <a href="https://core.trac.wordpress.org/ticket/37661">#37661</a>, <a href="https://core.trac.wordpress.org/ticket/34843">#34843</a>.
Props celloexpressions, folletto, westonruter, karmatosed, afercia.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincssthemescss">trunk/src/wp-admin/css/themes.css</a></li>
<li><a href="#trunksrcwpadmincustomizephp">trunk/src/wp-admin/customize.php</a></li>
<li><a href="#trunksrcwpadminincludesthemephp">trunk/src/wp-admin/includes/theme.php</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjsupdatesjs">trunk/src/wp-admin/js/updates.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizethemecontrolphp">trunk/src/wp-includes/customize/class-wp-customize-theme-control.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizethemessectionphp">trunk/src/wp-includes/customize/class-wp-customize-themes-section.php</a></li>
<li><a href="#trunktestsphpunittestscustomizemanagerphp">trunk/tests/phpunit/tests/customize/manager.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizethemespanelphp">trunk/src/wp-includes/customize/class-wp-customize-themes-panel.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 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-admin/css/customize-controls.css 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -271,21 +271,17 @@
</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 .customize-pane-child.open,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-theme-controls .customize-pane-child.current-panel,
-#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .customize-pane-child.current-panel {
</ins><span class="cx" style="display: block; padding: 0 10px"> -webkit-transform: none;
</span><span class="cx" style="display: block; padding: 0 10px"> -ms-transform: none;
</span><span class="cx" style="display: block; padding: 0 10px"> transform: none;
</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 .customize-themes-panel.customize-pane-child,
</del><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-theme-controls .customize-pane-parent,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-theme-controls .customize-pane-parent,
</span><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-info,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-info,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
-.in-themes-panel #customize-theme-controls .customize-pane-parent,
-.in-themes-panel #customize-info {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
</ins><span class="cx" style="display: block; padding: 0 10px"> visibility: hidden;
</span><span class="cx" style="display: block; padding: 0 10px"> height: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -296,10 +292,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-theme-controls .customize-pane-parent.busy,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
</del><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-info.busy,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-info.busy,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.in-themes-panel #customize-info.busy,
</del><span class="cx" style="display: block; padding: 0 10px"> .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.open,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.current-panel,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -309,13 +303,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</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-themes-panel #customize-theme-controls .customize-pane-parent,
-.in-themes-panel #customize-info {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.accordion-section-content,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.accordion-sub-container {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -406,7 +393,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 48px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: 71px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: 70px;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 0 24px 0 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -420,7 +407,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-section-back {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: 74px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: 73px;
</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"> .ios .customize-panel-back {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -996,15 +983,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> animation: customize-reload .75s;
</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 .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
-#customize-theme-controls .control-section-themes .accordion-section-title {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-panel-themes {
+ border-bottom: none;
+}
+
+#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-panel-themes > .accordion-section-title {
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: default;
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #555;
</span><span class="cx" style="display: block; padding: 0 10px"> border-top: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> border-bottom: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> border-left: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-right: none;
+ margin: 0 0 15px 0;
+ padding-right: 100px; /* Space for the button */
</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-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1012,29 +1005,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-top: 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">-#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
-#customize-theme-controls .control-section-themes > .accordion-section-title {
- margin: 0 0 15px;
-}
-
-#customize-controls .customize-themes-panel .accordion-section-title {
- margin: 15px -8px;
-}
-
-#customize-controls .control-section-themes .accordion-section-title,
-#customize-controls .customize-themes-panel .accordion-section-title {
- padding-right: 100px; /* Space for the button */
-}
-
-#customize-controls .control-section-themes .accordion-section-title span.customize-action,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-panel-themes .accordion-section-title span.customize-action,
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-section-title span.customize-action {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><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="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-controls .control-section-themes .accordion-section-title .change-theme,
-#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-panel-themes .accordion-section-title .change-theme {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 50%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1042,40 +1020,365 @@
</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="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-controls .control-section-themes .accordion-section-title:before {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-controls .customize-themes-panel {
- padding: 0 8px;
- background: #f1f1f1;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-panel-themes .customize-themes-full-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ transition: .18s left ease-in-out;
+ margin: 0 0 0 300px;
+ padding:25px;
+ overflow-y: scroll;
+ width: calc(100% - 350px);
+ height: calc(100% - 50px);
+ background: #eee;
+ z-index: 20;
</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-controls .customize-themes-panel .accordion-section-title:first-child {
- margin-top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Animations for opening the themes panel */
+#customize-header-actions .save,
+#customize-header-actions .spinner,
+#customize-header-actions .customize-controls-preview-toggle {
+ position: relative;
+ top: 0;
+ transition: .18s top ease-in-out;
</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-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-footer-actions,
+#customize-footer-actions .collapse-sidebar {
+ bottom: 0;
+ transition: .18s bottom ease-in-out;
+}
+
+.in-themes-panel:not(.animating) #customize-header-actions .save,
+.in-themes-panel:not(.animating) #customize-header-actions .spinner,
+.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
+.in-themes-panel:not(.animating) #customize-preview,
+.in-themes-panel:not(.animating) #customize-footer-actions {
+ visibility: hidden;
+}
+
+.wp-full-overlay.in-themes-panel {
+ background: #eee; /* Prevents a black flash when fading in the panel */
+}
+
+.in-themes-panel #customize-header-actions .save,
+.in-themes-panel #customize-header-actions .spinner,
+.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
+ top: -45px;
+}
+
+.in-themes-panel #customize-footer-actions,
+.in-themes-panel #customize-footer-actions .collapse-sidebar {
+ bottom: -45px;
+}
+
+/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
+.in-themes-panel.animating .control-panel-themes .filter-themes-count {
+ display: none;
+}
+
+.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
+ bottom: 0;
+}
+
+/* Adds a delay before fading in to avoid it "jumping" */
+@keyframes themes-fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.control-panel-themes .customize-themes-full-container.animate {
+ animation: .6s themes-fade-in 1;
+}
+
+.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
+ animation: .6s themes-fade-in 1;
+}
+
+.control-panel-themes .filter-themes-count {
+ position: fixed;
+ top: 0;
+ left: 48px;
+ width: 222px;
+ padding: 6px 15px;
+ margin: 0;
+ line-height: 32px;
+ text-align: right;
+ z-index: 10;
+}
+
+.control-panel-themes .filter-themes-count .themes-displayed {
+ font-weight: 600;
+ color: #555d66;
+}
+
+.control-panel-themes .filter-themes-count .see-themes,
+.control-panel-themes .filter-themes-count .filter-themes {
+ display: none;
+}
+
+
+/* Mobile - toggle between themes and filters */
+@media screen and (max-width:600px) {
+
+ /* Show a spinner in the filters view also, reusing the main customize spinner */
+ .in-themes-panel.loading #customize-header-actions .spinner {
+ position: fixed;
+ top: 0;
+ left: 48px;
+ visibility: visible;
+ }
+
+ .in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
+ visibility: hidden;
+ }
+
+ .control-panel-themes .filter-themes-count {
+ width: calc(100% - 93px);
+ }
+
+ .control-panel-themes .filter-themes-count .themes-displayed {
+ display: none;
+ }
+
+ .wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
+ display: block;
+ float: right;
+ }
+
+ .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
+ display: block;
+ float: right;
+ }
+
+ .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ height: 45px;
+ background: #eee;
+ }
+
+ .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
+ line-height: 45px;
+ }
+
+ .control-panel-themes .customize-themes-full-container {
+ width: calc(100% - 50px);
+ margin: 0;
+ top: 46px;
+ height: calc(100% - 96px);
+ z-index: 1;
+ display: none;
+ }
+
+ .showing-themes .control-panel-themes .customize-themes-full-container {
+ display: block;
+ }
+}
+
+.control-panel-themes .customize-themes-notifications .notice {
+ margin: 0 0 25px 0;
+}
+
+.customize-themes-full-container .customize-themes-section {
+ display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
+ overflow: hidden;
+}
+
+.customize-themes-full-container .customize-themes-section.current-section {
+ display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
+}
+
+.theme-section .customize-themes-text-before {
+ padding: 0 0 8px 15px;
+ margin: 15px 0 0 0;
+ line-height: 16px;
+ border-bottom: 1px solid #ddd;
+ color: #555d66;
+}
+
+.control-panel-themes .customize-themes-section-title {
+ width: 100%;
+ background: #fff;
+ box-shadow: none;
+ outline: none;
+ border-top: none;
+ border-bottom: 1px solid #ddd;
+ border-left: 4px solid #fff;
+ border-right: none;
+ cursor: pointer;
+ padding: 10px 15px;
+ position: relative;
+ text-align: left;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 14px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 600;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #555d66;
+ text-shadow: none;
</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-controls .customize-themes-panel > h2 {
- padding: 15px 8px 0 8px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-panel-themes .theme-section {
+ margin: 0;
+ position: relative;
</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-theme-controls .customize-themes-panel .accordion-section-content {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-panel-themes .customize-themes-section-title:focus,
+.control-panel-themes .customize-themes-section-title:hover {
+ border-left-color: #0073aa;
+ color: #0073aa;
+ background: #f5f5f5;
+}
+
+.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
+ content: "\f147";
+ font: 16px/1 dashicons;
+ box-sizing: border-box;
+ width: 20px;
+ height: 20px;
+ padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
+ border-radius: 100%;
+ position: absolute;
+ top: 9px;
+ right: 15px;
+ background: #0073aa;
+ color: #fff;
+}
+
+.control-panel-themes .customize-themes-section-title.selected {
+ color: #0073aa;
+}
+
+.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
+ border-left: none;
+ padding: 5px 10px 5px 15px;
+ width: auto;
+}
+
+.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
+.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
+ content: "\f140";
+ font: 20px/1 dashicons;
+ position: absolute;
+ right: 15px;
+ top: 8px;
+}
+
+.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
+ width: 100%;
+}
+
+.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
+.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
+ background: #fff;
+ cursor: default;
+}
+
+.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
+ margin-top: 15px;
+ border-top: 1px solid #ddd;
+}
+
+.control-panel-themes .filter-details {
+ background: #f5f5f5;
+ margin: 0;
+ padding: 8px 15px;
+ border-top: none;
+ border-bottom: 1px solid #ddd;
+ display: none;
+}
+
+.control-panel-themes .customize-themes-section-title.selected.details-open {
+ border-bottom-color: #f5f5f5;
+ border-left-color: #f5f5f5;
+ background: #f5f5f5;
+}
+
+.control-panel-themes .favorites-form.filter-details label {
+ padding-bottom: 6px;
+ display: inline-block;
+}
+
+.control-panel-themes .filter-details .filter-group {
+ float: none;
+ width: 100%;
</ins><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- display: block;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: none;
+ padding: 0;
+ box-shadow: none;
</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-control.customize-control-theme {
- margin-bottom: 8px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-panel-themes .filter-details .filter-group legend button {
+ padding: 18px 15px 8px 10px;
+ line-height: 14px;
+ border-bottom: 1px solid #ddd;
+ width: 100%;
+ text-align: left;
</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">+.control-panel-themes .filter-details .filter-group legend {
+ position: relative;
+ top: 0;
+ width: 100%;
+}
+
+.control-panel-themes .filter-details .filter-group legend button:after {
+ content: "\f140";
+ font: 20px/1 dashicons;
+ position: absolute;
+ bottom: 6px;
+ right: 5px;
+}
+
+.control-panel-themes .filter-details .filter-group legend button:hover,
+.control-panel-themes .filter-details .filter-group legend button:focus {
+ color: #0073aa;
+ border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
+ outline: none;
+ box-shadow: none;
+}
+
+.control-panel-themes .filter-details .filter-group legend button.open:after {
+ content: "\f142";
+}
+
+.control-panel-themes .filter-details .filter-group .filter-group-feature {
+ display: none;
+ margin: 0;
+}
+
+.control-panel-themes .filter-details .filter-group-feature label {
+ border: 1px solid #ddd;
+ border-top: 0;
+ background: #fff;
+ color: #555d66;
+ margin: 0;
+ padding: 12px 10px 12px 34px;
+ width: calc(100% - 46px);
+ line-height: 16px;
+ font-weight: 600;
+}
+
+.control-panel-themes .filter-details .filter-group-feature input {
+ position: absolute;
+ margin: 12px 10px;
+}
+
+.control-panel-themes .filter-details .filter-group-feature label:hover {
+ color: #0073aa;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .themes.accordion-section-content {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1083,17 +1386,108 @@
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-customizer .theme-browser .themes {
- padding-bottom: 8px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.loading .customize-themes-section .spinner {
+ display: block;
+ visibility: visible;
+ position: relative;
+ clear: both;
+ width: 20px;
+ height: 20px;
+ left: calc(50% - 10px);
+ float: none;
+ margin-top: 50px;
</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">-.wp-customizer .theme-browser .theme {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-themes-section .filter-drawer {
+ border-top: none;
+ display: block;
+ background: transparent;
+ padding-top: 5px;
+}
+
+.customize-themes-section .clear-filters {
+ margin-left: 8px;
+ display: none;
+}
+
+.customize-themes-section .no-themes {
+ display: none;
+}
+
+.themes-section-installed_themes .theme .notice-success {
+ display: none; /* Hide "installed" notice on installed themes tab. */
+}
+
+.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
+ margin: 0 0 0 8px;
+}
+
+.customize-control-theme .theme {
+ width: 100%;
</ins><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">- width: 100%;
</del><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-control.customize-control-theme { /* override most properties on .customize-control */
+ box-sizing: border-box;
+ width: 18.4%;
+ margin: 0 2% 2% 0;
+ padding: 0;
+ clear: none;
+}
+
+/* 5 columns above 2100px */
+@media screen and (min-width: 2101px) {
+ .customize-control.customize-control-theme:nth-child(5n) {
+ margin-right: 0;
+ }
+}
+
+/* 4 columns up to 2100px */
+@media screen and (min-width: 1601px) and (max-width: 2100px) {
+ .customize-control.customize-control-theme {
+ width: 23.5%;
+ }
+
+ .customize-control.customize-control-theme:nth-child(4n) {
+ margin-right: 0;
+ }
+}
+
+/* 3 columns up to 1600px */
+@media screen and (min-width: 1201px) and (max-width: 1600px) {
+ .customize-control.customize-control-theme {
+ width: 32%;
+ }
+
+ .customize-control.customize-control-theme:nth-child(3n) {
+ margin-right: 0;
+ }
+}
+
+/* 2 columns up to 1200px */
+@media screen and (min-width: 851px) and (max-width: 1200px) {
+ .customize-control.customize-control-theme {
+ width: 49%;
+ }
+
+ .customize-control.customize-control-theme:nth-child(even) {
+ margin-right: 0;
+ }
+}
+
+/* 1 column up to 850 px */
+@media screen and (max-width: 850px) {
+ .customize-control.customize-control-theme {
+ width: 100%;
+ margin: 0 0 3% 0;
+ }
+}
+
+.wp-customizer .theme-browser .themes {
+ padding-bottom: 8px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-browser .theme .theme-actions {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
</del><span class="cx" style="display: block; padding: 0 10px"> opacity: 1;
</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">@@ -1112,15 +1506,6 @@
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-themes .accordion-section-title:after,
-.customize-themes-panel .accordion-section-title:after {
- display: none;
-}
-
-.customize-themes-panel.control-panel-content {
- border-top: 1px solid #ddd;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Details View */
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1135,31 +1520,58 @@
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 109;
</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">+/* Avoid a z-index war by resetting elements that should be under the overlay.
+ This is likely required because of the way that sections and panels are positioned. */
+.wp-customizer.modal-open #customize-header-actions,
+.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
+.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
+ z-index: -1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay .theme-backdrop {
</span><span class="cx" style="display: block; padding: 0 10px"> background: rgba( 238, 238, 238, 0.75 );
</span><span class="cx" style="display: block; padding: 0 10px"> position: fixed;
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 110;
</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">+.wp-customizer .theme-overlay .star-rating {
+ float: left;
+ margin-right: 8px;
+}
+
+.wp-customizer .theme-rating .num-ratings {
+ line-height: 20px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay .theme-wrap {
</span><span class="cx" style="display: block; padding: 0 10px"> left: 90px;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 90px;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 45px;
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 45px;
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 120;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
</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-customizer .theme-overlay .theme-actions {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
+ padding: 10px 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">-.ie8 .wp-customizer .theme-overlay .theme-header,
-.ie8 .wp-customizer .theme-overlay .theme-about,
-.ie8 .wp-customizer .theme-overlay .theme-actions {
- position: static;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
+ margin-left: 8px;
</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">+.control-panel-themes .theme-actions .delete-theme {
+ left: 15px; /* these override themes.css on mobile */
+ right: auto;
+ bottom: auto;
+ position: absolute;
+}
+
+.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
+ overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
+}
+
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Small Screens */
</span><span class="cx" style="display: block; padding: 0 10px"> @media (max-width:850px), (max-height:472px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay .theme-wrap {
</span></span></pre></div>
<a id="trunksrcwpadmincssthemescss"></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/themes.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/themes.css 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-admin/css/themes.css 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -570,7 +570,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 30px 0 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 55%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- max-width: 880px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
</ins><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</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="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 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-admin/customize.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -109,7 +109,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ?><title><?php echo $admin_title; ?></title>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/javascript">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>,
+ pagenow = 'customize';
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span></span></pre></div>
<a id="trunksrcwpadminincludesthemephp"></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/theme.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/theme.php 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-admin/includes/theme.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -607,8 +607,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function customize_themes_print_templates() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
- $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
</del><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-themes-details-view">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-backdrop"></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -620,7 +618,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-about wp-clearfix">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-screenshots">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.screenshot[0] ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.screenshot && data.screenshot[0] ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="screenshot blank"></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -633,29 +631,47 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <# if ( data.stars && 0 != data.num_ratings ) { #>
+ <div class="theme-rating">
+ {{{ data.stars }}}
+ <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span>
+ </div>
+ <# } #>
+
+ <# if ( data.hasUpdate ) { #>
+ <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
+ <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
+ {{{ data.update }}}
+ </div>
+ <# } #>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="theme-description">{{{ data.description }}}</p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.parent ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.tags ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
</ins><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"> </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">- <# if ( ! data.active ) { #>
- <div class="theme-actions">
- <div class="inactive-theme">
- <?php
- /* translators: %s: Theme name */
- $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
- ?>
- <a href="<?php echo $preview_url; ?>" target="_top" class="button button-primary" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></a>
- </div>
- </div>
- <# } #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="theme-actions">
+ <# if ( data.active ) { #>
+ <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
+ <# } else if ( 'installed' === data.type ) { #>
+ <?php if ( current_user_can( 'delete_themes' ) ) { ?>
+ <# if ( data.actions && data.actions['delete'] ) { #>
+ <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
+ <# } #>
+ <?php } ?>
+ <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
+ <# } else { #>
+ <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
+ <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install & Preview' ); ?></button>
+ <# } #>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</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 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-admin/js/customize-controls.js 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,4 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console */
</ins><span class="cx" style="display: block; padding: 0 10px"> (function( exports, $ ){
</span><span class="cx" style="display: block; padding: 0 10px"> var Container, focus, normalizedTransitionendEventName, api = wp.customize;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -864,13 +864,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section = this,
</span><span class="cx" style="display: block; padding: 0 10px"> container = $( '#customize-theme-controls' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Watch for changes to the panel state
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Watch for changes to the panel state.
</ins><span class="cx" style="display: block; padding: 0 10px"> inject = function ( panelId ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var parentContainer;
</span><span class="cx" style="display: block; padding: 0 10px"> if ( panelId ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // The panel has been supplied, so wait until the panel object is registered
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // The panel has been supplied, so wait until the panel object is registered.
</ins><span class="cx" style="display: block; padding: 0 10px"> api.panel( panelId, function ( panel ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // The panel has been registered, wait for it to become ready/initialized
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // The panel has been registered, wait for it to become ready/initialized.
</ins><span class="cx" style="display: block; padding: 0 10px"> panel.deferred.embedded.done( function () {
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer = panel.contentContainer;
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! section.headContainer.parent().is( parentContainer ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -895,7 +895,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"> section.panel.bind( inject );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one.
</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">@@ -1039,8 +1039,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * wp.customize.ThemesSection
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Custom section for themes that functions similarly to a backwards panel,
- * and also handles the theme-details view rendering and navigation.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Custom section for themes that loads themes by category, and also
+ * handles the theme-details view rendering and navigation.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @constructor
</span><span class="cx" style="display: block; padding: 0 10px"> * @augments wp.customize.Section
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1052,13 +1052,43 @@
</span><span class="cx" style="display: block; padding: 0 10px"> template: '',
</span><span class="cx" style="display: block; padding: 0 10px"> screenshotQueue: null,
</span><span class="cx" style="display: block; padding: 0 10px"> $window: $( window ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ loaded: 0,
+ loading: false,
+ fullyLoaded: false,
+ term: '',
+ filterContainer: $(),
</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">- * @since 4.2.0
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Embed the section in the DOM when the themes panel is ready.
+ *
+ * Insert the section before the themes container. Assume that a themes section is within a panel, but not necessarily the themes panel.
+ *
+ * @since 4.7.0
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- initialize: function () {
- this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
- return api.Section.prototype.initialize.apply( this, arguments );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ embed: function () {
+ var inject,
+ section = this,
+ container = $( '#customize-theme-controls' );
+
+ // Watch for changes to the panel state
+ inject = function ( panelId ) {
+ var parentContainer;
+ api.panel( panelId, function ( panel ) {
+ // The panel has been registered, wait for it to become ready/initialized
+ panel.deferred.embedded.done( function () {
+ parentContainer = panel.contentContainer;
+ if ( ! section.headContainer.parent().is( parentContainer ) ) {
+ parentContainer.find( '.customize-themes-full-container-container' ).before( section.headContainer );
+ }
+ if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
+ container.append( section.contentContainer );
+ }
+ section.deferred.embedded.resolve();
+ });
+ } );
+ };
+ section.panel.bind( inject );
+ inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
</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">@@ -1091,15 +1121,15 @@
</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">- _.bindAll( this, 'renderScreenshots' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
</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="cx" style="display: block; padding: 0 10px"> * Override Section.isContextuallyActive method.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Ignore the active states' of the contained theme controls, and just
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * use the section's own active state instead. This ensures empty search
- * results for themes to cause the section to become inactive.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * use the section's own active state instead. This prevents empty search
+ * results for theme sections from causing the section to become inactive.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1115,53 +1145,53 @@
</span><span class="cx" style="display: block; padding: 0 10px"> attachEvents: function () {
</span><span class="cx" style="display: block; padding: 0 10px"> var section = this;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Expand/Collapse section/panel.
- section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
- if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
- return;
- }
- event.preventDefault(); // Keep this AFTER the key filter above
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.filterContainer = $( '#accordion-section-' + section.id );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( section.expanded() ) {
- section.collapse();
- } else {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Expand section/panel. Only collapse when opening another section.
+ section.filterContainer.on( 'click', '.customize-themes-section-title', function() {
+ // Open the section.
+ if ( ! section.expanded() ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.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">- });
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Theme navigation in details view.
- section.container.on( 'click keydown', '.left', function( event ) {
- if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Toggle filters.
+ if ( section.filterContainer.find( '.filter-details' ).length ) {
+ section.filterContainer.find( '.customize-themes-section-title' )
+ .toggleClass( 'details-open' )
+ .attr('aria-expanded', function ( i, attr ) {
+ return attr === 'true' ? 'false' : 'true';
+ });
+ section.filterContainer.find( '.filter-details' ).slideToggle( 180 );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ });
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- event.preventDefault(); // Keep this AFTER the key filter above
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Preview installed themes.
+ section.container.on( 'click', '.theme-actions .preview-theme', function() {
+ var themeId = $( this ).data( 'themeId' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+ api.panel( 'themes' ).loadThemePreview( themeId ).fail( function() {
+ $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
+ } );
+ });
+
+ // Theme navigation in details view.
+ section.container.on( 'click', '.left', function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.previousTheme();
</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">- section.container.on( 'click keydown', '.right', function( event ) {
- if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
- return;
- }
-
- event.preventDefault(); // Keep this AFTER the key filter above
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.container.on( 'click', '.right', function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.nextTheme();
</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">- section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
- if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
- return;
- }
-
- event.preventDefault(); // Keep this AFTER the key filter above
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.container.on( 'click', '.theme-backdrop, .close', function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.closeDetails();
</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"> var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.container.on( 'input', '#themes-filter', function( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Only used when there is only one section - installed themes.
+ $( '.control-panel-themes' ).on( 'input', '#themes-filter', function( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var count,
</span><span class="cx" style="display: block; padding: 0 10px"> term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
</span><span class="cx" style="display: block; padding: 0 10px"> controls = section.controls();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1173,19 +1203,58 @@
</span><span class="cx" style="display: block; padding: 0 10px"> renderScreenshots();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Update theme count.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- count = section.container.find( 'li.customize-control:visible' ).length;
- section.container.find( '.theme-count' ).text( count );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ count = section.contentContainer.find( 'li.customize-control:visible' ).length;
+ $( '.control-panel-themes' ).find( '.theme-count' ).text( count );
</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">- // Pre-load the first 3 theme screenshots.
- api.bind( 'ready', function () {
- _.each( section.controls().slice( 0, 3 ), function ( control ) {
- var img, src = control.params.theme.screenshot[0];
- if ( src ) {
- img = new Image();
- img.src = src;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Event listeners for queries with user-entered terms.
+ if ( 'search' === section.params.action ) {
+ var debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
+ $( '.control-panel-themes' ).on( 'input', '#wp-filter-search-input', function() {
+ debounced( section );
+ if ( ! section.expanded() ) {
+ section.expand();
</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">+
+ // Focus the input if the icon is clicked.
+ section.filterContainer.find( '.search-form' ).on( 'click', function( e ) {
+ if ( ! $( e.currentTarget ).hasClass( 'wp-filter-search' ) ) {
+ $( e.currentTarget ).find( '.wp-filter-search' ).focus();
+ }
+ });
+ } else if ( 'favorites' === section.params.action ) {
+ section.container.on( 'click', '.favorites-form-submit', function() {
+ section.checkTerm( section );
+ });
+ section.container.on( 'keydown', '#wporg-username-input', function( e ) {
+ if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
+ return;
+ }
+ section.checkTerm( section );
+ });
+ } else if ( 'feature_filter' === section.params.action ) {
+ section.container.on( 'click', '.filter-group input', function() {
+ section.filtersChecked();
+ section.checkTerm( section );
+ });
+
+ // Toggle feature filter sections.
+ section.container.on( 'click', '.filter-group legend button', function( e ) {
+ $( e.currentTarget )
+ .toggleClass( 'open' )
+ .attr('aria-expanded', function ( i, attr ) {
+ return attr === 'true' ? 'false' : 'true';
+ })
+ .parent().next( '.filter-group-feature' ).slideToggle( 180 );
+ });
+ }
+
+ // Move section controls to the themes area.
+ api.bind( 'ready', function () {
+ section.contentContainer = section.container.find( '.customize-themes-section' );
+ section.contentContainer.appendTo( $( '.customize-themes-full-container' ) );
+ section.container.add( section.filterContainer );
</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">@@ -1197,7 +1266,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Boolean} expanded
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} args
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Boolean} args.unchanged
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {Callback} args.completeCallback
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {Function} args.completeCallback
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeExpanded: function ( expanded, args ) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1210,59 +1279,282 @@
</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"> // Note: there is a second argument 'args' passed
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var panel = this,
- section = panel.contentContainer,
- overlay = section.closest( '.wp-full-overlay' ),
- container = section.closest( '.wp-full-overlay-sidebar-content' ),
- customizeBtn = section.find( '.customize-theme' ),
- changeBtn = panel.headContainer.find( '.change-theme' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var section = this,
+ container = section.contentContainer.closest( '.customize-themes-full-container' );
</ins><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 && ! section.hasClass( 'current-panel' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( expanded ) {
+
+ if ( -1 !== $.inArray( section.params.action, [ 'search', 'favorites', 'feature_filter' ] ) && '' === section.term ) {
+ section.collapse(); // Note that the current section hasn't been collapsed yet, so this is all we need to do to do nothing.
+ return; // Don't expand to an empty section that can't load any themes.
+ }
+
+ // Load controls if none are loaded yet.
+ if ( 0 === section.loaded ) {
+ section.loadControls();
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Collapse any sibling sections/panels
</span><span class="cx" style="display: block; padding: 0 10px"> api.section.each( function ( otherSection ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( otherSection !== panel ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( otherSection !== section ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> otherSection.collapse( { duration: args.duration } );
</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">- api.panel.each( function ( otherPanel ) {
- otherPanel.collapse( { duration: 0 } );
- });
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panel._animateChangeExpanded( function() {
- changeBtn.attr( 'tabindex', '-1' );
- customizeBtn.attr( 'tabindex', '0' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.contentContainer.addClass( 'current-section' );
+ container.scrollTop();
+ section.filterContainer.find( '.customize-themes-section-title' ).addClass( 'selected' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- customizeBtn.focus();
- section.css( 'top', '' );
- container.scrollTop( 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
+ container.on( 'scroll', _.throttle( section.loadMore, 300 ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( args.completeCallback ) {
- args.completeCallback();
- }
- } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( args.completeCallback ) {
+ args.completeCallback();
+ }
+ section.updateCount(); // Show this section's count.
+ } else {
+ section.contentContainer.removeClass( 'current-section' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- overlay.addClass( 'in-themes-panel' );
- section.addClass( 'current-panel' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Always hide, even if they don't exist or are already hidden.
+ section.filterContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
+ section.filterContainer.find( '.filter-details' ).slideUp( 180 );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
- panel._animateChangeExpanded( function() {
- changeBtn.attr( 'tabindex', '0' );
- customizeBtn.attr( 'tabindex', '-1' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.off( 'scroll' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- changeBtn.focus();
- section.css( 'top', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( args.completeCallback ) {
+ args.completeCallback();
+ }
+ }
+ },
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( args.completeCallback ) {
- args.completeCallback();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Return the section's content element without detachng from the parent.
+ *
+ * @since 4.7.0
+ */
+ getContent: function() {
+ return this.container.find( '.control-section-content' );
+ },
+
+ /**
+ * Load theme data via ajax and add themes to the section as controls.
+ *
+ * @since 4.7.0
+ */
+ loadControls: function() {
+ var section = this, params, page, request;
+
+ if ( section.loading ) {
+ return; // We're already loading a batch of themes.
+ }
+
+ // Parameters for every API query. Additional params are set in PHP.
+ page = Math.ceil( section.loaded / 100 ) + 1;
+ params = {
+ 'switch-themes-nonce': api.settings.nonce['switch-themes'],
+ 'wp_customize': 'on',
+ 'theme_action': section.params.action,
+ 'customized_theme': api.settings.theme.stylesheet,
+ 'page': page
+ };
+
+ // Add fields for special request actions.
+ if ( 'search' === section.params.action ) {
+ if ( '' === section.term ) {
+ return;
+ } else {
+ params.search = section.term;
+ }
+ } else if ( 'favorites' === section.params.action ) {
+ if ( '' === section.term ) {
+ return;
+ } else {
+ params.user = section.term;
+ }
+ } else if ( 'feature_filter' === section.params.action ) {
+ if ( '' === section.term ) {
+ return;
+ } else {
+ params.tags = section.term;
+ }
+ }
+
+ // Load themes.
+ section.headContainer.closest( '.wp-full-overlay' ).addClass( 'loading' );
+ section.loading = true;
+ section.container.find( '.no-themes' ).hide();
+ request = wp.ajax.post( 'customize-load-themes', params );
+ request.done(function( data ) {
+ var themes = data.themes,
+ themeControl, newThemeControls;
+ if ( 0 !== themes.length ) {
+ newThemeControls = [];
+ // Add controls for each theme.
+ _.each( themes, function ( theme ) {
+ var customizeId = section.params.action + '_theme_' + theme.id;
+ themeControl = new api.controlConstructor.theme( customizeId, {
+ params: {
+ type: 'theme',
+ content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
+ section: section.params.id,
+ active: true,
+ theme: theme,
+ priority: section.loaded + 1
+ },
+ previewer: api.previewer
+ } );
+
+ api.control.add( customizeId, themeControl );
+ newThemeControls.push( themeControl );
+ section.loaded = section.loaded + 1;
+ });
+
+ if ( 1 === page ) {
+ // Pre-load the first 3 theme screenshots.
+ _.each( section.controls().slice( 0, 3 ), function ( control ) {
+ var img, src = control.params.theme.screenshot[0];
+ if ( src ) {
+ img = new Image();
+ img.src = src;
+ }
+ });
+ if ( 'search' === section.params.action ) {
+ wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
+ }
+ } else {
+ Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- overlay.removeClass( 'in-themes-panel' );
- section.removeClass( 'current-panel' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
+ section.fullyLoaded = true;
+ }
+ } else {
+ if ( 0 === section.loaded ) {
+ section.container.find( '.no-themes' ).show();
+ wp.a11y.speak( section.container.find( '.no-themes' ).text() );
+ } else {
+ section.fullyLoaded = true;
+ }
+ }
+ if ( 'installed' === section.params.action ) {
+ section.updateCount();
+ } else {
+ section.updateCount( data.info.results );
+ }
+ section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown.
+
+ // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
+ section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
+ section.loading = false;
+ });
+ request.fail(function( data ) {
+ if ( 'undefined' === typeof data ) {
+ section.container.find( '.unexpected-error' ).show();
+ wp.a11y.speak( section.container.find( '.unexpected-error' ).text() );
+ } else if ( typeof console !== 'undefined' && console.error ) {
+ console.error( data );
+ }
+
+ // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
+ section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
+ section.loading = false;
+ });
+ },
+
+ /**
+ * Determines whether more themes should be loaded, and loads them.
+ *
+ * @since 4.7.0
+ */
+ loadMore: function() {
+ var section = this, container, bottom, threshold;
+ if ( ! section.fullyLoaded && ! section.loading ) {
+ container = section.container.closest( '.customize-themes-full-container' );
+
+ bottom = container.scrollTop() + container.height();
+ threshold = container.prop( 'scrollHeight' ) - 3000; // Use a fixed distance to the bottom of loaded results to avoid unnecessarily loading results sooner when using a percentage of scroll distance.
+
+ if ( bottom > threshold ) {
+ section.loadControls();
+ }
</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="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Event handler for search, feature filter, and favorites input that determines if the term has changed and loads new controls as needed.
+ *
+ * @since 4.7.0
+ *
+ * @param {wp.customize.ThemesSection} section The current theme section, passed through the debouncer.
+ */
+ checkTerm: function( section ) {
+ var newTerm;
+
+ // Find term.
+ if ( 'search' === section.params.action ) {
+ newTerm = $( '#wp-filter-search-input' ).val();
+ } else if ( 'favorites' === section.params.action ) {
+ newTerm = $( '#wporg-username-input' ).val();
+ } else if ( 'feature_filter' === section.params.action ) {
+ newTerm = section.term; // Set separately by filtersChecked(), as they're changed.
+ if ( '' === newTerm ) {
+ return;
+ }
+ } else {
+ return;
+ }
+
+ if ( section.term === newTerm && 'feature_filter' !== section.params.action ) {
+ return;
+ }
+
+ // Clear the controls in the section.
+ _.each( section.controls(), function( control ) {
+ control.container.remove();
+ api.control.remove( control.id );
+ });
+ section.loaded = 0;
+ section.fullyLoaded = false;
+ section.screenshotQueue = null;
+
+ if ( '' !== newTerm ) { // Empty term should not show any results.
+ // Run a new query, with loadControls handling paging, etc.
+ section.term = newTerm;
+ section.loadControls();
+ if ( ! section.expanded() ) {
+ section.expand(); // Expand the section if it isn't expanded.
+ }
+ }
+ },
+
+ /**
+ * Check for filters checked in the feature filter list.
+ *
+ * @since 4.7.0
+ */
+ filtersChecked: function() {
+ var section = this,
+ items = section.container.find( '.filter-group' ).find( ':checkbox' ),
+ tags = [];
+
+ if ( 'feature_filter' !== section.params.action ) {
+ return false;
+ }
+
+ _.each( items.filter( ':checked' ), function( item ) {
+ tags.push( $( item ).prop( 'value' ) );
+ });
+
+ // When no filters are checked, restore initial state and return
+ if ( tags.length === 0 ) {
+ section.term = '';
+ } else {
+ section.term = tags;
+ }
+ },
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Render control's screenshot if the control comes into view.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1270,12 +1562,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> renderScreenshots: function( ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var section = this;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Fill queue initially.
- if ( section.screenshotQueue === null ) {
- section.screenshotQueue = section.controls();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Fill queue initially, or check for more if empty.
+ if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) {
+ // Add controls that haven't had their screenshots rendered.
+ section.screenshotQueue = _.filter( section.controls(), function( control ) {
+ return ! control.screenshotRendered;
+ });
</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">- // Are all screenshots rendered?
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Are all screenshots rendered (for now)?
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! section.screenshotQueue.length ) {
</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">@@ -1311,6 +1606,31 @@
</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">+ * Update the number of themes in the section.
+ *
+ * @since 4.7.0
+ */
+ updateCount: function ( count ) {
+ if ( ! count ) {
+ count = this.loaded;
+ }
+
+ var displayed = this.container.closest( '.control-panel-content' ).find( '.themes-displayed' ),
+ countEl = this.container.closest( '.control-panel-content' ).find( '.theme-count' );
+
+ if ( 0 === count ) {
+ countEl.text( count );
+ } else {
+ // Animate the count change for emphasis.
+ displayed.fadeOut( 180, function() {
+ countEl.text( count );
+ displayed.fadeIn( 180 );
+ } );
+ wp.a11y.speak( api.settings.l10n.announceThemeCount.replace( '%d', count ) );
+ }
+ },
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Advance the modal to the next theme.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1330,13 +1650,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> getNextTheme: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var control, next;
- control = api.control( 'theme_' + this.currentTheme );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var section = this, control, next;
+ control = api.control( section.params.action + '_theme_' + this.currentTheme );
</ins><span class="cx" style="display: block; padding: 0 10px"> next = control.container.next( 'li.customize-control-theme' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! next.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- next = next[0].id.replace( 'customize-control-', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
</ins><span class="cx" style="display: block; padding: 0 10px"> control = api.control( next );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return control.params.theme;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1362,13 +1682,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> getPreviousTheme: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var control, previous;
- control = api.control( 'theme_' + this.currentTheme );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var section = this, control, previous;
+ control = api.control( section.params.action + '_theme_' + this.currentTheme );
</ins><span class="cx" style="display: block; padding: 0 10px"> previous = control.container.prev( 'li.customize-control-theme' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! previous.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- previous = previous[0].id.replace( 'customize-control-', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
</ins><span class="cx" style="display: block; padding: 0 10px"> control = api.control( previous );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return control.params.theme;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1389,57 +1709,6 @@
</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">- * Load theme preview.
- *
- * @since 4.7.0
- *
- * @param {string} themeId Theme ID.
- * @returns {jQuery.promise} Promise.
- */
- loadThemePreview: function( themeId ) {
- var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
-
- urlParser = document.createElement( 'a' );
- urlParser.href = location.href;
- urlParser.search = $.param( _.extend(
- api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
- {
- theme: themeId,
- changeset_uuid: api.settings.changeset.uuid
- }
- ) );
-
- overlay = $( '.wp-full-overlay' );
- overlay.addClass( 'customize-loading' );
-
- onceProcessingComplete = function() {
- var request;
- if ( api.state( 'processing' ).get() > 0 ) {
- return;
- }
-
- api.state( 'processing' ).unbind( onceProcessingComplete );
-
- request = api.requestChangesetUpdate();
- request.done( function() {
- $( window ).off( 'beforeunload.customize-confirm' );
- window.location.href = urlParser.href;
- } );
- request.fail( function() {
- overlay.removeClass( 'customize-loading' );
- } );
- };
-
- if ( 0 === api.state( 'processing' ).get() ) {
- onceProcessingComplete();
- } else {
- api.state( 'processing' ).bind( onceProcessingComplete );
- }
-
- return deferred.promise();
- },
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Render & show the theme details for a given theme model.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1456,9 +1725,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'body' ).addClass( 'modal-open' );
</span><span class="cx" style="display: block; padding: 0 10px"> section.containFocus( section.overlay );
</span><span class="cx" style="display: block; padding: 0 10px"> section.updateLimits();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp.a11y.speak( api.settings.l10n.announceThemeDetails.replace( '%s', theme.name ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> link = section.overlay.find( '.inactive-theme > a' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> link.on( 'click', function( event ) {
</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">@@ -1468,7 +1737,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> link.addClass( 'disabled' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.loadThemePreview( theme.id ).fail( function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.panel( 'themes' ).loadThemePreview( theme.id ).fail( function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> link.removeClass( 'disabled' );
</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">@@ -1483,7 +1752,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> closeDetails: function () {
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'body' ).removeClass( 'modal-open' );
</span><span class="cx" style="display: block; padding: 0 10px"> this.overlay.fadeOut( 'fast' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- api.control( 'theme_' + this.currentTheme ).focus();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).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">@@ -1563,8 +1832,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> container.append( panel.contentContainer );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panel.renderContent();
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel.renderContent();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> panel.deferred.embedded.resolve();
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1753,7 +2022,302 @@
</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">+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * wp.customize.ThemesPanel
+ *
+ * Custom section for themes that displays without the customize preview.
+ *
+ * @constructor
+ * @augments wp.customize.Panel
+ * @augments wp.customize.Container
+ */
+ api.ThemesPanel = api.Panel.extend({
+ installingThemes: [],
+
+ /**
+ * @since 4.7.0
+ */
+ attachEvents: function () {
+ var panel = this;
+
+ // Attach regular panel events.
+ api.Panel.prototype.attachEvents.apply( this );
+
+ // Collapse panel to customize the current theme.
+ panel.contentContainer.on( 'click', '.customize-theme', function() {
+ panel.collapse();
+ });
+
+ // Toggle between filtering and browsing themes on mobile.
+ panel.contentContainer.on( 'click', '.see-themes, .filter-themes', function() {
+ $( '.wp-full-overlay' ).toggleClass( 'showing-themes' );
+ });
+
+ // Install (and maybe preview) a theme.
+ panel.contentContainer.on( 'click', '.theme-install', function( event ) {
+ panel.installTheme( event );
+ });
+
+ // Update a theme. Theme cards have the class, the details modal has the id.
+ panel.contentContainer.on( 'click', '.update-theme, #update-theme', function( event ) {
+ // #update-theme is a link.
+ event.preventDefault();
+ event.stopPropagation();
+
+ panel.updateTheme( event );
+ });
+
+ // Delete a theme.
+ panel.contentContainer.on( 'click', '.delete-theme', function( event ) {
+ panel.deleteTheme( event );
+ });
+
+ _.bindAll( this, 'installTheme', 'updateTheme' );
+ },
+
+ /**
+ * Update UI to reflect expanded state
+ *
+ * @since 4.7.0
+ *
+ * @param {Boolean} expanded
+ * @param {Object} args
+ * @param {Boolean} args.unchanged
+ * @param {Function} args.completeCallback
+ */
+ onChangeExpanded: function ( expanded, args ) {
+
+ // Expand/collapse the panel normally.
+ api.Panel.prototype.onChangeExpanded.apply( this, [ expanded, args ] );
+
+ // Immediately call the complete callback if there were no changes
+ if ( args.unchanged ) {
+ if ( args.completeCallback ) {
+ args.completeCallback();
+ }
+ return;
+ }
+
+ // Note: there is a second argument 'args' passed
+ var panel = this,
+ overlay = panel.headContainer.closest( '.wp-full-overlay' );
+
+ if ( expanded ) {
+ overlay
+ .addClass( 'in-themes-panel' ).addClass( 'showing-themes' )
+ .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' );
+
+ // Automatically open the installed themes section.
+ api.section( 'installed_themes' ).expand();
+ } else {
+ overlay
+ .removeClass( 'in-themes-panel' )
+ .find( '.customize-themes-full-container' ).removeClass( 'animate' );
+ }
+ },
+
+ /**
+ * Install a theme via wp.updates.
+ *
+ * @since 4.7.0
+ */
+ installTheme: function( event ) {
+ var panel = this, preview = false, slug = $( event.target ).data( 'slug' );
+
+ if ( -1 !== $.inArray( this.installingThemes, slug ) ) {
+ return; // Theme is already being installed.
+ }
+
+ wp.updates.maybeRequestFilesystemCredentials( event );
+
+ $( document ).one( 'wp-theme-install-success', function( event, response ) {
+ var theme = false, customizeId, themeControl;
+ if ( preview ) {
+
+ panel.loadThemePreview( slug ).fail( function() {
+ $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
+ } );
+
+ } else {
+ api.control.each( function( control ) {
+ if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
+ theme = control.params.theme; // Used below to add theme control.
+ control.rerenderAsInstalled( true );
+ }
+ });
+
+ // Don't add the same theme more than once.
+ if ( ! theme || 'undefined' !== typeof api.control( 'installed_theme_' + theme.id ) ) {
+ return;
+ }
+
+ // Add theme control to installed section.
+ theme.type = 'installed';
+ customizeId = 'installed_theme_' + theme.id;
+ themeControl = new api.controlConstructor.theme( customizeId, {
+ params: {
+ type: 'theme',
+ content: $( '<li class="customize-control customize-control-theme"></li>' ).attr( 'id', 'customize-control-theme-installed_' + theme.id ).prop( 'outerHTML' ),
+ section: 'installed_themes',
+ active: true,
+ theme: theme,
+ priority: 0 // Add all newly-installed themes to the top.
+ },
+ previewer: api.previewer
+ } );
+
+ api.control.add( customizeId, themeControl );
+ api.control( customizeId ).container.trigger( 'render-screenshot' );
+
+ // Close the details modal if it's open to the installed theme.
+ api.section.each( function( section ) {
+ if ( 'themes' === section.params.type ) {
+ if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere.
+ section.closeDetails();
+ }
+ }
+ });
+ }
+ } );
+
+ this.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
+ wp.updates.installTheme( {
+ slug: slug
+ } );
+
+ // Also preview the theme as the event is triggered on Install & Preview.
+ if ( $( event.target ).hasClass( 'preview' ) ) {
+ preview = true;
+ $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+ }
+ },
+
+ /**
+ * Load theme preview.
+ *
+ * @since 4.7.0
+ *
+ * @param {string} themeId Theme ID.
+ * @returns {jQuery.promise} Promise.
+ */
+ loadThemePreview: function( themeId ) {
+ var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
+
+ urlParser = document.createElement( 'a' );
+ urlParser.href = location.href;
+ urlParser.search = $.param( _.extend(
+ api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+ {
+ theme: themeId,
+ changeset_uuid: api.settings.changeset.uuid
+ }
+ ) );
+
+ overlay = $( '.wp-full-overlay' );
+ overlay.addClass( 'customize-loading' );
+
+ onceProcessingComplete = function() {
+ var request;
+ if ( api.state( 'processing' ).get() > 0 ) {
+ return;
+ }
+
+ api.state( 'processing' ).unbind( onceProcessingComplete );
+
+ request = api.requestChangesetUpdate();
+ request.done( function() {
+ $( window ).off( 'beforeunload.customize-confirm' );
+ window.location.href = urlParser.href;
+ } );
+ request.fail( function() {
+ overlay.removeClass( 'customize-loading' );
+ } );
+ };
+
+ if ( 0 === api.state( 'processing' ).get() ) {
+ onceProcessingComplete();
+ } else {
+ api.state( 'processing' ).bind( onceProcessingComplete );
+ }
+
+ return deferred.promise();
+ },
+
+ /**
+ * Update a theme via wp.updates.
+ *
+ * @since 4.7.0
+ */
+ updateTheme: function( event ) {
+ wp.updates.maybeRequestFilesystemCredentials( event );
+
+ $( document ).one( 'wp-theme-update-success', function( event, response ) {
+ // Rerender the control to reflect the update.
+ api.control.each( function( control ) {
+ if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
+ control.params.theme.hasUpdate = false;
+ control.rerenderAsInstalled( true );
+ }
+ });
+ } );
+
+ wp.updates.updateTheme( {
+ slug: $( event.target ).closest( '.notice' ).data( 'slug' )
+ } );
+ },
+
+ /**
+ * Delete a theme via wp.updates.
+ *
+ * @since 4.7.0
+ */
+ deleteTheme: function( event ) {
+ var theme, section;
+ theme = $( event.target ).data( 'slug' );
+ section = api.section( 'installed_themes' );
+
+ event.preventDefault();
+
+ // Confirmation dialog for deleting a theme.
+ if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) {
+ return;
+ }
+
+ wp.updates.maybeRequestFilesystemCredentials( event );
+
+ $( document ).one( 'wp-theme-delete-success', function() {
+ var control = api.control( 'installed_theme_' + theme );
+
+ // Remove theme control.
+ control.container.remove();
+ api.control.remove( control.id );
+
+ // Update installed count.
+ section.loaded = section.loaded - 1;
+ section.updateCount();
+
+ // Rerender any other theme controls as uninstalled.
+ api.control.each( function( control ) {
+ if ( 'theme' === control.params.type && control.params.theme.id === theme ) {
+ control.rerenderAsInstalled( false );
+ }
+ });
+ } );
+
+ wp.updates.deleteTheme( {
+ slug: theme
+ } );
+
+ // Close modal and focus the section.
+ section.closeDetails();
+ section.focus();
+ }
+
+ });
+
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * A Customizer Control.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * A control provides a UI element that allows a user to modify a Customizer Setting.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2048,7 +2612,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Boolean} active
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} args
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Number} args.duration
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {Callback} args.completeCallback
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {Function} args.completeCallback
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeActive: function ( active, args ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.unchanged ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3071,35 +3635,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> api.ThemeControl = api.Control.extend({
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> touchDrag: false,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isRendered: false,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ screenshotRendered: false,
</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">- * Defer rendering the theme control until the section is displayed.
- *
</del><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- renderContent: function () {
- var control = this,
- renderContentArgs = arguments;
-
- api.section( control.section(), function( section ) {
- if ( section.expanded() ) {
- api.Control.prototype.renderContent.apply( control, renderContentArgs );
- control.isRendered = true;
- } else {
- section.expanded.bind( function( expanded ) {
- if ( expanded && ! control.isRendered ) {
- api.Control.prototype.renderContent.apply( control, renderContentArgs );
- control.isRendered = true;
- }
- } );
- }
- } );
- },
-
- /**
- * @since 4.2.0
- */
</del><span class="cx" style="display: block; padding: 0 10px"> ready: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3119,20 +3659,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"> // Prevent the modal from showing when the user clicks the action button.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $( event.target ).is( '.theme-actions .button' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
</ins><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">- api.section( control.section() ).loadThemePreview( control.params.theme.id );
- });
-
- control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
- if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
- return;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault(); // Keep this AFTER the key filter above
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> api.section( control.section() ).showDetails( control.params.theme );
</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">@@ -3143,11 +3674,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( source ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $screenshot.attr( 'src', source );
</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.screenshotRendered = 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="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Show or hide the theme based on the presence of the term in the title, description, and author.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3163,6 +3695,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> control.deactivate();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
+
+ /**
+ * Rerender the theme from its JS template with the installed type.
+ *
+ * @since 4.7.0
+ */
+ rerenderAsInstalled: function( installed ) {
+ var control = this, section;
+ if ( installed ) {
+ control.params.theme.type = 'installed';
+ } else {
+ section = api.section( control.params.section );
+ control.params.theme.type = section.params.action;
+ }
+ control.renderContent(); // replaces existing content
+ control.container.trigger( 'render-screenshot' );
</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">@@ -3844,7 +4393,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: api.BackgroundControl,
</span><span class="cx" style="display: block; padding: 0 10px"> theme: api.ThemeControl
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- api.panelConstructor = {};
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.panelConstructor = {
+ themes: api.ThemesPanel
+ };
</ins><span class="cx" style="display: block; padding: 0 10px"> api.sectionConstructor = {
</span><span class="cx" style="display: block; padding: 0 10px"> themes: api.ThemesSection
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3962,6 +4513,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Sort the sections within each panel
</span><span class="cx" style="display: block; padding: 0 10px"> api.panel.each( function ( panel ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'themes' === panel.id ) {
+ return; // Don't reflow theme sections, as doing so moves them after the themes container.
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var sections = panel.sections(),
</span><span class="cx" style="display: block; padding: 0 10px"> sectionHeadContainers = _.pluck( sections, 'headContainer' );
</span><span class="cx" style="display: block; padding: 0 10px"> rootNodes.push( panel );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4567,6 +5122,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Collapse the most granular expanded object.
</span><span class="cx" style="display: block; padding: 0 10px"> collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
</span><span class="cx" style="display: block; padding: 0 10px"> if ( collapsedObject ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'themes' === collapsedObject.params.type ) {
+ // Themes panel or section.
+ if ( $( 'body' ).hasClass( 'modal-open' ) ) {
+ collapsedObject.closeDetails();
+ } else {
+ // If we're collapsing a section, collapse the panel also.
+ wp.customize.panel( 'themes' ).collapse();
+ }
+ return;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> collapsedObject.collapse();
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminjsupdatesjs"></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/updates.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/updates.js 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-admin/js/updates.js 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -179,7 +179,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $notice.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $notice.replaceWith( $adminNotice );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '.wrap' ).find( '> h1' ).after( $adminNotice );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'customize' === pagenow ) {
+ $( '.customize-themes-notifications' ).append( $adminNotice );
+ } else {
+ $( '.wrap' ).find( '> h1' ).after( $adminNotice );
+ }
</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"> $document.trigger( 'wp-updates-notice-added' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -907,6 +911,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'themes-network' === pagenow ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } else if ( 'customize' === pagenow ) {
+
+ // Update the theme details UI.
+ $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
+
+ $notice.find( 'h3' ).remove();
+
+ // Add the top-level UI, and update both.
+ $notice = $notice.add( $( '#customize-control-theme-installed_' + args.slug ).find( '.update-message' ) );
+ $notice = $notice.addClass( 'updating-message' ).find( 'p' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -949,6 +964,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> $notice, newText;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'customize' === pagenow ) {
+ $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( 'themes-network' === pagenow ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $notice = $theme.find( '.update-message' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1003,6 +1022,10 @@
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'customize' === pagenow ) {
+ $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( 'themes-network' === pagenow ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $notice = $theme.find( '.update-message ' );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1139,12 +1162,23 @@
</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">- if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
- $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
- $card = $( '.install-theme-info' ).prepend( $message );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'customize' === pagenow ) {
+ if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) {
+ $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+ $card = $( '.theme-overlay .theme-info' ).prepend( $message );
+ } else {
+ $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+ $card = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message );
+ }
+ $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
</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">- $card = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
- $button = $card.find( '.theme-install' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
+ $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+ $card = $( '.install-theme-info' ).prepend( $message );
+ } else {
+ $card = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
+ $button = $card.find( '.theme-install' );
+ }
</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
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></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-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -294,6 +294,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -348,6 +349,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_ajax_customize_save', array( $this, 'save' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ add_action( 'wp_ajax_customize-load-themes', array( $this, 'load_themes_ajax' ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'customize_register', array( $this, 'register_controls' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'customize_register', array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -361,6 +363,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Export the settings to JS via the _wpCustomizeSettings variable.
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Add theme update notices.
+ if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
+ require_once( ABSPATH . '/wp-admin/includes/update.php' );
+ add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
+ }
</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">@@ -2584,6 +2592,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( $this->controls as $control ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $control->enqueue();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
+ wp_enqueue_script( 'updates' );
+ }
</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">@@ -2798,6 +2809,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $nonces = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'switch-themes' => wp_create_nonce( 'switch-themes' ),
</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">@@ -2871,6 +2883,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'autofocus' => $this->get_autofocus(),
</span><span class="cx" style="display: block; padding: 0 10px"> 'documentTitleTmpl' => $this->get_document_title_template(),
</span><span class="cx" style="display: block; padding: 0 10px"> 'previewableDevices' => $this->get_previewable_devices(),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'l10n' => array(
+ 'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
+ /* translators: %d is the number of theme search results, which cannot consider singular vs. plural forms */
+ 'themeSearchResults' => __( '%d themes found' ),
+ /* translators: %d is the number of themes being displayed, which cannot consider singular vs. plural forms */
+ 'announceThemeCount' => __( 'Displaying %d themes' ),
+ 'announceThemeDetails' => __( 'Showing details for theme: %s' ),
+ ),
</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"> // Prepare Customize Section objects to pass to JavaScript.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2974,8 +2994,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Panel, Section, and Control Types */
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_panel_type( 'WP_Customize_Panel' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->register_panel_type( 'WP_Customize_Themes_Panel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->register_section_type( 'WP_Customize_Section' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_section_type( 'WP_Customize_Sidebar_Section' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->register_section_type( 'WP_Customize_Themes_Section' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Color_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Media_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Upload_Control' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2985,50 +3007,78 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Theme_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Themes */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Themes (controls are loaded via ajax) */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
- 'title' => $this->theme()->display( 'Name' ),
- 'capability' => 'switch_themes',
- 'priority' => 0,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
+ 'title' => $this->theme()->display( 'Name' ),
+ 'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish your new design. Browse available themes via the filters in this menu.' ),
+ 'capability' => 'switch_themes',
+ 'priority' => 0,
</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">- // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
- $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
- 'capability' => 'switch_themes',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
+ 'title' => __( 'Installed' ),
+ 'text_before' => __( 'Your local site' ),
+ 'action' => 'installed',
+ 'capability' => 'switch_themes',
+ 'panel' => 'themes',
+ 'priority' => 0,
</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">- require_once( ABSPATH . 'wp-admin/includes/theme.php' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
+ 'title' => __( 'Search themes…' ),
+ 'text_before' => __( 'Browse all WordPress.org themes' ),
+ 'action' => 'search',
+ 'capability' => 'install_themes',
+ 'panel' => 'themes',
+ 'priority' => 5,
+ ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Theme Controls.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
+ 'title' => __( 'Featured' ),
+ 'action' => 'featured',
+ 'capability' => 'install_themes',
+ 'panel' => 'themes',
+ 'priority' => 10,
+ ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Add a control for the active/original theme.
- if ( ! $this->is_theme_active() ) {
- $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
- $active_theme = current( $themes );
- $active_theme['isActiveTheme'] = true;
- $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
- 'theme' => $active_theme,
- 'section' => 'themes',
- 'settings' => 'active_theme',
- ) ) );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
+ 'title' => __( 'Popular' ),
+ 'action' => 'popular',
+ 'capability' => 'install_themes',
+ 'panel' => 'themes',
+ 'priority' => 15,
+ ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $themes = wp_prepare_themes_for_js();
- foreach ( $themes as $theme ) {
- if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
- continue;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
+ 'title' => __( 'Latest' ),
+ 'action' => 'latest',
+ 'capability' => 'install_themes',
+ 'panel' => 'themes',
+ 'priority' => 20,
+ ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $theme_id = 'theme_' . $theme['id'];
- $theme['isActiveTheme'] = false;
- $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
- 'theme' => $theme,
- 'section' => 'themes',
- 'settings' => 'active_theme',
- ) ) );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
+ 'title' => __( 'Feature Filter' ),
+ 'action' => 'feature_filter',
+ 'capability' => 'install_themes',
+ 'panel' => 'themes',
+ 'priority' => 25,
+ ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
+ 'title' => __( 'Favorites' ),
+ 'action' => 'favorites',
+ 'capability' => 'install_themes',
+ 'panel' => 'themes',
+ 'priority' => 30,
+ ) ) );
+
+ // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
+ $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
+ 'capability' => 'switch_themes',
+ ) ) );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Site Identity */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_section( 'title_tagline', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3356,6 +3406,150 @@
</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">+ * Load themes into the theme browsing/installation UI.
+ *
+ * @since 4.7.0
+ * @access public
+ */
+ public function load_themes_ajax() {
+ check_ajax_referer( 'switch-themes', 'switch-themes-nonce' );
+
+ if ( ! current_user_can( 'switch_themes' ) ) {
+ wp_die( -1 );
+ }
+
+ if ( empty( $_POST['theme_action'] ) ) {
+ wp_send_json_error( 'missing_theme_action' );
+ }
+
+ if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
+ wp_send_json_error( 'empty_search' );
+ } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
+ wp_send_json_error( 'empty_user' );
+ } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
+ wp_send_json_error( 'no_features' );
+ }
+
+ require_once( ABSPATH . 'wp-admin/includes/theme.php' );
+ if ( 'installed' === $_POST['theme_action'] ) {
+ $themes = array( 'themes' => wp_prepare_themes_for_js() );
+ foreach ( $themes['themes'] as &$theme ) {
+ $theme['type'] = 'installed';
+ // Set active based on customized theme.
+ if ( $_POST['customized_theme'] === $theme['id'] ) {
+ $theme['active'] = true;
+ } else {
+ $theme['active'] = false;
+ }
+ }
+ } else {
+ if ( ! current_user_can( 'install_themes' ) ) {
+ wp_die( -1 );
+ }
+
+ // Arguments for all queries.
+ $args = array(
+ 'per_page' => 100,
+ 'page' => absint( $_POST['page'] ),
+ 'fields' => array(
+ 'slug' => true,
+ 'screenshot' => true,
+ 'description' => true,
+ 'requires' => true,
+ 'rating' => true,
+ 'downloaded' => true,
+ 'downloadLink' => true,
+ 'last_updated' => true,
+ 'homepage' => true,
+ 'num_ratings' => true,
+ 'tags' => true,
+ ),
+ );
+
+ // Specialized handling for each query.
+ switch ( $_POST['theme_action'] ) {
+ case 'search':
+ $args['search'] = wp_unslash( $_POST['search'] );
+ break;
+ case 'favorites':
+ $args['user'] = wp_unslash( $_POST['user'] );
+ case 'featured':
+ case 'popular':
+ $args['browse'] = wp_unslash( $_POST['theme_action'] );
+ break;
+ case 'latest':
+ $args['browse'] = 'new';
+ break;
+ case 'feature_filter':
+ $args['tag'] = wp_unslash( $_POST['tags'] );
+ break;
+ }
+
+ // Load themes from the .org API.
+ $themes = themes_api( 'query_themes', $args );
+ if ( is_wp_error( $themes ) ) {
+ wp_send_json_error();
+ }
+
+ // This list matches the allowed tags in wp-admin/includes/theme-install.php.
+ $themes_allowedtags = array('a' => array('href' => array(), 'title' => array(), 'target' => array()),
+ 'abbr' => array('title' => array()), 'acronym' => array('title' => array()),
+ 'code' => array(), 'pre' => array(), 'em' => array(), 'strong' => array(),
+ 'div' => array(), 'p' => array(), 'ul' => array(), 'ol' => array(), 'li' => array(),
+ 'h1' => array(), 'h2' => array(), 'h3' => array(), 'h4' => array(), 'h5' => array(), 'h6' => array(),
+ 'img' => array('src' => array(), 'class' => array(), 'alt' => array())
+ );
+
+ // Prepare a list of installed themes to check against before the loop.
+ $installed_themes = array();
+ $wp_themes = wp_get_themes();
+ foreach ( $wp_themes as $theme ) {
+ $installed_themes[] = $theme->get_stylesheet();
+ }
+ $update_php = network_admin_url( 'update.php?action=install-theme' );
+ foreach ( $themes->themes as &$theme ) {
+ $theme->install_url = add_query_arg( array(
+ 'theme' => $theme->slug,
+ '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ),
+ ), $update_php );
+
+ $theme->name = wp_kses( $theme->name, $themes_allowedtags );
+ $theme->author = wp_kses( $theme->author, $themes_allowedtags );
+ $theme->version = wp_kses( $theme->version, $themes_allowedtags );
+ $theme->description = wp_kses( $theme->description, $themes_allowedtags );
+ $theme->tags = implode( ', ', $theme->tags );
+ $theme->stars = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
+ $theme->num_ratings = number_format_i18n( $theme->num_ratings );
+ $theme->preview_url = set_url_scheme( $theme->preview_url );
+
+ // Handle themes that are already installed as installed themes.
+ if ( in_array( $theme->slug, $installed_themes, true ) ) {
+ $theme->type = 'installed';
+ } else {
+ $theme->type = $_POST['theme_action'];
+ }
+
+ // Set active based on customized theme.
+ if ( $_POST['customized_theme'] === $theme->slug ) {
+ $theme->active = true;
+ } else {
+ $theme->active = false;
+ }
+
+ // Map available theme properties to installed theme properties.
+ $theme->id = $theme->slug;
+ $theme->screenshot = array( $theme->screenshot_url );
+ $theme->authorAndUri = $theme->author;
+ unset( $theme->slug );
+ unset( $theme->screenshot_url );
+ unset( $theme->author );
+ } // End foreach().
+ } // End if().
+ wp_send_json_success( $themes );
+ }
+
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Callback for validating the header_textcolor value.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Accepts 'blank', and otherwise uses sanitize_hex_color_no_hash().
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizethemecontrolphp"></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/customize/class-wp-customize-theme-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-theme-control.php 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-includes/customize/class-wp-customize-theme-control.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -62,18 +62,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @access public
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function content_template() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
- $active_url = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
- $preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
- $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* translators: %s: theme name */
+ $details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
+ /* translators: %s: theme name */
+ $customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
+ /* translators: %s: theme name */
+ $preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
+ /* translators: %s: theme name */
+ $install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.theme.isActiveTheme ) { #>
- <div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.theme.active ) { #>
+ <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
</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">- <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
</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">- <# if ( data.theme.screenshot[0] ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-screenshot">
</span><span class="cx" style="display: block; padding: 0 10px"> <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -81,25 +85,34 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-screenshot blank"></div>
</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 ( data.theme.isActiveTheme ) { #>
- <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
- <# } else { #>
- <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action" aria-label="<?php echo esc_attr( $details_label ); ?>"><?php _e( 'Theme Details' ); ?></span>
+
+
+ <# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
+ <div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}"><p><?php printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' ); ?></p></div>
</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">- <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
-
- <# if ( data.theme.isActiveTheme ) { #>
- <h3 class="theme-name" id="{{ data.theme.id }}-name">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.theme.active ) { #>
+ <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</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:</span> %s' ), '{{{ data.theme.name }}}' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </h3>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="theme-actions">
+ <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
+ </div>
+ <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
+ <# } else if ( 'installed' === data.theme.type ) { #>
+ <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
+ <div class="theme-actions">
+ <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-theme-id="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
+ </div>
+ <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
</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">- <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-actions">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}" data-theme-id="{{ data.theme.id }}"><?php _e( 'Install & Preview' ); ?></button>
</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>
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizethemespanelphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php (rev 0)
+++ trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,113 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Customize API: WP_Customize_Themes_Panel class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.7.0
+ */
+
+/**
+ * Customize Themes Panel Class
+ *
+ * @since 4.7.0
+ *
+ * @see WP_Customize_Panel
+ */
+class WP_Customize_Themes_Panel extends WP_Customize_Panel {
+
+ /**
+ * Panel type.
+ *
+ * @since 4.7.0
+ * @access public
+ * @var string
+ */
+ public $type = 'themes';
+
+ /**
+ * An Underscore (JS) template for rendering this panel's container.
+ *
+ * The themes panel renders a custom panel heading with the current theme and a switch themes button.
+ *
+ * @see WP_Customize_Panel::print_template()
+ *
+ * @since 4.7.0
+ * @access protected
+ */
+ protected function render_template() {
+ ?>
+ <li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
+ <h3 class="accordion-section-title">
+ <?php
+ if ( $this->manager->is_theme_active() ) {
+ echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
+ } else {
+ echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
+ }
+ ?>
+
+ <?php
+ if ( current_user_can( 'switch_themes' ) ) : ?>
+ <button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
+ <?php endif; ?>
+ </h3>
+ <ul class="accordion-sub-container control-panel-content"></ul>
+ </li>
+ <?php
+ }
+
+ /**
+ * An Underscore (JS) template for this panel's content (but not its container).
+ *
+ * Class variables for this panel class are available in the `data` JS object;
+ * export custom variables by overriding WP_Customize_Panel::json().
+ *
+ * @since 4.7.0
+ * @access protected
+ *
+ * @see WP_Customize_Panel::print_template()
+ */
+ protected function content_template() {
+ ?>
+ <li class="filter-themes-count">
+ <span class="themes-displayed"><?php
+ /* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or translate as "Themes: %s" */
+ echo sprintf( __( 'Displaying %s themes' ), '<span class="theme-count">0</span>' );
+ ?></span>
+ <button type="button" class="button button-primary see-themes"><?php
+ /* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or omit the count and translate as "Show themes" */
+ echo sprintf( __( 'Show %s themes' ), '<span class="theme-count">0</span>' );
+ ?></button>
+ <button type="button" class="button button-primary filter-themes"><?php _e( 'Filter themes' ); ?></button>
+ </li>
+ <li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
+ <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
+ <div class="accordion-section-title">
+ <span class="preview-notice"><?php
+ /* translators: %s: themes panel title in the Customizer */
+ echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
+ ?></span>
+ <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
+ <# if ( data.description ) { #>
+ <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+ <# } #>
+ <?php endif; ?>
+ </div>
+ <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
+ <# if ( data.description ) { #>
+ <div class="description customize-panel-description">
+ {{{ data.description }}}
+ </div>
+ <# } #>
+ <?php endif; ?>
+ </li>
+ <li id="customize-container"></li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
+ <li class="customize-themes-full-container-container">
+ <ul class="customize-themes-full-container">
+ <li class="customize-themes-notifications"></li>
+ </ul>
+ </li>
+ <?php
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizethemessectionphp"></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/customize/class-wp-customize-themes-section.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-themes-section.php 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/src/wp-includes/customize/class-wp-customize-themes-section.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10,7 +10,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Customize Themes Section class.
</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 UI container for theme controls, which behaves like a backwards Panel.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * A UI container for theme controls, which are displayed in tabbed sections.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,57 +28,115 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $type = 'themes';
</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">- * Render the themes section, which behaves like a panel.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Theme section action.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @since 4.2.0
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Defines the type of themes to load (installed, featured, latest, etc.).
+ *
+ * @since 4.7.0
+ * @access public
+ * @var string
+ */
+ public $action = '';
+
+ /**
+ * Text before theme section heading.
+ *
+ * @since 4.7.0
+ * @access public
+ * @var string
+ */
+ public $text_before = '';
+
+ /**
+ * Get section parameters for JS.
+ *
+ * @since 4.7.0
+ * @access public
+ * @return array Exported parameters.
+ */
+ public function json() {
+ $exported = parent::json();
+ $exported['action'] = $this->action;
+ $exported['text_before'] = $this->text_before;
+
+ return $exported;
+ }
+
+ /**
+ * Render a themes section as a JS template.
+ *
+ * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
+ *
+ * @since 4.7.0
</ins><span class="cx" style="display: block; padding: 0 10px"> * @access protected
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- protected function render() {
- $classes = 'accordion-section control-section control-section-' . $this->type;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ protected function render_template() {
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
- <h3 class="accordion-section-title">
- <?php
- if ( $this->manager->is_theme_active() ) {
- echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <li id="accordion-section-{{ data.id }}" class="theme-section">
+ <# if ( '' !== data.text_before ) { #>
+ <p class="customize-themes-text-before">{{ data.text_before }}</p>
+ <# } #>
+ <# if ( 'search' === data.action ) { #>
+ <div class="search-form customize-themes-section-title themes-section-search_themes">
+ <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
+ <input placeholder="{{ data.title }}" type="text" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
+ <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+ </div>
+ <# } else { #>
+ <# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
+ var attr = ' aria-expanded="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">- echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
- }
- ?>
-
- <?php if ( count( $this->controls ) > 0 ) : ?>
- <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
- <?php endif; ?>
- </h3>
- <div class="customize-themes-panel control-panel-content themes-php">
- <h3 class="accordion-section-title customize-section-title">
- <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
- <?php _e( 'Themes' ); ?>
- <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
- </h3>
- <h3 class="accordion-section-title customize-section-title">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var attr = '';
+ } #>
+ <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
+ <# } #>
+ <?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
+ <# if ( 'installed' === data.action ) { #>
+ <p class="themes-filter-container">
+ <label for="themes-filter">
+ <span class="screen-reader-text"><?php _e( 'Search installed themes…' ); ?></span>
+ <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" />
+ </label>
+ </p>
+ <# } #>
+ <?php endif; ?>
+ <# if ( 'favorites' === data.action ) { #>
+ <div class="favorites-form filter-details">
+ <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
+ <p>
+ <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
+ <input type="search" id="wporg-username-input" value="">
+ <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
+ </p>
+ </div>
+ <# } else if ( 'feature_filter' === data.action ) { #>
+ <div class="filter-drawer filter-details">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $this->manager->is_theme_active() ) {
- echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
- } else {
- echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $feature_list = get_theme_feature_list();
+ foreach ( $feature_list as $feature_name => $features ) {
+ echo '<fieldset class="filter-group">';
+ $feature_name = esc_html( $feature_name );
+ echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
+ echo '<div class="filter-group-feature">';
+ foreach ( $features as $feature => $feature_name ) {
+ $feature = esc_attr( $feature );
+ echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
+ echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
+ }
+ echo '</div>';
+ echo '</fieldset>';
</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">- <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
- </h3>
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </div>
+ <# } #>
+ <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- <div id="customize-container"></div>
- <?php if ( count( $this->controls ) > 4 ) : ?>
- <p><label for="themes-filter">
- <span class="screen-reader-text"><?php _e( 'Search installed themes…' ); ?></span>
- <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" />
- </label></p>
- <?php endif; ?>
</del><span class="cx" style="display: block; padding: 0 10px"> <div class="theme-browser rendered">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <ul class="themes accordion-section-content">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
+ <ul class="themes">
</ins><span class="cx" style="display: block; padding: 0 10px"> </ul>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
+ <p class="spinner"></p>
</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"> </li>
</span></span></pre></div>
<a id="trunktestsphpunittestscustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/customize/manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/customize/manager.php 2016-10-19 03:05:51 UTC (rev 38812)
+++ trunk/tests/phpunit/tests/customize/manager.php 2016-10-19 03:19:13 UTC (rev 38813)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1486,7 +1486,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $data = json_decode( $json, true );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNotEmpty( $data );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts', 'l10n' ), array_keys( $data ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertEquals( $autofocus, $data['autofocus'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'save', $data['nonce'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'preview', $data['nonce'] );
</span></span></pre>
</div>
</div>
</body>
</html>