El editor Gutenberg (también llamado editor de bloques) es el editor predeterminado desde WordPress 5.0. En lugar de un campo de texto, trabajas con bloques que puedes arrastrar y modificar. En esta guía aprenderás a trabajar con él de forma eficaz.

¿Qué son los bloques?

En Gutenberg todo es un bloque: párrafos, imágenes, botones, columnas. Cada bloque tiene sus propios ajustes y puedes editarlo y moverlo por separado.

Ventajas de los bloques:

  • Edición visual sin código
  • Diseños flexibles
  • Diseño coherente gracias a los bloques reutilizables
  • Menos dependencia de los constructores de páginas (page builders)

La interfaz

Barra superior

  • Botón + - Añade bloques nuevos
  • Deshacer/Rehacer - Pasos hacia atrás o hacia delante
  • Vista general del documento - Lista de todos los bloques
  • Guardar/Publicar - Guarda tus cambios

Barra lateral

  • Pestaña Documento - Ajustes de la página (categorías, imagen destacada, etc.)
  • Pestaña Bloque - Ajustes del bloque seleccionado

Bloques básicos

Párrafo

El bloque de texto estándar. Empieza a escribir sin más y Gutenberg creará automáticamente un bloque de párrafo. Pulsa Intro para crear un bloque nuevo.

Encabezado (Heading)

Para títulos y subtítulos. Elige H2 para las secciones principales y H3 para las subsecciones. No uses H1 en tu contenido: está reservado para el título de la página.

Imagen

Sube una imagen o elige una de tu biblioteca de medios. No olvides rellenar el texto alternativo por accesibilidad y por SEO.

Lista

Crea listas con viñetas (bullets) o listas numeradas. Puedes sangrar los elementos de la lista con la tecla Tab.

Cita (Quote)

Para resaltar una cita o un fragmento importante de texto. Suele aparecer con un formato llamativo.

Bloques de diseño

Columnas

Divide tu contenido en varias columnas. Elige una distribución predefinida o ajusta el ancho. Ideal para comparaciones o para colocar texto e imágenes uno al lado del otro.

Grupo

Agrupa varios bloques. Es práctico para aplicar un color de fondo a una sección o para mover bloques juntos.

Separador

Una línea horizontal para separar visualmente las secciones.

Espaciador

Añade espacio en blanco entre bloques. Ajusta la altura en los ajustes del bloque.

Consejos prácticos

Atajos de teclado

  • / - Escribe una barra para buscar rápidamente un bloque
  • Ctrl + Mayús + D - Duplica un bloque
  • Ctrl + Alt + T - Añade un bloque antes del actual
  • Ctrl + Alt + Y - Añade un bloque después del actual

Mover bloques

Haz clic en los seis puntos situados a la izquierda de un bloque para arrastrarlo. También puedes usar las flechas para mover un bloque hacia arriba o hacia abajo.

Transformar un bloque

Selecciona un bloque y haz clic en el icono del tipo de bloque en la barra de herramientas. Por ejemplo, puedes convertir un párrafo en un encabezado o en una lista.

Bloques reutilizables

¿Has creado un bloque que quieres usar más veces? Selecciónalo, haz clic en los tres puntos y elige "Añadir a bloques reutilizables". Después podrás insertarlo donde quieras.

Problemas frecuentes

Un bloque no funciona como esperabas

A veces un plugin o un tema entra en conflicto con Gutenberg. Prueba a:

  1. Recargar la página
  2. Vaciar la caché del navegador
  3. Desactivar temporalmente los plugins

¿Necesitas el editor clásico?

Algunos plugins antiguos funcionan mejor con el editor clásico. Instala el plugin "Classic Editor" para volver a él. Después podrás elegir en cada página qué editor usar.

Gutenberg frente a los page builders

Gutenberg no sustituye por completo a los page builders como Elementor. Estas son las diferencias:

  • Gutenberg - Integrado, ligero, bueno para contenido estándar
  • Page builders - Más opciones de diseño, maquetaciones más complejas, más pesados

Para blogs y páginas sencillas, Gutenberg suele ser suficiente. Para páginas de destino y diseños complejos, un page builder ofrece más posibilidades.

Funciones nuevas

WordPress sigue ampliando Gutenberg. Novedades recientes:

  • Full Site Editing - Edita también las cabeceras y los pies de página con bloques
  • Patrones de bloques - Combinaciones de bloques ya preparadas
  • Estilos globales - Ajusta los colores y las fuentes en todo el sitio

Mantén tu WordPress actualizado para aprovechar las funciones nuevas.

¿Tienes preguntas sobre Gutenberg o necesitas ayuda con tu sitio WordPress? En Theory7 estamos a tu disposición.

Preguntas frecuentes

¿Puedo volver al editor antiguo?

Sí, instala el plugin "Classic Editor". Después podrás elegir qué editor usar en cada página.

¿Puedo seguir editando mis entradas antiguas?

Sí, el contenido existente se convierte automáticamente en un bloque "Clásico". Puedes conservar este bloque o convertirlo en bloques de Gutenberg independientes.

¿Funcionan todos los plugins con Gutenberg?

La mayoría de los plugins son compatibles. Prueba primero los plugins nuevos en un entorno de pruebas (staging). Algunos plugins antiguos necesitan un bloque Clásico o un shortcode para funcionar.