Como posso adicionar o ícone do shortcode no personalizador wordpress sem usar atualizações seletivas?

Abaixo está o meu código que adiciona uma seção de colors na visualização do personalizador

$wp_customize->add_section( 'cd_colors' , array( 'title' => 'Colors', 'priority' => 30, ) ); 

Aqui está o controle e configuração

 $wp_customize->add_setting( 'background_color' , array( 'default' => '#43C6E4', 'transport' => 'postMessage', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Background Color', 'section' => 'cd_colors', 'settings' => 'background_color', ) ) ); 

Agora, o que eu preciso é apenas um ícone de atalho de edição ao lado do elemento que estou aplicando este modo de tema

 

insira a descrição da imagem aqui

Agora, a única maneira de adicionar esse ícone é usando atualizações seletivas. Veja abaixo

 $wp_customize->selective_refresh->add_partial( 'background_color', array( 'selector' => '#bg-color', 'container_inclusive' => false, 'render_callback' => 'dummy_function' ) ); 

Mas, como eu estou usando o meu próprio javascript, não preciso da funcionalidade de atualização seletiva, eu só preciso do ícone que, quando clicado, deveria seguir a configuração desejada. Aqui está o meu código javascript

 ( function( $ ) { // Update the site title in real time... wp.customize( 'background_color', function( value ) { value.bind( function( newval ) { $( '#bg-color' ).css( 'background-color', newval ); } ); } ); } )( jQuery ); 

Solutions Collecting From Web of "Como posso adicionar o ícone do shortcode no personalizador wordpress sem usar atualizações seletivas?"

O que você precisa fazer é implementar um Partial personalizado em JS que aplica um comportamento de refresh personalizado de modificar a background-color vez de buscar um parcial recém-renderizado do servidor. Portanto, são partiais com atalhos de edição, mas sem qualquer atualização seletiva do lado do servidor.

Por exemplo, enqueue o seguinte JS na pré-visualização do personalizador com uma dependência customize-selective-refresh :

 wp.customize.selectiveRefresh.partialConstructor.background_color = (function( api, $ ) { 'use strict'; return api.selectiveRefresh.Partial.extend( { /** * Refresh. * * Override refresh behavior to apply changes with JS instead of doing * a selective refresh request for PHP rendering (since unnecessary). * * @returns {jQuery.promise} Resolved promise. */ refresh: function() { var partial = this, backgroundColorSetting; backgroundColorSetting = api( partial.params.primarySetting ); _.each( partial.placements(), function( placement ) { placement.container.css( 'background-color', backgroundColorSetting.get() ); } ); // Return resolved promise since no server-side selective refresh will be requested. return $.Deferred().resolve().promise(); } } ); })( wp.customize, jQuery ); 

Então, quando você registra o seu parcial, certifique-se de fornecer o type de background_color para conectar o parcial do PHP com o JavaScript partialConstructor , assim:

 $wp_customize->selective_refresh->add_partial( 'wpse_282425_background_color', array( 'type' => 'background_color', // 👈 Key addition. 'selector' => '#bg-color', 'container_inclusive' => false, 'render_callback' => 'dummy_function', ) ); 

Plugin autônomo que demonstra técnica: https://gist.github.com/westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e

Vídeo de demonstração:

Captura de tela parcial e controle