Creando un bloque personalizado con Genesis Custom Blocks

Si hace unos días echábamos un vistazo a los nuevo plugins de StudioPress, Genesis Blocks y Genesis Custom Blocks, hoy vamos a ver un ejemplo paso a paso de cómo usar el segundo para crear un bloque personalizado para nuestra web o la de un cliente, simplificándole la vida con la opción de añadir algún tipo de contenido de forma sencilla, dándole los campos a rellenar y el diseño con que va a mostrarse.

Nota: En este tutorial tenéis otro ejemplo de cómo crear una tabla de precios como bloque personalizado con Block Labs, la versión anterior del plugin que vemos aquí y que os funcionará igual.

Descripción del bloque

Se trata un bloque personalizado para añadir un módulo que muestre un webinar, es decir, un video de youtube con alguna información adicional:

• Título del directo
• Fecha
• Código del video
• Imagen previa (si no hay se cogerá automáticamente la previa de youtube)
• Descripción
• Opción para restringir video a usuarios que hayan iniciado sesión.

Además, para la reproducción del video se añadirá un script que lo abra en una ventana modal:

Paso 1: Crear el bloque en Genesis Custom Blocks

Una vez instalado Genesis Custom Blocks (para este ejemplo la versión gratuita del plugin nos sirve perfectamente), podremos ir a crear la estructura del bloque desde el menú Custom Blocks -> Add New

Escogeremos el nombre del bloque, y rellenaremos las propiedades básicas en la caja de la derecha:

• Slug: el nombre interno que lo identificará
• Icono
• Categoría: podremos escoger en que categoría de bloques aparecerá en el editor
• Keywords: palabras clave con la que podrá salir si alguien busca un bloque.

Una vez rellenadas las propiedades principales, podremos crear los campos necesarios para el bloque.

(Si habéis utilizado alguna vez Advanced Custom Fields, la interfaz os será muy familiar, ya que funciona de forma similar)

En este caso los campos creados serán:

• Título
• Fecha (el tipo de campo es texto, ya que todavía no está disponible un tipo date en Genesis Custom Blocks)
• Código de video de youtube
• Resumen
• Imagen destacada
• Restringido: un checkbox para indicar si queremos mostrar el webinar a todos los usuarios o sólo los que han iniciado sesión.

Paso 2: crear los archivos PHP y CSS necesarios.

Éste es quizás el paso más complicado porque requiere tocar algo de código, pero en la documentación oficial está explicado en detalle.

Una vez creado el bloque, vamos a tener que crear la carpeta y archivos donde añadiremos la plantilla de cómo se va a mostrar y los estilos que queremos darle, para ello vamos a:

1- Crear una carpeta dentro de nuestro tema / tema hijo llamada ‘blocks’

Dentro, tenemos dos opciones:

• Crear una carpeta con el slug del bloque y dentro el archivo block.php
  o
• Crear directamente en la carpeta ‘blocks’ el archivo php con el nombre del bloque.

Es decir, en el ejemplo que estamos mirando tendríamos dos opciones:

• / tema / blocks / webinar / block.php
• / tema / blocks / block-webinar.php

La diferencia es básicamente de organización, ya que si vamos a crear varios bloques, nos quedará más ordenado si creamos una carpeta para cada uno, y dentro el php y el css correspondiente:

• / tema / blocks / webinar / block.php
• / tema / blocks / webinar / block.css

2- Crear el archivo blocks.php

Una vez tengamos la estructura de carpetas preparada, crearemos el archivo php que contendrá el html y php necesario para mostrar el bloque, teniendo en cuenta que:

• block_field (‘nombre-campo’) -> Nos sirve para mostrar el valor del campo
• block_value ( ‘nombre-campo’) -> Nos devuelve su valor.

La diferencia es básica porque hay campos que no necesitamos mostrar sino sólo saber su valor.

En una versión sencilla de este bloque, el php podría ser:

<div class="esl-webinar-block">
<h3><?php block_field( 'titulo-webinar' ); ?></h3>
<p class="fecha"><?php block_field( 'fecha-webinar' ); ?></p>
<?php
$previa = block_value( 'imgprevia');
$codigo = block_value( 'codigo-video');
if($codigo != '') {  
  if($previa!='') { ?> 
   <img src="<?php block_field( 'imgprevia' ); ?>" id="previewvideo" /> 
   <?php } else { ?> 
   <img src="http://img.youtube.com/vi/<?php block_field( 'codigo-video' ); ?>/maxresdefault.jpg" id="previewvideo" /> 
   <?php } ?>
 <iframe src="https://www.youtube.com/embed/<?php block_field( 'codigo-video' ); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" id="ifrmVideo"></iframe> 
<?php } ?>
<div class="review"><?php block_field( 'resumen' ); ?></div>
</div> 

Lo que hacemos en le código es recoger los valores de los diferentes campos, mostrar el título y la fecha y revisar que haya un código de video insertado y en ese caso mostrar el iframe.

Para la imagen, verificamos si han insertado una imagen personalizada, y si es así la mostramos. En caso de que no haya ninguna, buscamos la preview de youtube, que se puede cargar automáticamente desde la url img.youtube.com/vi/CODIGO-VIDEO/maxresdefault.jpg

3 – Crear los estilos en block.css

Como hemos visto, al crear el archivo php, definimos la estructura html del bloque y podemos añadir las clases necesarias. Una vez lo tenemos, crearemos el block.css para añadir los estilos correspondientes.

.esl-webinar-block 
{
 background:#f7f7f7; 
 padding: 20px 40px; 
 margin-bottom: 20px;
}
.esl-webinar-block img 
{ 
 width: 100%; 
 margin: 20px auto; 
 cursor: pointer;
}
.esl-webinar-block .fecha 
{ 
 font-size: 15px; 
 margin: 5px;
}
.esl-webinar-block .review 
{ 
 font-size: 15px; 
 padding: 20px;
} 

