[Qué son] WordPress Gutenberg Blocks Y cómo usarlos bien

El editor de WordPress Gutenberg llegó con WordPress 5.0 en diciembre de 2018. Conocido más comúnmente como el 'editor de bloques', la nueva función cambia la creación de páginas y publicaciones del diseño de caja simple de versiones anteriores a una experiencia más parecida a la de un creador de páginas.

Gutenberg blocks ahora ofrecen un enfoque modular para la creación de contenido. En lugar de usar código para agregar un elemento diferente a una página, puede cambiar un bloque. Por ejemplo, puede cambiar un bloque de texto por un bloque de video o una tabla, como lo haría al crear una página en Beaver Builder o Elementor. Es una evolución que tardó mucho en llegar, pero ahora que está aquí, ¡rápidamente se preguntará cómo pudo crear páginas sin él!

Gutenberg blocks

Si actualiza a WordPress 5.0 y superior, y ya debería hacerlo, habrá notado que la interfaz de usuario se ha movido un poco. Seguirá viendo el menú lateral tradicional a la izquierda y el menú de contenido a la derecha, pero en el centro, todo ha cambiado.

Antes de la actualización, vio un título y un cuadro de contenido en blanco donde creó su página o publicación. Ahora verá una sección vacía en el centro con un bloque de título y un bloque de texto ya llenos. El menú de la derecha cambiará dinámicamente según lo que esté haciendo. Al principio, muestra las opciones tradicionales de imagen de categoría, etiqueta y función como antes, pero ahora presenta una pestaña Bloquear.

La pestaña Bloque le permite editar el bloque individual como esos creadores de páginas que ofrecen mucha libertad en términos de diseño. Lo que ve en la pestaña Bloque depende del bloque en cuestión, pero todos tendrán la opción de agregar CSS personalizado.

Gutenberg blocks introducir un enfoque verdaderamente modular para el diseño de páginas. Tiene la opción de seguir haciendo las cosas de la misma manera o sumergirse más profundamente. Puede modificar cada bloque para que se vea sutil o notablemente diferente o hacer que todos funcionen como una costuraless entero. Es un sistema muy poderoso e indulgente.

¿Cómo Usar? Gutenberg blocks

Lo mejor del rediseño de WordPress es que es lo suficientemente similar a cómo funcionaban las cosas antes que la interfaz de usuario todavía es familiar. Incluso si no se familiarizó con los nuevos bloques, aún puede agregar el título de su página, agregar su contenido, agregar códigos y widgets y publicar como antes. Puede parecer un poco diferente, pero funciona de la misma manera.

Esto es ideal para blogueros ocasionales o para aquellos que son nuevos en WordPress. Como un elemento clave del CMS es su facilidad de uso, los desarrolladores de alguna manera se las han arreglado para agregar funciones más avanzadas sin hacer que el sistema general sea más difícil de usar.

Aún puede crear una página en minutos usando las opciones predeterminadas, pero ahora puede profundizar mucho más sin tener que aprender una línea de código o incluso saber cómo se ve un código corto.

Son estas cosas las que hacen Gutenberg blocks tan útil.

Puedes usar Gutenberg blocks o no.

La configuración predeterminada de página y publicación significa que aún puede formatear previamente el contenido de su página en otro lugar y simplemente copiarlo y pegarlo en la página. Pegue el título en el bloque de título y el contenido de la página en el bloque de texto. Si eso es todo lo que necesita, el proceso de creación es tan simple como antes. Si quiere llevarlo más lejos, puede hacerlo.

Si desea profundizar en cómo funciona el editor de bloques, verá algunas opciones más:

• Seleccione el pequeño icono '+' al lado del bloque central para agregar un nuevo bloque.
• Seleccione la 'H' para agregar un título.
• Seleccione el icono de lista para agregar una lista a su bloque.
• Seleccione el icono de imagen para agregar una imagen.

Las cuatro opciones están disponibles en el menú de contenido, pero tenerlas disponibles para cada bloque significa que puede crear su contenido en el diseño que desee. Los bloques sobresalientes individuales se pueden editar y enmarcar individualmente y cada uno se reflejará en la página terminada.

