Customizer: Make the available widgets overlay closable on narrow screens.

see #28784.
Built from https://develop.svn.wordpress.org/trunk@31974


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

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

@@ -41,6 +41,10 @@ body {
 	border-bottom: 1px solid #ddd;
 }
 
+#customize-header-actions .secondary-actions {
+	display: none;
+}
+
 #customize-controls .wp-full-overlay-sidebar-content {
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -193,6 +197,7 @@ body {
 	width: 100%;
 }
 
+.customize-close-overlay,
 .customize-controls-close {
 	display: block;
 	position: absolute;
@@ -202,6 +207,7 @@ body {
 	height: 45px;
 	padding-left: 2px;
 	background: #eee;
+	border: none;
 	border-left: 1px solid #ddd;
 	color: #444;
 	cursor: pointer;
@@ -209,6 +215,11 @@ body {
 	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
+.customize-close-overlay {
+	right: auto;
+	left: 0;
+}
+
 .control-panel-back {
 	display: block;
 	position: fixed;
@@ -229,6 +240,8 @@ body {
 	display: none;
 }
 
+.customize-close-overlay:focus,
+.customize-close-overlay:hover,
 .customize-controls-close:focus,
 .customize-controls-close:hover,
 .control-panel-back:focus,
@@ -251,6 +264,13 @@ body {
 	right: 13px;
 }
 
+.customize-close-overlay:before {
+	font: normal 22px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 3px;
+}
+
 .control-panel-back:before {
 	font: normal 20px/1 dashicons;
 	content: "\f345";
@@ -1127,6 +1147,14 @@ body.cheatin p {
 		margin-bottom: 4px;
 	}
 
+	.adding-widget #customize-header-actions .primary-actions {
+		display: none;
+	}
+
+	.adding-widget #customize-header-actions .secondary-actions {
+		display: block;
+	}
+
 	#customize-header-actions .button-primary {
 		margin-top: 6px;
 	}

wp-admin/css/customize-controls.css

@@ -41,6 +41,10 @@ body {
 	border-bottom: 1px solid #ddd;
 }
 
+#customize-header-actions .secondary-actions {
+	display: none;
+}
+
 #customize-controls .wp-full-overlay-sidebar-content {
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -193,6 +197,7 @@ body {
 	width: 100%;
 }
 
+.customize-close-overlay,
 .customize-controls-close {
 	display: block;
 	position: absolute;
@@ -202,6 +207,7 @@ body {
 	height: 45px;
 	padding-right: 2px;
 	background: #eee;
+	border: none;
 	border-right: 1px solid #ddd;
 	color: #444;
 	cursor: pointer;
@@ -209,6 +215,11 @@ body {
 	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
+.customize-close-overlay {
+	left: auto;
+	right: 0;
+}
+
 .control-panel-back {
 	display: block;
 	position: fixed;
@@ -229,6 +240,8 @@ body {
 	display: none;
 }
 
+.customize-close-overlay:focus,
+.customize-close-overlay:hover,
 .customize-controls-close:focus,
 .customize-controls-close:hover,
 .control-panel-back:focus,
@@ -251,6 +264,13 @@ body {
 	left: 13px;
 }
 
+.customize-close-overlay:before {
+	font: normal 22px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 3px;
+}
+
 .control-panel-back:before {
 	font: normal 20px/1 dashicons;
 	content: "\f341";
@@ -1127,6 +1147,14 @@ body.cheatin p {
 		margin-bottom: 4px;
 	}
 
+	.adding-widget #customize-header-actions .primary-actions {
+		display: none;
+	}
+
+	.adding-widget #customize-header-actions .secondary-actions {
+		display: block;
+	}
+
 	#customize-header-actions .button-primary {
 		margin-top: 6px;
 	}

wp-admin/customize.php

@@ -119,19 +119,26 @@ do_action( 'customize_controls_print_scripts' );
 <div class="wp-full-overlay expanded">
 	<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
 		<div id="customize-header-actions" class="wp-full-overlay-header">
-			<?php
-				$save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
-				submit_button( $save_text, 'primary save', 'save', false );
-			?>
-			<span class="spinner"></span>
-			<a class="customize-controls-preview-toggle" href="#">
-				<span class="controls"><?php _e( 'Customize' ); ?></span>
-				<span class="preview"><?php _e( 'Preview' ); ?></span>
-			</a>
-			<a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
-				<span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
-			</a>
-			<span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
+			<div class="primary-actions">
+				<?php
+					$save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
+					submit_button( $save_text, 'primary save', 'save', false );
+				?>
+				<span class="spinner"></span>
+				<a class="customize-controls-preview-toggle" href="#">
+					<span class="controls"><?php _e( 'Customize' ); ?></span>
+					<span class="preview"><?php _e( 'Preview' ); ?></span>
+				</a>
+				<a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
+					<span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
+				</a>
+				<span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
+			</div>
+			<div class="secondary-actions">
+				<button type="button" class="dashicons dashicons-no customize-close-overlay">
+					<span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
+				</button>
+			</div>
 		</div>
 
 		<div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->

wp-admin/js/customize-widgets.js

@@ -177,7 +177,7 @@
 			// If the available widgets panel is open and the customize controls are
 			// interacted with (i.e. available widgets panel is blurred) then close the
 			// available widgets panel.
-			$( '#customize-controls' ).on( 'click keydown', function( e ) {
+			$( '#customize-controls, .customize-close-overlay' ).on( 'click keydown', function( e ) {
 				var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
 				if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
 					self.close();

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-beta3-31973';
+$wp_version = '4.2-beta3-31974';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.