Changeset 40312

Timestamp:

03/22/2017 07:02:26 PM (8 years ago)

Author:

westonruter

Message:

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.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (1 diff)
• src/wp-admin/js/customize-widgets.js (modified) (3 diffs)
• src/wp-includes/class-wp-customize-widgets.php (modified) (1 diff)
• tests/qunit/fixtures/customize-widgets.js (modified) (1 diff)

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

@@ -163 +163 @@
 #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;
 }
 

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

@@ -14 +14 @@
     api.Widgets.data = _wpCustomizeWidgetsSettings || {};
     l10n = api.Widgets.data.l10n;
-    delete api.Widgets.data.l10n;
 
     /**
@@ -1578 +1577 @@
 
             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 );
+
+                /**
+                 * 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;
+                };
+
+                /**
+                 * Determine whether or not the notice should be displayed.
+                 *
+                 * @return {boolean}
+                 */
                 shouldShowNotice = function() {
-                    return ( 0 === _.filter( panel.sections(), function( section ) {
-                        return section.active();
-                    } ).length );
+                    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();
 
                 /*
@@ -1598 +1644 @@
                  * 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 );
                     }
                 });

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

@@ -733 +733 @@
                 '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.' ),

trunk/tests/qunit/fixtures/customize-widgets.js

@@ -47 +47 @@
     ],
     'l10n': {
+        'error': 'An error has occurred. Please reload the page and try again.',
+        'navigatePreview': 'You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.',
+        'noAreasShown': {
+            'plural': 'Your theme has %d widget areas, but this particular page doesn\'t display them.',
+            'singular': 'Your theme has %d widget area, but this particular page doesn\'t display it.'
+        },
+        'noWidgetsFound': 'No widgets found.',
+        'removeBtnLabel': 'Remove',
+        'removeBtnTooltip': 'Trash widget by moving it to the inactive widgets sidebar.',
+        'reorderLabelOn': 'Reorder widgets',
+        'reorderModeOff': 'Reorder mode closed',
+        'reorderModeOn': 'Reorder mode enabled',
         'saveBtnLabel': 'Apply',
         'saveBtnTooltip': 'Save and preview changes before publishing them.',
-        'removeBtnLabel': 'Remove',
-        'removeBtnTooltip': 'Trash widget by moving it to the inactive widgets sidebar.',
-        'error': 'An error has occurred. Please reload the page and try again.',
+        'someAreasShown': {
+            'plural': 'Your theme has %d other widget areas, but this particular page doesn\'t display them.',
+            'singular': 'Your theme has %d other widget area, but this particular page doesn\'t display it.'
+        },
+        'widgetMovedDown': 'Widget moved down',
         'widgetMovedUp': 'Widget moved up',
-        'widgetMovedDown': 'Widget moved down'
+        'widgetsFound': 'Number of widgets found: %d'
     },
     'tpl': {