Esto es algo Elementor (y a los creadores de páginas les gusta, como Divi) lo he estado haciendo durante años con gran efecto. Ahora puede hacer lo mismo dentro de WordPress.

Puede encontrar más información sobre Divi en nuestro Elegant Themes Reseñas.

Crear una página usando el editor de bloques es simple:

1. Seleccione Nueva página o Nueva publicación en el menú lateral de WordPress.
2. Escribe o pega el título de tu página en el bloque de título.
3. Escribe o pega tu contenido en el bloque de texto.
4. Seleccione el icono '+' a la derecha del bloque para agregar un nuevo bloque.
5. Seleccione el bloque más apropiado del cuadro emergente.
6. Complete los elementos del bloque principal en el panel central.
7. Seleccione el icono de tres puntos en la parte superior del bloque que agregó para cambiar el diseño o personalizarlo.
8. Para agregar CSS personalizado, seleccione Avanzado en el menú de la derecha.
9. Seleccione Publicar dos veces para publicarlo.

Si bien el uso del editor de bloques es muy sencillo, puede profundizar mucho más si lo necesita. Ese ícono de menú de tres puntos por cada bloque abre una gran cantidad de opciones de personalización según el bloque. Puedes duplicar el bloque, insertar otros bloques antes o después, cambiar los atributos HTML, agrupar bloques y más según las opciones disponibles.

Además, junto con los bloques estándar que vienen con WordPress, los desarrolladores también pueden crear sus propios complementos de bloque. Dada la enorme base de usuarios y el talento de los desarrolladores de WordPress, ya hay muchos complementos de bloque disponibles después de solo un año de uso.

Bloques de uso común

WordPress ha incluido una variedad de bloques que cubren la creación de páginas centrales. Cada uno facilita el trabajo de agregar diferentes elementos de página al tiempo que permite características de diseño personalizadas solo para ese bloque. Es una poderosa opción de edición que se puede utilizar con gran efecto.

El Gutenberg blocks dentro de WordPress incluyen:

• Bloque de texto - El bloque de contenido tradicional donde puedes trabajar exactamente como antes y modificar usando HTML o códigos cortos.
• Título - Bloques de rumbo con los ajustes estándar H1, H2, H3, H4.
• Lista - Un bloque separado que puede utilizar para crear listas destacadas, ya sea ordenadas o desordenadas.
• Galería - Un bloque de galería que habilitó el formato personalizado de imágenes para adaptarse al contenido de su página.
• Imagen - Un bloque de imágenes específico que funciona de manera similar a la galería pero para imágenes individuales.
• Probabilidades - Un bloque destacado que le permite resaltar citas o reseñas dentro de una página.
• Audio - Un bloque específico para incluir un clic para reproducir clips de audio dentro del contenido de la página.
• Cubrir - Un nuevo bloque que te permite colocar una imagen de portada para tu página o publicación que puede complementar la imagen destacada.
• Video - Un bloque de video que funciona como audio y simplifica la presentación de video dentro de una página o publicación.

Todo lo que puedes hacer con Gutenberg blocks que solía hacer con el editor original, pero no siempre era fácil de usar o accesible para los nuevos usuarios. Este diseño de bloque hace que sea fácil para cualquier persona construir sus páginas de una manera lógica y lineal.

Los mejores complementos de bloques de Gutenberg

El WordPress estándar Gutenberg blocks cubra la mayor parte de lo que probablemente necesite de su CMS. Sin embargo, mencionamos anteriormente que los desarrolladores también han comenzado a producir sus propios complementos de bloques de Gutenberg para agregar aún más funciones. Hay docenas de complementos de bloques de diferentes calidades y aquí hemos recopilado algunos de nuestros favoritos.

Echemos un vistazo a algunos de ellos ahora.

Miraremos:

1. Bloques de juego de herramientas
2. Bloques definitivos
3. Complementos definitivos para Gutenberg
4. Tecnología Gutenberg Blocks
5. apilable Gutenberg Blocks
6. Bloques atómicos
7. Bloques de nutria
8. Bloques de Templatic
9. Bloques de Kadence

