Cómo crear un complemento de bloque simple de Gutenberg

¿No todos amamos WordPress? La plataforma ha disfrutado de un gran éxito desde sus inicios, y los desarrolladores agregan nuevas funciones constantemente. Una de las características más notables en los últimos tiempos es el editor de bloques de WordPress, cuyo nombre en código es Gutenberg .

Gutenberg ofrece a los usuarios de WordPress una nueva y emocionante forma de publicar contenido y personalizar su sitio. Es increíblemente fácil de usar, lo cual es una gran noticia tanto para principiantes como para desarrolladores. Si está utilizando la última versión de WordPress, ya conoce el editor de bloques y el concepto de bloques.

De forma predeterminada, el editor de bloques de WordPress viene con algunos bloques que le permiten incluir texto, imágenes, citas, audio, videos, incrustaciones, etc. Además de eso, hay un montón de complementos de Gutenberg que le permiten ampliar el editor sin sudar.

Aún así, es posible que tenga una necesidad específica que lo impulse a crear sus propios bloques personalizados. Aquí es donde entra la publicación de hoy. En un par de párrafos, aprenderá exactamente cómo crear bloques de Gutenberg personalizados para satisfacer sus necesidades específicas.

Sin más preámbulos comencemos ya que hay mucho que aprender.

¿Qué son los bloques, de todos modos?

Si eres el principiante perfecto, probablemente te estés preguntando de qué se trata este asunto de Gutenberg. Lo sé, estaba bastante confundido cuando se presentó a Gutenberg. Pero nadie tiene la culpa, todos estábamos acostumbrados al Editor Clásico de que hacer el cambio era incómodo al principio.

Aún así, el editor de bloques de WordPress está aquí para quedarse, nos guste o no. Es precisamente por eso que debe aprender todo lo que pueda sobre Gutenberg (y todo lo que conlleva) para aprovecharlo al máximo.

Los bloques tratan los párrafos, encabezados, medios e incrustaciones como componentes que, cuando se unen, forman el contenido almacenado en la base de datos de WordPress, reemplazando el concepto tradicional de texto de forma libre con medios incrustados y códigos abreviados. – Manual del editor de bloques

En el pasado, los usuarios de WordPress confiaban en texto de forma libre y códigos abreviados para agregar contenido. Gutenberg usa bloques . El nuevo editor le permite usar unidades de bloques para crear diseños ricos y flexibles que son fáciles de administrar. Actualmente, puede usar el editor de bloques para publicaciones y páginas, pero hay planes activos para admitir la edición completa del sitio en el futuro.

Editor de Gutenberg mostrando algunos bloques

Trabajar con bloques hace que la creación de contenido en WordPress sea bastante refrescante. Además, muchos complementos existentes son compatibles con el nuevo editor y vienen con bloques listos para usar que facilitan la adición de contenido de dichos complementos. El editor le permite arrastrar y soltar bloques en una página para que pueda presionar el botón de publicación más rápido.

Al igual que un creador de páginas integrado directamente en WordPress.

Si está familiarizado con los creadores de páginas visuales como Elementor, probablemente esté familiarizado con el concepto de creación de páginas de arrastrar y soltar. Gutenberg es un intento de incorporar completamente la construcción de sitios de arrastrar y soltar en el núcleo de WordPress. No dude en consultar nuestra Guía paso a paso de Gutenberg Builder para WordPress para obtener más información.

Con eso fuera del camino, pasemos a la mejor parte de la publicación de hoy. Aprendamos cómo crear un bloque simple. Puede hacerlo manualmente o usando complementos como Genesis Custom Blocks (anteriormente BlockLab), Lazy Blocks o ACF. Crear bloques personalizados es un poco técnico, así que para los fines de la publicación de hoy, usaremos un complemento.

Cómo crear un bloque personalizado (usando bloques personalizados de Génesis)

