Cómo crear un complemento simple para Gutenberg Block

¿No todos amamos WordPress? La plataforma ha disfrutado de un gran éxito desde sus inicios, y los desarrolladores agregan constantemente nuevas funciones. Una de las características más notables últimamente es el editor de bloques de WordPress con nombre en código. 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 usa la última versión de WordPress, ya es una familia con un editor de bloques y un concepto de bloque.

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, hay muchos complementos de Gutenberg que le permiten ampliar el editor. sin sudar

Sin embargo, es posible que tenga una necesidad específica que le solicite crear sus propios bloques personalizados. Aquí es de donde viene la publicación de hoy. En unos pocos 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 después de todo?

Si eres un principiante perfecto, probablemente te estés preguntando para qué sirve este asunto de Gutenberg. Lo sé, estaba bastante confundido cuando Gutenberg fue presentado. Pero nadie tiene la culpa, todos estábamos acostumbrados a Editor clásico que hacer el cambio fue incómodo al principio.

Aún así, el editor de bloques de WordPress llegó para quedarse, nos guste o no. Es por eso que necesita 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 una 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 libre y códigos abreviados para agregar contenido. usos de Gutenberg bloques. El nuevo editor le permite usar unidades de bloque 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 de soporte activos edición completa del sitio en el futuro.

bloques de wordpress gutenberg

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 integrar 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.

Excluyendo esto, vayamos a la mejor parte de la publicación de hoy. Aprendamos cómo crear un bloque simple. Puede hacerlo manualmente o con la ayuda de complementos como Bloques de Génesis personalizados (antes BlockLab), Bloques perezososo FCACrear bloques personalizados es un poco técnico, por lo que para los propósitos de hoy usaremos un complemento.

Cómo crear un bloque personalizado (usando bloques Genesis personalizados)

Cambiar a la ruta del complemento es más fácil, ya que crear bloques de Gutenberg personalizados 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 la curva a los principiantes.

Para la siguiente sección, usaremos Genesis Custom Blocks, proporcionado por 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 en el Panel de WordPress.

Instalar bloques de Génesis personalizados

Inicie sesión en su panel de WordPress y vaya a Complementos> Agregar nuevoComo se muestra abajo.

instalar el complemento de génesis de bloques personalizados de wordpress

Luego escriba «Genesis Custom Blocks» en el cuadro de búsqueda de palabras clave y haga clic en Instalar ahora botón:

instalar un complemento para bloques de génesis personalizados

Entonces, activas el plugin para empezar la fiesta.

activar personalizado bloques de génesis

Lo estás haciendo bien 🙂

Luego 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 que no tenga problemas para crear los mismos bloques una y otra vez.

Desde el menú de administración de WordPress, vaya a Bloques personalizados > Agregar nuevocomo destacamos a continuación.

crear un bloque personalizado con bloques personalizados de Génesis

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

Complemento de wordpress de bloques personalizados de génesis

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 unidad personalizada Constructor le permite agregar título, márgenes, márgenes, 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 diferentes campos), deberá crear una plantilla de bloque (leer, agregar algún código) en Editor de plantillasAprenderemos más cuando diseñemos CTA.
  • vista previa del editor – Esto le permite obtener una vista previa del bloque personalizado en el editor de bloques de WordPress.
  • Avance – Aquí puedes ver cómo se ve el bloque personalizado de tu sitio.
  • Editor de vuelos – Mostrará los campos en el área principal para editar una publicación o página (ya sabe, al igual que ve sus publicaciones regulares en el Editor de WordPress)
  • Campos de inspección «Mostrará el cuadro en la barra lateral derecha debajo del inspector de bloques».

Opciones de la barra lateral

  • Caracol – La viñeta se completa automáticamente según el título que le dé a su bloque personalizado. Es importante al crear una 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 nueva.
  • Palabras clave – Agregue hasta tres palabras clave relacionadas con su bloque personalizado para que las personas puedan encontrarlo fácilmente en el bloque de selección.
  • Abrir campos de bloque en modal en lugar de renderizar en su lugar – Activar si desea abrir campos en modal. Útil si tiene un bloque personalizado con muchos campos.
  • tipos de publicaciones – Marque la (s) casilla (s) para permitir que su bloque personalizado aparezca en cualquier tipo de publicación. Por ejemplo, si desmarca Publicaciones, el bloque no aparecerá en ninguna publicación.

Crear un bloque personalizado

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

EN Constructorasigne a su bloque personalizado un título apropiado. Usaré CTA para este como se muestra a continuación.

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

Este conjunto, agreguemos algunos campos a nuestro bloque personalizado. Para nuestro bloque de CTA de muestra, agregaremos solo tres campos en el siguiente orden: imagen, texto pequeño y campo de archivo, que permite a las personas descargar un libro electrónico imaginario 🙂

Agregar campos de bloque

Sobre Editor de vuelos pestaña, haga clic más (+) icono para agregar el primer campo como se muestra a continuación.

Luego agreguemos un campo de imagen desde el conjunto de la barra lateral Tipo de campo a La imagen y definir las otras opciones. Además, preste atención a la babosa (configuré la mía en campo de imagen), porque lo usaremos al crear una plantilla de bloque. Vea la imagen a continuación.

Luego agregue los campos de texto y archivo en un modo similar.

No celebres todavía, queda un paso más. Cambiar a Editor de plantillas> Resaltar:

El mío ya tiene algún código, pero el tuyo estará en blanco 🙂

Aquí diseñaremos cómo se ve tu bloque personalizado de tu sitio Editor de plantillas acepta HTML, CSS y cuadro de campo (que debe poner entre 2 corchetes). Si necesita usar PHP, puede crear la plantilla usando Método de plantilla PHP en lugar de.

No te preocupes, es fácil.

Dentro Editor de plantillasbajo Calificación sección (vea la imagen de arriba), agregue la siguiente parte de la etiqueta HTML (código):

<div class="cta-block">
<div class="cta-image">
<img src ="https://www.wpexplorer.com/create-block-plugin/{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Download</button></a>
</div>
</div>

A medida que escribe su etiqueta HTML, verá Darse cuenta de Editor de plantillas rellena automáticamente los campos (por ejemplo, {image-field}) por ti 🙂

Luego ve a CSS sección para agregar algunos estilos simples.

Puedes agregar los estilos que quieras, pero estoy trabajando en esto:

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}

¡Y tu estas listo! Hacer clic Correo:

Para ver su nuevo bloque personalizado en acción, regrese a su panel de WordPress y vaya a Publicaciones > Añadir nuevo (También funciona con páginas):

Crea una publicación como de costumbre, haz clic en más (+) para agregar un nuevo bloque y elegir su nuevo bloque personalizado brillante como se destaca a continuación.

Luego complete su bloque personalizado de su elección y publique su publicación:

Ahora, si reviso mi nuevo bloque CTA personalizado en la parte delantera, veo esto:

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


Construir bloques personalizados no debería ser una tarea desafiante con herramientas como Genesis Custom Blocks y Lazy Blocks, entre otras. Esto, además, puede hacer que sus bloques personalizados sean complejos o simples según sus necesidades. Si necesita crear bloques personalizados manualmente, consulte algunos tutoriales de JavaScript. Te ayudará 🙂

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *