<!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>[35231] trunk: Customizer: Always show Widgets panel initially if sidebars are registered; show notice to users in panel if no widget areas are in current preview.</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/35231">35231</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/35231","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>2015-10-16 23:47:56 +0000 (Fri, 16 Oct 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Customizer: Always show Widgets panel initially if sidebars are registered; show notice to users in panel if no widget areas are in current preview.
Widgets panel will not wait to display until the preview loads.
Also fixes problems with `margin-top` in panels where other panels' `active` states change, as well as ensuring sections of deactivated panel collapse before panel is hidden to prevent the pane from becoming empty of controls.
Fixes <a href="https://core.trac.wordpress.org/ticket/33052">#33052</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/33567">#33567</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjscustomizewidgetsjs">trunk/src/wp-admin/js/customize-widgets.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizewidgetsphp">trunk/src/wp-includes/class-wp-customize-widgets.php</a></li>
<li><a href="#trunktestsqunitfixturescustomizewidgetsjs">trunk/tests/qunit/fixtures/customize-widgets.js</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizecontrolsjs">trunk/tests/qunit/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizewidgetsjs">trunk/tests/qunit/wp-admin/js/customize-widgets.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/src/wp-admin/css/customize-controls.css 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -123,13 +123,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #0073aa;
</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-info .customize-panel-description {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .customize-panel-description,
+#customize-controls .no-widget-areas-rendered-notice {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #555;
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 12px 15px;
</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"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
+ border-top: none;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-info .customize-panel-description p:first-child {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/src/wp-admin/js/customize-controls.js 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -300,7 +300,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} args.completeCallback
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeActive: function( active, args ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var duration, construct = this;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var duration, construct = this, expandedOtherPanel;
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.unchanged ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -309,6 +309,24 @@
</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"> duration = ( 'resolved' === api.previewer.deferred.active.state() ? args.duration : 0 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( construct.extended( api.Panel ) ) {
+ // If this is a panel is not currently expanded but another panel is expanded, do not animate.
+ api.panel.each(function ( panel ) {
+ if ( panel !== construct && panel.expanded() ) {
+ expandedOtherPanel = panel;
+ duration = 0;
+ }
+ });
+
+ // Collapse any expanded sections inside of this panel first before deactivating.
+ if ( ! active ) {
+ _.each( construct.sections(), function( section ) {
+ section.collapse( { duration: 0 } );
+ } );
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! $.contains( document, construct.container[0] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
</span><span class="cx" style="display: block; padding: 0 10px"> construct.container.toggle( active );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -329,6 +347,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
</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">+
+ // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
+ if ( expandedOtherPanel ) {
+ expandedOtherPanel._recalculateTopMargin();
+ }
</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">@@ -378,39 +401,48 @@
</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">- * @param {Boolean} expanded
- * @param {Object} [params]
- * @returns {Boolean} false if state already applied
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Handle the toggle logic for expand/collapse.
+ *
+ * @param {Boolean} expanded - The new state to apply.
+ * @param {Object} [params] - Object containing options for expand/collapse.
+ * @param {Function} [params.completeCallback] - Function to call when expansion/collapse is complete.
+ * @returns {Boolean} false if state already applied or active state is false
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _toggleExpanded: function ( expanded, params ) {
- var self = this;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _toggleExpanded: function( expanded, params ) {
+ var instance = this, previousCompleteCallback;
</ins><span class="cx" style="display: block; padding: 0 10px"> params = params || {};
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = this, previousCompleteCallback = params.completeCallback;
- params.completeCallback = function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ previousCompleteCallback = params.completeCallback;
+
+ // Short-circuit expand() if the instance is not active.
+ if ( expanded && ! instance.active() ) {
+ return false;
+ }
+
+ params.completeCallback = function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( previousCompleteCallback ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- previousCompleteCallback.apply( section, arguments );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ previousCompleteCallback.apply( instance, arguments );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expanded ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.container.trigger( 'expanded' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ instance.container.trigger( 'expanded' );
</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">- section.container.trigger( 'collapsed' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ instance.container.trigger( 'collapsed' );
</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 ( ( expanded && this.expanded.get() ) || ( ! expanded && ! this.expanded.get() ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ( expanded && instance.expanded.get() ) || ( ! expanded && ! instance.expanded.get() ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> params.unchanged = true;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- self.onChangeExpanded( self.expanded.get(), params );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ instance.onChangeExpanded( instance.expanded.get(), params );
</ins><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> params.unchanged = false;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this.expandedArgumentsQueue.push( params );
- this.expanded.set( expanded );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ instance.expandedArgumentsQueue.push( params );
+ instance.expanded.set( expanded );
</ins><span class="cx" style="display: block; padding: 0 10px"> return true;
</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><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} [params]
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @returns {Boolean} false if already expanded
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @returns {Boolean} false if already expanded or if inactive.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> expand: function ( params ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return this._toggleExpanded( true, params );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -418,7 +450,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"> * @param {Object} [params]
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @returns {Boolean} false if already collapsed
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @returns {Boolean} false if already collapsed.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> collapse: function ( params ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return this._toggleExpanded( false, params );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -539,6 +571,13 @@
</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><span class="cx" style="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
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ section.deferred.embedded.done(function() {
+ // Fix the top margin after reflow.
+ api.bind( 'pane-contents-reflowed', _.debounce( function() {
+ section._recalculateTopMargin();
+ }, 100 ) );
+ });
</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">@@ -646,13 +685,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Fix the height after browser resize.
</span><span class="cx" style="display: block; padding: 0 10px"> $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Fix the top margin after reflow.
- api.bind( 'pane-contents-reflowed', _.debounce( function() {
- var offset = ( content.offset().top - headerActionsHeight );
- if ( 0 < offset ) {
- content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
- }
- }, 100 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section._recalculateTopMargin();
</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">@@ -693,6 +726,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
+
+ /**
+ * Recalculate the top margin.
+ *
+ * @since 4.4.0
+ * @private
+ */
+ _recalculateTopMargin: function() {
+ var section = this, content, offset, headerActionsHeight;
+ content = section.container.find( '.accordion-section-content' );
+ if ( 0 === content.length ) {
+ return;
+ }
+ headerActionsHeight = $( '#customize-header-actions' ).height();
+ offset = ( content.offset().top - headerActionsHeight );
+ if ( 0 < offset ) {
+ content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
+ }
</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">@@ -1155,6 +1207,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer.append( panel.container );
</span><span class="cx" style="display: block; padding: 0 10px"> panel.renderContent();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ api.bind( 'pane-contents-reflowed', _.debounce( function() {
+ panel._recalculateTopMargin();
+ }, 100 ) );
+
</ins><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="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1253,7 +1310,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">@@ -1268,14 +1325,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Note: there is a second argument 'args' passed
</span><span class="cx" style="display: block; padding: 0 10px"> var position, scroll,
</span><span class="cx" style="display: block; padding: 0 10px"> panel = this,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
- overlay = section.closest( '.wp-full-overlay' ),
- container = section.closest( '.wp-full-overlay-sidebar-content' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ accordionSection = panel.container.closest( '.accordion-section' ),
+ overlay = accordionSection.closest( '.wp-full-overlay' ),
+ container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> siblings = container.find( '.open' ),
</span><span class="cx" style="display: block; padding: 0 10px"> topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- backBtn = section.find( '.customize-panel-back' ),
- panelTitle = section.find( '.accordion-section-title' ).first(),
- content = section.find( '.control-panel-content' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ backBtn = accordionSection.find( '.customize-panel-back' ),
+ panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
+ content = accordionSection.find( '.control-panel-content' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> headerActionsHeight = $( '#customize-header-actions' ).height();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expanded ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1297,7 +1354,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position = content.offset().top;
</span><span class="cx" style="display: block; padding: 0 10px"> scroll = container.scrollTop();
</span><span class="cx" style="display: block; padding: 0 10px"> content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.addClass( 'current-panel' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ accordionSection.addClass( 'current-panel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> overlay.addClass( 'in-sub-panel' );
</span><span class="cx" style="display: block; padding: 0 10px"> container.scrollTop( 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1307,14 +1364,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> topPanel.attr( 'tabindex', '-1' );
</span><span class="cx" style="display: block; padding: 0 10px"> backBtn.attr( 'tabindex', '0' );
</span><span class="cx" style="display: block; padding: 0 10px"> backBtn.focus();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Fix the top margin after reflow.
- api.bind( 'pane-contents-reflowed', _.debounce( function() {
- content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
- }, 100 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel._recalculateTopMargin();
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> siblings.removeClass( 'open' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.removeClass( 'current-panel' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ accordionSection.removeClass( 'current-panel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> overlay.removeClass( 'in-sub-panel' );
</span><span class="cx" style="display: block; padding: 0 10px"> content.delay( 180 ).hide( 0, function() {
</span><span class="cx" style="display: block; padding: 0 10px"> content.css( 'margin-top', 'inherit' ); // Reset
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1330,6 +1383,20 @@
</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">+ * Recalculate the top margin.
+ *
+ * @since 4.4.0
+ * @private
+ */
+ _recalculateTopMargin: function() {
+ var panel = this, headerActionsHeight, content, accordionSection;
+ headerActionsHeight = $( '#customize-header-actions' ).height();
+ accordionSection = panel.container.closest( '.accordion-section' );
+ content = accordionSection.find( '.control-panel-content' );
+ content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
+ },
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Render the panel from its JS template, if it exists.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * The panel's container must already exist in the DOM.
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizewidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-widgets.js 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/src/wp-admin/js/customize-widgets.js 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1506,6 +1506,77 @@
</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">+ * wp.customize.Widgets.WidgetsPanel
+ *
+ * Customizer panel containing the widget area sections.
+ *
+ * @since 4.4.0
+ */
+ api.Widgets.WidgetsPanel = api.Panel.extend({
+
+ /**
+ * Add and manage the display of the no-rendered-areas notice.
+ *
+ * @since 4.4.0
+ */
+ ready: function () {
+ var panel = this;
+
+ api.Panel.prototype.ready.call( panel );
+
+ panel.deferred.embedded.done(function() {
+ var panelMetaContainer, noRenderedAreasNotice, shouldShowNotice;
+ panelMetaContainer = panel.container.find( '.panel-meta' );
+ noRenderedAreasNotice = $( '<div></div>', {
+ 'class': 'no-widget-areas-rendered-notice'
+ });
+ noRenderedAreasNotice.append( $( '<em></em>', {
+ text: l10n.noAreasRendered
+ } ) );
+ panelMetaContainer.append( noRenderedAreasNotice );
+
+ shouldShowNotice = function() {
+ return ( 0 === _.filter( panel.sections(), function( section ) {
+ return section.active();
+ } ).length );
+ };
+
+ /*
+ * Set the initial visibility state for rendered notice.
+ * Update the visibility of the notice whenever a reflow happens.
+ */
+ noRenderedAreasNotice.toggle( shouldShowNotice() );
+ api.previewer.deferred.active.done( function () {
+ noRenderedAreasNotice.toggle( shouldShowNotice() );
+ });
+ api.bind( 'pane-contents-reflowed', function() {
+ var duration = ( 'resolved' === api.previewer.deferred.active.state() ) ? 'fast' : 0;
+ if ( shouldShowNotice() ) {
+ noRenderedAreasNotice.slideDown( duration );
+ } else {
+ noRenderedAreasNotice.slideUp( duration );
+ }
+ });
+ });
+ },
+
+ /**
+ * Allow an active widgets panel to be contextually active even when it has no active sections (widget areas).
+ *
+ * This ensures that the widgets panel appears even when there are no
+ * sidebars displayed on the URL currently being previewed.
+ *
+ * @since 4.4.0
+ *
+ * @returns {boolean}
+ */
+ isContextuallyActive: function() {
+ var panel = this;
+ return panel.active();
+ }
+ });
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * wp.customize.Widgets.SidebarSection
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Customizer section representing a widget area widget
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1968,7 +2039,10 @@
</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">- // Register models for custom section and control types
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Register models for custom panel, section, and control types
+ $.extend( api.panelConstructor, {
+ widgets: api.Widgets.WidgetsPanel
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> $.extend( api.sectionConstructor, {
</span><span class="cx" style="display: block; padding: 0 10px"> sidebar: api.Widgets.SidebarSection
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizewidgetsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-widgets.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-widgets.php 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/src/wp-includes/class-wp-customize-widgets.php 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -355,9 +355,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"> $this->manager->add_panel( 'widgets', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'title' => __( 'Widgets' ),
- 'description' => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
- 'priority' => 110,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'type' => 'widgets',
+ 'title' => __( 'Widgets' ),
+ 'description' => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
+ 'priority' => 110,
+ 'active_callback' => array( $this, 'is_panel_active' ),
</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"> foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -455,6 +457,22 @@
</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">+ * Return whether the widgets panel is active, based on whether there are sidebars registered.
+ *
+ * @since 4.4.0
+ * @access public
+ *
+ * @see WP_Customize_Panel::$active_callback
+ *
+ * @global array $wp_registered_sidebars
+ * @return bool Active.
+ */
+ public function is_panel_active() {
+ global $wp_registered_sidebars;
+ return ! empty( $wp_registered_sidebars );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Covert a widget_id into its corresponding Customizer setting ID (option name).
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 3.9.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -655,6 +673,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'error' => __( 'An error has occurred. Please reload the page and try again.' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'widgetMovedUp' => __( 'Widget moved up' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'widgetMovedDown' => __( 'Widget moved down' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'noAreasRendered' => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'tpl' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'widgetReorderNav' => $widget_reorder_nav_tpl,
</span></span></pre></div>
<a id="trunktestsqunitfixturescustomizewidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/fixtures/customize-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/fixtures/customize-widgets.js 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/tests/qunit/fixtures/customize-widgets.js 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -64,7 +64,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'id': 'widgets',
</span><span class="cx" style="display: block; padding: 0 10px"> 'description': 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).',
</span><span class="cx" style="display: block; padding: 0 10px"> 'priority': 110,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'type': 'default',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'type': 'widgets',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'title': 'Widgets',
</span><span class="cx" style="display: block; padding: 0 10px"> 'content': '',
</span><span class="cx" style="display: block; padding: 0 10px"> 'active': true,
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-controls.js 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/tests/qunit/wp-admin/js/customize-controls.js 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -393,7 +393,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> panelId = 'mockPanelId';
</span><span class="cx" style="display: block; padding: 0 10px"> panelTitle = 'Mock Panel Title';
</span><span class="cx" style="display: block; padding: 0 10px"> panelDescription = 'Mock panel description';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panelContent = '<li id="accordion-panel-widgets" class="control-section control-panel accordion-section">';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panelContent = '<li id="accordion-panel-mockPanelId" class="accordion-section control-section control-panel control-panel-default"> <h3 class="accordion-section-title" tabindex="0"> Fixture Panel <span class="screen-reader-text">Press return or enter to open this panel</span> </h3> <ul class="accordion-sub-container control-panel-content"> <li class="panel-meta customize-info accordion-section cannot-expand"> <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text">Back</span></button> <div class="accordion-section-title"> <span class="preview-notice">You are customizing <strong class="panel-title">Fixture Panel</strong></span> <button
class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text">Help</span></button> </div> </li> </ul> </li>';
</ins><span class="cx" style="display: block; padding: 0 10px"> panelData = {
</span><span class="cx" style="display: block; padding: 0 10px"> content: panelContent,
</span><span class="cx" style="display: block; padding: 0 10px"> title: panelTitle,
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizewidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/wp-admin/js/customize-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-widgets.js 2015-10-16 23:30:29 UTC (rev 35230)
+++ trunk/tests/qunit/wp-admin/js/customize-widgets.js 2015-10-16 23:47:56 UTC (rev 35231)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,9 +34,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! section.expanded() );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( 0 === control.container.find( '> .widget' ).length );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Preview sets the active state.
+ section.active.set( true );
+ control.active.set( true );
+ api.control( 'sidebars_widgets[sidebar-1]' ).active.set( true );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> section.expand();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( ! widgetAddedEvent );
- ok( 1 === control.container.find( '> .widget' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( ! widgetAddedEvent, 'expected widget added event not fired' );
+ ok( 1 === control.container.find( '> .widget' ).length, 'expected there to be one .widget element in the container' );
</ins><span class="cx" style="display: block; padding: 0 10px"> ok( 0 === control.container.find( '.widget-content' ).children().length );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> control.expand();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -47,4 +52,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( document ).off( 'widget-added' );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ test( 'widgets panel should have notice', function() {
+ var panel = api.panel( 'widgets' );
+ ok( panel.extended( api.Widgets.WidgetsPanel ) );
+
+ panel.deferred.embedded.done( function() {
+ ok( 1 === panel.container.find( '.no-widget-areas-rendered-notice' ).length );
+ ok( panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
+ api.section( 'sidebar-widgets-sidebar-1' ).active( true );
+ api.control( 'sidebars_widgets[sidebar-1]' ).active( true );
+ api.trigger( 'pane-contents-reflowed' );
+ ok( ! panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
+ } );
+
+ expect( 4 );
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span></span></pre>
</div>
</div>
</body>
</html>