Hacer un Pop up con bloques en WordPress

2 min 08/12/2021

Hoy os voy a hablar de como hacer un Pop up con bloques reutilizables de WordPress sin despeinaros. A mí me la soplan bastante los Pop up, de hecho los odio muchísimo por temas de accesibilidad y porque me toca los pies que esté leyendo algo y me aparezca en el medio de la pantalla un pegote vendiéndome cosas que probablemente no me interesen nada, pero a los clientes les mola mazo el rollo de los Pop ups. Yo creo que cobran por Pop ups 🤭.

Como es algo con lo que me encuentro muy a menudo, tengo un pequeño script para poner Pop ups como hablo en ese post. Pero en ese script el código HTML del post lo hay que meter a cañón. Para mí tampoco es que sea mucho problema, pero luego de cara a modificar por parte de los clientes es un coñazo, seamos realistas. Es por ello que para meter el HTML en ese script desde hace una temporada uso los bloques reutilizables. No me voy a meter ahora con lo que es crear el Pop up en sí, para eso está el otro post, y me voy a centrar en como meter el bloque reutilizable.

Hacemos el bloque reutilizable

En primer lugar, vamos a hacer el bloque reutilizable. En el cómo no me voy a entrar, ya que es como se haría cualquier página de bloques. Vamos a ver el dónde más bien.

Para acceder a los bloques reutilizables nos vamos a una entrada cualquiera de un post, pulsamos en los 3 puntitos de la zona superior derecha y pulsamos en Gestionar bloques reutilizables. Lo vemos en la siguiente imagen:

También podemos acceder a la página de gestión de los bloques reutilizables con la siguiente url: https://davidviña.es/wp-admin/edit.php?post_type=wp_block (obviamente, sustituye davidviña.es por tu dominio 😉).

En esa página pulsa en añadir nuevo y ya tienes el magnífico editor de WordPress para crear el Pop up que desees con los bloques que tengas instalados. Ahora ya es cosa tuya lo que quieras meter en el Pop up, pero ojo, que a mí probablemente no me gustará 😜.

Metemos el bloque reutilizable en nuestro Pop up

Partimos del código que hay en el post de crear un Pop up y lo añadimos en el footer de nuestro WordPress. Primero tenemos que coger el ID del bloque reutilizable. Para ello nos fijamos cuando estamos editando el bloque en la barra del navegador y ahí tenemos el ID como puedes ver en la siguiente imagen:

Una vez que tenemos el ID localizado cogemos el contenido del bloque con get_post( id_block )->post_content y luego cogemos HTML del bloque con do_blocks y hacemos un echo de ese HTML. Lo puse todo rapidillo, pero tranqui que te paso aquí el código entero:

/**
 * Insertar el html del pop up en el footer por código.
 */
function soivigol_insert_popup() {
    $html = do_blocks( get_post( 3344 )->post_content );
    ?>
    <div class="soivigol-popup">
       <div class="soivigol-popup-inner">
          <?php echo wp_kses_post( $html ); ?>
       <span class="soivigol-close">&times;</span>
       </div>
    </div>
    <?php
}
add_action( 'wp_footer', 'soivigol_insert_popup' );

Ahora con el CSS y JS del otro post, ya te debería quedar un bonito y molesto Pop up 😁.

Conclusión

Repito, a mí no me molan, pero, fuera bromas, entiendo que son herramientas muy poderosas para marketing. Y como podéis ver, crear un Pop up con los bloques de WordPress es muy sencillo y no necesitamos más plugins para ello 😉