Muchos de estos complementos de bloques de Gutenberg son completamente gratuitos, mientras que otros ofrecerán bloques gratuitos con la opción de actualizar a bloques premium más avanzados. Mencionamos en cada descripción aquellos que son gratuitos y donde hay opciones premium.

Cada uno se instalará de la misma manera que instala cualquier otro complemento de WordPress. Selecciónelo de WordPress.org e instale y active o descargue los archivos a su computadora y cárguelos en su instalación de WordPress. Una vez instalado, debería ver aparecer sus nuevas opciones de bloqueo con el estándar bloqueado cuando selecciona '+' dentro de una página.

1. Bloques de juego de herramientas

Bloques de juego de herramientas es uno de nuestros complementos de editor de bloques favoritos para WordPress. Es un complemento premium que demuestra que, si bien puede obtener cosas buenas de forma gratuita, a veces vale la pena pagar un poco más por potencia y conveniencia. El complemento se instala de la misma manera que otros complementos y agregará los nuevos bloques al menú existente.

Los bloques incluyen tipos de publicaciones personalizadas, taxonomía personalizada, campos personalizados, plantillas, vistas, paginación, desplazamiento infinito, bloques Ajax, WooCommerce, Google Maps, formularios, pagos e incluso control de acceso. Algunos de estos bloques no los encontrará en ningún complemento gratuito, por lo que hemos resaltado Toolset Blocks.

Una de las mejores características de Toolset es la capacidad de crear contenido generado dinámicamente SIN tener que hacer ningún código PHP personalizado. Toolset se integra directamente con el Editor de bloques de WordPress y le permite extraer contenido dinámico desde cualquier lugar.

Como algunos ejemplos, de lo que puede hacer: 

• Crea encabezados basados ​​en títulos
• Establecer textos de botones y llamadas a la acción desde campos personalizados
• Establecer fuentes de imagen para campos o campos personalizados
• etc.

El siguiente video es una gran explicación de las capacidades de Toolset Blocks:

La mayoría de nosotros sabemos lo poderosos que pueden ser los campos personalizados y los tipos de publicaciones y poder implementar eso dentro de una página es excelente. Además de formularios, diseños, vistas, controles de acceso y otras funciones poderosas, es increíblemente fácil recomendar este complemento a pesar de que es un producto premium.

De vez en cuando gratis no es el mejor precio y este es uno de esos momentos.

2. Bloques definitivos

Bloques definitivos está dirigido a bloggers, pero funcionaría igualmente bien en cualquier sitio web de WordPress. El complemento es gratuito y contiene una selección de bloques de edición promocionales y muy útiles que son ideales para blogueros, pero también podrían resultar útiles para especialistas en marketing, sitios de comercio electrónico, pequeñas empresas y cualquier persona que desee que su contenido se destaque.

Los bloques incluyen reseñas, tabla de contenido, llamadas a la acción, alternancia de contenido, control deslizante de imágenes, archivadores de contenido, testimonios, uso compartido en redes sociales, temporizadores de cuenta regresiva, barras de progreso, cuadrículas de publicaciones y calificaciones de estrellas. El desarrollador dice que también tienen más en camino.

Ultimate Blocks tiene otro truco bajo la manga en su administrador de bloques. Una interfaz simple que le ayuda a habilitar o deshabilitar bloques para simplificar la creación de páginas. Significa que puede descargar la colección y habilitar solo los bloques que probablemente use, manteniendo la página libre de desorden mientras crea.

3. Gutenberg Blocks - Complementos definitivos para Gutenberg

Gutenberg Blocks - Complementos definitivos para Gutenberg es de los mismos desarrolladores que el magnífico Tema Astra de WordPress. El complemento gratuito agrega una variedad de bloques para el uso diario que son fáciles de usar y ofrecen una amplia gama de opciones de personalización. Todos también funcionarán con Astra, lo cual es genial si usas ese tema.

Los bloques incluyen cuadros de información, botones, encabezados avanzados, bloques de equipo, precios, recursos compartidos en redes sociales, testimonios, listas de iconos, bloques de Gravity Form, bloques de marketing, citas, llamadas a la acción, bloques de Contact Form 7, Google Maps y más.

