Theme Customizer: Improve form markup. Make the theme title/author a section. Prevent section arrows from blocking clicks. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20106 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -65,8 +65,8 @@ class WP_Customize_Section {
 			return;
 		?>
 		<li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
-			<h3 class="customize-theme-title"><?php echo esc_html( $this->title ); ?></h3>
-			<ul>
+			<h3 class="customize-section-title"><?php echo esc_html( $this->title ); ?></h3>
+			<ul class="customize-section-content">
 				<?php if ( $this->description ) : ?>
 					<li><p class="howto"><?php echo $this->description; ?></p></li>
 				<?php endif; ?>

wp-includes/css/customize-controls.dev.css

@@ -2,17 +2,6 @@ body {
 	overflow: hidden;
 }
 
-.customize-section {
-	border-top: 1px solid #fff;
-	border-bottom: 1px solid #dfdfdf;
-	padding: 15px 20px;
-	margin: 0;
-}
-
-.customize-section:last-child {
-	box-shadow: 0 1px 0 0px #fff;
-}
-
 #customize-controls {
 	width: 300px;
 	height: 100%;
@@ -26,6 +15,55 @@ body {
 	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
 }
 
+.customize-section {
+	border-top: 1px solid #fff;
+	border-bottom: 1px solid #dfdfdf;
+	margin: 0;
+}
+
+.customize-section:last-child {
+	box-shadow: 0 1px 0 0px #fff;
+}
+
+.customize-section-title {
+	margin: 0;
+	padding: 15px 20px;
+	position: relative;
+
+	cursor: pointer;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.customize-section-content {
+	display: none;
+	padding: 0 20px 15px;
+}
+
+.customize-section.open .customize-section-content {
+	display: block;
+}
+
+.customize-section-title:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border-color: #ccc transparent transparent transparent;
+	border-style: solid;
+	border-width: 6px;
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	z-index: 1;
+}
+
+.customize-section.open .customize-section-title:after {
+	top: 13px;
+	border-color: transparent transparent #ccc transparent;
+}
+
 #customize-controls .theme-name {
 	font-size: 16px;
 	font-weight: bold;
@@ -54,45 +92,6 @@ body {
 	margin: 0;
 }
 
-#customize-theme-controls ul ul {
-	margin-top: 1em;
-	display: none;
-}
-
-#customize-theme-controls ul h3 {
-	margin: 0;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-#customize-theme-controls ul h3:hover {
-	cursor: pointer;
-}
-
-#customize-theme-controls ul h3:after {
-	content: '';
-	border-color: #ccc transparent transparent transparent;
-	border-style: solid;
-	border-width: 6px;
-	float: right;
-	margin-top: 5px;
-	margin-left: 5px;
-}
-
- #customize-theme-controls ul h3.open:after {
-	-moz-transform: rotate(180deg);
-	-webkit-transform: rotate(180deg);
-	-o-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
-	-moz-transform-origin: center 3px;
-	-webkit-transform-origin: center 3px;
-	-o-transform-origin: center 3px;
-	-ms-transform-origin: center 3px;
-	transform-origin: center 3px;
-}
-
 #customize-footer {
 	border-bottom: 0;
 	border-top: 1px solid #dfdfdf;

wp-includes/customize-controls.php

@@ -51,14 +51,16 @@ do_action( 'customize_controls_print_scripts' );
 		<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
 
 		<div id="customize-info" class="customize-section">
-			<p>
+			<div class="customize-section-title">
 				<strong class="theme-name"><?php echo $theme['Name']; ?></strong>
 				<span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
-			</p>
+			</div>
+			<div class="customize-section-content">
 				<?php if ( $screenshot ) : ?>
 					<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
 				<?php endif; ?>
 			</div>
+		</div>
 
 		<div id="customize-theme-controls"><ul>
 			<?php

wp-includes/js/customize-controls.dev.js

@@ -149,9 +149,8 @@
 		});
 
 		// Temporary accordion code.
-		$('.control-section h3').click( function() {
-			$( this ).siblings('ul').slideToggle( 200 );
-			$( this ).toggleClass( 'open' );
+		$('.customize-section-title').click( function() {
+			$( this ).parents('.customize-section').toggleClass( 'open' );
 			return false;
 		});