Changeset 41832

Timestamp:

10/11/2017 07:37:10 PM (8 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-admin/css/customize-nav-menus.css (modified) (4 diffs)
• wp-admin/js/customize-nav-menus.js (modified) (3 diffs)
• wp-includes/customize/class-wp-customize-nav-menu-locations-control.php (modified) (1 diff)

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

@@ -678 +678 @@
 
 .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;
 }
 

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

@@ -1 +1 @@
 #customize-theme-controls #accordion-section-menu_locations {
     position: relative;
-    margin-top: 15px;
+    margin-top: 30px;
 }
 
@@ -51 +51 @@
     float: right;
     min-width: 85px;
-}
-
-#customize-new-menu-submit-description {
-    margin: 0;
 }
 
@@ -213 +209 @@
     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;
 }
@@ -218 +218 @@
 .customize-control-nav_menu_auto_add label {
     vertical-align: top;
+}
+
+.menu-location-settings .new-menu-locations-widget-note {
+    display: block;
 }
 

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

@@ -813 +813 @@
             });
 
-            // Wait until after construction to patch the UI
-            _.defer( function () {
-
-                panel.contentContainer.find( '#accordion-section-menu_locations' ).prepend(
+            // Inject additional heading into the menu locations section's head container.
+            api.section( 'menu_locations', function( section ) {
+                section.headContainer.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' )
                 );
             } );
@@ -1167 +1162 @@
                 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
@@ -1290 +1289 @@
                     section: section.id,
                     priority: 1,
-                    menu_id: ''
+                    menu_id: '',
+                    isCreating: true
                 } );
                 api.control.add( menuLocationsControlId, menuLocationsControl );

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

@@ -36 +36 @@
      */
     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>
-                    <p><?php _e( 'Here\'s where this menu appears. If you\'d like to change that, pick another location.' ); ?></p>
+                    <span class="customize-control-title">{{ wp.customize.Menus.data.l10n.locationsTitle }}</span>
+                    <# 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>