WP Customizer JS Template not saving color field

by

I’m trying to create a custom typography control, I’m having problem saving the value of the color, please take a look at my code:

<?php
class Customizer_Typo_Control_Typography extends WP_Customize_Control {

/**
 * The type of customize control being rendered.
 */
public $type="typography";

/**
 * Array
 */
public $l10n = array();

/**
 * Set up our control.
 */
public function __construct( $manager, $id, $args = array() ) {

    // Let the parent class do its thing.
    parent::__construct( $manager, $id, $args );

    // Make sure we have labels.
    $this->l10n = wp_parse_args(
        $this->l10n,
        array(
            'color'       => esc_html__( 'Font Color',   'ctypo' ),
        )
    );
}

/**
 * Add custom parameters to pass to the JS via JSON.
 */
public function to_json() {
    parent::to_json();

    // Loop through each of the settings and set up the data for it.
    foreach ( $this->settings as $setting_key => $setting_id ) {

        $this->json[ $setting_key ] = array(
            'link'  => $this->get_link( $setting_key ),
            'value' => $this->value( $setting_key ),
            'label' => isset( $this->l10n[ $setting_key ] ) ? $this->l10n[ $setting_key ] : ''
        );

    }
}

/**
 * Underscore JS template to handle the control's output.
 */
public function content_template() { ?>

    <# if ( data.label ) { #>
        <span class="customize-control-title">{{ data.label }}</span>
    <# } #>

    <# if ( data.description ) { #>
        <span class="description customize-control-description">{{{ data.description }}}</span>
    <# } #>

    <ul>

    <# if ( data.color ) { #>

        <li class="typography-font-color">

            <# if ( data.color.label ) { #>
                <span class="customize-control-title">{{ data.color.label }}</span>
            <# } #>

        <input type="text" data-default-color="{{ data.color.default }}" value="{{ data.color.value }}" class="color-picker" {{{ data.color.link }}} />
        </li>
    <# } #>


    </ul>
<?php } }

And here is how i print the option:

  $wp_customize->add_setting( 'p_font_color',   
  array( 'default' => '#666111',     
    'sanitize_callback' => 'sanitize_hex_color',              
    'transport' => 'postMessage' ) 
  );

 $wp_customize->add_control(
new Customizer_Typo_Control_Typography(
    $wp_customize,
    'p_typography',
    array(
        'label'       => esc_html__( 'Paragraph Typography', 'ctypo' ),
        'description' => __( 'Select how you want your paragraphs to appear.', 'ctypo' ),
        'section'     => 'p_typography',

        'settings'    => array(
            'color'       => 'p_font_color',
        ),

        'l10n'        => array(),
    )
)

);

1 Answer
1

You are using content_template which is used for rendering Underscore JS template which means you will also have to create your own corresponding control in javascript using api.Control.extend({ and do the handling yourself.

however by looking at your code, that does not seem to be the case, I think if you want to change the html content you would need to override render_content like this

protected function render_content() {
    ?>
    <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; ?>
        <input type="text" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link('color'); ?> />
    </label>
    <?php
}

Leave a Comment