Nova API WP_Customize - como funciona sob o capô?

Há alguns bits aqui que se aplicam, mas o que falta é esse código em customize-preview.js :

this.body.on( 'click.preview', 'a', function( event ) {
    event.preventDefault();
    self.send( 'scroll', 0 );
    self.send( 'url', $(this).prop('href') );
});

O event.preventDefault impede que os links realmente funcionem. O código a seguir envia uma mensagem de volta para cima, informando para a) rolar de volta para o topo da página e b) mudar o URL.

O motivo da mensagem aqui é porque não há apenas um iframe, há dois. A página em que você clicou é, na verdade, carregada dentro de outro iframe com as configurações do personalizador adicionadas a ele (por meio de um POST de fato). Em seguida, um efeito de atenuação é usado para diminuir o antigo e desaparecer no novo sem problemas. Isso evita que a tela fique branca e feia e pisque quando muda para a nova página.

Também elimina a necessidade de filtrar e fazer isso no código do tema e, potencialmente, modificar a aparência da página. O tema é então exibido como está, sem mudanças significativas no conteúdo dele.

Existe código semelhante para impedir que o envio de formulários funcione (não faz nada) e assim por diante.

O filtro para interceptar e manipular os valores do personalizador está em class-wp-customize-setting.php . A função preview() adiciona os filtros necessários para manipular os valores de entrada, a função _preview_filter() é esse filtro. Ele simplesmente recebe as chamadas get_option() ou get_theme_mod() , avisos quando devem ser modificadas e retorna os valores modificados.

Você notará que quando você clica em um link na janela de visualização do personalizador, a solicitação gerada é uma solicitação POST , em vez de uma% normalGET. O personalizador parece estar substituindo os cliques de link e fazendo o POST , com os seguintes dados de formulário:

wp_customize: on
theme: themename
customized: {json-encoded-options-here}
customize_messenger_channel: preview-1

O campo personalizado é o que contém as opções que você modificou, de modo que é para onde os dados estão sendo transmitidos para o seu tema. O código do customizador intercepta (por meio de um filtro, não sei ao certo qual delas exatamente) as opções do seu tema quando elas são solicitadas e as substitui pelos valores no parâmetro customizado .