API JS do Customizer

Ok, então eu tenho tentado me educar para criar novas seções e controles de painéis dinamicamente usando a API JS do personalizador.

Tem sido frustrante há alguns dias e não consegui encontrar a maneira exata de conseguir isso por meio da API JS.

Até agora, isso é algo que estou fazendo para que isso aconteça, mas sem sucesso:

    // for Settings
    api.create( 
        params.id, 
        params.id, 
        params.default, 
        params.args 
    );

    // for controls
    var controlConstructor = api.controlConstructor[params.type];
    var control = new controlConstructor(params.id, {
        params: params,
        previewer: api.previewer
    });
    api.control.add( 
        params.id, 
        control 
    );

     //for Sections
     var section = new api.Section(params.id, { 
        params: params
     }); 
    api.section.add( params.id, section );
    api.section('section_id').activate();

Nenhum deles parece funcionar porque a seção não aparece e eu tenho que executar api.section('section_id').activate()duas vezes no console para fazer a seção aparecer, o mesmo ocorre com o controle.

1) Talvez vincule ao estado api.ready, que pode corrigir a necessidade de chamar sua seção duas vezes

(function($, api){
  api.bind( 'ready', function() {...

  }
})(jQuery);

Vi uma observação no trac que dizia "Observe que as APIs para controles adicionados dinamicamente e APIs para seções e painéis personalizados com modelo JS ainda não estão disponíveis no WordPress 4.2. Consulte o número 30741". A leitura desse trac termina com "provavelmente não para o 4.5 no momento", para que seus esforços sejam inúteis = (

2) Para referência, a API wp_customize JS pode ser encontrada aqui . Esse link também pode ser útil.

3) Não tenho representante suficiente para um terceiro link, mas você pode consultar o Kirki.org, que é uma estrutura auxiliar para os campos do personalizador. Kirki também é bastante ativo no Github.

4) No lado do PHP, você pode usar a opção "active_callback" em sua matriz de campos para apresentar dinamicamente os campos.

$wp_customize->add_control( 'some_single_page_specific_option', array(
  'label'           => esc_html__( 'Single Page Option' ),
  'section'         => 'my_page_options',
  'active_callback' => 'if_is_singular',
));

function if_is_singular(){
  if( is_singular() ){
    return true;
  } else {
    return false;
  }
}

Boa sorte.

Sugiro que, em vez de reinventar a roda, talvez você considere essa estrutura como base para seus projetos. http://wpshed.com/wordpress-theme-customizer-framework/ .

Este é o melhor que encontrei enquanto aprendia e procurava estruturas. Você pode estender essa estrutura com seus próprios controles personalizados, e o link abaixo o ajudará a entender e implementar a comunicação entre o personalizador e a visualização do personalizador via jQuery ou javascript.

https://conductorplugin.com/developing-wordpress-customizer-part1/