¿Cómo implemento la actualización selectiva con una configuración de personalizador?

Tengo una sección en una plantilla de página en el tema que estoy creando que muestra contenido basado en una página que el usuario selecciona en el personalizador usando el control de páginas desplegables. En este momento, solo está utilizando el transporte de actualización predeterminado estándar, pero dado que es un poco pesado recargar todo el iframe, me preguntaba si sería posible usar la nueva función de actualización selectiva. Pero no estoy seguro de cómo implementarlo. Alguien sabe si esto es posible y, de ser así, ¿cómo hacerlo?

Aquí está el código en mi plantilla de página que muestra el contenido:

<?php if ((get_theme_mod( 'intro_page' )) != '') {

$intro_id = get_theme_mod( 'intro_page' );

$intro_header = get_the_title( $intro_id );

$intro_excerpt = get_the_excerpt( $intro_id );

$intro_link = get_the_permalink( $intro_id );

$intro_linktext = get_post_meta( $intro_id, 'emm_cta_text', true );

echo '<h1>' . esc_html($intro_header) . '</h1>' . '<p>' . esc_html($intro_excerpt) . '</p>';

if( ! get_post_meta( $intro_id, 'emm_cta_text', true ) ) {
echo '<p><a class="cta" href="' . esc_url($intro_link) . '">Learn More</a></p>';
}else{
echo '<p><a class="cta" href="' . esc_url($intro_link) . '">' . esc_html($intro_linktext) . '</a></p>';
}
} ?>

Aquí está el código para la configuración en el personalizador:

$wp_customize->add_setting( 'intro_page' , array(
'sanitize_callback' => 'absint',
) );

$wp_customize->add_control( 'intro_page', array(
'label'    => __( 'Page to use for intro section', 'veritas' ), 
'section'  => 'intro',
'settings' => 'intro_page',
'type'     => 'dropdown-pages',
'priority' => 1
) );

Cree una función para generar el código de plantilla actualizado de forma selectiva

(Envolví el HTML <div class="cta-wrap">para que sea más fácil apuntar a este bloque particular de marcado).

function wpse247234_cta_block() {
    if ( ( get_theme_mod( 'intro_page' ) ) != '' ) {
        $intro_id       = get_theme_mod( 'intro_page' );
        $intro_header   = get_the_title( $intro_id );
        $intro_excerpt  = get_the_excerpt( $intro_id );
        $intro_link     = get_the_permalink( $intro_id );
        $intro_linktext = get_post_meta( $intro_id, 'emm_cta_text', true );

        echo '<div class="cta-wrap">';
            echo '<h1>' . esc_html( $intro_header ) . '</h1>' . '<p>' . esc_html( $intro_excerpt ) . '</p>';

            if ( ! get_post_meta( $intro_id, 'emm_cta_text', true ) ) {
                echo '<p><a class="cta" href="' . esc_url( $intro_link ) . '">Learn More</a></p>';
            } else {
                echo '<p><a class="cta" href="' . esc_url( $intro_link ) . '">' . esc_html( $intro_linktext ) . '</a></p>';
            }
        echo '</div>';
    }
}

Actualice su plantilla con una llamada a la función recién creada anterior:

wpse247234_cta_block();

Configurar el personalizador

function wpse247234_customize_register( $wp_customize ) {

    $wp_customize->add_section( 'intro', array (
            'title'    => __( 'intro', 'text-domain' ),
            'priority' => 999,
    ) );

    $wp_customize->add_setting( 'intro_page' , array(
            'sanitize_callback' => 'absint',
            'transport' => 'postMessage'
    ) );

    $wp_customize->add_control( 'intro_page', array(
            'label'    => __( 'Page to use for intro section', 'text-domain' ), 
            'section'  => 'intro',
            'settings' => 'intro_page',
            'type'     => 'dropdown-pages',
            'priority' => 1
    ) );

    $wp_customize->selective_refresh->add_partial( 'intro_page', array(
        'selector'            => '.cta-wrap',
        'container_inclusive' => true,
        'render_callback'     => 'wpse247234_cta_block',
        'fallback_refresh'    => false, // Prevents refresh loop when document does not contain .cta-wrap selector. This should be fixed in WP 4.7.
    ) );
}
add_action( 'customize_register', 'wpse247234_customize_register' );

Estilizar el elemento a medida que se actualiza

Mientras que el parcial es refrescante, el elemento afectado tendrá la clase customize-partial-refreshingagregada. Puedes peinarlo así:

.cta-wrap.customize-partial-refreshing {
    // styles...
}

Enlaces Útiles

• Actualización selectiva en el personalizador
• Opciones de tema: la API del personalizador
• Echar un vistazo a cómo Twenty Sixteen v1.3 maneja la actualización selectiva fue útil para poner este ejemplo en funcionamiento.