如何在Wordpress Customizer实时预览中停止部分刷新以删除段落中断？

Question

I have added my own settings to the Wordpress customizer and set it up so that it live previews using the "postMessage" method. It is working almost perfectly apart from when I edit a field linked to paragraph text, the preview doesn't show line breaks in the paragraphs. However this is temporary, once the customizer is closed or the page is refreshed the paragraph gaps come back.

I am defining the Customizer sections in the customizer.php using the following code:

// About Section Text
$wp_customize->add_setting( 'about__text' , array(
    'default'   => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, odit unde magnam dolores quasi voluptas, impedit a nam inventore atque eaque nobis possimus officiis deleniti quisquam animi deserunt ad ipsa sapiente illo?',
    'transport' => 'postMessage',
) );

// About Section Text (CONTROL)
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'about__text', array(
    'label'      => __( 'About Section Content:', 'mytheme' ),
    'section'    => 'edit__homepage--section',
    'settings'   => 'about__text',
    'priority'   => 3,
    'type'       => 'textarea'
) ) );

I am displaying the above theme mod in my index.php file using the following code:

    <div class="about__text">
      <?php echo wpautop(get_theme_mod('about__text')); ?>
    </div>

Here's my jquery:

( function( $ ) {
    wp.customize( 'about__text', function( value ) {
        value.bind( function( newVal ) {
            $( '.about__text' ).html( newVal );
        } );
    } );
} )( jQuery );

I've tried experimenting with different jquery objects such as text() and contents() but these either have the same issue or don't work at all.

Doe anyone know if there's a way I can get the javascript preview to honour the paragraph styles? Maybe like a javascript version of wpautop() ?

Answer 1

You can use selective refresh like this. Values are rendered server side so no need to extra JS. And since only selected wrapper element is refresh, it is more efficient than full page reload in Customizer. In the following example content only in .about__text is refreshed. Since rendering is done server side, no need to look for JS alternative of wpautop function. I believe this would be one alternative for your problem mentioned in the question.

function wpso_customize_register( $wp_customize ) {
    $wp_customize->selective_refresh->add_partial(
        'about__text',
        array(
            'selector'        => '.about__text',
            'render_callback' => function(){
                echo wp_kses_post( wpautop( get_theme_mod('about__text') ) );
            },
        )
    );
}
add_action( 'customize_register', 'wpso_customize_register' );