Los desarrolladores dicen que estos bloques se han optimizado para la velocidad de la página al tiempo que ofrecen costuraless integración con el tema Astra y dentro de cualquier otro tema. Tiene opciones de personalización similares a estos otros complementos para deslizar bloques en páginas existentes. Esto solo hace que valga la pena echarle un vistazo a este complemento.

4. Gutenberg avanzado

Gutenberg avanzado de Joom United agrega más de veinte bloques de editor como un complemento gratuito de WordPress. Aquí hay una gama decente de opciones desde la columna y el título habituales hasta bloques más avanzados. Están bien diseñados con una interfaz mínima que todavía ofrece de alguna manera todas las opciones de personalización que probablemente necesite.

Los bloques incluyen perfiles de autor, bloques CCS personalizados, WooCommerce, botones avanzados, formularios de contacto, listas avanzadas, mapas, testimonios, contadores, bloques de inicio de sesión y registro, bloques de imágenes y videos, redes sociales y enlaces, resúmenes de publicaciones, bloque Lightbox y mucho más. .

Cada uno integra costuralessly en una página y viene completo con la opción de personalización avanzada usando el menú de tres puntos. Las opciones exactas difieren según el bloque en cuestión, pero cubren las situaciones más comunes, color, tamaño, sangría, alineación, etc.

5. Apilable Gutenberg Blocks

apilable Gutenberg Blocks fue otra llegada anticipada a la actualización y lanzó algunos bloques personalizados muy útiles para el editor de WordPress. La mayoría de los bloques apilables son gratuitos, pero el desarrollador también ofrece algunos bloques premium que abordan usos específicos en caso de que los necesite.

Los bloques gratuitos incluyen bloques de publicaciones, cuadrícula de funciones, acordeón, llamada a la acción, tarjeta, encabezado, ventana emergente de video, bloque de precios, bloque de notificación, espaciador, divisor, lista de funciones y otros. Hay 23 bloques libres en total.

Como beneficio adicional, Stackable es un sistema modular para que pueda agregar los bloques que probablemente necesite y dejar los demás fuera. Esto puede tener un pequeño beneficio de almacenamiento y velocidad de página, dependiendo de cómo esté configurado su sitio web. De cualquier manera, es una buena característica adicional que puede mantener las cosas sencillas en la parte posterior.

6. Bloques atómicos

Bloques atómicos fue otro de los primeros complementos en la escena y ahora ofrece 15 bloques gratuitos y algunos temas de WordPress para complementar esta nueva libertad de diseño. Los bloques incluyen testimonios, precios, boletín informativo, cuadrícula de publicaciones, columnas avanzadas, íconos para compartir, llamado a la acción, perfil del autor y otros bloques útiles.

El complemento es gratuito, al igual que la mayoría de los temas. Una vez instalado, verá una nueva serie de bloques dentro de la sección de bloques de una nueva página o publicación. Busque AB Post Grid, etc. para identificar las características del bloque atómico.

Al igual que estos otros complementos de bloques de editor, puede personalizar su apariencia dentro del menú avanzado. Tiene opciones similares en términos de opacidad, color, posicionamiento, etc., con el beneficio adicional de opciones adicionales si usa un tema de Bloque atómico. Es una característica adicional menor, ¡pero está ahí!

7. Gutenberg Blocks y biblioteca de plantillas de Otter

Gutenberg Blocks y biblioteca de plantillas de Otter es un bocado de un nombre mucho más digerible en términos de características. Es un complemento liviano y gratuito que incluye algunos bloques bien diseñados que se basan en los proporcionados por WordPress solo con más opciones de diseño.

Los bloques incluyen secciones, encabezados avanzados, botones, precios, testimonios, Google Maps, bloques de biografía del autor, cuadrícula de publicaciones, Font Awesome, compartir y un bloque de tarjetas. Todos están optimizados para la velocidad de la página, así como para las funciones y, aunque son ligeros en esas funciones, son un excelente complemento de los bloques predeterminados.

