Add the ability for a customizer control to render its controls via a JavaScript template. Switches the default color picker control to a JavaScript template. See #29572. Props celloexpressions
git-svn-id: https://develop.svn.wordpress.org/trunk@30014 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
John Blackbourn
parent
805f230e99
commit
37a3642183
@ -180,6 +180,9 @@ do_action( 'customize_controls_print_scripts' );
|
||||
<div id="customize-preview" class="wp-full-overlay-main"></div>
|
||||
<?php
|
||||
|
||||
// Render control templates.
|
||||
$wp_customize->render_control_templates();
|
||||
|
||||
/**
|
||||
* Print Customizer control scripts in the footer.
|
||||
*
|
||||
|
||||
@ -60,7 +60,10 @@
|
||||
}
|
||||
|
||||
control.setting = control.settings['default'] || null;
|
||||
control.ready();
|
||||
control.renderContent( function() {
|
||||
// Don't call ready() until the content has rendered.
|
||||
control.ready();
|
||||
} );
|
||||
}) );
|
||||
|
||||
control.elements = [];
|
||||
@ -149,6 +152,24 @@
|
||||
|
||||
this.setting.bind( update );
|
||||
update( this.setting() );
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the control from its JS template, if it exists.
|
||||
*
|
||||
* The control's container must alreasy exist in the DOM.
|
||||
*/
|
||||
renderContent: function( callback ) {
|
||||
var template,
|
||||
selector = 'customize-control-' + this.params.type + '-content',
|
||||
callback = callback || function(){};
|
||||
if ( 0 !== $( '#tmpl-' + selector ).length ) {
|
||||
template = wp.template( selector );
|
||||
if ( template && this.container ) {
|
||||
this.container.append( template( this.params ) );
|
||||
}
|
||||
}
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -217,8 +217,10 @@ class WP_Customize_Control {
|
||||
$this->json['settings'][ $key ] = $setting->id;
|
||||
}
|
||||
|
||||
$this->json['type'] = $this->type;
|
||||
$this->json['active'] = $this->active();
|
||||
$this->json['type'] = $this->type;
|
||||
$this->json['label'] = $this->label;
|
||||
$this->json['description'] = $this->description;
|
||||
$this->json['active'] = $this->active();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -336,6 +338,8 @@ class WP_Customize_Control {
|
||||
* Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
|
||||
* Additional input types such as `email`, `url`, `number`, `hidden` and `date` are supported implicitly.
|
||||
*
|
||||
* Control content can alternately be rendered in JS. See {@see WP_Customize_Control::print_template()}.
|
||||
*
|
||||
* @since 3.4.0
|
||||
*/
|
||||
protected function render_content() {
|
||||
@ -443,6 +447,36 @@ class WP_Customize_Control {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the control's JS template.
|
||||
*
|
||||
* This function is only run for control types that have been registered with {@see WP_Customize_Manager::register_control_type()}.
|
||||
*
|
||||
* In the future, this will also print the template for the control's container element and be overridable.
|
||||
*
|
||||
* @since 4.1.0
|
||||
*/
|
||||
final public function print_template() {
|
||||
?>
|
||||
<script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
|
||||
<?php $this->content_template(); ?>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @since 4.1.0
|
||||
*/
|
||||
protected function content_template() {}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -499,33 +533,39 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
$this->json['statuses'] = $this->statuses;
|
||||
$this->json['defaultValue'] = $this->setting->default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the control's content.
|
||||
* Don't render the control content from PHP, as it's rendered via JS on load.
|
||||
*
|
||||
* @since 3.4.0
|
||||
*/
|
||||
public function render_content() {
|
||||
$this_default = $this->setting->default;
|
||||
$default_attr = '';
|
||||
if ( $this_default ) {
|
||||
if ( false === strpos( $this_default, '#' ) )
|
||||
$this_default = '#' . $this_default;
|
||||
$default_attr = ' data-default-color="' . esc_attr( $this_default ) . '"';
|
||||
}
|
||||
// The input's value gets set by JS. Don't fill it.
|
||||
?>
|
||||
<label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif;
|
||||
if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
public function render_content() {}
|
||||
|
||||
/**
|
||||
* Render a JS template for the content of the color picker control.
|
||||
*
|
||||
* @since 4.1.0
|
||||
*/
|
||||
public function content_template() {
|
||||
?>
|
||||
<# var defaultValue = '';
|
||||
if ( data.defaultValue ) {
|
||||
if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
|
||||
defaultValue = '#' + data.defaultValue;
|
||||
}
|
||||
defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
|
||||
} #>
|
||||
<label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{ data.label }}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{ data.description }}</span>
|
||||
<# } #>
|
||||
<div class="customize-control-content">
|
||||
<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>"<?php echo $default_attr; ?> />
|
||||
<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
|
||||
</div>
|
||||
</label>
|
||||
<?php
|
||||
|
||||
@ -54,6 +54,13 @@ final class WP_Customize_Manager {
|
||||
protected $customized;
|
||||
|
||||
/**
|
||||
* Controls that may be rendered from JS templates.
|
||||
*
|
||||
* @since 4.1.0
|
||||
*/
|
||||
protected $registered_control_types = array();
|
||||
|
||||
/**
|
||||
* $_POST values for Customize Settings.
|
||||
*
|
||||
* @var array
|
||||
@ -822,6 +829,32 @@ final class WP_Customize_Manager {
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a customize control type.
|
||||
*
|
||||
* Registered types are eligible to be rendered
|
||||
* via JS and created dynamically.
|
||||
*
|
||||
* @since 4.1.0
|
||||
*
|
||||
* @param string $control Name of a custom control which is a subclass of {@see WP_Customize_Control}.
|
||||
*/
|
||||
public function register_control_type( $control ) {
|
||||
$this->registered_control_types[] = $control;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render JS templates for all registered control types.
|
||||
*
|
||||
* @since 4.1.0
|
||||
*/
|
||||
public function render_control_templates() {
|
||||
foreach( $this->registered_control_types as $control_type ) {
|
||||
$control = new $control_type( $this, 'temp', array() );
|
||||
$control->print_template();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to compare two objects by priority.
|
||||
*
|
||||
* @since 3.4.0
|
||||
@ -927,6 +960,9 @@ final class WP_Customize_Manager {
|
||||
*/
|
||||
public function register_controls() {
|
||||
|
||||
/* Control Types (custom control classes) */
|
||||
$this->register_control_type( 'WP_Customize_Color_Control' );
|
||||
|
||||
/* Site Title & Tagline */
|
||||
|
||||
$this->add_section( 'title_tagline', array(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user