Theme Customizer: Sanitize selectors by transforming square brackets into dashes. see #19910.

Daryl Koopersmith · Daryl Koopersmith · commit ea85772eb6c4 · 2012-03-28T09:10:29.000Z
This both better conforms to the CSS spec and prevents bugs from occurring in JavaScript selector engines. git-svn-id: https://develop.svn.wordpress.org/trunk@20299 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
@@ -145,7 +145,7 @@ public final function maybe_render() {
 	 * @since 3.4.0
 	 */
 	protected function render() {
-		$id    = 'customize-control-' . $this->id;
+		$id    = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
 		$class = 'customize-control customize-control-' . $this->type;
 
 		$style = '';
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
@@ -48,7 +48,8 @@
 			$.extend( this, options || {} );
 
 			this.id = id;
-			this.container = $( '#customize-control-' + id );
+			this.selector = '#customize-control-' + id.replace( ']', '' ).replace( '[', '-' );
+			this.container = $( this.selector );
 
 			settings = $.map( this.params.settings, function( value ) {
 				return value;
