Plugins para añadir bloques al editor de WordPress: Gutenberg

Translating…

Si eres de los que se resiste a hacer el cambio al nuevo editor de bloque de WordPress, en esta entrada voy a tratar de convencerte de que es la mejor opción para crear tus artículos, páginas y el resto de tipos de contenido o custom post types que puedas añadir en tu web.

Gutenberg -así se llama el editor de bloques de WordPress- está entre nosotros desde hace un tiempo; en concreto, desde la versión de WordPress 5.0, que fue lanzada a finales de 2017.

Es decir, ya lleva un tiempo en el ecosistema WordPress. Si no te has adaptado al «nuevo» sistema de bloques, es porque no has querido 🙈

Y esto te lo dice alguien que para diseñar páginas web siempre utiliza el editor visual de Divi, pero para entradas, determinadas páginas (contacto, textos legales, etc) y otros tipos de contenido te recomiendo usar Gutenberg.

EditorsKit: amplía las opciones del editor de WordPress


El primer paso para ampliar las opciones y funcionalidades de Gutenberg es instalar el plugin EditorsKit.

Plugins para añadir bloques al editor de WordPress: EditorsKit

En realidad, EditorsKit se trata de un conjunto de herramientas y opciones de bloques para Gutenberg con el que puedes tener un mayor control, formatos de texto, estilos y flujo de trabajo simplemente utilizando las herramientas que incluye.

Una de las funcionalidad que más uso y me gustan es, por ejemplo, poder marcar un enlace como nofollow o configurarlo para que se abra en una nueva ventana.

Por lo tanto, el primer paso para añadir bloques adicionales a Gutenberg es instalar EditorsKit en WordPress; el segundo es elegir uno de los plugins de bloques que te muestro a continuación.

9 plugins para añadir bloques a Gutenberg, el editor de WordPress


Y ahora que hemos entrado en materia, te traigo varios plugins con los que puedes añadir bloques al editor de WordPress: Gutenberg. Algunos de ellos muy potentes.

#1 Atomic Blocks

Plugins para añadir bloques al editor de WordPress: Atomic Blocks

Atomic Blocks es una colección de bloques con la que podrás construir cualquier contenido utilizando Gutenberg.

Incluye una serie de bloques que te ayudarán a personalizar tus diseños: desde botones personalizables hasta secciones de página con diferentes estructuras y diseños completos.

#2 CoBlocks

Plugins para añadir bloques al editor de WordPress: CoBlocks

Page Builder Gutenberg Blocks – CoBlocks es una colección de bloques para WordPress y Gutenberg desarrollada por GoDaddy. Incluye bloques adicionales y la posibilidad de añadir nuevas filas y columnas.

Aquí puedes ver algunos de los bloques que incluye: acordeones, botones sociales, gifs, tablas de precios, cajas de autor, alertas, etc.

Plugins para añadir bloques al editor de WordPress: CoBlocks

#3 Kadence Blocks

Plugins para añadir bloques al editor de WordPress: Kadence Blocks

Kadence Blocks (Gutenberg Page Builder Toolkit) te permite agregar bloques personalizados y nuevas opciones para ampliar la capacidad de Gutenberg. Con este plugin podrás crear diseños personalizados y contenido más atractivo.

Con Kadence Blocks podrás controlar mucho mejor las columnas para diferentes tamaños de pantalla. Además te ofrece herramientas de edición de filas como relleno, fondos, superposiciones con degradados o alineación vertical.

Algunos de los bloques personalizados que incluye son: diferentes diseño de fila, galerías, formularios, cabeceras, botones, pestañas, acordeones, testimonios, iconos, espaciadores y divisores o cajas de información.

#4 Kioken Blocks

Plugins para añadir bloques al editor de WordPress: Kioken Blocks

Kioken Blocks (Page Builder Gutenberg Blocks) es un conjunto de bloques avanzados para Gutenberg. El plugin dispone de bloques únicos que te ayudarán a diseñar y maquetar tu contenido de forma rápida y creativa.

Incluye 16 bloques nuevos, entre los que se encuentran sliders, animaciones avanzadas, efectos parallax o divisores.

#5 Otter Blocks

Plugins para añadir bloques al editor de WordPress: Otter Blocks

