1

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>

enter image description here

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

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', // 👈 Key addition.
    'selector' => '#bg-color',
    'container_inclusive' => false,
    'render_callback' => 'dummy_function',
) );

Standalone plugin that demonstrates technique: https://gist.github.com/westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e

Demo video:

Screenshot of partial and control

2
  • Thank you so much.. just one thing.. is it possible to add that icon without using the selective refresh just wanna know .. – Taj Khan Oct 11 '17 at 4:52
  • The edit shortcut button is part of the selective refresh Partial. If you want to add the shortcut without using partials, you'd have to copy the code and not rely on what is provided in core. I highly recommend using partials because it provides a standardized interface for identifying regions of the preview that are related to modified settings. I want to develop it further in core to minimize the existing practice of procedural JS preview logic as is found in most themes today. – Weston Ruter Oct 11 '17 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.