Как остановить частичное обновление от удаления разрывов абзаца в предварительном просмотре Wordpress Customizer?

Question

Я добавил свои собственные настройки в настройщик Wordpress и настроил их так, чтобы они выполняли предварительный просмотр в реальном времени, используя метод postMessage. Он работает почти идеально, за исключением того, что когда я редактирую поле, связанное с текстом абзаца, предварительный просмотр не показывает разрывы строк в абзацах. Однако это временно, когда настройщик закрывается или страница обновляется, пропуски в абзацах возвращаются.

Я определяю разделы Customizer в customizer.php, используя следующий код:

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

Я показываю вышеупомянутый мод темы в моем файле index.php, используя следующий код:

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

Вот мой jquery:

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

Я пытался поэкспериментировать с различными объектами jquery, такими как text () и contents (), но они либо имеют одинаковую проблему, либо не работают вообще.

Кто-нибудь знает, есть ли способ получить предварительный просмотр javascript для соответствия стилям абзаца? Может быть, как javascript-версия wpautop ()?

Answer 1

Вы можете использовать выборочное обновление, как это.Значения отображаются на стороне сервера, поэтому нет необходимости в дополнительном JS.И поскольку обновляется только выбранный элемент-обертка, это более эффективно, чем полная перезагрузка страницы в Customizer.В следующем примере содержимое только в .about__text обновляется.Поскольку рендеринг выполняется на стороне сервера, нет необходимости искать JS-альтернативу функции wpautop.Я полагаю, что это будет одной из альтернатив для вашей проблемы, упомянутой в вопросе.

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