Con unos pocos estilos, tendremos listo el bloque, que los aplicará tanto en el editor como el front-end:

Paso 3: comprobar y añadir funcionalidades

Una vez tengamos lista una estructura básica y sus estilos correspondientes, comprobaremos en el editor que todo funciona y se muestra correctamente, y si es así, podemos seguir avanzando añadiendo algunas funcionalidades extra.

• Restringido: comprobaremos el valor del checkbox y en caso que sea verdadero revisaremos que el usuario haya iniciado sesión, y en caso contrario mostraremos un mensaje de que el contenido está restringido a usuarios registrados.
• Ventana modal: en lugar de mostrar y reproducir directamente el video, colocaremos sólo la imagen y el video en una capa modal, que se mostrará al hacer clic en la previa.

Lo primero es sencillo, recogeremos el valor del campo «restringido» y añadiremos un condicional al php

$restringido = block_value( 'restringido');

if($restringido && !is_user_logged_in() ) {...}

Para la ventana modal vamos a tener que añadir javascript, lo que haremos llamando a un archivo esl-scripts.js, guardado en una subcarpeta de blocks/js/:

<?php
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/blocks/js/esl-scripts.js', array( 'jquery' ),'',true );
?>

En ese archivo añadiremos el código para mostrar la ventana modal al hacer click en la imagen y ocultarla al clicar a fuera, recargando el origen del iframe para parar el video (sino se ocultaría la ventana modal pero el video continuaría reproduciéndose)

Como ves, el bloque es bien sencillo, y es sólo un ejemplo de como facilitar al cliente que ha de introducir un tipo de contenido de forma repetitiva y dándole opciones adicionales a las que un bloque nativo reutilizable no llega.

Así quedarían los tres archivos con las opciones que hemos añadido:

<div class="esl-webinar-block">
<h3><?php block_field( 'titulo-webinar' ); ?></h3>
<p class="fecha"><?php block_field( 'fecha-webinar' ); ?></p>
<?php
$previa = block_value( 'imgprevia');
$restringido = block_value( 'restringido');
$codigo = block_value( 'codigo-video');
if($codigo != '') {
    if($restringido && !is_user_logged_in() ) {
        echo "Este contenido está restringido a usuarios registrados.";
    } else {
    
        if($previa!='') { ?>
            <img src="<?php block_field( 'imgprevia' ); ?>" id="previewvideo" alt="webinar" /> 
        <?php
        } else { ?>
        
            <img src="http://img.youtube.com/vi/<?php block_field( 'codigo-video' ); ?>/maxresdefault.jpg" id="previewvideo" alt="webinar" /> 
        <?php  } ?>
    <div id="videoModal" class="modal">
    <div class="modal-content">
    <iframe src="https://www.youtube.com/embed/<?php block_field( 'codigo-video' ); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" id="ifrmVideo"></iframe>
    <span class="close" onclick="cerrarVideo();">&times;</span>
    </div>
    </div>
<?php } ?>
<div class="review"><?php block_field( 'resumen' ); ?></div>
</div> 
<?php 
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/blocks/js/esl-scripts.js', array( 'jquery' ),'',true );
}
?>

.esl-webinar-block {
    background:#f7f7f7;
    padding: 20px 40px;
    margin-bottom: 20px;
}
.esl-webinar-block img {
    width: 100%; 
    margin: 20px auto;
    cursor: pointer;
}
.esl-webinar-block .fecha {
    font-size: 15px; 
    margin: 5px;
}
.esl-webinar-block .review {
    font-size: 15px;
    padding: 20px;
}
/* ------------------------------------------------ */
/* VENTANA MODAL VIDEO*/
/* ------------------------------------------------ */
/* ------------------------------------------------ */
 
 .modal {
    display: none;  
    position: fixed;
    z-index: 1;  
    left: 0;
    top: 0;
    width: 100%;  
    height: 100vh; 
    min-height: 500px;
    overflow: auto;  
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
  }
   
  .modal-content {
    background-color: #000;
    margin: 5% auto;  
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    height: 100vh;
    text-align: center;
  }
  
  .modal iframe {
    border: none;
    margin: 50px auto 0 auto;
    width: 700px;
    height: 500px;
    max-height: 100vh;
 }
 @media only screen and (max-width: 768px) {
    .modal iframe {
        width: auto;
        height: 100vh;
        margin: 10px auto;
    }
}

var previewvideo = document.getElementById('previewvideo');
var modal = document.getElementById("videoModal"); 
var video = document.getElementById("ifrmVideo");  
var srcVideo = video.getAttribute("src", video);

previewvideo.onclick = function(event) {
    jQuery('#videoModal').toggle('slow');
}
 
function cerrarVideo() {
  video.setAttribute("src", srcVideo);
  jQuery('#videoModal').toggle('slow');
}
 
window.onclick = function(event) {
  if (event.target == modal) { 
    video.setAttribute("src", srcVideo);
    jQuery('#videoModal').toggle('slow');
  }
} 

Este es un ejemplo muy sencillo, pero nos puede servir de base para empezar y a partir de aquí preparar cosas muy chulas para nuestra web o las de nuestros clientes, añadiendo tipos de contenido diferentes y css y javascript para animaciones y efectos en el front.

En otros artículos veremos algún ejemplo más complejo utilizando la versión PRO del plugin o utilizando Advanced Custom Fields, que también nos permite crear bloques personalizados de forma parecida.

Además, en la Zona DPW en breve tendrás este tutorial en video paso a paso y los archivos listo para descargar.