1

I am developing a theme and I wonder if there anyway I can add a visual edit shortcut without selective refresh?

$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';

$wp_customize->selective_refresh->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyfifteen_customize_partial_blogname',
) );

Can I do like

$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';

$wp_customize->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyfifteen_customize_partial_blogname',
) );

Actually it works and gives the desired result .. but I am using Kirki as my framework and for some reason I am not able to do it. I just don't want to use the default selective refresh i want to use my own javascript function with postMessage and I am not able to implement the selector tag here.

Here is my code:

Kirki::add_field( 'theme_config', array(
    'type'     => 'text',
    'settings' => 'about_us_video_setting',
    'label'    => __( 'Video Link', 'rst' ),
    'section'  => 'about_us_section',
    'default'  => esc_attr__( 'youtube.com', 'rst' ),
    'transport' => 'postMessage',
    'partial_refresh' => array( 
    'about_us_video_setting' => array( 
        'selector' => '#youtube-video', 
        'render_callback' => 'show_video', 
    ) ),
    'active_callback'    => array(
        array(
            'setting'  => 'is_front_page',
            'operator' => '==',
            'value'    => true,
        ),
    ),

) );

what i want is

Kirki::add_field( 'theme_config', array(
    'type'     => 'text',
    'settings' => 'about_us_video_setting',
    'label'    => __( 'Video Link', 'rst' ),
    'section'  => 'about_us_section',
    'default'  => esc_attr__( 'youtube.com', 'rst' ),
    'transport' => 'postMessage',
     'selector' => '#youtube-video',        
    'active_callback'    => array(
        array(
            'setting'  => 'is_front_page',
            'operator' => '==',
            'value'    => true,
        ),
    ),

) );

Is this.. as even if I give transport as postMessage what is does is just default refresh instead of using my own javascript which is

( function( $ ) {
// Change the previewed URL to the selected page when changing the page_for_posts.
wp.customize( 'about_us_video_setting', function( setting ) {
    setting.bind( function( url ) {
        $('.embed-responsive-item').attr('src',url);
    });
});

} )( jQuery );

Just want to clarify as I did not find any documentation. Is it a criteria to use selective refresh to show edit shorcuts?

from edit shorcuts I mean this pencil icon enter image description here which takes you to the desired location to edit.

1

There is a simple way to do this by using __return_false . The downside is you get a double refresh as it checks for a partial and then returns "false" which results in a full refresh. This is problematic if you are using javascript only to show a "realtime" preview. In that case, you'd have to go with Weston Ruter's solution.

If you are not actually using a postMessage preview and just want the shortcut to show up, then it is not a big deal as you need the full refresh anyway.

I am not sure why they haven't built in these partial edit shortcuts for those using javascript only.

In kirki:

'transport' => 'postMessage',    
'partial_refresh' => array(
            'about_us_video_setting' => array(
                'selector' => '#youtube-video',
                'render_callback' => '__return_false'
            )
        )

Standard:

$wp_customize->get_setting( 'about_us_video_setting' )->transport   = 'postMessage';

$wp_customize->selective_refresh->add_partial( 'about_us_video_setting', array(
            'selector' => '#youtube-video',
            'render_callback' => '__return_false',
        ) );
  • yes that great.. buy as you already figured it out the issue of double refresh and the pig icon that appears during refresh... it really funny for a very simple thing i have to follow the Weston Ruters guideline which is quite a long task for me.. – Taj Khan Nov 24 '17 at 13:04
  • @Taj Khan you can get rid of the Kirki "pig" icon easily, which helps quite a bit with how the refresh looks. function kirki_demo_configuration_sample_styling( $config ) { return wp_parse_args( array( 'description' => esc_attr__( 'The theme description.', 'kirki' ), 'disable_loader' => true, ), $config ); } add_filter( 'kirki/config', 'kirki_demo_configuration_sample_styling' ); Old kirki site config info – Alison Nov 24 '17 at 20:35
0

What you can to do is extend wp.customize.selectiveRefresh.Partial in JavaScript to create a custom Partial type that overrides the refresh behavior to apply a JS-based live preview instead of doing an Ajax call to do a partial refresh request.

You can refer to an example in the Customize Widget Sidebar Meta plugin, specifically in the sidebar_meta_background_color partial type.

So if you register partials with this sidebar_meta_background_color type then they'd use this JS subclass with the overridden refresh method.

  • As i am not using any sidebars here, the solutions is not working with me.. my theme consists of mostly thememods. Can you tell me is it a criteria to use selective refresh if i want to show the edit icon? or do you have anything related to Kirki.. – Taj Khan Sep 29 '17 at 4:49
  • 1
    The example is to show you how to put your own JS code in the refresh method (line 40). By extending the partial (line 6), you have to modify the code. – David Lee Sep 29 '17 at 12:35

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.