Cuando le enseñamos al algún cliente el funcionamiento del nuevo editor de WordPress, Gutenberg, muchos se sorprenden de la facilidad para añadir bloques con diferentes funcionalidades implemente seleccionándolos de una lista. Pero siempre llega un punto en el que preguntan: ¿y no existe un bloque con el que pueda hacer una sección de testimonios?. ¿O que un bloque con un CTA imagen y texto en una disposición concreta?. Y ahi es cuando vemos la necesidad de crear un bloque personalizado para Gutenberg que nos permita cubrir ciertas necesidades.
Y podríamos hacerlo desde cero si tenemos ciertos conocimientos de Javascript. Por suerte, disponemos de varios complementos en el repositorio de plugins de WordPress con los que, de forma visual y con ciertos conocimientos de de HTML y CSS podemos llegar a construir nuestros propios bloques de forma sencilla. Y eso es lo que vamos a hacer hoy gracias a Lazy Blocks.
Como siempre, antes de meternos de lleno en la creación del bloque personalizado, decidamos que es lo que queremos hacer. Personalmente, me he decidido por montar un bloque de testimonios, con diferentes apartados. Veamos como hacerlo desde cero.
Diseñando nuestro bloque personalizado de testimonios
Me he ido a Affinity Designer, mi programa de edición vectorial favorito, para tener una primera aproximación de cada uno de los elementos que voy a tener, y su disposición. Es recomendable hacer este primer boceto, ya sea en papel o en digital, para tener una idea precisa de lo que queremos de antemano. Esto nos ahorrará mucho tiempo después.
Podéis ver que es algo sencillo, ya que no queremos construir un bloque muy complejo en este primera vez. Ya tendremos soltura y haremos verdaderas piruetas con los bloques. Una vez tenemos claro nuestro diseño, pasemos a Lazy Blocks y empecemos a trabajar dentro de WordPress.
Creando nuestro bloque personalizado en Lazy Blocks
En primer lugar, nos vamos a la sección de Lazy Blocks dentro del panes de administración de WordPress, y clicaremos en Añadir nueva para crear nuestro primer bloque. Esta nueva ventana tiene una interfaz similar a la de Gutenberg, por lo que si estáis acostumbrados a trabajar con él, no tendréis muchos problemas en ubicaros con cada uno de los apartados.
Nos fijamos en el inspector situado en el lateral derecho, que donde empezaremos a introducir la información general del bloque que queremos construir. Le daremos tanto un título como un slug con el que sea fácil reconocerlo. También podemos añadir un icono entre las decenas que nos ofrece este plugin, para que nuestro bloque tenga una buena presencia.
En la parte de categoría, designamos en que apartado queremos que aparezca dentro de los designados por Gutenberg. En nuestro caso, podemos considerarlo como un elemento de diseño. Si el bloque va a ser usado por otras personas, es importante agregarle una descripción que ayude a saber que hace el bloque.
Por último, en la sección de Condition dentro del inspector, podemos decidir si este bloque se podrá usar en todo tipo de entradas y páginas, o estará restringido solo a algún tipo de plantilla. Esto es muy útil si creamos un bloque muy específico para usar solo en cierto tipo de página que use una plantilla. Así, nos aseguramos que no pueda usarse en ningún otro lugar de la web.
Una vez terminada esta parte, entremos a construir nuestro bloque personalizado.
Añadiendo los campos de nuestro bloque
Nuestro bloque personalizado de testimonios está compuesto por cuatro campos diferentes, en este orden de aparición: frase del testimonio, imagen del autor del testimonio, nombre del autor del testimonio, y profesión del autor del testimonio. En resumen, tenemos tres campos de textos y uno de imagen. Algo sencillo para empezar.
Y cada uno de estos cuatro campos son los que debemos introducir como Controls dentro de Lazy Blocks. Clicaremos en + Add Control para añadir un nuevo campo, y veremos como cambia nuestro inspector en la parte derecha. Veamos parte por parte su funcionamiento:
- Label – es el título que tendrá el campo. Por ejemplo, nosotros le pondremos a este primero Frase del testimonio. Como siempre, es importante elegir un título que sea descriptivo para que no haya lugar a equivocaciones.
- Name – este campo se nos rellenadá por defecto según lo que hayamos introducido en el anterior. Esta parte es importante, ya que es la que vamos a utilizar en nuestro HTML más adelante.
- Type – aquí viene lo importante, y es que con lo que designaremos que tipo de elemento tenemos entre manos. Para la frase del testimonio, como sabemos que es un texto que puede tener cierta longitud, elegiremos Text Area. Para la imagen del testimonio, usaremos la opción Image. Y los otros dos campos que nos quedan, al ser con una longitud menor, con Text tendremos más que suficiente. En esta parte conviene que exploréis un poco para ver la cantidad de opciones disponibles a la hora de crear vuestro bloque: campos para introducir emails, selector de color, URL, galerías de imágenes, archivos…
- Help text – muy importante si el bloque que estamos creando lo van a usar terceras personas. Aquí podemos escribir un texto que explique que es lo que hace este Control en particular, o si es una imagen, podemos escribir la resolución recomendada que debería tener.
- Placement – podemos elegir si queremos que las opciones de este Control, como el campo para introducir el texto, o desde donde subiremos la imagen, aparezca en la parte del contenido del editor de Gutenberg (Content), en el panel lateral derecho (Inspector), en ambos, o que permanezca oculto.
Estos campos varían según el Type que hayamos seleccionado. Si es un texto, podemos agregar un placeholder o una limitación de caracteres. O si es para subir archivos, se puede designar que tipo de extensión de archivos queremos que se puedan subir.
Para nuestro bloque personalizado de testimonios, nos queda algo así:
Insertar un poco de HTML al bloque
Ahora, pasaremos a agregar el HTML, que nos servirá tanto para decidir el orden de cada uno de las secciones de nuestro bloque, como para darle estilo de forma posterior con CSS.
Como dijimos antes, tomaremos el Name de cada uno de nuestros Controls. Una vez los tenemos, vemos que justo debajo de nuestros Controls tendremos una sección llamada Código. En la pestaña Frontend HTML es donde empezaremos a escribir nuestro código. Aquí, debemos introducir cada uno de los Names que hemos usado, con dos llaves de apertura y de clausura. Tendremos algo parecido a este código:
{{frase-testimonio}}
{{imagen-testimonio.url}}
{{autor-testimonio}}
{{profesion-autor-testimonio}}Esto sería suficiente, ya que le estaremos diciendo todos los elementos que queremos que se vean. Pero si introducimos algo de HTML, lo tendremos más fácil para darle estilo. Si no estás muy al día con este lenguaje, te recomendamos leer nuestro artículo de introducción a HTML, que seguro te resolverá muchas dudas.
Lo que haremos será crear un contenedor general donde va nuestro bloque testimonio, y le daremos una clase a cada uno de sus elementos. Este sería el código HTML final:
<div class="testim-container">
<p class="testim-content">{{frase-testimonio}}</p>
<img class="textim-img" src="{{imagen-testimonio.url}}" />
<p class="testim-author">{{autor-testimonio}}</p>
<p class="testim-job">{{profesion-autor-testimonio}}</p>
</div>Ya solo nos queda un paso más para finiquitar nuestro bloque: aplicar CSS para que tenga el aspecto que vamos buscando.
A darle estilo a nuestro bloques
El código CSS que vamos a usar es muy básico, pero si tienes alguna duda, puedes consultar nuestro artículo sobre CSS para resolver cualquier consulta si eres iniciado. Simplemente, lo que vamos a hacer es aplicar un gradiente de color al fondo del bloque, dar estilo a los textos y que la imagen tenga un marco circular. Este sería el CSS que necesitamos para ello:
.testim-container {
padding: 30px;
max-width: 500px;
border-bottom: 5px solid #159de2;
background: #485563; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #29323c, #485563); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.testim-container .testim-content {
font-size: 16px;
font-style: italic;
color: #ffffff;
text-align: center;
}
.testim-container .testim-img {
margin: 20px auto;
max-width: 50%;
border-radius: 50%;
border: 5px solid #ffffff;
}
.testim-container .testim-author {
margin-bottom: 10px;
font-size: 26px;
color: #ffffff;
text-align: center;
}
.testim-container .testim-job {
margin-bottom: 5px;
color: #159de2;
font-weight: 700;
text-align: center;
}Con esto, ya tendríamos el bloque de testimonios completamente configurado. Aunque pueda parecer un proceso largo, lo agradecemos cuando no tengamos que montar uno a uno cada uno de los elementos de este tipo de bloques.
Y ya podemos usar nuestro bloque en Gutenberg
Ya solo nos quedaría crear o editar una nueva entrada o página, buscar nuestro bloque, y esto es lo que nos debería aparecer:
Tan fácil ahora como rellenar los campos de texto, elegir una imagen, y tendríamos todo listo.
Por supuesto, este bloque podemos usarlo dentro de otros bloques, como por ejemplo el de columnas, por si queremos ver varios testimonios en una misma fila.
Con estos conceptos básicos, podemos llegar a crear casi cualquier tipo de bloque para Gutenberg sin necesidad de escribir una solo línea de Javascript. Aparte de Lazy Blocks, existen otros maquetadores visuales de bloques para Gutenberg como Block Lab o Advanced Custom Fields. Os recomendamos que le echéis un vistazo, ya que tienen un funcionamiento similar, y os quedéis con el que os sintáis más cómodos.
Como siempre, tenéis abiertos los comentarios ante cualquier duda, sugerencia o añadido que nos queráis hacer. Esperamos que os haya ayudado este artículo, y que podáis empezar a crear vuestros propio bloques personalizados para Gutenberg
