Theme Customizer: Add a WP_Customize_Setting->visibility parameter to show/hide a control based upon the value of another control. Also shifts rendering the setting wrapper element into WP_Customize_Setting->render() and adds WP_Customize_Setting->render_content(). see #19910.

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

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

@@ -83,11 +83,10 @@ class WP_Customize_Section {
 		<li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
 			<h3 class="customize-section-title" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
 			<ul class="customize-section-content">
-				<?php foreach ( $this->settings as $setting ) : ?>
+				<?php
-				<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control customize-control-<?php echo esc_attr( $setting->control ); ?>">
+				foreach ( $this->settings as $setting )
-					<?php $setting->maybe_render(); ?>
+					$setting->maybe_render();
-				</li>
+				?>
-				<?php endforeach; ?>
 			</ul>
 		</li>
 		<?php

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

@@ -20,6 +20,7 @@ class WP_Customize_Setting {
 	public $theme_supports    = '';
 	public $default           = '';
 	public $sanitize_callback = '';
+	public $visibility;
 
 	protected $id_data = array();
 	private $_post_value; // Cached, sanitized $_POST value.
@@ -296,11 +297,37 @@ class WP_Customize_Setting {
 	}
 
 	/**
-	 * Render the control.
+	 * Render the control. Renders the control wrapper, then calls $this->render_content().
 	 *
 	 * @since 3.4.0
 	 */
 	protected function render() {
+
+		$id    = 'customize-control-' . $this->id;
+		$class = 'customize-control customize-control-' . $this->control;
+
+		$style = '';
+		if ( $this->visibility ) {
+			$visibility_setting = $this->manager->get_setting( $this->visibility[0] );
+			$visibility_value   = isset( $this->visibility[1] ) ? $this->visibility[1] : true;
+
+			if ( $visibility_setting && $visibility_value != $visibility_setting->value() )
+				$style = 'style="display:none;"';
+		}
+
+		?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>" <?php echo $style; ?>>
+			<?php $this->render_content(); ?>
+		</li><?php
+	}
+
+	/**
+	 * Render the control's content.
+	 *
+	 * Allows the content to be overriden without having to rewrite the wrapper.
+	 *
+	 * @since 3.4.0
+	 */
+	protected function render_content() {
 		switch( $this->control ) {
 			case 'text':
 				?>

wp-includes/class-wp-customize.php

@@ -618,7 +618,7 @@ final class WP_Customize {
 			'choices'        => $choices,
 			'default'        => get_option( 'show_on_front' ),
 			'type'           => 'option',
-			'capability'     => 'manage_options'
+			'capability'     => 'manage_options',
 		) );
 
 		$this->add_setting( 'page_on_front', array(
@@ -627,7 +627,8 @@ final class WP_Customize {
 			'section'        => 'static_front_page',
 			'control'        => 'dropdown-pages',
 			'type'           => 'option',
-			'capability'     => 'manage_options'
+			'capability'     => 'manage_options',
+			'visibility'     => array( 'show_on_front', 'page' ),
 		) );
 
 		$this->add_setting( 'page_for_posts', array(
@@ -636,7 +637,8 @@ final class WP_Customize {
 			'section'        => 'static_front_page',
 			'control'        => 'dropdown-pages',
 			'type'           => 'option',
-			'capability'     => 'manage_options'
+			'capability'     => 'manage_options',
+			'visibility'     => array( 'show_on_front', 'page' ),
 		) );
 
 		/* Site Title & Tagline */
@@ -650,7 +652,7 @@ final class WP_Customize {
 			'section'        => 'strings',
 			'default'        => get_option( 'blogname' ),
 			'type'           => 'option',
-			'capability'     => 'manage_options'
+			'capability'     => 'manage_options',
 		) );
 
 		$this->add_setting( 'blogdescription', array(
@@ -658,7 +660,7 @@ final class WP_Customize {
 			'section'        => 'strings',
 			'default'        => get_option( 'blogdescription' ),
 			'type'           => 'option',
-			'capability'     => 'manage_options'
+			'capability'     => 'manage_options',
 		) );
 	}
 };

wp-includes/customize-controls.php

@@ -104,6 +104,13 @@ do_action( 'customize_controls_print_scripts' );
 			'value'   => $setting->value(),
 			'control' => $setting->control,
 		);
+
+		if ( $setting->visibility ) {
+			$settings['controls'][ $id ]['visibility'] = array(
+				'id'    => $setting->visibility[0],
+				'value' => isset( $setting->visibility[1] ) ? $setting->visibility[1] : true,
+			);
+		}
 	}
 
 	?>

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

@@ -230,10 +230,20 @@
 		});
 
 		$.each( api.settings.controls, function( id, data ) {
-			var constructor = api.controls[ data.control ] || api.Control;
+			var constructor = api.controls[ data.control ] || api.Control,
-			api.add( id, new constructor( id, data.value, {
+				control;
+
+			control = api.add( id, new constructor( id, data.value, {
 				previewer: previewer
 			} ) );
+
+			if ( data.visibility ) {
+				api( data.visibility.id, function( other ) {
+					other.bind( function( to ) {
+						control.container.toggle( to == data.visibility.value );
+					});
+				});
+			}
 		});
 
 		// Temporary accordion code.