Hay personalizaciones adicionales y algunas opciones de biblioteca para cada bloque. Puede ajustar cada bloque a sus necesidades específicas o usar una opción de biblioteca para tomar un diseño listo para usar y usarlo dentro del bloque. Es rápido y muy sencillo.

8. Bloques de Templatic

Bloques del desarrollador Templatic es otra entrada sólida en nuestra lista de excelentes complementos de bloques de Gutenberg. Tenemos mucho respeto por los temas templaticos y estos bloques funcionarán con o sin uno de sus temas. Si usa un tema templativo, estos bloques se deslizan directamente y están listos para comenzar. Si no usa un tema Templatic, estos bloques aún integrarán la costuralessly en su diseño.

Los bloques son gratuitos e incluyen una biografía del autor, alertas, uso compartido en redes sociales, separadores, imagen de portada, opciones de encabezado, mapa, precios, botones y un bloque de Tweet. Cada uno tiene las características básicas al frente y al centro con personalizaciones disponibles a través del menú. Son muy fáciles de usar y aparecerán junto a todos los bloques predeterminados dentro de la nueva página o pantalla de publicación.

Hay algunos buenos bloques aquí, pero el complemento no se ha actualizado durante casi un año. Funcionan con la versión actual de WordPress, ya que los probamos a tiempo para este artículo, pero no sabemos cuándo llegarán nuevos bloques.

9. Bloques Kadence

Bloques de Kadence tiene opciones gratuitas y premium que refuerzan los bloques predeterminados dentro de WordPress. La versión gratuita tiene doce bloques y un editor incorporado, mientras que la versión premium de $ 59 al año agrega siete bloques premium, opciones de animación únicas y soporte. También hay una tercera opción, por $ 99 al año puede acceder a todos los bloques de edición premium más todos los temas y productos de Kadence.

Los bloques incluyen bloques de diseño de página, cuadros de información, galerías avanzadas, testimonios, bloques de video, acordeón, botones, pestañas, íconos, títulos avanzados e imágenes. La versión premium agrega bloques de cuadrícula y carrusel, carruseles de productos, bloques de modelos, superposiciones de imágenes, contenido dividido y ventanas emergentes de video.

Cada bloque tiene una sección de edición personalizada donde puede cambiar la posición, el contorno, el color, el tamaño de la imagen, la opacidad y una variedad de otros factores. Si está trabajando dentro de un diseño o marco específico, puede implementar bloques en ese diseño con facilidad usando el editor.

Resumen de Gutenberg blocks y sus complementos

Gutenberg blocks son una excelente evolución de WordPress. Toman todo lo que sabemos y amamos sobre la creación rápida de páginas o publicaciones y lo impulsan. WordPress todavía ofrece su característica facilidad de uso y una barrera de entrada baja para los principiantes, al tiempo que ofrece a los usuarios más experimentados o orientados al diseño la oportunidad de destacarse. Vale la pena celebrar este equilibrio entre forma y función.

Al igual que los complementos de bloques de Gutenberg que presentamos en esta lista. Los complementos gratuitos ofrecen casi todo lo que necesita desde la creación de la página. La oportunidad de dividir una página o publicar en componentes individuales y diseñar cada uno individualmente hasta que sea simplemente perfecto.

Incluso esos complementos premium valen la pena. Tienden a ofrecer estándares más altos en términos de diseño y usabilidad y también algunos bloques que no están disponibles en otros lugares. Si bien es premium, Toolset Blocks se destaca por ofrecer una gama de bloques que no encontrará en ningún complemento gratuito como búsqueda, control de acceso, WooCommerce y publicaciones personalizadas y campos personalizados.

¿Tiene un complemento de bloque de Gutenberg favorito? ¿Amas a uno que no hemos mencionado aquí? ¡Cuéntanos sobre ellos a continuación si lo haces!

Sobre la autora

Escrito por: jamie kavanaghPagina web: https://www.coastalcontent.co.ukEmail: jamie@collectiveray.com

Jamie, ingeniero de formación, es nuestro principal investigador y escritor técnico. Jamie también dirige Coastal Content, una empresa de marketing de contenidos, redacción y diseño web con sede en Cornwall en el Reino Unido.