tzkmx
2/15/2018 - 1:59 AM

Example WordPress Customizer Control mostly built with JavaScript API

Example WordPress Customizer Control mostly built with JavaScript API

;(function(api){
  // wait for ready Event
  api.bind('ready', function() {
    // firt a Panel to house our sections
    api.panel.add(new api.Panel('tzkmx_test_panel', {
      title: 'Panel Tzkmx'
    }))
    // then a Section to house our controls
    api.section.add(new api.Section('tzkmx_test_section', {
      title: 'Section Tzkmx',
      panel: 'tzkmx_test_panel',
      customizeAction: 'Customizing Section Custom'
    }))
    // then a Control linked to the template output with
    // `customize_controls_print_footer_scripts` action
    api.control.add(new api.Control('tzkmx_test_control', {
      title: 'Control Tzkmx',
      settings: {
        // the key links the value through attribute
        // data-customize-setting-key-link="test"
        test: 'tzkmx_test_setting'
        // the value of this key is its identifier in the theme_mods
      },
      type: 'text-tzk',
      section: 'tzkmx_test_section',
      label: 'Check some text',
      description: 'This goes here?',
      // specify the templateId without the `tmpl-` prefix
      templateId: 'text-tzk-control'
    }))
    // this should be the same key as the Control
    api.add( new api.Setting('tzkmx_test_setting') )
  })
}(wp.customize))
<?php

add_action( 'customize_controls_enqueue_scripts', 'tzkmx_customizer_controls_script' );

function tzkmx_customizer_controls_script() {
    wp_enqueue_script( 'tzkmx-customize-controls', plugins_url( 'js/customize-controls.js', __DIR__ ) , [], null, true );
}

add_filter( 'customize_dynamic_setting_args', 'tzkmx_filter_dynamic_setting_args', 10, 2 );

function tzkmx_filter_dynamic_setting_args( $settings_args, $setting_id ) {
    if ( 'tzkmx_test_control' === $setting_id ) {
        $setting_args = [
            'type' => 'theme_mod',
        ];
    }
    return $setting_args;
}

add_action( 'customize_controls_print_footer_scripts', function() {
    ?>
    <script id="tmpl-text-tzk-control" type="text/html">
    <# if ( data.label ) { #>
        <span class="customize-control-title">{{ data.label }}</span>
    <# } #>

    <# if ( data.description ) { #>
       <span class="description customize-control-description">{{{ data.description }}}</span>
    <# } #>
    <input type="text" value="" name="_customize-{{ data.type }}-{{ data.id }}" data-customize-setting-key-link="test" />
    </script>
    <?php
} );

TODO:

  • Validation
  • Dynamic generation of controls by REST API and theme_mods/options contents
  • Extended panels (like the scheduler/preview link working area)
  • Partials/Selective Refresh/Bind values to Preview Output/More Dynamic Controls

Studying the powerful API of Customizer SPA:

https://github.com/xwp/wp-customize-rest-resources/blob/87435389c1b807ab84c9ea674337b784f4afe279/js/rest-resources-manager.js#L91-L115