0

Cuando le mostramos al algún cliente el desempeño del nuevo editor de WordPress, Gutenberg, varios se sorprenden de la simplicidad para agregar bloques con diferentes funciones implemente seleccionándolos de una lista. Pero siempre llega un punto en el que preguntan: ¿y no hay un bloque con el que logre llevar a cabo una parte de testimonios?. ¿O que un bloque con un CTA imagen y texto en una disposición concreta?. Y ahi es cuando observamos la necesidad de hacer un bloque personalizado para Gutenberg que nos permita contemplar algunas pretenciones.

Y tendríamos la posibilidad de llevarlo a cabo desde el princípio si poseemos algunos entendimientos de Javascript. Afortunadamente, disponemos de numerosos complementos en el repositorio de plugins de WordPress con los que, de manera visual y con algunos entendimientos de de HTML y CSS tenemos la posibilidad de llegar a crear nuestros propios bloques de manera simple. Y eso es lo que iremos a llevar a cabo hoy por medio de Lazy Blocks.

Como siempre, antes de meternos de lleno en la construcción del bloque personalizado, decidamos que es lo que deseamos llevar a cabo. En lo personal, me he decidido por montar un bloque de testimonios, con diferentes apartados. Observemos como llevarlo a cabo desde el princípio.

Diseñando nuestro bloque personalizado de testimonios

Me he ido a Affinity Designer, mi programa de edición vectorial preferido, para tener una primera proximidad de todos los elementos que voy a tener, y su disposición. Es aconsejable llevar a cabo este primer boceto, asi sea en papel o en digital, para tener un concepto precisa de lo que deseamos de seguro. Esto nos ahorrará un largo tiempo luego.

Puedes ver que es algo simple, dado que no tenemos ganas crear un bloque muy complejo en este primera oportunidad. Ya vamos a tener soltura y vamos a hacer verdaderas piruetas con los bloques. Una vez poseemos claro nuestro diseño, pasemos a Lazy Blocks y empecemos a trabajar dentro de WordPress.

Creando nuestro bloque personalizado en Lazy Blocks

Antes que nada, nos vamos a la parte de Lazy Blocks dentro del panes de gestión de WordPress, y clicaremos en Agregar novedosa para hacer nuestro primer bloque. Esta novedosa ventana tiene una plataforma de trabajo semejante a la de Gutenberg, por lo cual si estáis familiarizados a trabajar con él, no tendréis varios inconvenientes en ubicaros con todos los apartados.

Nos fijamos en el inspector ubicado en el del costado derecho, que donde empezaremos a ingresar la información general del bloque que deseamos crear. Le daremos tanto un encabezado como un slug con el que sea simple reconocerlo. Además tenemos la posibilidad de agregar un icono entre las decenas que nos da este plugin, para que nuestro bloque tenga una aceptable presencia.

En la parte de categoría, designamos en que apartado deseamos que se muestre dentro de los designados por Gutenberg. En nuestro caso, tenemos la posibilidad de considerarlo como un elemento de interfaz. Si el bloque será utilizado por otra gente, es sustancial sumarle una especificación que ayude a entender que hace el bloque.

Terminando, en la parte de Condition dentro del inspector, tenemos la posibilidad de elegir si este bloque se va a poder utilizar en toda clase de entradas y páginas, o va a estar limitado solo a alguna clase de plantilla. Esto es de gran ayuda si creamos un bloque muy concreto para utilizar solo en cierto tipo de página que use una plantilla. De esta forma, estamos seguros que no logre utilizarse en ningún otro lugar de la web.

Una vez terminada esta parte, entremos a crear nuestro bloque personalizado.

 

Añadiendo los campos de nuestro bloque

Nuestro bloque personalizado de testimonios está conformado por 4 campos diferentes, en este orden de aparición: cita del testimonio, imagen del creador del testimonio, nombre del creador del testimonio, y profesión del creador del testimonio. Resumiendo, poseemos tres campos de contenidos escritos y uno de imagen. Algo simple para comenzar.

Y todos estos 4 campos son los que debemos ingresar como Controls dentro de Lazy Blocks. Clicaremos en + Add Control para agregar un nuevo campo, y observaremos como cambia nuestro inspector en la sección derecha. Observemos 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 elegido. Si es un texto, tenemos la posibilidad de añadir un placeholder o una limitación de letras y números. O si es para subir ficheros, se puede designar que tipo de extensión de ficheros deseamos que se logren subir.

 

Leave a Reply