Customize: Collapse available nav menu items panel when clicking outside over preview or over existing items.

Props rockwell15.
Fixes #38953.

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


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

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

@@ -719,6 +719,10 @@ body.adding-menu-items #customize-preview {
 	opacity: 0.4;
 }
 
+body.adding-menu-items #customize-preview iframe {
+	pointer-events: none;
+}
+
 .menu-item-handle .spinner {
 	display: none;
 	float: right;

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

@@ -719,6 +719,10 @@ body.adding-menu-items #customize-preview {
 	opacity: 0.4;
 }
 
+body.adding-menu-items #customize-preview iframe {
+	pointer-events: none;
+}
+
 .menu-item-handle .spinner {
 	display: none;
 	float: left;

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

@@ -665,12 +665,20 @@
 
 		// Opens the panel.
 		open: function( menuControl ) {
+			var panel = this, close;
+
 			this.currentMenuControl = menuControl;
 
 			this.itemSectionHeight();
 
 			$( 'body' ).addClass( 'adding-menu-items' );
 
+			close = function() {
+				panel.close();
+				$( this ).off( 'click', close );
+			};
+			$( '#customize-preview' ).on( 'click', close );
+
 			// Collapse all controls.
 			_( this.currentMenuControl.getMenuItemControls() ).each( function( control ) {
 				control.collapseForm();
@@ -1319,6 +1327,7 @@
 			this.container.find( '.menu-item-handle' ).on( 'click', function( e ) {
 				e.preventDefault();
 				e.stopPropagation();
+				api.Menus.availableMenuItemsPanel.close();
 				var menuControl = control.getMenuControl();
 				if ( menuControl.isReordering || menuControl.isSorting ) {
 					return;

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-alpha-39547';
+$wp_version = '4.8-alpha-39548';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.