Gutenberg es el editor de bloques nativo de WordPress desde la versión 5.0. Permite crear contenido visualmente arrastrando y configurando bloques, sin necesidad de código.
¿Qué es Gutenberg?
Gutenberg (nombrado por Johannes Gutenberg, inventor de la imprenta) es el editor de contenido de WordPress basado en bloques. Reemplazó al editor clásico TinyMCE en WordPress 5.0 (diciembre 2018).
Evolución de Gutenberg
- Fase 1: Editor de posts/páginas (completada)
- Fase 2: Full Site Editing - editar todo el sitio (actual)
- Fase 3: Colaboración en tiempo real (en desarrollo)
- Fase 4: Soporte multilingüe nativo (futuro)
Ventajas vs Editor Clásico
- ✅ Edición visual WYSIWYG real
- ✅ Diseños complejos sin código
- ✅ Bloques reutilizables
- ✅ Patrones prediseñados
- ✅ Full Site Editing (temas compatibles)
Interfaz del Editor
Elementos principales
- Barra superior: Insertar bloque, deshacer/rehacer, vista previa, publicar
- Área de contenido: Donde añades y editas bloques
- Panel lateral: Configuración del bloque seleccionado o del documento
- Insertor de bloques (+): Catálogo de todos los bloques disponibles
Modos de edición
- Visual: Ver el contenido tal como se mostrará
- Código: Ver y editar el HTML de los bloques
Navegación de bloques
- Vista de lista: Panel con estructura jerárquica de bloques
- Breadcrumbs: Navegación inferior para bloques anidados
Bloques Básicos
Texto
| Párrafo | Texto normal con formato básico |
| Encabezado | H1-H6 para títulos y subtítulos |
| Lista | Listas ordenadas y no ordenadas |
| Cita | Texto destacado con atribución |
| Código | Código con formato monoespaciado |
| Preformateado | Texto que mantiene espacios y saltos |
| Verso | Poesía y letras con formato especial |
Medios
| Imagen | Imagen única con opciones de alineación |
| Galería | Cuadrícula de múltiples imágenes |
| Audio | Reproductor de audio |
| Video | Video local o embed |
| Portada | Imagen/video de fondo con texto superpuesto |
| Archivo | Enlace de descarga de archivos |
Diseño
| Columnas | Dividir contenido en columnas |
| Grupo | Agrupar bloques con estilo común |
| Fila | Elementos en línea horizontal |
| Pila | Elementos apilados verticalmente |
| Separador | Línea horizontal divisoria |
| Espaciador | Espacio vertical ajustable |
Bloques Avanzados
Widgets
- Últimas entradas: Lista de posts recientes
- Categorías: Lista o desplegable de categorías
- Nube de etiquetas: Etiquetas populares
- Búsqueda: Formulario de búsqueda
- Comentarios recientes: Últimos comentarios
- RSS: Feed de contenido externo
- HTML personalizado: Código HTML libre
Embeds
Pega la URL y Gutenberg detecta automáticamente:
- YouTube, Vimeo, TikTok
- Twitter/X, Facebook, Instagram
- Spotify, SoundCloud
- Google Maps
- Y muchos más...
Bloques dinámicos (Query Loop)
El bloque Query Loop permite mostrar posts dinámicamente:
- Filtrar por categoría, etiqueta, autor
- Ordenar por fecha, título, etc.
- Diseño personalizable (grid, lista)
- Ideal para páginas de archivo personalizadas
Patrones de Bloques
Los patrones son combinaciones prediseñadas de bloques que puedes insertar con un clic.
Acceder a patrones
- Clic en el insertor (+)
- Pestaña "Patrones"
- Navega por categorías o busca
- Clic para insertar
Categorías de patrones
- Destacados / Hero
- Llamadas a la acción (CTA)
- Testimonios
- Servicios / Características
- Equipo
- Galería
- Texto con imagen
- Cabeceras
- Pies de página
Crear patrones propios
- Diseña tu combinación de bloques
- Selecciona todos los bloques
- Menú de opciones → "Crear patrón"
- Nombra y categoriza
- Elige si es sincronizado (cambios afectan a todos los usos)
Patrones sincronizados vs no sincronizados
- Sincronizados: Editar uno actualiza todas las instancias
- No sincronizados: Cada uso es independiente
Full Site Editing (FSE)
Full Site Editing permite editar TODO el sitio con bloques: cabecera, pie, plantillas de archivo, etc.
Requisitos
- WordPress 5.9+
- Tema compatible con FSE (block theme)
- Ejemplos: Twenty Twenty-Four, Flavor, Flavor, Flavor
Editor del sitio
Accede desde Apariencia → Editor:
- Plantillas: Diseño de tipos de página (single, archive, 404...)
- Partes de plantilla: Cabecera, pie de página, sidebar
- Estilos: Colores, tipografías, espaciados globales
- Patrones: Biblioteca de patrones del tema
Bloques de plantilla
- Título del sitio: Nombre del sitio enlazado
- Logo del sitio: Logotipo configurable
- Navegación: Menú personalizable
- Query Loop: Bucle de posts
- Título de entrada: Título dinámico
- Contenido de entrada: Contenido dinámico
- Imagen destacada: Featured image
- Comentarios: Sección de comentarios
Estilos globales
Configura desde el panel de Estilos:
- Paleta de colores
- Tipografías y tamaños
- Espaciados por defecto
- Estilos de bloques específicos
Trucos y Atajos de Teclado
Atajos esenciales
| Acción | Windows/Linux | Mac |
|---|---|---|
| Insertar bloque | / | / |
| Duplicar bloque | Ctrl+Shift+D | Cmd+Shift+D |
| Eliminar bloque | Shift+Alt+Z | Ctrl+Option+Z |
| Mover bloque arriba | Ctrl+Shift+Alt+T | Cmd+Shift+Option+T |
| Mover bloque abajo | Ctrl+Shift+Alt+Y | Cmd+Shift+Option+Y |
| Vista de lista | Shift+Alt+O | Ctrl+Option+O |
| Modo código | Ctrl+Shift+Alt+M | Cmd+Shift+Option+M |
| Guardar | Ctrl+S | Cmd+S |
Inserción rápida con /
Escribe / seguido del nombre del bloque:
/imagen- Insertar imagen/encabezado- Insertar título/columnas- Insertar columnas
Transformar bloques
Selecciona un bloque y clic en el icono de transformar para convertirlo:
- Párrafo → Lista, Cita, Encabezado
- Imagen → Galería, Portada
- Grupo → Columnas, Fila
Arrastrar y soltar
- Arrastra bloques desde la vista de lista
- Arrastra imágenes directamente desde tu ordenador
- Arrastra para reordenar en el editor
Plugins de Bloques Adicionales
1. Spectra (anteriormente UAG)
- 30+ bloques adicionales
- Bloques de marketing y diseño
- Gratuito
2. Stackable
- Bloques premium con diseño moderno
- Versión gratuita funcional
- Pro desde $49/año
3. Kadence Blocks
- Bloques de diseño avanzado
- Row layout muy flexible
- Gratuito con Pro opcional
4. GenerateBlocks
- Minimalista pero potente
- 4 bloques que hacen de todo
- Integrado con GeneratePress
5. CoBlocks
- De GoDaddy
- Bloques de galería excelentes
- Gratuito
Preguntas Frecuentes
¿Puedo volver al editor clásico?
Sí, instalando el plugin "Classic Editor". Sin embargo, se recomienda adaptarse a Gutenberg ya que es el futuro de WordPress y el editor clásico dejará de tener soporte.
¿Gutenberg es compatible con page builders?
Sí, puedes usar Elementor, Divi u otros junto a Gutenberg. Cada página puede usar uno u otro. Sin embargo, muchos están migrando a Gutenberg por su integración nativa.
¿Afecta Gutenberg a la velocidad?
Gutenberg es muy ligero comparado con page builders. El código generado es limpio. Para máxima velocidad, evita plugins de bloques que añadan muchos scripts innecesarios.
¿Qué temas funcionan mejor con Gutenberg?
Los "block themes" como Twenty Twenty-Four aprovechan todas las funciones. Temas como GeneratePress y Flavor también tienen excelente compatibilidad.