Below is my code which adds a colors section in customizer preview

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

Here is the control and setting

$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',
    ) ) );

Now what i need is just an edit shortcut icon next to the element i am applying this theme mode

<div id="bg-color">
    <?php echo get_theme_mod( 'background_color' ); ?>
</div>

Now the only way i am able to add that icon is by using selective refresh see below

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

But as i am using my own javascript i dont need the selective refresh functionality i just need that icon which when clicked should go the desired setting. Here is my javascript code

( 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 );

Below is my code which adds a colors section in customizer preview

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

Here is the control and setting

$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',
    ) ) );

Now what i need is just an edit shortcut icon next to the element i am applying this theme mode

<div id="bg-color">
    <?php echo get_theme_mod( 'background_color' ); ?>
</div>

Now the only way i am able to add that icon is by using selective refresh see below

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

But as i am using my own javascript i dont need the selective refresh functionality i just need that icon which when clicked should go the desired setting. Here is my javascript code

( 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 );

• theme-development
• theme-customizer

• Please read this → make.wordpress/core/2016/11/10/… – WordCent Commented Oct 10, 2017 at 7:56
• I already read this.. and my question is based on how to implement that without using selective refresh? – Taj Khan Commented Oct 10, 2017 at 8:34

1 Answer 1

What you need to do is implement a custom Partial in JS which applies a custom refresh behavior of modifying the background-color instead of fetching a newly-rendered partial from the server. So it's partials with edit shortcuts but without any server-side selective refresh.

For example, enqueue the following JS in the customizer preview with a customize-selective-refresh dependency:

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 );

Then when you register your partial, make sure you supply the type of background_color to connect the PHP-registered partial with the JavaScript partialConstructor, like so:

$wp_customize->selective_refresh->add_partial( 'wpse_282425_background_color', array(
    'type' => 'background_color', //