Cómo crear un complemento de bloque de Gutenberg simple
¿No todos amamos WordPress? La plataforma ha tenido un gran éxito desde sus inicios, y los desarrolladores agregan constantemente nuevas funciones. Una de las características más notables de 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 web. 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 está familiarizado con 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, hay un montón de complementos de Gutenberg que te 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 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.
Tabla de Contenidos
¿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. Esta es precisamente la razón por la 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 inserciones, todos como componentes que, cuando se agrupan, 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 el texto de forma libre y los 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 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 desde estos complementos. El editor le permite arrastrar y soltar bloques en una página para que pueda hacer clic en el botón de publicación más rápido.
Además de un creador de páginas creado 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 creación de sitios web 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, vayamos 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, por lo que para la publicación de hoy, usaremos un complemento.
Cómo crear un bloque personalizado (usando bloques personalizados de Génesis)
Seguir el camino del complemento 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 para los principiantes.
Para la siguiente sección, usaremos Genesis Custom Blocks, 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 el panel de administración de WordPress y navegue hasta Complementos > Agregar nuevoComo se muestra abajo.
Luego escriba «Genesis Custom Blocks» en el cuadro de búsqueda de palabras clave y presione el botón instalar ahora botón:
Después de eso, activar el plugin para empezar la fiesta.
Lo estás haciendo genial 🙂
A continuación, creemos 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.
En el menú de administración de WordPress, navegue hasta Bloques personalizados > Agregar nuevocomo se destaca a continuación.
Al hacer esto, serás llevado 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. Comenzando en la parte superior, usted tiene.
Área de edición principal:
- Constructor – Es probable que pase mucho tiempo aquí diseñando su bloque personalizado. EL Constructor 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 algún código) en 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 frontal – Aquí puede obtener una vista previa de cómo se verá el bloque personalizado en su sitio web.
- Campos del editor – Mostrará los campos en el área de edición principal de una publicación o página (ya sabe, al igual que ve sus publicaciones regulares dentro del editor de WordPress)
- Campos de inspección – Muestra el campo en la barra lateral derecha debajo del Inspector de bloques.
opciones de la barra lateral
- babosa – El slug se completa automáticamente según el título que le dé a su bloque personalizado. Es importante al crear el modelo de bloques.
- 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 nueva categoría.
- Palabras clave – Agregue un máximo de tres palabras clave relacionadas a su bloque personalizado para que las personas puedan encontrarlo fácilmente en el selector de bloques.
- Los campos de bloque se abren en un modal en lugar de renderizarse en el lugar – Habilite si desea abrir campos en un modal. Es ú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 cada 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 el Constructor, asigne a su bloque personalizado un título adecuado. Voy con el CTA para este, como se muestra a continuación.
Antes de agregar nuevos campos, agreguemos un ícono, palabras clave y elijamos una categoría para el bloque personalizado como se muestra a continuación.
Ese conjunto, agreguemos algunos campos a nuestro bloque personalizado. Para nuestro bloque de CTA de ejemplo, simplemente agregaremos 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 el Campos del editor sección, haga clic en más (+) icono para agregar el primer campo como se muestra a continuación.
A continuación, agreguemos un campo de imagen. En la barra lateral, establezca el Tipo de campo por Imagen y configure las otras opciones. Además, tome nota de la babosa (configuré la mía en campo de imagen) porque lo vamos a usar 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, falta un paso. cambiar a la Editor de plantillas > Marcado:
El mío ya tiene un código pero el tuyo estará en blanco 🙂
Aquí, diseñaremos cómo se verá su bloque personalizado en su sitio web. EL editor de plantillas acepta HTML, CSS y los slugs de campo (que debe encerrar entre 2 corchetes). Si necesita usar PHP, puede crear el modelo usando el método de plantillas de PHP.
No te preocupes, es fácil.
Dentro de editor de plantillasdebajo de Calificación pestaña (vea la imagen de arriba), agregue el siguiente marcado 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>
Al escribir su marcado HTML, notará que el editor de plantillas slugs de campo de autocompletar (por ejemplo, {{image-field}} ) para ti 🙂
A continuación, vaya a CSS sección para agregar algunos estilos simples.
Puede agregar tantos estilos como desee, pero esto es con lo que estoy trabajando:
.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 ya está todo listo! Hacer clic Publicar:
Para ver su nuevo bloque personalizado en acción, regrese al panel de administración de WordPress y navegue hasta Publicaciones > Agregar nuevo (También funciona con páginas):
Crea una publicación como lo haces normalmente, haz clic en el botón 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 como desee y publique su publicación:
Ahora, si reviso mi nuevo bloque CTA personalizado en la interfaz, veo esto:
¡Mi CTA personalizado está justo ahí! No se preocupe por mis habilidades de diseño; por supuesto, en un entorno 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. Además, puede hacer que sus bloques personalizados sean complejos o simples, según sus necesidades. Si necesita crear bloques personalizados manualmente, haga algunas lecciones de JavaScript. Te ayudará 🙂
¿Alguna idea o pregunta? Por favor háznoslo saber en los comentarios más abajo.
En Estrategia Creativa tenemos toda la información que necesitas sobre el mundo de digital y en especial para tus emprendimiento Si quieres seguir leyendo información útil ¡echa un vistazo a nuestros artículos!
- » Descargar: libro Cédric Grolet español PDF gratis
- » Descargar: Quedará el amor – Alice Kellen PDF GRATIS
- Coco Gauff’s Dominance at the 2024 US Open: A New Tennis Queen in the Making
- » Descargar: Twisted 3. Twisted Hate – Ana Huang PDF GRATIS
- » Descargar: El memorándum de Dios – Og Mandino PDF GRATIS