Seguir la ruta de los complementos es más fácil, ya que la creación de bloques personalizados de Gutenberg desde cero requiere una buena comprensión de HTML, CSS, PHP y, lo que es más importante, JavaScript. También deberá comprender React, que lanza una bola curva a los principiantes.

Para la siguiente sección, utilizaremos los bloques personalizados de Génesis, que le ofrecen StudioPress y WPEngine, entre otros desarrolladores. La versión gratuita de Genesis Custom Blocks está disponible en el repositorio oficial de WordPress, lo que significa que podemos instalarla dentro del panel de administración de WordPress.

Instalar bloques personalizados de Génesis

Inicie sesión en su panel de administración de WordPress y navegue hasta Complementos > Agregar nuevo , como se muestra a continuación.

A continuación, ingrese "Genesis Custom Blocks" en el cuadro de búsqueda de palabras clave y presione el botón Instalar ahora :

Después de eso, active el complemento para que comience la fiesta.

lo estás haciendo bien

A continuación, vamos a crear un nuevo bloque personalizado. Con fines ilustrativos, creemos una llamada a la acción (CTA) personalizada que agregaremos al final de cada publicación que publiquemos. La mejor parte es que puede reutilizar bloques para ahorrarse la molestia de crear los mismos bloques una y otra vez.

Desde el menú de administración de WordPress, vaya a Bloques personalizados > Agregar nuevo , como se destaca a continuación.

Hacerlo te llevará a la siguiente página donde encontrarás todas las opciones para crear nuestro bloque personalizado (en nuestro caso, un CTA):

Aquí hay algunas palabras para explicar lo que ve en la captura de pantalla anterior. A partir de la parte superior, usted tiene.

Área de edición principal:

• Constructor : probablemente pasará mucho tiempo aquí diseñando su bloque personalizado. El Generador le permite agregar un título, campos, slug, palabras clave, categoría y obtener una vista previa de su bloque personalizado. Aprenderá a agregar campos.
• Editor de plantillas : después de diseñar su bloque personalizado (es decir, agregar varios campos), deberá crear una plantilla de bloque (leer, agregar un poco de código) en el Editor de plantillas . Aprenderemos más cuando diseñemos el CTA.
• Vista previa del editor : esto le permite obtener una vista previa del bloque personalizado dentro del editor de bloques de WordPress.
• Vista previa de front-end : aquí puede obtener una vista previa de cómo se ve el bloque personalizado en su sitio.
• Campos del editor : mostrará los campos en el área de edición principal de una publicación o página (ya sabe, de la misma manera que ve sus publicaciones regulares dentro del editor de WordPress)
• Campos del inspector : mostrará el campo en la barra lateral derecha debajo del inspector de bloques.

Opciones de la barra lateral

• Slug : el slug se autocompleta según el título que le asignas a tu bloque personalizado. Es importante al crear la plantilla de bloque.
• Icono : esta opción le permite agregar un icono a su bloque personalizado.
• Categoría : esto le permite asignar una categoría a su bloque personalizado. Puede categorizar su bloque personalizado usando una de las categorías integradas, o puede crear una categoría completamente nueva.
• Palabras clave : agregue un máximo de tres palabras clave relacionadas con su bloque personalizado para que las personas puedan encontrarlo fácilmente en el selector de bloques.
• Abrir campos de bloque en un modal en lugar de renderizar en su lugar : actívelo si desea abrir campos en un modal. Es útil si tiene un bloque personalizado con muchos campos.
• Tipos de publicaciones: marque las casillas para permitir que su bloque personalizado se muestre en cada tipo de publicación. Por ejemplo, si desmarca Publicaciones, el bloqueo no aparecerá en ninguna publicación.

Creación de un bloque personalizado

Ahora que tiene una mejor comprensión de la interfaz de usuario y de lo que hace cada parte, arremanguémonos y manos a la obra.

En el Generador , asigne a su bloque personalizado un título adecuado. Voy con CTA para este, como se muestra a continuación.

