diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 8faecb3248..d4ebc4bff9 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -773,6 +773,9 @@ body.adding-menu-items #customize-preview iframe { /* @todo update selector */ #accordion-section-add_menu { margin: 15px 12px; +} + +#accordion-section-add_menu h3 { text-align: right; } diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js index d0b73c59cd..d5bd6daa14 100644 --- a/src/wp-admin/js/customize-nav-menus.js +++ b/src/wp-admin/js/customize-nav-menus.js @@ -1163,7 +1163,8 @@ attachEvents: function() { var section = this, container = section.container, - contentContainer = section.contentContainer; + contentContainer = section.contentContainer, + navMenuSettingPattern = /^nav_menu\[/; /* * We have to manually handle section expanded because we do not @@ -1184,7 +1185,66 @@ event.preventDefault(); } ); - api.Section.prototype.attachEvents.apply( this, arguments ); + /** + * Get number of non-deleted nav menus. + * + * @since 4.9.0 + * @returns {number} Count. + */ + function getNavMenuCount() { + var count = 0; + api.each( function( setting ) { + if ( navMenuSettingPattern.test( setting.id ) && false !== setting.get() ) { + count += 1; + } + } ); + return count; + } + + /** + * Update visibility of notice to prompt users to create menus. + * + * @since 4.9.0 + * @returns {void} + */ + function updateNoticeVisibility() { + container.find( '.add-new-menu-notice' ).prop( 'hidden', getNavMenuCount() > 0 ); + } + + /** + * Handle setting addition. + * + * @since 4.9.0 + * @param {wp.customize.Setting} setting - Added setting. + * @returns {void} + */ + function addChangeEventListener( setting ) { + if ( navMenuSettingPattern.test( setting.id ) ) { + setting.bind( updateNoticeVisibility ); + updateNoticeVisibility(); + } + } + + /** + * Handle setting removal. + * + * @since 4.9.0 + * @param {wp.customize.Setting} setting - Removed setting. + * @returns {void} + */ + function removeChangeEventListener( setting ) { + if ( navMenuSettingPattern.test( setting.id ) ) { + setting.unbind( updateNoticeVisibility ); + updateNoticeVisibility(); + } + } + + api.each( addChangeEventListener ); + api.bind( 'add', addChangeEventListener ); + api.bind( 'removed', removeChangeEventListener ); + updateNoticeVisibility(); + + api.Section.prototype.attachEvents.apply( section, arguments ); }, /** diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php index edad3fc694..39459ec57d 100644 --- a/src/wp-includes/class-wp-customize-nav-menus.php +++ b/src/wp-includes/class-wp-customize-nav-menus.php @@ -951,6 +951,12 @@ final class WP_Customize_Nav_Menus {