How to add shortcode support in Customizer live preview. I have implemented the live preview using transport postMessage but, It just reflect the HTML as it is.

I think I need to use selective_refresh to work shortcode in customizer preview.

I have no idea how to get current HTML in selective_refresh.

Check below code snippet.

---

Step: 1 – Add panel, section, setting ( with 'transport' => 'postMessage' ) and control.

/**
 * Add panel
 */
$wp_customize->add_panel( 'my-sample-panel', array(
    'title'    => __( 'Sample Panel', 'next' ),
) );

/**
 * Add section
 */
$wp_customize->add_section( 'my-sample-section', array(
    'title'    => __( 'Sample Section', 'next' ),
    'panel'    => 'my-sample-panel',
) );

/**
 * Add setting
 */
$wp_customize->add_setting( 'my-sample-text-option', array(
    'default'   => '',
    'type'      => 'option',
    'transport' => 'postMessage',
) );

/**
 * Add control
 */
$wp_customize->add_control( 'my-sample-text-option', array(
    'section'        => 'my-sample-section',
    'label'          => __( 'Text / HTML', 'next' ),
    'type'           => 'textarea',
) );

Step: 2 – Customizer customizer-preview.js.

( function( $ ) {

    /**
     * Text / HTML
     */
    wp.customize( 'my-sample-text-option', function( value ) {
        value.bind( function( new_value ) {
            jQuery( '.custom-html-section' ).html( new_value );
        } );
    } );

} )( jQuery );

Step: 3 – Front end HTML

<div class="custom-html-section"></div>

---

Above code snippet replace HTML as it is in the target selector.

I’m tried Partial support by avoiding Step: 2

Partial support

/**
 * Add partial refresh
 */
if ( isset( $wp_customize->selective_refresh ) ) {

    $wp_customize->selective_refresh->add_partial( 'my-sample-text-option', array(
        'selector'            => '.custom-html-section',
        'container_inclusive' => false,
        'render_callback'     => function() {
            return get_bloginfo( 'name', 'display' );
        },
    ) );
}

---

Here, I use the get_bloginfo( 'name', 'display' ) It’s showing the blog name as expected.

But, How can I get the current HTML and from the setting and apply do_shortcode?

Expected like this:

'render_callback'     => function() {
    return do_shortcode( $UPDATED_CONTROL_CONTENTS ); // Expect like this to work shortcode in customizer.
    // return get_bloginfo( 'name', 'display' );
},

/**
 * Add partial refresh
 */
if ( isset( $wp_customize->selective_refresh ) ) {

    $wp_customize->selective_refresh->add_partial( 'my-sample-text-option', array(
        'selector'            => '.custom-html-section',
        'container_inclusive' => false,
        'render_callback'     => function() {

            // Get update data from option `my-sample-text-option` using funcition get_option()
            $options = get_option( `my-sample-text-option` );
            return do_shortcode( $options );

        },
    ) );
}