Antes de agregar nuevos campos, agreguemos un ícono, palabras clave y elija una categoría para el bloque personalizado, como se muestra a continuación.

Ese conjunto, vamos a agregar algunos campos a nuestro bloque personalizado. Para nuestro bloque CTA de ejemplo, agregaremos solo tres campos en el siguiente orden: una imagen, algo de texto y un campo de archivo que permite a las personas descargar un libro electrónico imaginario

Adición de campos de bloque

En la sección Campos del editor , haga clic en el ícono Más (+) para agregar el primer campo, como se muestra a continuación.

A continuación, agreguemos un campo de imagen. Desde la barra lateral, establezca el Tipo de campo en Imagen y defina las otras opciones. Además, tome nota del slug (configuré el mío en image-field ) porque lo usaremos al crear la plantilla de bloque. Vea la imagen a continuación.

Después de eso, agregue los campos de texto y archivo de manera similar.

No celebres todavía, queda un paso por recorrer. Cambie al Editor de plantillas > Marcado:

El mío ya tiene un código, pero el tuyo estará en blanco.

Aquí, diseñaremos cómo se ve su bloque personalizado en su sitio. El Editor de plantillas acepta HTML, CSS y los slugs de campo (que debe encerrar entre 2 corchetes). Si necesita usar PHP, puede crear la plantilla utilizando el método de creación de plantillas de PHP.

No te preocupes, es fácil.

Dentro del Editor de plantillas , en la pestaña Marcado (vea la imagen de arriba), agregue la siguiente pieza de marcado HTML (código):

 <div class="cta-block">
<div clase="imagen-cta">
<img src ="{{imagen-campo}}">
</div>
<div class="subir texto">
<h2>{{campo de texto}}</h2>
<a href="{{campo-archivo}}">
<button type="button" class="dwnld">Descargar</button></a>
</div>
</div>

A medida que escribe su marcado HTML, notará que el Editor de plantillas completa automáticamente los slugs de campo (por ejemplo, {{image-field}} ) por usted

A continuación, vaya a la sección CSS para agregar algunos estilos simples.

Puede agregar los estilos que desee, pero esto es con lo que estoy trabajando:

 .cta-bloque {
alineación de texto: centro;
color de fondo: naranja;
ancho: 100%;
altura: automático;
borde: 2px naranja sólido;
}

.dwnld {
color de fondo: negro;
borde: 2px negro sólido;
color verde;
relleno: 5px 10px;
alineación de texto: centro;
pantalla: bloque en línea;
tamaño de fuente: 20px;
margen: 10px 30px;
cursor: puntero;
borde-radio: 2px;

}

¡Y ya está todo listo! Haga clic en Publicar :

Para ver su nuevo bloque personalizado en acción, regrese a su panel de administración de WordPress y navegue a Publicaciones> Agregar nuevo (también funciona con páginas):

Cree una publicación como lo hace normalmente, haga clic en el signo más (+) para agregar un nuevo bloque y elija su nuevo bloque personalizado brillante, como se destaca a continuación.

A continuación, complete su bloque personalizado como desee y publique su publicación:

Ahora, si reviso mi nuevo bloque CTA personalizado en el front-end, veo esto:

¡Mi CTA personalizado está justo ahí! No se preocupe por mis capacidades de diseño; por supuesto, en un escenario de la vida real, querrá dedicar más tiempo a diseñar su bloque. Pero espero que hayas aprendido algo aquí hoy.

Crear bloques personalizados no tiene por qué ser una tarea desafiante con herramientas como Genesis Custom Blocks y Lazy Blocks, entre otras. Eso, además, puede hacer que sus bloques personalizados sean complejos o simples según sus necesidades. Si debe crear bloques personalizados manualmente, tome algunas lecciones de JavaScript. Ayudará

¿Alguna idea o pregunta? Por favor háznoslo saber en los comentarios más abajo.