Ticket #39087: 39087.4.diff

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

@@ -152 +152 @@
 
 #customize-controls .customize-info .customize-panel-description,
 #customize-controls .customize-info .customize-section-description,
-#customize-controls .no-widget-areas-rendered-notice {
+#customize-controls .non-rendered-widget-areas-notice {
         color: #555d66;
         display: none;
         background: #fff;
@@ -160 +160 @@
         border-top: 1px solid #ddd;
 }
 
-#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
+#customize-controls .customize-info .customize-panel-description.open + .non-rendered-widget-areas-notice {
         border-top: none;
 }
+.non-rendered-widget-areas-notice {
+        font-style: italic;
+}
+.non-rendered-widget-areas-notice p:first-child {
+        margin-top: 0;
+}
+.non-rendered-widget-areas-notice p:last-child {
+        margin-bottom: 0;
+}
 
 #customize-controls .customize-info .customize-section-description {
         margin-bottom: 15px;

src/wp-admin/js/customize-widgets.js

@@ -1577 +1577 @@
                         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>', {
-                                        'class': 'no-widget-areas-rendered-notice'
+
+                                // @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>.
+                                noticeContainer = $( '<div></div>', {
+                                        'class': 'non-rendered-widget-areas-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(), nonRenderedAreaCount;
+                                        noticeContainer.empty();
+
+                                        if ( activeSectionCount !== api.Widgets.data.registeredSidebars.length ) {
+
+                                                if ( 0 !== activeSectionCount ) {
+                                                        nonRenderedAreaCount = api.Widgets.data.registeredSidebars.length - activeSectionCount;
+                                                        noticeContainer.append( $( '<p></p>', {
+                                                                text: ( 1 === nonRenderedAreaCount ? l10n.allAreasNotShown.singular : l10n.allAreasNotShown.plural ).replace( '%d', nonRenderedAreaCount )
+                                                        } ) );
+                                                }
+
+                                                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 );
                                         }
                                 });
                         });

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

@@ -732 +732 @@
                                 '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.' ),
+                                'allAreasNotShown' => 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' )
+                                ),
                                 '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.' ),
                         ),