<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[41768] trunk: Customize: Improve the menu creation flow.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/41768">41768</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/41768","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-10-05 02:21:22 +0000 (Thu, 05 Oct 2017)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/30741">#30741</a>.

Props bpayton, obenland, westonruter, celloexpessions, afercia, melchoyce, zoonini, michelleweber.
Fixes <a href="https://core.trac.wordpress.org/ticket/40104">#40104</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizenavmenuscss">trunk/src/wp-admin/css/customize-nav-menus.css</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjscustomizenavmenusjs">trunk/src/wp-admin/js/customize-nav-menus.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizecontrolphp">trunk/src/wp-includes/class-wp-customize-control.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizenavmenusphp">trunk/src/wp-includes/class-wp-customize-nav-menus.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizesectionphp">trunk/src/wp-includes/class-wp-customize-section.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizenavmenuautoaddcontrolphp">trunk/src/wp-includes/customize/class-wp-customize-nav-menu-auto-add-control.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizenavmenucontrolphp">trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizenavmenunamecontrolphp">trunk/src/wp-includes/customize/class-wp-customize-nav-menu-name-control.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizenavmenuspanelphp">trunk/src/wp-includes/customize/class-wp-customize-nav-menus-panel.php</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizenavmenusjs">trunk/tests/qunit/wp-admin/js/customize-nav-menus.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizenavmenulocationscontrolphp">trunk/src/wp-includes/customize/class-wp-customize-nav-menu-locations-control.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css     2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-admin/css/customize-controls.css       2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -557,11 +557,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">        border-bottom-color: #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-theme-controls .control-panel-content .control-section:nth-child(2),
-#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
+#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
+#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
</ins><span class="cx" style="display: block; padding: 0 10px">         border-top: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
+       border-top: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls > ul {
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -661,7 +666,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        position: static;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-section-description-container {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-section-description-container,
+.control-section-nav_menu .customize-section-description-container {
</ins><span class="cx" style="display: block; padding: 0 10px">         margin-bottom: 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizenavmenuscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-nav-menus.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-nav-menus.css    2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-admin/css/customize-nav-menus.css      2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,12 +1,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls #accordion-section-menu_locations {
</span><span class="cx" style="display: block; padding: 0 10px">        position: relative;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        margin-bottom: 15px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 15px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
</span><span class="cx" style="display: block; padding: 0 10px">        border-bottom-color: #ddd;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        margin-top: 15px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .customize-section-title-nav_menus-heading,
+#customize-theme-controls .customize-section-title-menu_locations-heading,
+#customize-theme-controls .customize-section-title-menu_locations-description {
+       padding: 0 12px 0 12px;
+}
+
+#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
+       /* Override the default italic style for control descriptions */
+       font-style: normal;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .menu-in-location,
</span><span class="cx" style="display: block; padding: 0 10px"> .menu-in-locations {
</span><span class="cx" style="display: block; padding: 0 10px">        display: block;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -27,6 +39,23 @@
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 28px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-control-nav_menu_name {
+       margin-bottom: 12px;
+}
+
+.customize-control-nav_menu_name p:last-of-type {
+       margin-bottom: 0;
+}
+
+#customize-new-menu-submit {
+       float: right;
+       min-width: 85px;
+}
+
+#customize-new-menu-submit-description {
+       margin: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .menu-item-bar .menu-item-handle,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .menu-item-settings,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .menu-item-settings .description-thin {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -175,12 +204,25 @@
</span><span class="cx" style="display: block; padding: 0 10px">        border-top: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.menu-settings .customize-control-checkbox label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-customizer .menu-location-settings {
+       margin-top: 12px;
+       border-top: none;
+}
+
+.wp-customizer .control-section-nav_menu .menu-location-settings {
+       margin-top: 24px;
+       border-top: 1px solid #ddd;
+       padding-top: 12px;
+}
+
+.menu-settings .customize-control-checkbox label,
+.menu-location-settings .customize-control-checkbox label {
</ins><span class="cx" style="display: block; padding: 0 10px">         line-height: 1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* @todo update selector or potentially remove */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.menu-settings .customize-control.customize-control-checkbox {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.menu-settings .customize-control.customize-control-checkbox,
+.menu-location-settings .customize-control.customize-control-checkbox {
</ins><span class="cx" style="display: block; padding: 0 10px">         margin-bottom: 8px; /* Override collapsing at smaller viewports. */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -738,29 +780,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* @todo update selector */
</span><span class="cx" style="display: block; padding: 0 10px"> #accordion-section-add_menu {
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 15px 12px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        overflow: hidden;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-align: right;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.new-menu-section-content {
-       display: none;
-       padding: 15px 0 0 0;
-       clear: both;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#accordion-section-add_menu h3,
+#accordion-section-add_menu .customize-add-menu-button {
+       margin: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* @todo update selector */
-#accordion-section-add_menu .accordion-section-title {
-       padding-left: 45px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#accordion-section-add_menu .customize-add-menu-button {
+       font-weight: normal;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* @todo update selector */
-#accordion-section-add_menu .accordion-section-title:before {
-       font: normal 20px/1 dashicons;
-       position: absolute;
-       top: 12px;
-       left: 14px;
-       content: "\f132";
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> #create-new-menu-submit {
</span><span class="cx" style="display: block; padding: 0 10px">        float: right;
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 0 0 12px 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -772,6 +803,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">        width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.assigned-menu-locations-title p {
+       margin: 0 0 8px 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> li.assigned-to-menu-location .menu-delete-item {
</span><span class="cx" style="display: block; padding: 0 10px">        display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -808,7 +843,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">        margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-control-nav_menu {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-nav_menu .new-menu-item-invitation {
+       margin-top: 0;
+       margin-bottom: 0;
+}
+
+.customize-control-nav_menu .customize-control-nav_menu-buttons {
</ins><span class="cx" style="display: block; padding: 0 10px">         margin-top: 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js       2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-admin/js/customize-controls.js 2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1234,9 +1234,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {object}         [options.params] - Deprecated wrapper for the above properties.
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                initialize: function ( id, options ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this;
-                       Container.prototype.initialize.call( section, id, options );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var section = this, params;
+                       params = options.params || options;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        // Look up the type if one was not supplied.
+                       if ( ! params.type ) {
+                               _.find( api.sectionConstructor, function( Constructor, type ) {
+                                       if ( Constructor === section.constructor ) {
+                                               params.type = type;
+                                               return true;
+                                       }
+                                       return false;
+                               } );
+                       }
+
+                       Container.prototype.initialize.call( section, id, params );
+
</ins><span class="cx" style="display: block; padding: 0 10px">                         section.id = id;
</span><span class="cx" style="display: block; padding: 0 10px">                        section.panel = new api.Value();
</span><span class="cx" style="display: block; padding: 0 10px">                        section.panel.bind( function ( id ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2507,8 +2520,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {object}         [options.params] - Deprecated wrapper for the above properties.
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                initialize: function ( id, options ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var panel = this;
-                       Container.prototype.initialize.call( panel, id, options );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var panel = this, params;
+                       params = options.params || options;
+
+                       // Look up the type if one was not supplied.
+                       if ( ! params.type ) {
+                               _.find( api.panelConstructor, function( Constructor, type ) {
+                                       if ( Constructor === panel.constructor ) {
+                                               params.type = type;
+                                               return true;
+                                       }
+                                       return false;
+                               } );
+                       }
+
+                       Container.prototype.initialize.call( panel, id, params );
+
</ins><span class="cx" style="display: block; padding: 0 10px">                         panel.embed();
</span><span class="cx" style="display: block; padding: 0 10px">                        panel.deferred.embedded.done( function () {
</span><span class="cx" style="display: block; padding: 0 10px">                                panel.ready();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3095,7 +3122,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @param {string} [options.active=true]    - Whether the control is active.
</span><span class="cx" style="display: block; padding: 0 10px">         * @param {string} options.section          - The ID of the section the control belongs to.
</span><span class="cx" style="display: block; padding: 0 10px">         * @param {mixed}  [options.setting]        - The ID of the main setting or an instance of this setting.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @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.    
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @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.
</ins><span class="cx" style="display: block; padding: 0 10px">          * @param {mixed}  options.settings.default - The ID of the setting the control relates to.
</span><span class="cx" style="display: block; padding: 0 10px">         * @param {string} options.settings.data    - @todo Is this used?
</span><span class="cx" style="display: block; padding: 0 10px">         * @param {string} options.label            - Label.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3107,6 +3134,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                defaults: {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        label: '',
+                       description: '',
</ins><span class="cx" style="display: block; padding: 0 10px">                         active: true,
</span><span class="cx" style="display: block; padding: 0 10px">                        priority: 10
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizenavmenusjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-nav-menus.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-nav-menus.js      2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-admin/js/customize-nav-menus.js        2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -811,6 +811,18 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        panel.container.find( '.hide-column-tog' ).click( function() {
</span><span class="cx" style="display: block; padding: 0 10px">                                panel.saveManageColumnsState();
</span><span class="cx" style="display: block; padding: 0 10px">                        });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       // Wait until after construction to patch the UI
+                       _.defer( function () {
+
+                               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' )
+                               );
+                       } );
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -961,7 +973,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                populateControls: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this, menuNameControlId, menuAutoAddControlId, menuControl, menuNameControl, menuAutoAddControl;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var section = this,
+                               menuNameControlId,
+                               menuLocationsControlId,
+                               menuAutoAddControlId,
+                               menuDeleteControlId,
+                               menuControl,
+                               menuNameControl,
+                               menuLocationsControl,
+                               menuAutoAddControl,
+                               menuDeleteControl;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        // Add the control for managing the menu name.
</span><span class="cx" style="display: block; padding: 0 10px">                        menuNameControlId = section.id + '[name]';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -996,6 +1017,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                menuControl.active.set( true );
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        // Add the menu locations control.
+                       menuLocationsControlId = section.id + '[locations]';
+                       menuLocationsControl = api.control( menuLocationsControlId );
+                       if ( ! menuLocationsControl ) {
+                               menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
+                                       section: section.id,
+                                       priority: 999,
+                                       settings: {
+                                               'default': section.id
+                                       },
+                                       menu_id: section.params.menu_id
+                               } );
+                               api.control.add( menuLocationsControl.id, menuLocationsControl );
+                               menuControl.active.set( true );
+                       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                         // Add the control for managing the menu auto_add.
</span><span class="cx" style="display: block; padding: 0 10px">                        menuAutoAddControlId = section.id + '[auto_add]';
</span><span class="cx" style="display: block; padding: 0 10px">                        menuAutoAddControl = api.control( menuAutoAddControlId );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1004,7 +1041,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        type: 'nav_menu_auto_add',
</span><span class="cx" style="display: block; padding: 0 10px">                                        label: '',
</span><span class="cx" style="display: block; padding: 0 10px">                                        section: section.id,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        priority: 999,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 priority: 1000,
</ins><span class="cx" style="display: block; padding: 0 10px">                                         settings: {
</span><span class="cx" style="display: block; padding: 0 10px">                                                'default': section.id
</span><span class="cx" style="display: block; padding: 0 10px">                                        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1013,6 +1050,25 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                menuAutoAddControl.active.set( true );
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        // Add the control for deleting the menu
+                       menuDeleteControlId = section.id + '[delete]';
+                       menuDeleteControl = api.control( menuDeleteControlId );
+                       if ( ! menuDeleteControl ) {
+                               menuDeleteControl = new api.Control( menuDeleteControlId, {
+                                       section: section.id,
+                                       priority: 1001,
+                                       templateId: 'nav-menu-delete-button'
+                               } );
+                               api.control.add( menuDeleteControl.id, menuDeleteControl );
+                               menuDeleteControl.active.set( true );
+                               menuDeleteControl.deferred.embedded.done( function () {
+                                       menuDeleteControl.container.find( 'button' ).on( 'click', function() {
+                                               var menuId = section.params.menu_id;
+                                               var menuControl = api.Menus.getMenuControl( menuId );
+                                               menuControl.setting.set( false );
+                                       });
+                               } );
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1093,7 +1149,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * wp.customize.Menus.NewMenuSection
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><span class="cx" style="display: block; padding: 0 10px">         * Customizer section for new menus.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * Note that 'new_menu' must match the WP_Customize_New_Menu_Section::$type.
</del><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @constructor
</span><span class="cx" style="display: block; padding: 0 10px">         * @augments wp.customize.Section
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1106,51 +1161,164 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.3.0
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                attachEvents: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this;
-                       this.container.on( 'click', '.add-menu-toggle', function() {
-                               if ( section.expanded() ) {
-                                       section.collapse();
-                               } else {
-                                       section.expand();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var section = this,
+                               container = section.container,
+                               contentContainer = section.contentContainer;
+
+                       /*
+                        * We have to manually handle section expanded because we do not
+                        * apply the `accordion-section-title` class to this button-driven section.
+                        */
+                       container.on( 'click', '.customize-add-menu-button', function() {
+                               section.expand();
+                       });
+
+                       contentContainer.on( 'keydown', '.menu-name-field', function( event ) {
+                               if ( 13 === event.which ) { // Enter.
+                                       section.submit();
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 } );
+                       contentContainer.on( 'click', '#customize-new-menu-submit', function( event ) {
+                               section.submit();
+                               event.stopPropagation();
+                               event.preventDefault();
+                       } );
+
+                       api.Section.prototype.attachEvents.apply( this, arguments );
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * Update UI to reflect expanded state.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * Set up the control.
</ins><span class="cx" style="display: block; padding: 0 10px">                  *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * @since 4.1.0
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * @since 4.9.0
+                */
+               ready: function() {
+                       this.populateControls();
+               },
+
+               /**
+                * Create the controls for this section.
</ins><span class="cx" style="display: block; padding: 0 10px">                  *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * @param {Boolean} expanded
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * @since 4.9.0
</ins><span class="cx" style="display: block; padding: 0 10px">                  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                onChangeExpanded: function( expanded ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         populateControls: function() {
</ins><span class="cx" style="display: block; padding: 0 10px">                         var section = this,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                button = section.container.find( '.add-menu-toggle' ),
-                               content = section.contentContainer,
-                               customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
-                       if ( expanded ) {
-                               button.addClass( 'open' );
-                               button.attr( 'aria-expanded', 'true' );
-                               content.slideDown( 'fast', function() {
-                                       customizer.scrollTop( customizer.height() );
-                               });
-                       } else {
-                               button.removeClass( 'open' );
-                               button.attr( 'aria-expanded', 'false' );
-                               content.slideUp( 'fast' );
-                               content.find( '.menu-name-field' ).removeClass( 'invalid' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         menuNameControlId,
+                               menuLocationsControlId,
+                               newMenuSubmitControlId,
+                               menuNameControl,
+                               menuLocationsControl,
+                               newMenuSubmitControl;
+
+                       menuNameControlId = section.id + '[name]';
+                       menuNameControl = api.control( menuNameControlId );
+                       if ( ! menuNameControl ) {
+                               menuNameControl = new api.controlConstructor.nav_menu_name( menuNameControlId, {
+                                       label: api.Menus.data.l10n.menuNameLabel,
+                                       description: api.Menus.data.l10n.newMenuNameDescription,
+                                       section: section.id,
+                                       priority: 0
+                               } );
+                               api.control.add( menuNameControl.id, menuNameControl );
+                               menuNameControl.active.set( true );
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       menuLocationsControlId = section.id + '[locations]';
+                       menuLocationsControl = api.control( menuLocationsControlId );
+                       if ( ! menuLocationsControl ) {
+                               menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
+                                       section: section.id,
+                                       priority: 1,
+                                       menu_id: ''
+                               } );
+                               api.control.add( menuLocationsControlId, menuLocationsControl );
+                               menuLocationsControl.active.set( true );
+                       }
+
+                       newMenuSubmitControlId = section.id + '[submit]';
+                       newMenuSubmitControl = api.control( newMenuSubmitControlId );
+                       if ( !newMenuSubmitControl ) {
+                               newMenuSubmitControl = new api.Control( newMenuSubmitControlId, {
+                                       section: section.id,
+                                       priority: 1,
+                                       templateId: 'nav-menu-submit-new-button'
+                               } );
+                               api.control.add( newMenuSubmitControlId, newMenuSubmitControl );
+                               newMenuSubmitControl.active.set( true );
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * Find the content element.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * Create the new menu with name and location supplied by the user.
</ins><span class="cx" style="display: block; padding: 0 10px">                  *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * @since 4.7.0
-                *
-                * @returns {jQuery} Content UL element.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * @since 4.9.0
</ins><span class="cx" style="display: block; padding: 0 10px">                  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                getContent: function() {
-                       return this.container.find( 'ul:first' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         submit: function() {
+                       var section = this,
+                               contentContainer = section.contentContainer,
+                               nameInput = contentContainer.find( '.menu-name-field' ).first(),
+                               name = nameInput.val(),
+                               menuSection,
+                               customizeId,
+                               placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
+
+                       if ( ! name ) {
+                               nameInput.addClass( 'invalid' );
+                               nameInput.focus();
+                               return;
+                       }
+
+                       customizeId = 'nav_menu[' + String( placeholderId ) + ']';
+
+                       // Register the menu control setting.
+                       api.create( customizeId, customizeId, {}, {
+                               type: 'nav_menu',
+                               transport: api.Menus.data.settingTransport,
+                               previewer: api.previewer
+                       } );
+                       api( customizeId ).set( $.extend(
+                               {},
+                               api.Menus.data.defaultSettingValues.nav_menu,
+                               {
+                                       name: name
+                               }
+                       ) );
+
+                       /*
+                        * Add the menu section (and its controls).
+                        * Note that this will automatically create the required controls
+                        * inside via the Section's ready method.
+                        */
+                       menuSection = new api.Menus.MenuSection( customizeId, {
+                               panel: 'nav_menus',
+                               title: displayNavMenuName( name ),
+                               customizeAction: api.Menus.data.l10n.customizingMenus,
+                               priority: 10,
+                               menu_id: placeholderId
+                       } );
+                       api.section.add( customizeId, menuSection );
+
+                       // Clear name field.
+                       nameInput.val( '' );
+                       nameInput.removeClass( 'invalid' );
+
+                       contentContainer.find( '.assigned-menu-location input[type=checkbox]' ).each( function() {
+                               var checkbox = $( this ),
+                               navMenuLocationSetting;
+
+                               if ( checkbox.prop( 'checked' ) ) {
+                                       navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
+                                       navMenuLocationSetting.set( placeholderId );
+
+                                       // Reset state for next new menu
+                                       checkbox.prop( 'checked', false );
+                               }
+                       } );
+
+                       wp.a11y.speak( api.Menus.data.l10n.menuAdded );
+
+                       // Focus on the new menu section.
+                       api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px">        });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1512,6 +1680,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        wp.a11y.speak( api.Menus.data.l10n.itemDeleted );
</span><span class="cx" style="display: block; padding: 0 10px">                                        $adjacentFocusTarget.focus(); // keyboard accessibility
</span><span class="cx" style="display: block; padding: 0 10px">                                } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                               control.setting.set( false );
</ins><span class="cx" style="display: block; padding: 0 10px">                         } );
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2034,45 +2204,88 @@
</span><span class="cx" style="display: block; padding: 0 10px">        api.Menus.MenuNameControl = api.Control.extend({
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                ready: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var control = this,
-                               settingValue = control.setting();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var control = this;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        /*
-                        * Since the control is not registered in PHP, we need to prevent the
-                        * preview's sending of the activeControls to result in this control
-                        * being deactivated.
-                        */
-                       control.active.validate = function() {
-                               var value, section = api.section( control.section() );
-                               if ( section ) {
-                                       value = section.active();
-                               } else {
-                                       value = false;
-                               }
-                               return value;
-                       };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( control.setting ) {
+                               var settingValue = control.setting();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        control.nameElement.bind(function( value ) {
-                               var settingValue = control.setting();
-                               if ( settingValue && settingValue.name !== value ) {
-                                       settingValue = _.clone( settingValue );
-                                       settingValue.name = value;
-                                       control.setting.set( settingValue );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         control.nameElement.bind(function( value ) {
+                                       var settingValue = control.setting();
+                                       if ( settingValue && settingValue.name !== value ) {
+                                               settingValue = _.clone( settingValue );
+                                               settingValue.name = value;
+                                               control.setting.set( settingValue );
+                                       }
+                               });
+                               if ( settingValue ) {
+                                       control.nameElement.set( settingValue.name );
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        });
-                       if ( settingValue ) {
-                               control.nameElement.set( settingValue.name );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                               control.setting.bind(function( object ) {
+                                       if ( object ) {
+                                               control.nameElement.set( object.name );
+                                       }
+                               });
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                }
+       });
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        control.setting.bind(function( object ) {
-                               if ( object ) {
-                                       control.nameElement.set( object.name );
-                               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+        * wp.customize.Menus.MenuLocationsControl
+        *
+        * Customizer control for a nav menu's locations.
+        *
+        * @since 4.9.0
+        * @constructor
+        * @augments wp.customize.Control
+        */
+       api.Menus.MenuLocationsControl = api.Control.extend({
+
+               /**
+                * Set up the control.
+                *
+                * @since 4.9.0
+                */
+               ready: function () {
+                       var control = this;
+
+                       control.container.find( '.assigned-menu-location' ).each(function() {
+                               var container = $( this ),
+                                       checkbox = container.find( 'input[type=checkbox]' ),
+                                       element = new api.Element( checkbox ),
+                                       navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' ),
+                                       isNewMenu = control.params.menu_id === '',
+                                       updateCheckbox = isNewMenu ? _.noop : function( checked ) {
+                                               element.set( checked );
+                                       },
+                                       updateSetting = isNewMenu ? _.noop : function( checked ) {
+                                               navMenuLocationSetting.set( checked ? control.params.menu_id : 0 );
+                                       },
+                                       updateSelectedMenuLabel = function( selectedMenuId ) {
+                                               var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
+                                               if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
+                                                       container.find( '.theme-location-set' ).hide();
+                                               } else {
+                                                       container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
+                                               }
+                                       };
+
+                               updateCheckbox( navMenuLocationSetting.get() === control.params.menu_id );
+
+                               checkbox.on( 'change', function() {
+                                       // Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
+                                       updateSetting( this.checked );
+                               } );
+
+                               navMenuLocationSetting.bind( function( selectedMenuId ) {
+                                       updateCheckbox( selectedMenuId === control.params.menu_id );
+                                       updateSelectedMenuLabel( selectedMenuId );
+                               } );
+                               updateSelectedMenuLabel( navMenuLocationSetting.get() );
</ins><span class="cx" style="display: block; padding: 0 10px">                         });
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px">         });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2180,7 +2393,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        } );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        this._setupAddition();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        this._setupLocations();
</del><span class="cx" style="display: block; padding: 0 10px">                         this._setupTitle();
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        // Add menu to Custom Menu widgets.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2210,6 +2422,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        select.append( new Option( name, menuId ) );
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       /*
+                        * Wait for menu items to be added.
+                        * Ideally, we'd bind to an event indicating construction is complete,
+                        * but deferring appears to be the best option today.
+                        */
+                       _.defer( function () {
+                               control.updateInvitationVisibility();
+                       } );
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2235,11 +2456,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        });
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><span class="cx" style="display: block; padding: 0 10px">                        } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                       control.container.find( '.menu-delete-item .button-link-delete' ).on( 'click', function( event ) {
-                               event.preventDefault();
-                               control.setting.set( false );
-                       });
</del><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2393,43 +2609,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        widgetTemplate.find( 'option[value=' + String( menuId ) + ']' ).remove();
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Setup theme location checkboxes.
-               _setupLocations: function() {
-                       var control = this;
-
-                       control.container.find( '.assigned-menu-location' ).each(function() {
-                               var container = $( this ),
-                                       checkbox = container.find( 'input[type=checkbox]' ),
-                                       element,
-                                       updateSelectedMenuLabel,
-                                       navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
-
-                               updateSelectedMenuLabel = function( selectedMenuId ) {
-                                       var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
-                                       if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
-                                               container.find( '.theme-location-set' ).hide();
-                                       } else {
-                                               container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
-                                       }
-                               };
-
-                               element = new api.Element( checkbox );
-                               element.set( navMenuLocationSetting.get() === control.params.menu_id );
-
-                               checkbox.on( 'change', function() {
-                                       // Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
-                                       navMenuLocationSetting.set( this.checked ? control.params.menu_id : 0 );
-                               } );
-
-                               navMenuLocationSetting.bind(function( selectedMenuId ) {
-                                       element.set( selectedMenuId === control.params.menu_id );
-                                       updateSelectedMenuLabel( selectedMenuId );
-                               });
-                               updateSelectedMenuLabel( navMenuLocationSetting.get() );
-
-                       });
-               },
-
</del><span class="cx" style="display: block; padding: 0 10px">                 /**
</span><span class="cx" style="display: block; padding: 0 10px">                 * Update Section Title as menu name is changed.
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2607,6 +2786,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                currentAbsolutePosition: 0
</span><span class="cx" style="display: block; padding: 0 10px">                        } );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        menuControl.updateInvitationVisibility( menuItemControls );
</ins><span class="cx" style="display: block; padding: 0 10px">                         menuControl.container.find( '.reorder-toggle' ).toggle( menuItemControls.length > 1 );
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2681,102 +2861,21 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        wp.a11y.speak( api.Menus.data.l10n.itemAdded );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        return menuItemControl;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                }
-       } );
-
-       /**
-        * wp.customize.Menus.NewMenuControl
-        *
-        * Customizer control for creating new menus and handling deletion of existing menus.
-        * Note that 'new_menu' must match the WP_Customize_New_Menu_Control::$type.
-        *
-        * @constructor
-        * @augments wp.customize.Control
-        */
-       api.Menus.NewMenuControl = api.Control.extend({
-               /**
-                * Set up the control.
-                */
-               ready: function() {
-                       this._bindHandlers();
</del><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                _bindHandlers: function() {
-                       var self = this,
-                               name = $( '#customize-control-new_menu_name input' ),
-                               submit = $( '#create-new-menu-submit' );
-                       name.on( 'keydown', function( event ) {
-                               if ( 13 === event.which ) { // Enter.
-                                       self.submit();
-                               }
-                       } );
-                       submit.on( 'click', function( event ) {
-                               self.submit();
-                               event.stopPropagation();
-                               event.preventDefault();
-                       } );
-               },
-
</del><span class="cx" style="display: block; padding: 0 10px">                 /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * Create the new menu with the name supplied.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * Show an invitation to add new menu items when there are no menu items.
+                *
+                * @since 4.9.0
+                *
+                * @param {wp.customize.controlConstructor.nav_menu_item[]} optionalMenuItemControls
</ins><span class="cx" style="display: block; padding: 0 10px">                  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                submit: function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         updateInvitationVisibility: function ( optionalMenuItemControls ) {
+                       var menuItemControls = optionalMenuItemControls || this.getMenuItemControls();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var control = this,
-                               container = control.container.closest( '.accordion-section-new-menu' ),
-                               nameInput = container.find( '.menu-name-field' ).first(),
-                               name = nameInput.val(),
-                               menuSection,
-                               customizeId,
-                               placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
-
-                       if ( ! name ) {
-                               nameInput.addClass( 'invalid' );
-                               nameInput.focus();
-                               return;
-                       }
-
-                       customizeId = 'nav_menu[' + String( placeholderId ) + ']';
-
-                       // Register the menu control setting.
-                       api.create( customizeId, customizeId, {}, {
-                               type: 'nav_menu',
-                               transport: api.Menus.data.settingTransport,
-                               previewer: api.previewer
-                       } );
-                       api( customizeId ).set( $.extend(
-                               {},
-                               api.Menus.data.defaultSettingValues.nav_menu,
-                               {
-                                       name: name
-                               }
-                       ) );
-
-                       /*
-                        * Add the menu section (and its controls).
-                        * Note that this will automatically create the required controls
-                        * inside via the Section's ready method.
-                        */
-                       menuSection = new api.Menus.MenuSection( customizeId, {
-                               panel: 'nav_menus',
-                               title: displayNavMenuName( name ),
-                               customizeAction: api.Menus.data.l10n.customizingMenus,
-                               type: 'nav_menu',
-                               priority: 10,
-                               menu_id: placeholderId
-                       } );
-                       api.section.add( menuSection );
-
-                       // Clear name field.
-                       nameInput.val( '' );
-                       nameInput.removeClass( 'invalid' );
-
-                       wp.a11y.speak( api.Menus.data.l10n.menuAdded );
-
-                       // Focus on the new menu section.
-                       api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 this.container.find( '.new-menu-item-invitation' ).toggle( menuItemControls.length === 0 );
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><span class="cx" style="display: block; padding: 0 10px">         * Extends wp.customize.controlConstructor with control constructor for
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2787,8 +2886,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                nav_menu_item: api.Menus.MenuItemControl,
</span><span class="cx" style="display: block; padding: 0 10px">                nav_menu: api.Menus.MenuControl,
</span><span class="cx" style="display: block; padding: 0 10px">                nav_menu_name: api.Menus.MenuNameControl,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                nav_menu_auto_add: api.Menus.MenuAutoAddControl,
-               new_menu: api.Menus.NewMenuControl
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         nav_menu_locations: api.Menus.MenuLocationsControl,
+               nav_menu_auto_add: api.Menus.MenuAutoAddControl
</ins><span class="cx" style="display: block; padding: 0 10px">         });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizecontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-control.php      2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/class-wp-customize-control.php        2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -770,14 +770,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-name-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * WP_Customize_Nav_Menu_Auto_Add_Control class.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * WP_Customize_Nav_Menu_Locations_Control class.
</ins><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-locations-control.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * WP_Customize_New_Menu_Control class.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * WP_Customize_Nav_Menu_Auto_Add_Control class.
</ins><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * WP_Customize_Date_Time_Control class.
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php      2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/class-wp-customize-manager.php        2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -315,8 +315,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-item-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-location-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-name-control.php' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-locations-control.php' );
</ins><span class="cx" style="display: block; padding: 0 10px">                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -324,7 +324,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-css-setting.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-filter-setting.php' );
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizenavmenusphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-nav-menus.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-nav-menus.php    2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/class-wp-customize-nav-menus.php      2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -395,39 +395,49 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $temp_nav_menu_setting      = new WP_Customize_Nav_Menu_Setting( $this->manager, 'nav_menu[-1]' );
</span><span class="cx" style="display: block; padding: 0 10px">                $temp_nav_menu_item_setting = new WP_Customize_Nav_Menu_Item_Setting( $this->manager, 'nav_menu_item[-1]' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                $num_locations = count( get_registered_nav_menus() );
+               if ( 1 === $num_locations ) {
+                       $locations_description = __( 'Your theme can display menus in one location.' );
+               } else {
+                       /* translators: %s: number of menu locations */
+                       $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 ) );
+               }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 // Pass data to JS.
</span><span class="cx" style="display: block; padding: 0 10px">                $settings = array(
</span><span class="cx" style="display: block; padding: 0 10px">                        'allMenus'             => wp_get_nav_menus(),
</span><span class="cx" style="display: block; padding: 0 10px">                        'itemTypes'            => $this->available_item_types(),
</span><span class="cx" style="display: block; padding: 0 10px">                        'l10n'                 => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                'untitled'          => _x( '(no label)', 'missing menu item navigation label' ),
-                               'unnamed'           => _x( '(unnamed)', 'Missing menu name.' ),
-                               'custom_label'      => __( 'Custom Link' ),
-                               'page_label'        => get_post_type_object( 'page' )->labels->singular_name,
-                               /* translators: %s: menu location */
-                               'menuLocation'      => _x( '(Currently set to: %s)', 'menu' ),
-                               'menuNameLabel'     => __( 'Menu Name' ),
-                               'itemAdded'         => __( 'Menu item added' ),
-                               'itemDeleted'       => __( 'Menu item deleted' ),
-                               'menuAdded'         => __( 'Menu created' ),
-                               'menuDeleted'       => __( 'Menu deleted' ),
-                               'movedUp'           => __( 'Menu item moved up' ),
-                               'movedDown'         => __( 'Menu item moved down' ),
-                               'movedLeft'         => __( 'Menu item moved out of submenu' ),
-                               'movedRight'        => __( 'Menu item is now a sub-item' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'untitled'               => _x( '(no label)', 'missing menu item navigation label' ),
+                               'unnamed'                => _x( '(unnamed)', 'Missing menu name.' ),
+                               'custom_label'           => __( 'Custom Link' ),
+                               'page_label'             => get_post_type_object( 'page' )->labels->singular_name,
+                               /* translators: %s:      menu location */
+                               'menuLocation'           => _x( '(Currently set to: %s)', 'menu' ),
+                               'locationsDescription'   => $locations_description,
+                               'menuNameLabel'          => __( 'Menu Name' ),
+                               'newMenuNameDescription' => __( 'If your theme has multiple menus, giving them clear names will help you manage them.' ),
+                               'itemAdded'              => __( 'Menu item added' ),
+                               'itemDeleted'            => __( 'Menu item deleted' ),
+                               'menuAdded'              => __( 'Menu created' ),
+                               'menuDeleted'            => __( 'Menu deleted' ),
+                               'movedUp'                => __( 'Menu item moved up' ),
+                               'movedDown'              => __( 'Menu item moved down' ),
+                               'movedLeft'              => __( 'Menu item moved out of submenu' ),
+                               'movedRight'             => __( 'Menu item is now a sub-item' ),
</ins><span class="cx" style="display: block; padding: 0 10px">                                 /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                'customizingMenus'  => sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'customizingMenus'       => sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
</ins><span class="cx" style="display: block; padding: 0 10px">                                 /* translators: %s: title of menu item which is invalid */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                'invalidTitleTpl'   => __( '%s (Invalid)' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'invalidTitleTpl'        => __( '%s (Invalid)' ),
</ins><span class="cx" style="display: block; padding: 0 10px">                                 /* translators: %s: title of menu item in draft status */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                'pendingTitleTpl'   => __( '%s (Pending)' ),
-                               'itemsFound'        => __( 'Number of items found: %d' ),
-                               'itemsFoundMore'    => __( 'Additional items found: %d' ),
-                               'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
-                               'reorderModeOn'     => __( 'Reorder mode enabled' ),
-                               'reorderModeOff'    => __( 'Reorder mode closed' ),
-                               'reorderLabelOn'    => esc_attr__( 'Reorder menu items' ),
-                               'reorderLabelOff'   => esc_attr__( 'Close reorder mode' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'pendingTitleTpl'        => __( '%s (Pending)' ),
+                               'itemsFound'             => __( 'Number of items found: %d' ),
+                               'itemsFoundMore'         => __( 'Additional items found: %d' ),
+                               'itemsLoadingMore'       => __( 'Loading more results... please wait.' ),
+                               'reorderModeOn'          => __( 'Reorder mode enabled' ),
+                               'reorderModeOff'         => __( 'Reorder mode closed' ),
+                               'reorderLabelOn'         => esc_attr__( 'Reorder menu items' ),
+                               'reorderLabelOff'        => esc_attr__( 'Close reorder mode' ),
</ins><span class="cx" style="display: block; padding: 0 10px">                         ),
</span><span class="cx" style="display: block; padding: 0 10px">                        'settingTransport'     => 'postMessage',
</span><span class="cx" style="display: block; padding: 0 10px">                        'phpIntMax'            => PHP_INT_MAX,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -537,6 +547,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $this->manager->register_panel_type( 'WP_Customize_Nav_Menus_Panel' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Name_Control' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Locations_Control' );
</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Auto_Add_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Item_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -558,23 +569,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Menu locations.
</span><span class="cx" style="display: block; padding: 0 10px">                $locations     = get_registered_nav_menus();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $num_locations = count( array_keys( $locations ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $num_locations = count( $locations );
</ins><span class="cx" style="display: block; padding: 0 10px">                 if ( 1 == $num_locations ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $description = '<p>' . __( 'Your theme supports one menu. Select which menu you would like to use.' ) . '</p>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $description = '<p>' . __( 'Your theme can display menus in one location. Select which menu you would like to use.' ) . '</p>';
</ins><span class="cx" style="display: block; padding: 0 10px">                 } else {
</span><span class="cx" style="display: block; padding: 0 10px">                        /* translators: %s: number of menu locations */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $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>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $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>';
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px">                 if ( current_theme_supports( 'widgets' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        /* translators: URL to the widgets panel of the customizer */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $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>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $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>';
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                $this->manager->add_section( 'menu_locations', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'title'       => __( 'Menu Locations' ),
-                       'panel'       => 'nav_menus',
-                       'priority'    => 5,
-                       'description' => $description,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'title'         => __( 'View All Locations' ),
+                       'panel'         => 'nav_menus',
+                       'priority'      => 30,
+                       'description'   => $description
</ins><span class="cx" style="display: block; padding: 0 10px">                 ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                $choices = array( '0' => __( '&mdash; Select &mdash;' ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -667,27 +679,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Add the add-new-menu section and controls.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $this->manager->add_section( new WP_Customize_New_Menu_Section( $this->manager, 'add_menu', array(
-                       'title'    => __( 'Add a Menu' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $this->manager->add_section( 'add_menu', array(
+                       'type'     => 'new_menu',
+                       'title'    => __( 'New Menu' ),
</ins><span class="cx" style="display: block; padding: 0 10px">                         'panel'    => 'nav_menus',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'priority' => 999,
-               ) ) );
-
-               $this->manager->add_control( 'new_menu_name', array(
-                       'label'       => __( 'New menu name' ),
-                       'section'     => 'add_menu',
-                       'type'        => 'text',
-                       'settings'    => array(),
-                       'input_attrs' => array(
-                               'class'       => 'menu-name-field',
-                       ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'priority' => 20,
</ins><span class="cx" style="display: block; padding: 0 10px">                 ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $this->manager->add_control( new WP_Customize_New_Menu_Control( $this->manager, 'create_new_menu', array(
-                       'section'  => 'add_menu',
-                       'settings' => array(),
-               ) ) );
-
</del><span class="cx" style="display: block; padding: 0 10px">                 $this->manager->add_setting( new WP_Customize_Filter_Setting( $this->manager, 'nav_menus_created_posts', array(
</span><span class="cx" style="display: block; padding: 0 10px">                        'transport' => 'postMessage',
</span><span class="cx" style="display: block; padding: 0 10px">                        'type' => 'option', // To prevent theme prefix in changeset.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -925,6 +923,32 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                ?>
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="cx" style="display: block; padding: 0 10px">                </script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+               <script type="text/html" id="tmpl-nav-menu-delete-button">
+                       <div class="menu-delete-item">
+                               <button type="button" class="button-link button-link-delete">
+                                       <?php _e( 'Delete Menu' ); ?>
+                               </button>
+                       </div>
+               </script>
+
+               <script type="text/html" id="tmpl-nav-menu-submit-new-button">
+                       <p id="customize-new-menu-submit-description"><?php _e( 'Click "next" to start adding links to your new menu.' ); ?></p>
+                       <button id="customize-new-menu-submit" type="button" class="button" aria-describedby="customize-new-menu-submit-description"><?php _e( 'Next' ); ?></button>
+               </script>
+
+               <script type="text/html" id="tmpl-nav-menu-locations-header">
+                       <span class="customize-control-title customize-section-title-menu_locations-heading"><?php _e( 'Menu Locations' ); ?></span>
+                       <p class="customize-control-description customize-section-title-menu_locations-description">{{ data.l10n.locationsDescription }}</p>
+               </script>
+
+               <script type="text/html" id="tmpl-nav-menu-create-menu-section-title">
+                       <h3>
+                               <button type="button" class="button customize-add-menu-button">
+                                       <?php _e( 'Create New Menu' ); ?>
+                               </button>
+                       </h3>
+               </script>
</ins><span class="cx" style="display: block; padding: 0 10px">         <?php
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizesectionphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-section.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-section.php      2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/class-wp-customize-section.php        2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -385,6 +385,3 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /** WP_Customize_Nav_Menu_Section class */
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-/** WP_Customize_New_Menu_Section class */
-require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
</del></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizenavmenuautoaddcontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-nav-menu-auto-add-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-nav-menu-auto-add-control.php  2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/customize/class-wp-customize-nav-menu-auto-add-control.php    2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -38,11 +38,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        protected function content_template() {
</span><span class="cx" style="display: block; padding: 0 10px">                ?>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                <# var elementId = _.uniqueId( 'customize-nav-menu-auto-add-control-' ); #>
</ins><span class="cx" style="display: block; padding: 0 10px">                 <span class="customize-control-title"><?php _e( 'Menu Options' ); ?></span>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <label>
-                       <input type="checkbox" class="auto_add" />
-                       <?php _e( 'Automatically add new top-level pages to this menu' ); ?>
-               </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <span class="customize-inside-control-row">
+                       <input id="{{ elementId }}" type="checkbox" class="auto_add" />
+                       <label for="{{ elementId }}">
+                               <?php _e( 'Automatically add new top-level pages to this menu' ); ?>
+                       </label>
+               </span>
</ins><span class="cx" style="display: block; padding: 0 10px">                 <?php
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizenavmenucontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php   2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php     2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -23,14 +23,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        public $type = 'nav_menu';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * The nav menu setting.
-        *
-        * @since 4.3.0
-        * @var WP_Customize_Nav_Menu_Setting
-        */
-       public $setting;
-
-       /**
</del><span class="cx" style="display: block; padding: 0 10px">          * Don't render the control's content - it uses a JS template instead.
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 4.3.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -44,45 +36,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        public function content_template() {
</span><span class="cx" style="display: block; padding: 0 10px">                ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <# var elementId; #>
-               <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">
-                       <?php _e( 'Add Items' ); ?>
-               </button>
-               <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 }}">
-                       <span class="reorder"><?php _e( 'Reorder' ); ?></span>
-                       <span class="reorder-done"><?php _e( 'Done' ); ?></span>
-               </button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <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>
+               <div class="customize-control-nav_menu-buttons">
+                       <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">
+                               <?php _e( 'Add Items' ); ?>
+                       </button>
+                       <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 }}">
+                               <span class="reorder"><?php _e( 'Reorder' ); ?></span>
+                               <span class="reorder-done"><?php _e( 'Done' ); ?></span>
+                       </button>
+               </div>
</ins><span class="cx" style="display: block; padding: 0 10px">                 <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>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <span class="menu-delete-item">
-                       <button type="button" class="button-link button-link-delete">
-                               <?php _e( 'Delete Menu' ); ?>
-                       </button>
-               </span>
-               <?php if ( current_theme_supports( 'menus' ) ) : ?>
-               <ul class="menu-settings">
-                       <li class="customize-control">
-                               <span class="customize-control-title"><?php _e( 'Display Location' ); ?></span>
-                       </li>
-
-                       <?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
-                               <# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
-                               <li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
-                                       <input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
-                                       <label for="{{ elementId }}">
-                                               <?php echo $description; ?>
-                                               <span class="theme-location-set">
-                                                       <?php
-                                                       /* translators: %s: menu name */
-                                                       printf( _x( '(Current: %s)', 'menu location' ),
-                                                               '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
-                                                       );
-                                                       ?>
-                                               </span>
-                                       </label>
-                               </li>
-                       <?php endforeach; ?>
-               </ul>
-               <?php endif; ?>
</del><span class="cx" style="display: block; padding: 0 10px">                 <?php
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizenavmenulocationscontrolphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/customize/class-wp-customize-nav-menu-locations-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-nav-menu-locations-control.php                         (rev 0)
+++ trunk/src/wp-includes/customize/class-wp-customize-nav-menu-locations-control.php   2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,70 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Customize API: WP_Customize_Nav_Menu_Locations_Control class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.9.0
+ */
+
+/**
+ * Customize Nav Menu Locations Control Class.
+ *
+ * @since 4.9.0
+ */
+class WP_Customize_Nav_Menu_Locations_Control extends WP_Customize_Control {
+
+       /**
+        * Control type.
+        *
+        * @since 4.9.0
+        * @var string
+        */
+       public $type = 'nav_menu_locations';
+
+       /**
+        * Don't render the control's content - it uses a JS template instead.
+        *
+        * @since 4.9.0
+        */
+       public function render_content() {}
+
+       /**
+        * JS/Underscore template for the control UI.
+        *
+        * @since 4.9.0
+        */
+       public function content_template() {
+               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>
+                               </li>
+
+                               <?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
+                                       <# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
+                                       <li class="customize-control customize-control-checkbox assigned-menu-location">
+                                               <span class="customize-inside-control-row">
+                                                       <input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
+                                                       <label for="{{ elementId }}">
+                                                               <?php echo $description; ?>
+                                                               <span class="theme-location-set">
+                                                                       <?php
+                                                                       /* translators: %s: menu name */
+                                                                       printf( _x( '(Current: %s)', 'menu location' ),
+                                                                               '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
+                                                                       );
+                                                                       ?>
+                                                               </span>
+                                                       </label>
+                                               </span>
+                                       </li>
+                               <?php endforeach; ?>
+                       </ul>
+                       <?php
+               endif;
+       }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizenavmenunamecontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-nav-menu-name-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-nav-menu-name-control.php      2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/customize/class-wp-customize-nav-menu-name-control.php        2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -40,10 +40,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">                ?>
</span><span class="cx" style="display: block; padding: 0 10px">                <label>
</span><span class="cx" style="display: block; padding: 0 10px">                        <# if ( data.label ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                <span class="customize-control-title screen-reader-text">{{ data.label }}</span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <span class="customize-control-title">{{ data.label }}</span>
</ins><span class="cx" style="display: block; padding: 0 10px">                         <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <input type="text" class="menu-name-field live-update-section-title" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <input type="text" class="menu-name-field live-update-section-title"
+                               <# if ( data.description ) { #>
+                                       aria-describedby="{{ data.section }}-description"
+                               <# } #>
+                               />
</ins><span class="cx" style="display: block; padding: 0 10px">                 </label>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                <# if ( data.description ) { #>
+                       <p id="{{ data.section }}-description">{{ data.description }}</p>
+               <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px">                 <?php
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizenavmenuspanelphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-nav-menus-panel.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-nav-menus-panel.php    2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/src/wp-includes/customize/class-wp-customize-nav-menus-panel.php      2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -92,6 +92,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                <?php $this->render_screen_options(); ?>
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="cx" style="display: block; padding: 0 10px">                </li>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                <?php
+               // NOTE: The following is a workaround for an inability to treat (and thus label) a list of sections as a whole.
+               ?>
+               <li class="customize-control-title customize-section-title-nav_menus-heading"><?php _e( 'Menus' ); ?></li>
</ins><span class="cx" style="display: block; padding: 0 10px">         <?php
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizenavmenusjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/wp-admin/js/customize-nav-menus.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-nav-menus.js      2017-10-05 01:56:48 UTC (rev 41767)
+++ trunk/tests/qunit/wp-admin/js/customize-nav-menus.js        2017-10-05 02:21:22 UTC (rev 41768)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,7 +65,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                controls = section.controls();
</span><span class="cx" style="display: block; padding: 0 10px">                ok( controls[0].extended( api.Menus.MenuNameControl ), 'first control in menu section is MenuNameControl' );
</span><span class="cx" style="display: block; padding: 0 10px">                ok( controls[1].extended( api.Menus.MenuItemControl ), 'second control in menu section is MenuItemControl' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                ok( controls[ controls.length - 1 ].extended( api.Menus.MenuAutoAddControl ), 'last control in menu section is a MenuAutoAddControl' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         ok( controls[ controls.length - 1 ].extended( api.Menus.MenuDeleteControl ), 'last control in menu section is a MenuDeleteControl' );
</ins><span class="cx" style="display: block; padding: 0 10px">         } );
</span><span class="cx" style="display: block; padding: 0 10px">        // @todo Add more tests for api.Menus.MenuSection behaviors
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre>
</div>
</div>

</body>
</html>