diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
index df6e49feac..039477a37c 100644
|
|
body { |
163 | 163 | #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { |
164 | 164 | border-top: none; |
165 | 165 | } |
| 166 | .no-widget-areas-rendered-notice { |
| 167 | font-style: italic; |
| 168 | } |
| 169 | .no-widget-areas-rendered-notice p:first-child { |
| 170 | margin-top: 0; |
| 171 | } |
| 172 | .no-widget-areas-rendered-notice p:last-child { |
| 173 | margin-bottom: 0; |
| 174 | } |
166 | 175 | |
167 | 176 | #customize-controls .customize-info .customize-section-description { |
168 | 177 | margin-bottom: 15px; |
diff --git src/wp-admin/js/customize-widgets.js src/wp-admin/js/customize-widgets.js
index 25c1eb5b7a..d3a4edcc64 100644
|
|
|
13 | 13 | // Link settings |
14 | 14 | api.Widgets.data = _wpCustomizeWidgetsSettings || {}; |
15 | 15 | l10n = api.Widgets.data.l10n; |
16 | | delete api.Widgets.data.l10n; |
17 | 16 | |
18 | 17 | /** |
19 | 18 | * wp.customize.Widgets.WidgetModel |
… |
… |
|
1577 | 1576 | api.Panel.prototype.ready.call( panel ); |
1578 | 1577 | |
1579 | 1578 | panel.deferred.embedded.done(function() { |
1580 | | var panelMetaContainer, noRenderedAreasNotice, shouldShowNotice; |
| 1579 | var panelMetaContainer, noticeContainer, updateNotice, getActiveSectionCount, shouldShowNotice; |
1581 | 1580 | panelMetaContainer = panel.container.find( '.panel-meta' ); |
1582 | | noRenderedAreasNotice = $( '<div></div>', { |
| 1581 | |
| 1582 | // @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>. |
| 1583 | noticeContainer = $( '<div></div>', { |
1583 | 1584 | 'class': 'no-widget-areas-rendered-notice' |
1584 | 1585 | }); |
1585 | | noRenderedAreasNotice.append( $( '<em></em>', { |
1586 | | text: l10n.noAreasRendered |
1587 | | } ) ); |
1588 | | panelMetaContainer.append( noRenderedAreasNotice ); |
| 1586 | panelMetaContainer.append( noticeContainer ); |
1589 | 1587 | |
1590 | | shouldShowNotice = function() { |
1591 | | return ( 0 === _.filter( panel.sections(), function( section ) { |
| 1588 | /** |
| 1589 | * Get the number of active sections in the panel. |
| 1590 | * |
| 1591 | * @return {number} Number of active sidebar sections. |
| 1592 | */ |
| 1593 | getActiveSectionCount = function() { |
| 1594 | return _.filter( panel.sections(), function( section ) { |
1592 | 1595 | return section.active(); |
1593 | | } ).length ); |
| 1596 | } ).length; |
| 1597 | }; |
| 1598 | |
| 1599 | /** |
| 1600 | * Determine whether or not the notice should be displayed. |
| 1601 | * |
| 1602 | * @return {boolean} |
| 1603 | */ |
| 1604 | shouldShowNotice = function() { |
| 1605 | var activeSectionCount = getActiveSectionCount(); |
| 1606 | if ( 0 === activeSectionCount ) { |
| 1607 | return true; |
| 1608 | } else { |
| 1609 | return activeSectionCount !== api.Widgets.data.registeredSidebars.length; |
| 1610 | } |
| 1611 | }; |
| 1612 | |
| 1613 | /** |
| 1614 | * Update the notice. |
| 1615 | * |
| 1616 | * @returns {void} |
| 1617 | */ |
| 1618 | updateNotice = function() { |
| 1619 | var activeSectionCount = getActiveSectionCount(), message, nonRenderedAreaCount, registeredAreaCount; |
| 1620 | noticeContainer.empty(); |
| 1621 | |
| 1622 | registeredAreaCount = api.Widgets.data.registeredSidebars.length; |
| 1623 | if ( activeSectionCount !== registeredAreaCount ) { |
| 1624 | |
| 1625 | if ( 0 !== activeSectionCount ) { |
| 1626 | nonRenderedAreaCount = registeredAreaCount - activeSectionCount; |
| 1627 | message = ( 1 === nonRenderedAreaCount ? l10n.someAreasShown.singular : l10n.someAreasShown.plural ).replace( '%d', nonRenderedAreaCount ); |
| 1628 | } else { |
| 1629 | message = ( 1 === registeredAreaCount ? l10n.noAreasShown.singular : l10n.noAreasShown.plural ).replace( '%d', registeredAreaCount ); |
| 1630 | } |
| 1631 | |
| 1632 | noticeContainer.append( $( '<p></p>', { |
| 1633 | text: message |
| 1634 | } ) ); |
| 1635 | noticeContainer.append( $( '<p></p>', { |
| 1636 | text: l10n.navigatePreview |
| 1637 | } ) ); |
| 1638 | } |
1594 | 1639 | }; |
| 1640 | updateNotice(); |
1595 | 1641 | |
1596 | 1642 | /* |
1597 | 1643 | * Set the initial visibility state for rendered notice. |
1598 | 1644 | * Update the visibility of the notice whenever a reflow happens. |
1599 | 1645 | */ |
1600 | | noRenderedAreasNotice.toggle( shouldShowNotice() ); |
| 1646 | noticeContainer.toggle( shouldShowNotice() ); |
1601 | 1647 | api.previewer.deferred.active.done( function () { |
1602 | | noRenderedAreasNotice.toggle( shouldShowNotice() ); |
| 1648 | noticeContainer.toggle( shouldShowNotice() ); |
1603 | 1649 | }); |
1604 | 1650 | api.bind( 'pane-contents-reflowed', function() { |
1605 | 1651 | var duration = ( 'resolved' === api.previewer.deferred.active.state() ) ? 'fast' : 0; |
| 1652 | updateNotice(); |
1606 | 1653 | if ( shouldShowNotice() ) { |
1607 | | noRenderedAreasNotice.slideDown( duration ); |
| 1654 | noticeContainer.slideDown( duration ); |
1608 | 1655 | } else { |
1609 | | noRenderedAreasNotice.slideUp( duration ); |
| 1656 | noticeContainer.slideUp( duration ); |
1610 | 1657 | } |
1611 | 1658 | }); |
1612 | 1659 | }); |
diff --git src/wp-includes/class-wp-customize-widgets.php src/wp-includes/class-wp-customize-widgets.php
index 0cd2359d56..887c11fa0c 100644
|
|
final class WP_Customize_Widgets { |
732 | 732 | 'error' => __( 'An error has occurred. Please reload the page and try again.' ), |
733 | 733 | 'widgetMovedUp' => __( 'Widget moved up' ), |
734 | 734 | 'widgetMovedDown' => __( 'Widget moved down' ), |
735 | | 'noAreasRendered' => __( 'There are no widget areas on the page shown, however other pages in this theme do have them.' ), |
| 735 | 'navigatePreview' => __( 'You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.' ), |
| 736 | 'someAreasShown' => wp_array_slice_assoc( |
| 737 | /* translators: placeholder is the number of other widget areas registered */ |
| 738 | _n_noop( |
| 739 | 'Your theme has %d other widget area, but this particular page doesn\'t display it.', |
| 740 | 'Your theme has %d other widget areas, but this particular page doesn\'t display them.' |
| 741 | ), |
| 742 | array( 'singular', 'plural' ) |
| 743 | ), |
| 744 | 'noAreasShown' => wp_array_slice_assoc( |
| 745 | /* translators: placeholder is the total number of widget areas registered */ |
| 746 | _n_noop( |
| 747 | 'Your theme has %d widget area, but this particular page doesn\'t display it.', |
| 748 | 'Your theme has %d widget areas, but this particular page doesn\'t display them.' |
| 749 | ), |
| 750 | array( 'singular', 'plural' ) |
| 751 | ), |
736 | 752 | 'reorderModeOn' => __( 'Reorder mode enabled' ), |
737 | 753 | 'reorderModeOff' => __( 'Reorder mode closed' ), |
738 | 754 | 'reorderLabelOn' => esc_attr__( 'Reorder widgets' ), |
| 755 | /* translators: placeholder is the count for the number of widgets found */ |
739 | 756 | 'widgetsFound' => __( 'Number of widgets found: %d' ), |
740 | 757 | 'noWidgetsFound' => __( 'No widgets found.' ), |
741 | 758 | ), |
diff --git tests/qunit/fixtures/customize-widgets.js tests/qunit/fixtures/customize-widgets.js
index 95ecce8fc6..14d43fb872 100644
|
|
window._wpCustomizeWidgetsSettings = { |
46 | 46 | } |
47 | 47 | ], |
48 | 48 | 'l10n': { |
49 | | 'saveBtnLabel': 'Apply', |
50 | | 'saveBtnTooltip': 'Save and preview changes before publishing them.', |
| 49 | 'error': 'An error has occurred. Please reload the page and try again.', |
| 50 | 'navigatePreview': 'You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.', |
| 51 | 'noAreasShown': { |
| 52 | 'plural': 'Your theme has %d widget areas, but this particular page doesn\'t display them.', |
| 53 | 'singular': 'Your theme has %d widget area, but this particular page doesn\'t display it.' |
| 54 | }, |
| 55 | 'noWidgetsFound': 'No widgets found.', |
51 | 56 | 'removeBtnLabel': 'Remove', |
52 | 57 | 'removeBtnTooltip': 'Trash widget by moving it to the inactive widgets sidebar.', |
53 | | 'error': 'An error has occurred. Please reload the page and try again.', |
| 58 | 'reorderLabelOn': 'Reorder widgets', |
| 59 | 'reorderModeOff': 'Reorder mode closed', |
| 60 | 'reorderModeOn': 'Reorder mode enabled', |
| 61 | 'saveBtnLabel': 'Apply', |
| 62 | 'saveBtnTooltip': 'Save and preview changes before publishing them.', |
| 63 | 'someAreasShown': { |
| 64 | 'plural': 'Your theme has %d other widget areas, but this particular page doesn\'t display them.', |
| 65 | 'singular': 'Your theme has %d other widget area, but this particular page doesn\'t display it.' |
| 66 | }, |
| 67 | 'widgetMovedDown': 'Widget moved down', |
54 | 68 | 'widgetMovedUp': 'Widget moved up', |
55 | | 'widgetMovedDown': 'Widget moved down' |
| 69 | 'widgetsFound': 'Number of widgets found: %d' |
56 | 70 | }, |
57 | 71 | 'tpl': { |
58 | 72 | 'widgetReorderNav': '<div class="widget-reorder-nav"><span class="move-widget" tabindex="0">Move to another area…</span><span class="move-widget-down" tabindex="0">Move down</span><span class="move-widget-up" tabindex="0">Move up</span></div>', |