WordPress.org
Get WordPress

Make WordPress Core

Changeset 41768


Ignore:
Timestamp:
10/05/2017 02:21:22 AM (9 years ago)
Author:
westonruter
Message:

Customize: Improve the menu creation flow.

Often, folks run into two issues when they create new menus: they click "Add a Menu" thinking it will add a new page to their menu, or they forget to assign their new menu to a location, and then wonder why it doesn't show up on their site.

This commit rearranges the order of items in the menu panel, and updates the flow for creating a menu by breaking it up into steps. Additionally, more help text has been added to guide people through the process of creating a menu.

Also adds default type lookups for Panel and Section instances. See #30741.

Props bpayton, obenland, westonruter, celloexpessions, afercia, melchoyce, zoonini, michelleweber.
Fixes #40104.

Location:
trunk
Files:
1 added
13 edited

Legend:

Unmodified
Added
Removed

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

    r41750 r41768  
    558558}
    559559
    560 #customize-theme-controls .control-panel-content .control-section:nth-child(2),
    561 #customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
     560#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
     561#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
     562#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
    562563        border-top: 1px solid #ddd;
     564}
     565
     566#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
     567        border-top: none;
    563568}
    564569
    … …  
    662667}
    663668
    664 .customize-section-description-container {
     669.customize-section-description-container,
     670.control-section-nav_menu .customize-section-description-container {
    665671        margin-bottom: 15px;
    666672}

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

    r41711 r41768  
    11#customize-theme-controls #accordion-section-menu_locations {
    22        position: relative;
    3         margin-bottom: 15px;
     3        margin-top: 15px;
    44}
    55
    66#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
    77        border-bottom-color: #ddd;
     8        margin-top: 15px;
     9}
     10
     11#customize-theme-controls .customize-section-title-nav_menus-heading,
     12#customize-theme-controls .customize-section-title-menu_locations-heading,
     13#customize-theme-controls .customize-section-title-menu_locations-description {
     14        padding: 0 12px 0 12px;
     15}
     16
     17#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
     18        /* Override the default italic style for control descriptions */
     19        font-style: normal;
    820}
    921
    … …  
    2638        vertical-align: middle;
    2739        line-height: 28px;
     40}
     41
     42#customize-controls .customize-control-nav_menu_name {
     43        margin-bottom: 12px;
     44}
     45
     46.customize-control-nav_menu_name p:last-of-type {
     47        margin-bottom: 0;
     48}
     49
     50#customize-new-menu-submit {
     51        float: right;
     52        min-width: 85px;
     53}
     54
     55#customize-new-menu-submit-description {
     56        margin: 0;
    2857}
    2958
    … …  
    176205}
    177206
    178 .menu-settings .customize-control-checkbox label {
     207.wp-customizer .menu-location-settings {
     208        margin-top: 12px;
     209        border-top: none;
     210}
     211
     212.wp-customizer .control-section-nav_menu .menu-location-settings {
     213        margin-top: 24px;
     214        border-top: 1px solid #ddd;
     215        padding-top: 12px;
     216}
     217
     218.menu-settings .customize-control-checkbox label,
     219.menu-location-settings .customize-control-checkbox label {
    179220        line-height: 1;
    180221}
    181222
    182223/* @todo update selector or potentially remove */
    183 .menu-settings .customize-control.customize-control-checkbox {
     224.menu-settings .customize-control.customize-control-checkbox,
     225.menu-location-settings .customize-control.customize-control-checkbox {
    184226        margin-bottom: 8px; /* Override collapsing at smaller viewports. */
    185227}
    … …  
    739781#accordion-section-add_menu {
    740782        margin: 15px 12px;
    741         overflow: hidden;
    742 }
    743 
    744 .new-menu-section-content {
    745         display: none;
    746         padding: 15px 0 0 0;
    747         clear: both;
    748 }
    749 
    750 /* @todo update selector */
    751 #accordion-section-add_menu .accordion-section-title {
    752         padding-left: 45px;
    753 }
    754 
    755 /* @todo update selector */
    756 #accordion-section-add_menu .accordion-section-title:before {
    757         font: normal 20px/1 dashicons;
    758         position: absolute;
    759         top: 12px;
    760         left: 14px;
    761         content: "\f132";
     783        text-align: right;
     784}
     785
     786#accordion-section-add_menu h3,
     787#accordion-section-add_menu .customize-add-menu-button {
     788        margin: 0;
     789}
     790
     791#accordion-section-add_menu .customize-add-menu-button {
     792        font-weight: normal;
    762793}
    763794
    … …  
    773804}
    774805
     806.assigned-menu-locations-title p {
     807        margin: 0 0 8px 0;
     808}
     809
    775810li.assigned-to-menu-location .menu-delete-item {
    776811        display: none;
    … …  
    809844}
    810845
    811 .customize-control-nav_menu {
     846.customize-control-nav_menu .new-menu-item-invitation {
     847        margin-top: 0;
     848        margin-bottom: 0;
     849}
     850
     851.customize-control-nav_menu .customize-control-nav_menu-buttons {
    812852        margin-top: 12px;
    813853}

  • trunk/src/wp-admin/js/customize-controls.js

    r41750 r41768  
    12351235                 */
    12361236                initialize: function ( id, options ) {
    1237                         var section = this;
    1238                         Container.prototype.initialize.call( section, id, options );
     1237                        var section = this, params;
     1238                        params = options.params || options;
     1239
     1240                        // Look up the type if one was not supplied.
     1241                        if ( ! params.type ) {
     1242                                _.find( api.sectionConstructor, function( Constructor, type ) {
     1243                                        if ( Constructor === section.constructor ) {
     1244                                                params.type = type;
     1245                                                return true;
     1246                                        }
     1247                                        return false;
     1248                                } );
     1249                        }
     1250
     1251                        Container.prototype.initialize.call( section, id, params );
    12391252
    12401253                        section.id = id;
    … …  
    25082521                 */
    25092522                initialize: function ( id, options ) {
    2510                         var panel = this;
    2511                         Container.prototype.initialize.call( panel, id, options );
     2523                        var panel = this, params;
     2524                        params = options.params || options;
     2525
     2526                        // Look up the type if one was not supplied.
     2527                        if ( ! params.type ) {
     2528                                _.find( api.panelConstructor, function( Constructor, type ) {
     2529                                        if ( Constructor === panel.constructor ) {
     2530                                                params.type = type;
     2531                                                return true;
     2532                                        }
     2533                                        return false;
     2534                                } );
     2535                        }
     2536
     2537                        Container.prototype.initialize.call( panel, id, params );
     2538
    25122539                        panel.embed();
    25132540                        panel.deferred.embedded.done( function () {
    … …  
    30963123         * @param {string} options.section          - The ID of the section the control belongs to.
    30973124         * @param {mixed}  [options.setting]        - The ID of the main setting or an instance of this setting.
    3098          * @param {mixed}  options.settings         - An object with keys (e.g. default) that maps to setting IDs or Setting/Value objects, or an array of setting IDs or Setting/Value objects.   
     3125         * @param {mixed}  options.settings         - An object with keys (e.g. default) that maps to setting IDs or Setting/Value objects, or an array of setting IDs or Setting/Value objects.
    30993126         * @param {mixed}  options.settings.default - The ID of the setting the control relates to.
    31003127         * @param {string} options.settings.data    - @todo Is this used?
    … …  
    31083135
    31093136                defaults: {
     3137                        label: '',
     3138                        description: '',
    31103139                        active: true,
    31113140                        priority: 10

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

    r41726 r41768  
    812812                                panel.saveManageColumnsState();
    813813                        });
     814
     815                        // Wait until after construction to patch the UI
     816                        _.defer( function () {
     817
     818                                panel.contentContainer.find( '#accordion-section-menu_locations' ).prepend(
     819                                        wp.template( 'nav-menu-locations-header' )( api.Menus.data )
     820                                );
     821
     822                                panel.contentContainer.find( '#accordion-section-add_menu .accordion-section-title' ).replaceWith(
     823                                        wp.template( 'nav-menu-create-menu-section-title' )
     824                                );
     825                        } );
    814826                },
    815827
    … …  
    962974
    963975                populateControls: function() {
    964                         var section = this, menuNameControlId, menuAutoAddControlId, menuControl, menuNameControl, menuAutoAddControl;
     976                        var section = this,
     977                                menuNameControlId,
     978                                menuLocationsControlId,
     979                                menuAutoAddControlId,
     980                                menuDeleteControlId,
     981                                menuControl,
     982                                menuNameControl,
     983                                menuLocationsControl,
     984                                menuAutoAddControl,
     985                                menuDeleteControl;
    965986
    966987                        // Add the control for managing the menu name.
    … …  
    9971018                        }
    9981019
     1020                        // Add the menu locations control.
     1021                        menuLocationsControlId = section.id + '[locations]';
     1022                        menuLocationsControl = api.control( menuLocationsControlId );
     1023                        if ( ! menuLocationsControl ) {
     1024                                menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
     1025                                        section: section.id,
     1026                                        priority: 999,
     1027                                        settings: {
     1028                                                'default': section.id
     1029                                        },
     1030                                        menu_id: section.params.menu_id
     1031                                } );
     1032                                api.control.add( menuLocationsControl.id, menuLocationsControl );
     1033                                menuControl.active.set( true );
     1034                        }
     1035
    9991036                        // Add the control for managing the menu auto_add.
    10001037                        menuAutoAddControlId = section.id + '[auto_add]';
    … …  
    10051042                                        label: '',
    10061043                                        section: section.id,
    1007                                         priority: 999,
     1044                                        priority: 1000,
    10081045                                        settings: {
    10091046                                                'default': section.id
    … …  
    10141051                        }
    10151052
     1053                        // Add the control for deleting the menu
     1054                        menuDeleteControlId = section.id + '[delete]';
     1055                        menuDeleteControl = api.control( menuDeleteControlId );
     1056                        if ( ! menuDeleteControl ) {
     1057                                menuDeleteControl = new api.Control( menuDeleteControlId, {
     1058                                        section: section.id,
     1059                                        priority: 1001,
     1060                                        templateId: 'nav-menu-delete-button'
     1061                                } );
     1062                                api.control.add( menuDeleteControl.id, menuDeleteControl );
     1063                                menuDeleteControl.active.set( true );
     1064                                menuDeleteControl.deferred.embedded.done( function () {
     1065                                        menuDeleteControl.container.find( 'button' ).on( 'click', function() {
     1066                                                var menuId = section.params.menu_id;
     1067                                                var menuControl = api.Menus.getMenuControl( menuId );
     1068                                                menuControl.setting.set( false );
     1069                                        });
     1070                                } );
     1071                        }
    10161072                },
    10171073
    … …  
    10941150         *
    10951151         * Customizer section for new menus.
    1096          * Note that 'new_menu' must match the WP_Customize_New_Menu_Section::$type.
    10971152         *
    10981153         * @constructor
    … …  
    11071162                 */
    11081163                attachEvents: function() {
    1109                         var section = this;
    1110                         this.container.on( 'click', '.add-menu-toggle', function() {
    1111                                 if ( section.expanded() ) {
    1112                                         section.collapse();
    1113                                 } else {
    1114                                         section.expand();
    1115                                 }
    1116                         });
    1117                 },
    1118 
    1119                 /**
    1120                  * Update UI to reflect expanded state.
    1121                  *
    1122                  * @since 4.1.0
    1123                  *
    1124                  * @param {Boolean} expanded
    1125                  */
    1126                 onChangeExpanded: function( expanded ) {
    11271164                        var section = this,
    1128                                 button = section.container.find( '.add-menu-toggle' ),
    1129                                 content = section.contentContainer,
    1130                                 customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
    1131                         if ( expanded ) {
    1132                                 button.addClass( 'open' );
    1133                                 button.attr( 'aria-expanded', 'true' );
    1134                                 content.slideDown( 'fast', function() {
    1135                                         customizer.scrollTop( customizer.height() );
    1136                                 });
    1137                         } else {
    1138                                 button.removeClass( 'open' );
    1139                                 button.attr( 'aria-expanded', 'false' );
    1140                                 content.slideUp( 'fast' );
    1141                                 content.find( '.menu-name-field' ).removeClass( 'invalid' );
    1142                         }
    1143                 },
    1144 
    1145                 /**
    1146                  * Find the content element.
    1147                  *
    1148                  * @since 4.7.0
    1149                  *
    1150                  * @returns {jQuery} Content UL element.
    1151                  */
    1152                 getContent: function() {
    1153                         return this.container.find( 'ul:first' );
     1165                                container = section.container,
     1166                                contentContainer = section.contentContainer;
     1167
     1168                        /*
     1169                         * We have to manually handle section expanded because we do not
     1170                         * apply the `accordion-section-title` class to this button-driven section.
     1171                         */
     1172                        container.on( 'click', '.customize-add-menu-button', function() {
     1173                                section.expand();
     1174                        });
     1175
     1176                        contentContainer.on( 'keydown', '.menu-name-field', function( event ) {
     1177                                if ( 13 === event.which ) { // Enter.
     1178                                        section.submit();
     1179                                }
     1180                        } );
     1181                        contentContainer.on( 'click', '#customize-new-menu-submit', function( event ) {
     1182                                section.submit();
     1183                                event.stopPropagation();
     1184                                event.preventDefault();
     1185                        } );
     1186
     1187                        api.Section.prototype.attachEvents.apply( this, arguments );
     1188                },
     1189
     1190                /**
     1191                 * Set up the control.
     1192                 *
     1193                 * @since 4.9.0
     1194                 */
     1195                ready: function() {
     1196                        this.populateControls();
     1197                },
     1198
     1199                /**
     1200                 * Create the controls for this section.
     1201                 *
     1202                 * @since 4.9.0
     1203                 */
     1204                populateControls: function() {
     1205                        var section = this,
     1206                                menuNameControlId,
     1207                                menuLocationsControlId,
     1208                                newMenuSubmitControlId,
     1209                                menuNameControl,
     1210                                menuLocationsControl,
     1211                                newMenuSubmitControl;
     1212
     1213                        menuNameControlId = section.id + '[name]';
     1214                        menuNameControl = api.control( menuNameControlId );
     1215                        if ( ! menuNameControl ) {
     1216                                menuNameControl = new api.controlConstructor.nav_menu_name( menuNameControlId, {
     1217                                        label: api.Menus.data.l10n.menuNameLabel,
     1218                                        description: api.Menus.data.l10n.newMenuNameDescription,
     1219                                        section: section.id,
     1220                                        priority: 0
     1221                                } );
     1222                                api.control.add( menuNameControl.id, menuNameControl );
     1223                                menuNameControl.active.set( true );
     1224                        }
     1225
     1226                        menuLocationsControlId = section.id + '[locations]';
     1227                        menuLocationsControl = api.control( menuLocationsControlId );
     1228                        if ( ! menuLocationsControl ) {
     1229                                menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
     1230                                        section: section.id,
     1231                                        priority: 1,
     1232                                        menu_id: ''
     1233                                } );
     1234                                api.control.add( menuLocationsControlId, menuLocationsControl );
     1235                                menuLocationsControl.active.set( true );
     1236                        }
     1237
     1238                        newMenuSubmitControlId = section.id + '[submit]';
     1239                        newMenuSubmitControl = api.control( newMenuSubmitControlId );
     1240                        if ( !newMenuSubmitControl ) {
     1241                                newMenuSubmitControl = new api.Control( newMenuSubmitControlId, {
     1242                                        section: section.id,
     1243                                        priority: 1,
     1244                                        templateId: 'nav-menu-submit-new-button'
     1245                                } );
     1246                                api.control.add( newMenuSubmitControlId, newMenuSubmitControl );
     1247                                newMenuSubmitControl.active.set( true );
     1248                        }
     1249                },
     1250
     1251                /**
     1252                 * Create the new menu with name and location supplied by the user.
     1253                 *
     1254                 * @since 4.9.0
     1255                 */
     1256                submit: function() {
     1257                        var section = this,
     1258                                contentContainer = section.contentContainer,
     1259                                nameInput = contentContainer.find( '.menu-name-field' ).first(),
     1260                                name = nameInput.val(),
     1261                                menuSection,
     1262                                customizeId,
     1263                                placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
     1264
     1265                        if ( ! name ) {
     1266                                nameInput.addClass( 'invalid' );
     1267                                nameInput.focus();
     1268                                return;
     1269                        }
     1270
     1271                        customizeId = 'nav_menu[' + String( placeholderId ) + ']';
     1272
     1273                        // Register the menu control setting.
     1274                        api.create( customizeId, customizeId, {}, {
     1275                                type: 'nav_menu',
     1276                                transport: api.Menus.data.settingTransport,
     1277                                previewer: api.previewer
     1278                        } );
     1279                        api( customizeId ).set( $.extend(
     1280                                {},
     1281                                api.Menus.data.defaultSettingValues.nav_menu,
     1282                                {
     1283                                        name: name
     1284                                }
     1285                        ) );
     1286
     1287                        /*
     1288                         * Add the menu section (and its controls).
     1289                         * Note that this will automatically create the required controls
     1290                         * inside via the Section's ready method.
     1291                         */
     1292                        menuSection = new api.Menus.MenuSection( customizeId, {
     1293                                panel: 'nav_menus',
     1294                                title: displayNavMenuName( name ),
     1295                                customizeAction: api.Menus.data.l10n.customizingMenus,
     1296                                priority: 10,
     1297                                menu_id: placeholderId
     1298                        } );
     1299                        api.section.add( customizeId, menuSection );
     1300
     1301                        // Clear name field.
     1302                        nameInput.val( '' );
     1303                        nameInput.removeClass( 'invalid' );
     1304
     1305                        contentContainer.find( '.assigned-menu-location input[type=checkbox]' ).each( function() {
     1306                                var checkbox = $( this ),
     1307                                navMenuLocationSetting;
     1308
     1309                                if ( checkbox.prop( 'checked' ) ) {
     1310                                        navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
     1311                                        navMenuLocationSetting.set( placeholderId );
     1312
     1313                                        // Reset state for next new menu
     1314                                        checkbox.prop( 'checked', false );
     1315                                }
     1316                        } );
     1317
     1318                        wp.a11y.speak( api.Menus.data.l10n.menuAdded );
     1319
     1320                        // Focus on the new menu section.
     1321                        api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
    11541322                }
    11551323        });
    … …  
    15131681                                        $adjacentFocusTarget.focus(); // keyboard accessibility
    15141682                                } );
     1683
     1684                                control.setting.set( false );
    15151685                        } );
    15161686                },
    … …  
    20352205
    20362206                ready: function() {
     2207                        var control = this;
     2208
     2209                        if ( control.setting ) {
     2210                                var settingValue = control.setting();
     2211
     2212                                control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
     2213
     2214                                control.nameElement.bind(function( value ) {
     2215                                        var settingValue = control.setting();
     2216                                        if ( settingValue && settingValue.name !== value ) {
     2217                                                settingValue = _.clone( settingValue );
     2218                                                settingValue.name = value;
     2219                                                control.setting.set( settingValue );
     2220                                        }
     2221                                });
     2222                                if ( settingValue ) {
     2223                                        control.nameElement.set( settingValue.name );
     2224                                }
     2225
     2226                                control.setting.bind(function( object ) {
     2227                                        if ( object ) {
     2228                                                control.nameElement.set( object.name );
     2229                                        }
     2230                                });
     2231                        }
     2232                }
     2233        });
     2234
     2235        /**
     2236         * wp.customize.Menus.MenuLocationsControl
     2237         *
     2238         * Customizer control for a nav menu's locations.
     2239         *
     2240         * @since 4.9.0
     2241         * @constructor
     2242         * @augments wp.customize.Control
     2243         */
     2244        api.Menus.MenuLocationsControl = api.Control.extend({
     2245
     2246                /**
     2247                 * Set up the control.
     2248                 *
     2249                 * @since 4.9.0
     2250                 */
     2251                ready: function () {
     2252                        var control = this;
     2253
     2254                        control.container.find( '.assigned-menu-location' ).each(function() {
     2255                                var container = $( this ),
     2256                                        checkbox = container.find( 'input[type=checkbox]' ),
     2257                                        element = new api.Element( checkbox ),
     2258                                        navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' ),
     2259                                        isNewMenu = control.params.menu_id === '',
     2260                                        updateCheckbox = isNewMenu ? _.noop : function( checked ) {
     2261                                                element.set( checked );
     2262                                        },
     2263                                        updateSetting = isNewMenu ? _.noop : function( checked ) {
     2264                                                navMenuLocationSetting.set( checked ? control.params.menu_id : 0 );
     2265                                        },
     2266                                        updateSelectedMenuLabel = function( selectedMenuId ) {
     2267                                                var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
     2268                                                if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
     2269                                                        container.find( '.theme-location-set' ).hide();
     2270                                                } else {
     2271                                                        container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
     2272                                                }
     2273                                        };
     2274
     2275                                updateCheckbox( navMenuLocationSetting.get() === control.params.menu_id );
     2276
     2277                                checkbox.on( 'change', function() {
     2278                                        // Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
     2279                                        updateSetting( this.checked );
     2280                                } );
     2281
     2282                                navMenuLocationSetting.bind( function( selectedMenuId ) {
     2283                                        updateCheckbox( selectedMenuId === control.params.menu_id );
     2284                                        updateSelectedMenuLabel( selectedMenuId );
     2285                                } );
     2286                                updateSelectedMenuLabel( navMenuLocationSetting.get() );
     2287                        });
     2288                }
     2289        });
     2290
     2291        /**
     2292         * wp.customize.Menus.MenuAutoAddControl
     2293         *
     2294         * Customizer control for a nav menu's auto add.
     2295         *
     2296         * @constructor
     2297         * @augments wp.customize.Control
     2298         */
     2299        api.Menus.MenuAutoAddControl = api.Control.extend({
     2300
     2301                ready: function() {
    20372302                        var control = this,
    20382303                                settingValue = control.setting();
    … …  
    20532318                        };
    20542319
    2055                         control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
    2056 
    2057                         control.nameElement.bind(function( value ) {
    2058                                 var settingValue = control.setting();
    2059                                 if ( settingValue && settingValue.name !== value ) {
    2060                                         settingValue = _.clone( settingValue );
    2061                                         settingValue.name = value;
    2062                                         control.setting.set( settingValue );
    2063                                 }
    2064                         });
    2065                         if ( settingValue ) {
    2066                                 control.nameElement.set( settingValue.name );
    2067                         }
    2068 
    2069                         control.setting.bind(function( object ) {
    2070                                 if ( object ) {
    2071                                         control.nameElement.set( object.name );
    2072                                 }
    2073                         });
    2074                 }
    2075 
    2076         });
    2077 
    2078         /**
    2079          * wp.customize.Menus.MenuAutoAddControl
    2080          *
    2081          * Customizer control for a nav menu's auto add.
    2082          *
    2083          * @constructor
    2084          * @augments wp.customize.Control
    2085          */
    2086         api.Menus.MenuAutoAddControl = api.Control.extend({
    2087 
    2088                 ready: function() {
    2089                         var control = this,
    2090                                 settingValue = control.setting();
    2091 
    2092                         /*
    2093                          * Since the control is not registered in PHP, we need to prevent the
    2094                          * preview's sending of the activeControls to result in this control
    2095                          * being deactivated.
    2096                          */
    2097                         control.active.validate = function() {
    2098                                 var value, section = api.section( control.section() );
    2099                                 if ( section ) {
    2100                                         value = section.active();
    2101                                 } else {
    2102                                         value = false;
    2103                                 }
    2104                                 return value;
    2105                         };
    2106 
    21072320                        control.autoAddElement = new api.Element( control.container.find( 'input[type=checkbox].auto_add' ) );
    21082321
    … …  
    21812394
    21822395                        this._setupAddition();
    2183                         this._setupLocations();
    21842396                        this._setupTitle();
    21852397
    … …  
    22112423                                }
    22122424                        }
     2425
     2426                        /*
     2427                         * Wait for menu items to be added.
     2428                         * Ideally, we'd bind to an event indicating construction is complete,
     2429                         * but deferring appears to be the best option today.
     2430                         */
     2431                        _.defer( function () {
     2432                                control.updateInvitationVisibility();
     2433                        } );
    22132434                },
    22142435
    … …  
    22362457                                }
    22372458                        } );
    2238 
    2239                         control.container.find( '.menu-delete-item .button-link-delete' ).on( 'click', function( event ) {
    2240                                 event.preventDefault();
    2241                                 control.setting.set( false );
    2242                         });
    22432459                },
    22442460
    … …  
    23922608                        widgetTemplate.find( '.nav-menu-widget-no-menus-message:first' ).toggle( 0 === navMenuCount );
    23932609                        widgetTemplate.find( 'option[value=' + String( menuId ) + ']' ).remove();
    2394                 },
    2395 
    2396                 // Setup theme location checkboxes.
    2397                 _setupLocations: function() {
    2398                         var control = this;
    2399 
    2400                         control.container.find( '.assigned-menu-location' ).each(function() {
    2401                                 var container = $( this ),
    2402                                         checkbox = container.find( 'input[type=checkbox]' ),
    2403                                         element,
    2404                                         updateSelectedMenuLabel,
    2405                                         navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
    2406 
    2407                                 updateSelectedMenuLabel = function( selectedMenuId ) {
    2408                                         var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
    2409                                         if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
    2410                                                 container.find( '.theme-location-set' ).hide();
    2411                                         } else {
    2412                                                 container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
    2413                                         }
    2414                                 };
    2415 
    2416                                 element = new api.Element( checkbox );
    2417                                 element.set( navMenuLocationSetting.get() === control.params.menu_id );
    2418 
    2419                                 checkbox.on( 'change', function() {
    2420                                         // Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
    2421                                         navMenuLocationSetting.set( this.checked ? control.params.menu_id : 0 );
    2422                                 } );
    2423 
    2424                                 navMenuLocationSetting.bind(function( selectedMenuId ) {
    2425                                         element.set( selectedMenuId === control.params.menu_id );
    2426                                         updateSelectedMenuLabel( selectedMenuId );
    2427                                 });
    2428                                 updateSelectedMenuLabel( navMenuLocationSetting.get() );
    2429 
    2430                         });
    24312610                },
    24322611
    … …  
    26082787                        } );
    26092788
     2789                        menuControl.updateInvitationVisibility( menuItemControls );
    26102790                        menuControl.container.find( '.reorder-toggle' ).toggle( menuItemControls.length > 1 );
    26112791                },
    … …  
    26822862
    26832863                        return menuItemControl;
     2864                },
     2865
     2866                /**
     2867                 * Show an invitation to add new menu items when there are no menu items.
     2868                 *
     2869                 * @since 4.9.0
     2870                 *
     2871                 * @param {wp.customize.controlConstructor.nav_menu_item[]} optionalMenuItemControls
     2872                 */
     2873                updateInvitationVisibility: function ( optionalMenuItemControls ) {
     2874                        var menuItemControls = optionalMenuItemControls || this.getMenuItemControls();
     2875
     2876                        this.container.find( '.new-menu-item-invitation' ).toggle( menuItemControls.length === 0 );
    26842877                }
    26852878        } );
    2686 
    2687         /**
    2688          * wp.customize.Menus.NewMenuControl
    2689          *
    2690          * Customizer control for creating new menus and handling deletion of existing menus.
    2691          * Note that 'new_menu' must match the WP_Customize_New_Menu_Control::$type.
    2692          *
    2693          * @constructor
    2694          * @augments wp.customize.Control
    2695          */
    2696         api.Menus.NewMenuControl = api.Control.extend({
    2697                 /**
    2698                  * Set up the control.
    2699                  */
    2700                 ready: function() {
    2701                         this._bindHandlers();
    2702                 },
    2703 
    2704                 _bindHandlers: function() {
    2705                         var self = this,
    2706                                 name = $( '#customize-control-new_menu_name input' ),
    2707                                 submit = $( '#create-new-menu-submit' );
    2708                         name.on( 'keydown', function( event ) {
    2709                                 if ( 13 === event.which ) { // Enter.
    2710                                         self.submit();
    2711                                 }
    2712                         } );
    2713                         submit.on( 'click', function( event ) {
    2714                                 self.submit();
    2715                                 event.stopPropagation();
    2716                                 event.preventDefault();
    2717                         } );
    2718                 },
    2719 
    2720                 /**
    2721                  * Create the new menu with the name supplied.
    2722                  */
    2723                 submit: function() {
    2724 
    2725                         var control = this,
    2726                                 container = control.container.closest( '.accordion-section-new-menu' ),
    2727                                 nameInput = container.find( '.menu-name-field' ).first(),
    2728                                 name = nameInput.val(),
    2729                                 menuSection,
    2730                                 customizeId,
    2731                                 placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
    2732 
    2733                         if ( ! name ) {
    2734                                 nameInput.addClass( 'invalid' );
    2735                                 nameInput.focus();
    2736                                 return;
    2737                         }
    2738 
    2739                         customizeId = 'nav_menu[' + String( placeholderId ) + ']';
    2740 
    2741                         // Register the menu control setting.
    2742                         api.create( customizeId, customizeId, {}, {
    2743                                 type: 'nav_menu',
    2744                                 transport: api.Menus.data.settingTransport,
    2745                                 previewer: api.previewer
    2746                         } );
    2747                         api( customizeId ).set( $.extend(
    2748                                 {},
    2749                                 api.Menus.data.defaultSettingValues.nav_menu,
    2750                                 {
    2751                                         name: name
    2752                                 }
    2753                         ) );
    2754 
    2755                         /*
    2756                          * Add the menu section (and its controls).
    2757                          * Note that this will automatically create the required controls
    2758                          * inside via the Section's ready method.
    2759                          */
    2760                         menuSection = new api.Menus.MenuSection( customizeId, {
    2761                                 panel: 'nav_menus',
    2762                                 title: displayNavMenuName( name ),
    2763                                 customizeAction: api.Menus.data.l10n.customizingMenus,
    2764                                 type: 'nav_menu',
    2765                                 priority: 10,
    2766                                 menu_id: placeholderId
    2767                         } );
    2768                         api.section.add( menuSection );
    2769 
    2770                         // Clear name field.
    2771                         nameInput.val( '' );
    2772                         nameInput.removeClass( 'invalid' );
    2773 
    2774                         wp.a11y.speak( api.Menus.data.l10n.menuAdded );
    2775 
    2776                         // Focus on the new menu section.
    2777                         api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
    2778                 }
    2779         });
    27802879
    27812880        /**
    … …  
    27882887                nav_menu: api.Menus.MenuControl,
    27892888                nav_menu_name: api.Menus.MenuNameControl,
    2790                 nav_menu_auto_add: api.Menus.MenuAutoAddControl,
    2791                 new_menu: api.Menus.NewMenuControl
     2889                nav_menu_locations: api.Menus.MenuLocationsControl,
     2890                nav_menu_auto_add: api.Menus.MenuAutoAddControl
    27922891        });
    27932892

  • trunk/src/wp-includes/class-wp-customize-control.php

    r41750 r41768  
    771771
    772772/**
     773 * WP_Customize_Nav_Menu_Locations_Control class.
     774 */
     775require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-locations-control.php' );
     776
     777/**
    773778 * WP_Customize_Nav_Menu_Auto_Add_Control class.
    774779 */
    … …  
    776781
    777782/**
    778  * WP_Customize_New_Menu_Control class.
    779  */
    780 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
    781 
    782 /**
    783783 * WP_Customize_Date_Time_Control class.
    784784 */

  • trunk/src/wp-includes/class-wp-customize-manager.php

    r41750 r41768  
    316316                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-location-control.php' );
    317317                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-name-control.php' );
     318                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-locations-control.php' );
    318319                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
    319                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
    320320
    321321                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
    … …  
    325325                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
    326326                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
    327                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
    328327
    329328                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-css-setting.php' );

  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r41670 r41768  
    396396                $temp_nav_menu_item_setting = new WP_Customize_Nav_Menu_Item_Setting( $this->manager, 'nav_menu_item[-1]' );
    397397
     398                $num_locations = count( get_registered_nav_menus() );
     399                if ( 1 === $num_locations ) {
     400                        $locations_description = __( 'Your theme can display menus in one location.' );
     401                } else {
     402                        /* translators: %s: number of menu locations */
     403                        $locations_description = sprintf( _n( 'Your theme can display menus in %s location.', 'Your theme can display menus in %s locations.', $num_locations ), number_format_i18n( $num_locations ) );
     404                }
     405
    398406                // Pass data to JS.
    399407                $settings = array(
    … …  
    401409                        'itemTypes'            => $this->available_item_types(),
    402410                        'l10n'                 => array(
    403                                 'untitled'          => _x( '(no label)', 'missing menu item navigation label' ),
    404                                 'unnamed'           => _x( '(unnamed)', 'Missing menu name.' ),
    405                                 'custom_label'      => __( 'Custom Link' ),
    406                                 'page_label'        => get_post_type_object( 'page' )->labels->singular_name,
    407                                 /* translators: %s: menu location */
    408                                 'menuLocation'      => _x( '(Currently set to: %s)', 'menu' ),
    409                                 'menuNameLabel'     => __( 'Menu Name' ),
    410                                 'itemAdded'         => __( 'Menu item added' ),
    411                                 'itemDeleted'       => __( 'Menu item deleted' ),
    412                                 'menuAdded'         => __( 'Menu created' ),
    413                                 'menuDeleted'       => __( 'Menu deleted' ),
    414                                 'movedUp'           => __( 'Menu item moved up' ),
    415                                 'movedDown'         => __( 'Menu item moved down' ),
    416                                 'movedLeft'         => __( 'Menu item moved out of submenu' ),
    417                                 'movedRight'        => __( 'Menu item is now a sub-item' ),
     411                                'untitled'               => _x( '(no label)', 'missing menu item navigation label' ),
     412                                'unnamed'                => _x( '(unnamed)', 'Missing menu name.' ),
     413                                'custom_label'           => __( 'Custom Link' ),
     414                                'page_label'             => get_post_type_object( 'page' )->labels->singular_name,
     415                                /* translators: %s:      menu location */
     416                                'menuLocation'           => _x( '(Currently set to: %s)', 'menu' ),
     417                                'locationsDescription'   => $locations_description,
     418                                'menuNameLabel'          => __( 'Menu Name' ),
     419                                'newMenuNameDescription' => __( 'If your theme has multiple menus, giving them clear names will help you manage them.' ),
     420                                'itemAdded'              => __( 'Menu item added' ),
     421                                'itemDeleted'            => __( 'Menu item deleted' ),
     422                                'menuAdded'              => __( 'Menu created' ),
     423                                'menuDeleted'            => __( 'Menu deleted' ),
     424                                'movedUp'                => __( 'Menu item moved up' ),
     425                                'movedDown'              => __( 'Menu item moved down' ),
     426                                'movedLeft'              => __( 'Menu item moved out of submenu' ),
     427                                'movedRight'             => __( 'Menu item is now a sub-item' ),
    418428                                /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
    419                                 'customizingMenus'  => sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
     429                                'customizingMenus'       => sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
    420430                                /* translators: %s: title of menu item which is invalid */
    421                                 'invalidTitleTpl'   => __( '%s (Invalid)' ),
     431                                'invalidTitleTpl'        => __( '%s (Invalid)' ),
    422432                                /* translators: %s: title of menu item in draft status */
    423                                 'pendingTitleTpl'   => __( '%s (Pending)' ),
    424                                 'itemsFound'        => __( 'Number of items found: %d' ),
    425                                 'itemsFoundMore'    => __( 'Additional items found: %d' ),
    426                                 'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
    427                                 'reorderModeOn'     => __( 'Reorder mode enabled' ),
    428                                 'reorderModeOff'    => __( 'Reorder mode closed' ),
    429                                 'reorderLabelOn'    => esc_attr__( 'Reorder menu items' ),
    430                                 'reorderLabelOff'   => esc_attr__( 'Close reorder mode' ),
     433                                'pendingTitleTpl'        => __( '%s (Pending)' ),
     434                                'itemsFound'             => __( 'Number of items found: %d' ),
     435                                'itemsFoundMore'         => __( 'Additional items found: %d' ),
     436                                'itemsLoadingMore'       => __( 'Loading more results... please wait.' ),
     437                                'reorderModeOn'          => __( 'Reorder mode enabled' ),
     438                                'reorderModeOff'         => __( 'Reorder mode closed' ),
     439                                'reorderLabelOn'         => esc_attr__( 'Reorder menu items' ),
     440                                'reorderLabelOff'        => esc_attr__( 'Close reorder mode' ),
    431441                        ),
    432442                        'settingTransport'     => 'postMessage',
    … …  
    538548                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Control' );
    539549                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Name_Control' );
     550                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Locations_Control' );
    540551                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Auto_Add_Control' );
    541552                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Item_Control' );
    … …  
    559570                // Menu locations.
    560571                $locations     = get_registered_nav_menus();
    561                 $num_locations = count( array_keys( $locations ) );
     572                $num_locations = count( $locations );
    562573                if ( 1 == $num_locations ) {
    563                         $description = '<p>' . __( 'Your theme supports one menu. Select which menu you would like to use.' ) . '</p>';
     574                        $description = '<p>' . __( 'Your theme can display menus in one location. Select which menu you would like to use.' ) . '</p>';
    564575                } else {
    565576                        /* translators: %s: number of menu locations */
    566                         $description = '<p>' . sprintf( _n( 'Your theme supports %s menu. Select which menu appears in each location.', 'Your theme supports %s menus. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . '</p>';
    567                 }
     577                        $description = '<p>' . sprintf( _n( 'Your theme can display menus in %s location. Select which menu you would like to use.', 'Your theme can display menus in %s locations. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . '</p>';
     578                }
     579
    568580                if ( current_theme_supports( 'widgets' ) ) {
    569581                        /* translators: URL to the widgets panel of the customizer */
    570                         $description .= '<p>' . sprintf( __( 'You can also place menus in <a href="%s">widget areas</a> with the &#8220;Custom Menu&#8221; widget.' ), "javascript:wp.customize.panel( 'widgets' ).focus();" ) . '</p>';
     582                        $description .= '<p>' . sprintf( __( 'If your theme has widget areas, you can also add menus there. Visit the <a href="%s">Widgets panel</a> and add a &#8220;Custom Menu widget&#8221; to display a menu in a sidebar or footer.' ), "javascript:wp.customize.panel( 'widgets' ).focus();" ) . '</p>';
    571583                }
    572584
    573585                $this->manager->add_section( 'menu_locations', array(
    574                         'title'       => __( 'Menu Locations' ),
    575                         'panel'       => 'nav_menus',
    576                         'priority'    => 5,
    577                         'description' => $description,
     586                        'title'         => __( 'View All Locations' ),
     587                        'panel'         => 'nav_menus',
     588                        'priority'      => 30,
     589                        'description'   => $description
    578590                ) );
    579591
    … …  
    668680
    669681                // Add the add-new-menu section and controls.
    670                 $this->manager->add_section( new WP_Customize_New_Menu_Section( $this->manager, 'add_menu', array(
    671                         'title'    => __( 'Add a Menu' ),
     682                $this->manager->add_section( 'add_menu', array(
     683                        'type'     => 'new_menu',
     684                        'title'    => __( 'New Menu' ),
    672685                        'panel'    => 'nav_menus',
    673                         'priority' => 999,
    674                 ) ) );
    675 
    676                 $this->manager->add_control( 'new_menu_name', array(
    677                         'label'       => __( 'New menu name' ),
    678                         'section'     => 'add_menu',
    679                         'type'        => 'text',
    680                         'settings'    => array(),
    681                         'input_attrs' => array(
    682                                 'class'       => 'menu-name-field',
    683                         ),
     686                        'priority' => 20,
    684687                ) );
    685 
    686                 $this->manager->add_control( new WP_Customize_New_Menu_Control( $this->manager, 'create_new_menu', array(
    687                         'section'  => 'add_menu',
    688                         'settings' => array(),
    689                 ) ) );
    690688
    691689                $this->manager->add_setting( new WP_Customize_Filter_Setting( $this->manager, 'nav_menus_created_posts', array(
    … …  
    925923                                ?>
    926924                        </div>
     925                </script>
     926
     927                <script type="text/html" id="tmpl-nav-menu-delete-button">
     928                        <div class="menu-delete-item">
     929                                <button type="button" class="button-link button-link-delete">
     930                                        <?php _e( 'Delete Menu' ); ?>
     931                                </button>
     932                        </div>
     933                </script>
     934
     935                <script type="text/html" id="tmpl-nav-menu-submit-new-button">
     936                        <p id="customize-new-menu-submit-description"><?php _e( 'Click "next" to start adding links to your new menu.' ); ?></p>
     937                        <button id="customize-new-menu-submit" type="button" class="button" aria-describedby="customize-new-menu-submit-description"><?php _e( 'Next' ); ?></button>
     938                </script>
     939
     940                <script type="text/html" id="tmpl-nav-menu-locations-header">
     941                        <span class="customize-control-title customize-section-title-menu_locations-heading"><?php _e( 'Menu Locations' ); ?></span>
     942                        <p class="customize-control-description customize-section-title-menu_locations-description">{{ data.l10n.locationsDescription }}</p>
     943                </script>
     944
     945                <script type="text/html" id="tmpl-nav-menu-create-menu-section-title">
     946                        <h3>
     947                                <button type="button" class="button customize-add-menu-button">
     948                                        <?php _e( 'Create New Menu' ); ?>
     949                                </button>
     950                        </h3>
    927951                </script>
    928952        <?php

  • trunk/src/wp-includes/class-wp-customize-section.php

    r41390 r41768  
    386386/** WP_Customize_Nav_Menu_Section class */
    387387require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
    388 
    389 /** WP_Customize_New_Menu_Section class */
    390 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );

  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-auto-add-control.php

    r41162 r41768  
    3939        protected function content_template() {
    4040                ?>
     41                <# var elementId = _.uniqueId( 'customize-nav-menu-auto-add-control-' ); #>
    4142                <span class="customize-control-title"><?php _e( 'Menu Options' ); ?></span>
    42                 <label>
    43                         <input type="checkbox" class="auto_add" />
    44                         <?php _e( 'Automatically add new top-level pages to this menu' ); ?>
    45                 </label>
     43                <span class="customize-inside-control-row">
     44                        <input id="{{ elementId }}" type="checkbox" class="auto_add" />
     45                        <label for="{{ elementId }}">
     46                                <?php _e( 'Automatically add new top-level pages to this menu' ); ?>
     47                        </label>
     48                </span>
    4649                <?php
    4750        }

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

    r41740 r41768  
    2424
    2525        /**
    26          * The nav menu setting.
    27          *
    28          * @since 4.3.0
    29          * @var WP_Customize_Nav_Menu_Setting
    30          */
    31         public $setting;
    32 
    33         /**
    3426         * Don't render the control's content - it uses a JS template instead.
    3527         *
    … …  
    4537        public function content_template() {
    4638                ?>
    47                 <# var elementId; #>
    48                 <button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
    49                         <?php _e( 'Add Items' ); ?>
    50                 </button>
    51                 <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
    52                         <span class="reorder"><?php _e( 'Reorder' ); ?></span>
    53                         <span class="reorder-done"><?php _e( 'Done' ); ?></span>
    54                 </button>
     39                <p class="new-menu-item-invitation"><?php _e( 'Time to add some links! Click "Add menu items" to start putting pages, categories, and custom links in your menu. Add as many things as you\'d like.' ); ?></p>
     40                <div class="customize-control-nav_menu-buttons">
     41                        <button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
     42                                <?php _e( 'Add Items' ); ?>
     43                        </button>
     44                        <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
     45                                <span class="reorder"><?php _e( 'Reorder' ); ?></span>
     46                                <span class="reorder-done"><?php _e( 'Done' ); ?></span>
     47                        </button>
     48                </div>
    5549                <p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
    56                 <span class="menu-delete-item">
    57                         <button type="button" class="button-link button-link-delete">
    58                                 <?php _e( 'Delete Menu' ); ?>
    59                         </button>
    60                 </span>
    61                 <?php if ( current_theme_supports( 'menus' ) ) : ?>
    62                 <ul class="menu-settings">
    63                         <li class="customize-control">
    64                                 <span class="customize-control-title"><?php _e( 'Display Location' ); ?></span>
    65                         </li>
    66 
    67                         <?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
    68                                 <# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
    69                                 <li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
    70                                         <input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
    71                                         <label for="{{ elementId }}">
    72                                                 <?php echo $description; ?>
    73                                                 <span class="theme-location-set">
    74                                                         <?php
    75                                                         /* translators: %s: menu name */
    76                                                         printf( _x( '(Current: %s)', 'menu location' ),
    77                                                                 '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
    78                                                         );
    79                                                         ?>
    80                                                 </span>
    81                                         </label>
    82                                 </li>
    83                         <?php endforeach; ?>
    84                 </ul>
    85                 <?php endif; ?>
    8650                <?php
    8751        }

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

    r41162 r41768  
    4141                <label>
    4242                        <# if ( data.label ) { #>
    43                                 <span class="customize-control-title screen-reader-text">{{ data.label }}</span>
     43                                <span class="customize-control-title">{{ data.label }}</span>
    4444                        <# } #>
    45                         <input type="text" class="menu-name-field live-update-section-title" />
     45                        <input type="text" class="menu-name-field live-update-section-title"
     46                                <# if ( data.description ) { #>
     47                                        aria-describedby="{{ data.section }}-description"
     48                                <# } #>
     49                                />
    4650                </label>
     51                <# if ( data.description ) { #>
     52                        <p id="{{ data.section }}-description">{{ data.description }}</p>
     53                <# } #>
    4754                <?php
    4855        }

  • trunk/src/wp-includes/customize/class-wp-customize-nav-menus-panel.php

    r41162 r41768  
    9393                        </div>
    9494                </li>
     95                <?php
     96                // NOTE: The following is a workaround for an inability to treat (and thus label) a list of sections as a whole.
     97                ?>
     98                <li class="customize-control-title customize-section-title-nav_menus-heading"><?php _e( 'Menus' ); ?></li>
    9599        <?php
    96100        }

  • trunk/tests/qunit/wp-admin/js/customize-nav-menus.js

    r38049 r41768  
    6666                ok( controls[0].extended( api.Menus.MenuNameControl ), 'first control in menu section is MenuNameControl' );
    6767                ok( controls[1].extended( api.Menus.MenuItemControl ), 'second control in menu section is MenuItemControl' );
    68                 ok( controls[ controls.length - 1 ].extended( api.Menus.MenuAutoAddControl ), 'last control in menu section is a MenuAutoAddControl' );
     68                ok( controls[ controls.length - 1 ].extended( api.Menus.MenuDeleteControl ), 'last control in menu section is a MenuDeleteControl' );
    6969        } );
    7070        // @todo Add more tests for api.Menus.MenuSection behaviors
Note: See TracChangeset for help on using the changeset viewer.