Customizer panels: use a single back button for all panels.

This also ensures the back button is visible on iOS devices.

props celloexpressions.
fixes #29135.

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


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

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

@@ -252,7 +252,7 @@ body {
 	font: normal 20px/1 dashicons;
 	content: "\f341";
 	position: relative;
-	top: 13px;
+	top: 7px;
 	right: 13px;
 }
 
@@ -260,7 +260,7 @@ body {
 	content: "\f344";
 }
 
-.current-panel .control-panel-back {
+.in-sub-panel .control-panel-back {
 	right: 0;
 }
 

wp-admin/css/customize-controls.css

@@ -252,7 +252,7 @@ body {
 	font: normal 20px/1 dashicons;
 	content: "\f341";
 	position: relative;
-	top: 13px;
+	top: 7px;
 	left: 13px;
 }
 
@@ -260,7 +260,7 @@ body {
 	content: "\f344";
 }
 
-.current-panel .control-panel-back {
+.in-sub-panel .control-panel-back {
 	left: 0;
 }
 

wp-admin/customize.php

@@ -121,6 +121,7 @@ do_action( 'customize_controls_print_scripts' );
 			<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>
 
 		<?php

wp-admin/js/accordion.js

@@ -47,14 +47,14 @@
 		});
 
 		// Go back to the top-level Customizer accordion.
-		$( '.accordion-container' ).on( 'click keydown', '.control-panel-back', function( e ) {
+		$( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( e ) {
 			if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
 				return;
 			}
 
 			e.preventDefault(); // Keep this AFTER the key filter above
 
-			panelSwitch( $( this ) );
+			panelSwitch( $( '.current-panel' ) );
 		});
 	});
 
@@ -108,7 +108,7 @@
 			container = section.closest( '.accordion-container' ),
 			siblings = container.find( '.open' ),
 			topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
-			backBtn = section.find( '.control-panel-back' ),
+			backBtn = overlay.find( '.control-panel-back' ),
 			panelTitle = section.find( '.accordion-section-title' ).first(),
 			content = section.find( '.control-panel-content' );
 

wp-admin/js/accordion.min.js

@@ -1 +1 @@
-!function(a){function b(a){var b=a.closest(".accordion-section"),e=b.closest(".accordion-container").find(".open"),f=b.find(d);if(!b.hasClass("cannot-expand"))return b.hasClass("control-panel")?void c(b):void(b.hasClass("open")?(b.toggleClass("open"),f.toggle(!0).slideToggle(150)):(e.removeClass("open"),e.find(d).show().slideUp(150),f.toggle(!1).slideToggle(150),b.toggleClass("open")))}function c(a){var b,c,e=a.closest(".accordion-section"),f=e.closest(".wp-full-overlay"),g=e.closest(".accordion-container"),h=g.find(".open"),i=f.find("#customize-theme-controls > ul > .accordion-section > .accordion-section-title").add("#customize-info > .accordion-section-title"),j=e.find(".control-panel-back"),k=e.find(".accordion-section-title").first(),l=e.find(".control-panel-content");e.hasClass("current-panel")?(e.toggleClass("current-panel"),f.toggleClass("in-sub-panel"),l.delay(180).hide(0,function(){l.css("margin-top","inherit")}),i.attr("tabindex","0"),j.attr("tabindex","-1"),k.focus(),g.scrollTop(0)):(h.removeClass("open"),h.find(d).show().slideUp(0),l.show(0,function(){b=l.offset().top,c=g.scrollTop(),l.css("margin-top",45-b-c),e.toggleClass("current-panel"),f.toggleClass("in-sub-panel"),g.scrollTop(0)}),i.attr("tabindex","-1"),j.attr("tabindex","0"),j.focus())}a(document).ready(function(){a(".accordion-container").on("click keydown",".accordion-section-title",function(c){("keydown"!==c.type||13===c.which)&&(c.preventDefault(),b(a(this)))}),a(".accordion-container").on("click keydown",".control-panel-back",function(b){("keydown"!==b.type||13===b.which)&&(b.preventDefault(),c(a(this)))})});var d=a(".accordion-section-content")}(jQuery);
+!function(a){function b(a){var b=a.closest(".accordion-section"),e=b.closest(".accordion-container").find(".open"),f=b.find(d);if(!b.hasClass("cannot-expand"))return b.hasClass("control-panel")?void c(b):void(b.hasClass("open")?(b.toggleClass("open"),f.toggle(!0).slideToggle(150)):(e.removeClass("open"),e.find(d).show().slideUp(150),f.toggle(!1).slideToggle(150),b.toggleClass("open")))}function c(a){var b,c,e=a.closest(".accordion-section"),f=e.closest(".wp-full-overlay"),g=e.closest(".accordion-container"),h=g.find(".open"),i=f.find("#customize-theme-controls > ul > .accordion-section > .accordion-section-title").add("#customize-info > .accordion-section-title"),j=f.find(".control-panel-back"),k=e.find(".accordion-section-title").first(),l=e.find(".control-panel-content");e.hasClass("current-panel")?(e.toggleClass("current-panel"),f.toggleClass("in-sub-panel"),l.delay(180).hide(0,function(){l.css("margin-top","inherit")}),i.attr("tabindex","0"),j.attr("tabindex","-1"),k.focus(),g.scrollTop(0)):(h.removeClass("open"),h.find(d).show().slideUp(0),l.show(0,function(){b=l.offset().top,c=g.scrollTop(),l.css("margin-top",45-b-c),e.toggleClass("current-panel"),f.toggleClass("in-sub-panel"),g.scrollTop(0)}),i.attr("tabindex","-1"),j.attr("tabindex","0"),j.focus())}a(document).ready(function(){a(".accordion-container").on("click keydown",".accordion-section-title",function(c){("keydown"!==c.type||13===c.which)&&(c.preventDefault(),b(a(this)))}),a("#customize-header-actions").on("click keydown",".control-panel-back",function(b){("keydown"!==b.type||13===b.which)&&(b.preventDefault(),c(a(".current-panel")))})});var d=a(".accordion-section-content")}(jQuery);

wp-includes/class-wp-customize-panel.php

@@ -174,7 +174,6 @@ class WP_Customize_Panel {
 				<?php echo esc_html( $this->title ); ?>
 				<span class="screen-reader-text"><?php _e( 'Press return or enter to open this panel' ); ?></span>
 			</h3>
-			<span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
 			<ul class="accordion-sub-container control-panel-content">
 				<li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
 					<div class="accordion-section-title" tabindex="0">