Customize: Vary description for nav menu locations control based on whether it is shown during menu creation.

Also fix issue with initial visibility of notice when there are no menus.

Amends [41823].
Props bpayton, melchoyce, westonruter.
See #42116.
Fixes #42113.

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


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

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

@@ -677,10 +677,17 @@ body.trashing #publish-settings {
 }
 
 .customize-section-description-container,
-.control-section-nav_menu .customize-section-description-container {
+.control-section-nav_menu .customize-section-description-container,
+.control-section-new_menu .customize-section-description-container {
 	margin-bottom: 15px;
 }
 
+.control-section-nav_menu .customize-control,
+.control-section-new_menu .customize-control {
+	/* Override default `margin-bottom` for `.customize-control` */
+	margin-bottom: 0;
+}
+
 .customize-section-title {
 	margin: -12px -12px 0 -12px;
 	border-bottom: 1px solid #ddd;

wp-admin/css/customize-controls.css

@@ -677,10 +677,17 @@ body.trashing #publish-settings {
 }
 
 .customize-section-description-container,
-.control-section-nav_menu .customize-section-description-container {
+.control-section-nav_menu .customize-section-description-container,
+.control-section-new_menu .customize-section-description-container {
 	margin-bottom: 15px;
 }
 
+.control-section-nav_menu .customize-control,
+.control-section-new_menu .customize-control {
+	/* Override default `margin-bottom` for `.customize-control` */
+	margin-bottom: 0;
+}
+
 .customize-section-title {
 	margin: -12px -12px 0 -12px;
 	border-bottom: 1px solid #ddd;

wp-admin/css/customize-nav-menus-rtl.css

@@ -1,6 +1,6 @@
 #customize-theme-controls #accordion-section-menu_locations {
 	position: relative;
-	margin-top: 15px;
+	margin-top: 30px;
 }
 
 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
@@ -52,10 +52,6 @@
 	min-width: 85px;
 }
 
-#customize-new-menu-submit-description {
-	margin: 0;
-}
-
 .wp-customizer .menu-item-bar .menu-item-handle,
 .wp-customizer .menu-item-settings,
 .wp-customizer .menu-item-settings .description-thin {
@@ -212,6 +208,10 @@
 .wp-customizer .control-section-nav_menu .menu-location-settings {
 	margin-top: 24px;
 	border-top: 1px solid #ddd;
+}
+
+.wp-customizer .control-section-nav_menu .menu-location-settings,
+.customize-control-nav_menu_auto_add {
 	padding-top: 12px;
 }
 
@@ -219,6 +219,10 @@
 	vertical-align: top;
 }
 
+.menu-location-settings .new-menu-locations-widget-note {
+	display: block;
+}
+
 .customize-control-menu {
 	margin-top: 4px;
 }

wp-admin/css/customize-nav-menus.css

@@ -1,6 +1,6 @@
 #customize-theme-controls #accordion-section-menu_locations {
 	position: relative;
-	margin-top: 15px;
+	margin-top: 30px;
 }
 
 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
@@ -52,10 +52,6 @@
 	min-width: 85px;
 }
 
-#customize-new-menu-submit-description {
-	margin: 0;
-}
-
 .wp-customizer .menu-item-bar .menu-item-handle,
 .wp-customizer .menu-item-settings,
 .wp-customizer .menu-item-settings .description-thin {
@@ -212,6 +208,10 @@
 .wp-customizer .control-section-nav_menu .menu-location-settings {
 	margin-top: 24px;
 	border-top: 1px solid #ddd;
+}
+
+.wp-customizer .control-section-nav_menu .menu-location-settings,
+.customize-control-nav_menu_auto_add {
 	padding-top: 12px;
 }
 
@@ -219,6 +219,10 @@
 	vertical-align: top;
 }
 
+.menu-location-settings .new-menu-locations-widget-note {
+	display: block;
+}
+
 .customize-control-menu {
 	margin-top: 4px;
 }

wp-admin/js/customize-nav-menus.js

@@ -812,16 +812,11 @@
 				panel.saveManageColumnsState();
 			});
 
-			// Wait until after construction to patch the UI
+			// Inject additional heading into the menu locations section's head container.
-			_.defer( function () {
+			api.section( 'menu_locations', function( section ) {
-
+				section.headContainer.prepend(
-				panel.contentContainer.find( '#accordion-section-menu_locations' ).prepend(
 					wp.template( 'nav-menu-locations-header' )( api.Menus.data )
 				);
-
-				panel.contentContainer.find( '#accordion-section-add_menu .accordion-section-title' ).replaceWith(
-					wp.template( 'nav-menu-create-menu-section-title' )
-				);
 			} );
 		},
 
@@ -1166,6 +1161,10 @@
 				contentContainer = section.contentContainer,
 				navMenuSettingPattern = /^nav_menu\[/;
 
+			section.headContainer.find( '.accordion-section-title' ).replaceWith(
+				wp.template( 'nav-menu-create-menu-section-title' )
+			);
+
 			/*
 			 * We have to manually handle section expanded because we do not
 			 * apply the `accordion-section-title` class to this button-driven section.
@@ -1289,7 +1288,8 @@
 				menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
 					section: section.id,
 					priority: 1,
-					menu_id: ''
+					menu_id: '',
+					isCreating: true
 				} );
 				api.control.add( menuLocationsControlId, menuLocationsControl );
 				menuLocationsControl.active.set( true );

wp-includes/customize/class-wp-customize-nav-menu-locations-control.php

@@ -35,13 +35,33 @@ class WP_Customize_Nav_Menu_Locations_Control extends WP_Customize_Control {
 	 * @since 4.9.0
 	 */
 	public function content_template() {
-		if ( current_theme_supports( 'menus' ) ):
+		if ( current_theme_supports( 'menus' ) ) :
 			?>
 			<# var elementId; #>
 			<ul class="menu-location-settings">
 				<li class="customize-control assigned-menu-locations-title">
-					<span class="customize-control-title"><?php _e( 'Menu Locations' ); ?></span>
+					<span class="customize-control-title">{{ wp.customize.Menus.data.l10n.locationsTitle }}</span>
-					<p><?php _e( 'Here\'s where this menu appears. If you\'d like to change that, pick another location.' ); ?></p>
+					<# if ( data.isCreating ) { #>
+						<p>
+							<?php echo _x( 'Where do you want this menu to appear?', 'menu locations' ); ?>
+							<em class="new-menu-locations-widget-note">
+								<?php
+								printf(
+									/* translators: 1: Codex URL, 2: additional link attributes, 3: accessibility text */
+									_x( '(If you plan to use a menu <a href="%1$s" %2$s>widget%3$s</a>, skip this step.)', 'menu locations' ),
+									__( 'https://codex.wordpress.org/WordPress_Widgets' ),
+									' class="external-link" target="_blank"',
+									sprintf( '<span class="screen-reader-text"> %s</span>',
+										/* translators: accessibility text */
+										__( '(opens in a new window)' )
+									)
+								);
+								?>
+							</em>
+						</p>
+					<# } else { #>
+						<p><?php echo _x( 'Here&#8217;s where this menu appears. If you&#8217;d like to change that, pick another location.', 'menu locations' ); ?></p>
+					<# } #>
 				</li>
 
 				<?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-beta1-41831';
+$wp_version = '4.9-beta1-41832';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.