Customize: Show notice in Widgets panel when there are additional widget areas not rendered in preview.

This extends the existing behavior which only showed a message only when there were no widget areas rendered in the preview. The number of non-rendered widget areas is indicated. Also removes needles deletion of `wp.customize.Widgets.data.l10n` property which hindered plugins.

See #33567, #33052.
Fixes #39087.

Built from https://develop.svn.wordpress.org/trunk@40312


git-svn-id: http://core.svn.wordpress.org/trunk@40219 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -163,6 +163,15 @@ body {
 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 	border-top: none;
 }
+.no-widget-areas-rendered-notice {
+	font-style: italic;
+}
+.no-widget-areas-rendered-notice p:first-child {
+	margin-top: 0;
+}
+.no-widget-areas-rendered-notice p:last-child {
+	margin-bottom: 0;
+}
 
 #customize-controls .customize-info .customize-section-description {
 	margin-bottom: 15px;

wp-admin/css/customize-controls.css

@@ -163,6 +163,15 @@ body {
 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 	border-top: none;
 }
+.no-widget-areas-rendered-notice {
+	font-style: italic;
+}
+.no-widget-areas-rendered-notice p:first-child {
+	margin-top: 0;
+}
+.no-widget-areas-rendered-notice p:last-child {
+	margin-bottom: 0;
+}
 
 #customize-controls .customize-info .customize-section-description {
 	margin-bottom: 15px;

wp-admin/js/customize-widgets.js

@@ -13,7 +13,6 @@
 	// Link settings
 	api.Widgets.data = _wpCustomizeWidgetsSettings || {};
 	l10n = api.Widgets.data.l10n;
-	delete api.Widgets.data.l10n;
 
 	/**
 	 * wp.customize.Widgets.WidgetModel
@@ -1577,36 +1576,84 @@
 			api.Panel.prototype.ready.call( panel );
 
 			panel.deferred.embedded.done(function() {
-				var panelMetaContainer, noRenderedAreasNotice, shouldShowNotice;
+				var panelMetaContainer, noticeContainer, updateNotice, getActiveSectionCount, shouldShowNotice;
 				panelMetaContainer = panel.container.find( '.panel-meta' );
-				noRenderedAreasNotice = $( '<div></div>', {
+
+				// @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>.
+				noticeContainer = $( '<div></div>', {
 					'class': 'no-widget-areas-rendered-notice'
 				});
-				noRenderedAreasNotice.append( $( '<em></em>', {
-					text: l10n.noAreasRendered
-				} ) );
-				panelMetaContainer.append( noRenderedAreasNotice );
+				panelMetaContainer.append( noticeContainer );
 
-				shouldShowNotice = function() {
-					return ( 0 === _.filter( panel.sections(), function( section ) {
+				/**
+				 * Get the number of active sections in the panel.
+				 *
+				 * @return {number} Number of active sidebar sections.
+				 */
+				getActiveSectionCount = function() {
+					return _.filter( panel.sections(), function( section ) {
 						return section.active();
-					} ).length );
+					} ).length;
 				};
 
+				/**
+				 * Determine whether or not the notice should be displayed.
+				 *
+				 * @return {boolean}
+				 */
+				shouldShowNotice = function() {
+					var activeSectionCount = getActiveSectionCount();
+					if ( 0 === activeSectionCount ) {
+						return true;
+					} else {
+						return activeSectionCount !== api.Widgets.data.registeredSidebars.length;
+					}
+				};
+
+				/**
+				 * Update the notice.
+				 *
+				 * @returns {void}
+				 */
+				updateNotice = function() {
+					var activeSectionCount = getActiveSectionCount(), message, nonRenderedAreaCount, registeredAreaCount;
+					noticeContainer.empty();
+
+					registeredAreaCount = api.Widgets.data.registeredSidebars.length;
+					if ( activeSectionCount !== registeredAreaCount ) {
+
+						if ( 0 !== activeSectionCount ) {
+							nonRenderedAreaCount = registeredAreaCount - activeSectionCount;
+							message = ( 1 === nonRenderedAreaCount ? l10n.someAreasShown.singular : l10n.someAreasShown.plural ).replace( '%d', nonRenderedAreaCount );
+						} else {
+							message = ( 1 === registeredAreaCount ? l10n.noAreasShown.singular : l10n.noAreasShown.plural ).replace( '%d', registeredAreaCount );
+						}
+
+						noticeContainer.append( $( '<p></p>', {
+							text: message
+						} ) );
+						noticeContainer.append( $( '<p></p>', {
+							text: l10n.navigatePreview
+						} ) );
+					}
+				};
+				updateNotice();
+
 				/*
 				 * Set the initial visibility state for rendered notice.
 				 * Update the visibility of the notice whenever a reflow happens.
 				 */
-				noRenderedAreasNotice.toggle( shouldShowNotice() );
+				noticeContainer.toggle( shouldShowNotice() );
 				api.previewer.deferred.active.done( function () {
-					noRenderedAreasNotice.toggle( shouldShowNotice() );
+					noticeContainer.toggle( shouldShowNotice() );
 				});
 				api.bind( 'pane-contents-reflowed', function() {
 					var duration = ( 'resolved' === api.previewer.deferred.active.state() ) ? 'fast' : 0;
+					updateNotice();
 					if ( shouldShowNotice() ) {
-						noRenderedAreasNotice.slideDown( duration );
+						noticeContainer.slideDown( duration );
 					} else {
-						noRenderedAreasNotice.slideUp( duration );
+						noticeContainer.slideUp( duration );
 					}
 				});
 			});

wp-includes/class-wp-customize-widgets.php

@@ -732,10 +732,27 @@ final class WP_Customize_Widgets {
 				'error'            => __( 'An error has occurred. Please reload the page and try again.' ),
 				'widgetMovedUp'    => __( 'Widget moved up' ),
 				'widgetMovedDown'  => __( 'Widget moved down' ),
-				'noAreasRendered'  => __( 'There are no widget areas on the page shown, however other pages in this theme do have them.' ),
+				'navigatePreview'  => __( 'You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.' ),
+				'someAreasShown'   => wp_array_slice_assoc(
+					/* translators: placeholder is the number of other widget areas registered */
+					_n_noop(
+						'Your theme has %d other widget area, but this particular page doesn\'t display it.',
+						'Your theme has %d other widget areas, but this particular page doesn\'t display them.'
+					),
+					array( 'singular', 'plural' )
+				),
+				'noAreasShown'    => wp_array_slice_assoc(
+					/* translators: placeholder is the total number of widget areas registered */
+					_n_noop(
+						'Your theme has %d widget area, but this particular page doesn\'t display it.',
+						'Your theme has %d widget areas, but this particular page doesn\'t display them.'
+					),
+					array( 'singular', 'plural' )
+				),
 				'reorderModeOn'    => __( 'Reorder mode enabled' ),
 				'reorderModeOff'   => __( 'Reorder mode closed' ),
 				'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),
+				/* translators: placeholder is the count for the number of widgets found */
 				'widgetsFound'     => __( 'Number of widgets found: %d' ),
 				'noWidgetsFound'   => __( 'No widgets found.' ),
 			),

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-alpha-40311';
+$wp_version = '4.8-alpha-40312';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.