Create WP_Customize_Control to separate the process of rendering a control from fetching, previewing, and saving its values. see #19910.

Many-to-many mapping between settings and controls.
* Settings and controls have been separated in both the PHP (WP_Customize_Setting, WP_Customize_Control) and the JS (wp.customize.Setting, wp.customize.Control).
* While most settings are tied to a single control, some require multiple controls. The 'header_textcolor' control is a good example: to hide the header text, header_textcolor is set to 'blank'.

Add 'Display Header Text' control.

A handful of miscellaneous bugfixes along the way.

Notes:
* Controls should be separated out a bit more; juggling type-specific arguments in the switch statement is rather inelegant.
* Page dropdowns are currently inactive and need to be re-linked.

git-svn-id: https://develop.svn.wordpress.org/trunk@20295 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith
2012-03-28 04:14:09 +00:00
parent 4337bd15e7
commit 2ca07cdf2a
8 changed files with 653 additions and 386 deletions

View File

@@ -10,18 +10,12 @@
class WP_Customize_Setting {
public $manager;
public $id;
public $priority = 10;
public $section = '';
public $label = '';
public $control = 'text';
public $control_params = array();
public $type = 'theme_mod';
public $choices = array();
public $capability = 'edit_theme_options';
public $theme_supports = '';
public $default = '';
public $sanitize_callback = '';
public $visibility;
protected $id_data = array();
private $_post_value; // Cached, sanitized $_POST value.
@@ -63,23 +57,6 @@ class WP_Customize_Setting {
return $this;
}
/**
* Enqueue setting related scripts/styles.
*
* @since 3.4.0
*/
public function enqueue() {
switch( $this->control ) {
case 'color':
wp_enqueue_script( 'farbtastic' );
wp_enqueue_style( 'farbtastic' );
break;
case 'upload':
wp_enqueue_script( 'wp-plupload' );
break;
}
}
/**
* Handle previewing the setting.
*
@@ -275,229 +252,9 @@ class WP_Customize_Setting {
if ( $this->theme_supports && ! call_user_func_array( 'current_theme_supports', (array) $this->theme_supports ) )
return false;
$section = $this->manager->get_section( $this->section );
if ( isset( $section ) && ! $section->check_capabilities() )
return false;
return true;
}
/**
* Check capabiliites and render the control.
*
* @since 3.4.0
*/
public final function maybe_render() {
if ( ! $this->check_capabilities() )
return;
do_action( 'customize_render_setting', $this );
do_action( 'customize_render_setting_' . $this->id, $this );
$this->render();
}
/**
* 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 ) {
if ( is_string( $this->visibility ) ) {
$visibility_id = $this->visibility;
$visibility_value = true;
} else {
$visibility_id = $this->visibility[0];
$visibility_value = $this->visibility[1];
}
$visibility_setting = $this->manager->get_setting( $visibility_id );
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':
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
</label>
<?php
break;
case 'color':
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<div class="color-picker">
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#"></a>
<div class="color-picker-controls">
<div class="farbtastic-placeholder"></div>
<div class="color-picker-details">
<div class="color-picker-hex">
<span>#</span>
<input type="text" />
</div>
</div>
</div>
</div>
</label>
<?php
break;
case 'checkbox':
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); checked( $this->value() ); ?> class="customize-control-content" />
</label>
<?php
break;
case 'radio':
if ( empty( $this->choices ) )
return;
?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php
foreach ( $this->choices as $value => $label ) :
?>
<label>
<input type="radio" value="<?php echo esc_attr( $value ); ?>" <?php $this->name(); checked( $this->value(), $value ); ?> />
<?php echo esc_html( $label ); ?><br/>
</label>
<?php
endforeach;
break;
case 'select':
if ( empty( $this->choices ) )
return;
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<select <?php $this->name(); ?> class="customize-control-content">
<?php
foreach ( $this->choices as $value => $label )
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
?>
</select>
</label>
<?php
break;
case 'upload':
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<div>
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
</div>
</label>
<?php
break;
case 'image':
$value = $this->value();
$image = $value;
if ( isset( $this->control_params['get_url'] ) )
$image = call_user_func( $this->control_params['get_url'], $image );
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<div class="customize-image-picker">
<div class="thumbnail">
<?php if ( empty( $image ) ): ?>
<img style="display:none;" />
<?php else: ?>
<img src="<?php echo esc_url( $image ); ?>" />
<?php endif; ?>
</div>
<div class="actions">
<a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
<a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
</div>
<div class="library">
<ul>
<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
<li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
<?php echo esc_html( $tab[1] ); ?>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
<div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
<?php call_user_func( $tab[2] ); ?>
</div>
<?php endforeach; ?>
</div>
</div>
</label>
<?php
break;
case 'dropdown-pages':
printf(
'<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
$this->label,
wp_dropdown_pages(
array(
'name' => $this->get_name(),
'echo' => 0,
'show_option_none' => __( '&mdash; Select &mdash;' ),
'option_none_value' => '0',
'selected' => get_option( $this->id )
)
)
);
break;
}
}
/**
* Retrieve the name attribute for an input.
*
* @since 3.4.0
*
* @return string The name.
*/
public final function get_name() {
return self::name_prefix . esc_attr( $this->id );
}
/**
* Echo the HTML name attribute for an input.
*
* @since 3.4.0
*
* @return string The HTML name attribute.
*/
public final function name() {
echo 'name="' . $this->get_name() . '"';
}
/**
* Multidimensional helper function.
*