Guía completa de Gutenberg: Cómo usar el editor de bloques de WordPress

Desde su lanzamiento en WordPress 5.0, Gutenberg se ha convertido en el editor por defecto de la plataforma, reemplazando al clásico editor basado en texto y shortcodes. Su funcionamiento se basa en bloques, lo que permite estructurar páginas y publicaciones de una manera más flexible y visual. A continuación, se presenta una guía completa sobre cómo usar el editor de bloques de WordPress para aprovechar al máximo sus funciones.

1. ¿Qué es Gutenberg y por qué es importante?

Gutenberg es un editor basado en bloques que facilita la creación de contenido en WordPress sin necesidad de código. Cada elemento de una página o entrada, como texto, imágenes, botones o incrustaciones, se gestiona como un bloque independiente.

Ventajas de usar Gutenberg:

• ✅ Interfaz visual y moderna, eliminando la necesidad de shortcodes.
• ✅ Mayor flexibilidad en la maquetación de contenido sin depender de constructores externos.
• ✅ Optimización para velocidad, ya que genera un código más limpio.
• ✅ Compatibilidad con todos los temas modernos y con el personalizador de WordPress.

2. Cómo acceder y empezar a usar Gutenberg

Para acceder a Gutenberg, simplemente se debe:

1. Ir a Entradas > Añadir nueva o Páginas > Añadir nueva en el panel de WordPress.
2. Aparecerá el editor de bloques en lugar del clásico editor de WordPress.

3. Bloques esenciales en Gutenberg

Gutenberg ofrece una amplia variedad de bloques prediseñados que facilitan la creación de contenido sin necesidad de plugins adicionales.

Bloques básicos:

• Párrafo: Para agregar y editar texto fácilmente.
• Encabezado: Para estructurar el contenido con títulos H1-H6.
• Imagen: Permite insertar y personalizar imágenes en el contenido.
• Lista: Ideal para crear listas ordenadas y desordenadas.

Bloques de medios:

• Galería: Permite agrupar varias imágenes en una presentación atractiva.
• Audio y Video: Inserta archivos multimedia de forma nativa sin necesidad de plugins.
• Fondo de portada: Agrega imágenes con superposiciones de texto para destacar secciones.

Bloques avanzados:

• Botones: Añade botones personalizables con enlaces a otras páginas.
• Columnas: Permite dividir el contenido en varias secciones verticales.
• Widgets: Integra elementos dinámicos como últimas publicaciones o búsqueda.

4. Cómo personalizar bloques en Gutenberg

Cada bloque de Gutenberg incluye una barra de herramientas en la parte superior y una configuración en la barra lateral derecha.

• Ajustes de color: Permite cambiar colores de fondo y texto en párrafos y encabezados.
• Opciones de tipografía: Modifica el tamaño de letra y el espaciado.
• Alineación y formato: Define el ancho del bloque y su posicionamiento en la página.

5. Reutilización de bloques y plantillas

Una de las características más potentes de Gutenberg es la posibilidad de guardar bloques reutilizables.

Cómo crear un bloque reutilizable:

1. Seleccionar un bloque previamente editado.
2. Hacer clic en los tres puntos en la barra de herramientas.
3. Elegir “Añadir a bloques reutilizables” y asignarle un nombre.
4. Se podrá reutilizar en otras entradas sin necesidad de volver a configurarlo.

También es posible importar y exportar bloques reutilizables para usarlos en otros sitios web de WordPress.

6. Extensiones y plugins para mejorar Gutenberg

Si bien Gutenberg es potente por sí solo, existen varios plugins que amplían sus funcionalidades:

• Kadence Blocks: Agrega bloques avanzados como carruseles, tablas de precios y acordeones.
• Spectra (anteriormente Ultimate Addons for Gutenberg): Ofrece bloques para testimonios, iconos y diseños prediseñados.
• Stackable: Incluye efectos visuales, tarjetas interactivas y contadores animados.
• CoBlocks: Permite añadir diseños creativos como cuadrículas y controles de animación.

7. Consejos para optimizar Gutenberg en WordPress

Para aprovechar Gutenberg al máximo, es recomendable seguir algunas buenas prácticas:

• Mantener WordPress y Gutenberg actualizados para acceder a nuevas funciones.
• Utilizar temas compatibles con Gutenberg, como Astra, GeneratePress o Kadence.
• Evitar el uso excesivo de plugins de constructores si Gutenberg es suficiente para el diseño deseado.
• Optimizar imágenes antes de subirlas para mejorar la velocidad del sitio.