Otter Blocks (Gutenberg Blocks and Template Library by Otter) es un plugin que permite añadir bloques adicionales a Gutenberg con los que diseñar entradas y páginas más completas.

Además, incorpora una biblioteca de plantillas prediseñadas con diseños que puedes importar de forma sencilla, a golpe de clic.

Algunos de los bloques que incluye son: secciones, encabezados, grupos de botones, carruseles, mapas, cuadrículas de entradas, tablas de precios, testimonios, cajas de autor, Font Awesome, iconos para compartir y tarjetas.

#6 Stackable

Plugins para añadir bloques al editor de WordPress: Stackable

Stackable (Page Builder Gutenberg Blocks) es una biblioteca de bloques para el editor de bloques de WordPress (Gutenberg).

Este plugin permite agregar bloques personalizados para crear páginas y entradas diferentes.

Stackable incluye:

  • 26 bloques para crear páginas con Gutenberg.
  • Más de 50 diseños de bloque y más de 70 diseños de sección.
  • Opciones con pestañas similares a las del generador de páginas.
  • Ajustes avanzados de diseño web.
  • Controles de personalización para diseños en dispositivos móviles.
  • Controles de secciones y fondos.
  • Opciones versátiles de imagen y color, efectos de desplazamiento, separadores y divisores.

#7 Gutenberg Blocks

Plugins para añadir bloques al editor de WordPress: Gutenberg Blocks

Gutenberg Blocks (Ultimate Addons for Gutenberg) incluye más de 20 plantillas prediseñadas de forma profesional con Gutenberg que puedes importar de forma muy sencilla.

Te ofrece bloques como: buscador, preguntas frecuentes, cabeceras y columnas avanzadas, citas, llamadas a la acción, mapas, formularios, botones, carruseles, entradas en rejilla (grid), tablas, listados de precios, botones sociales, etc.

Aquí puedes ver algunas de las demos de Gutenberg Blocks:

Plugins para añadir bloques al editor de WordPress: Gutenberg Blocks

#8 GenerateBlocks

Plugins para añadir bloques al editor de WordPress: GenerateBlocks

GenerateBlocks es un plugin que en origen está creado para GeneratePress, pero que funciona con cualquier tema para WordPress.

Te permite organizar tu contenido en filas y secciones. El bloque de contenedor es la base del contenido, permitiéndote diseñar secciones únicas para tu contenido, así como crear diseños avanzados con cuadrículas flexibles.

Mira su funcionamiento:

#9 Heliblocks

Plugins para añadir bloques al editor de WordPress: Heliblocks

Por último, voy a mencionar a Heliblocks, un plugin que te permite crear código HTML y CSS, que después puedes insertar y personalizar en cualquier página WordPress.

Es decir, Heliblocks aprovecha las capacidades de edición del editor de bloques de WordPress y potencia de las variables CSS para la personalización, con lo que no necesita incluir ningún fichero adicional, especialmente positivo para la velocidad de carga de la web.

De esta forma, podrás usar estructuras únicas en tus contenidos con Gutenberg.

TRUCO para seguir usando el editor clásico de WordPress con Gutenberg


Si no te he conseguido convencer con ninguno de los plugins anteriores y eres de los que prefiere seguir usando el editor clásico de WordPress, tengo la solución a tus problemas, aunque mi consejo es que te pases a Gutenberg y te vayas adaptando a trabajar con él; ha venido para quedarse.

Existe un truco para seguir utilizando el editor clásico de WordPress dentro del propio Gutenberg, sin necesidad de instalar ningún plugin para deshabilitarlo, como había que hacer cuando salió.

Para ello, simplemente tienes que añadir un nuevo bloque llamado «clásico», dentro del tipo formato.

Así: Nuevo bloque > Clásico:

TRUCO para seguir usando el editor clásico de WordPress con Gutenberg

Una vez añadido este bloque con formato clásico, podrás crear y editar tus contenidos en WordPress como lo hacías con el editor clásico.

TRUCO para seguir usando el editor clásico de WordPress con Gutenberg

Espero que esta recopilación de plugins con los que añadir bloques al editor de WordPress (Gutenberg) te sea de gran utilidad. Solo te queda escoger la opción que más se adapta a tus necesidades y al diseño de tu web.

Portada: freepik