Gutemberg
🧱 ¿Qué es Gutenberg?
Gutenberg es un editor visual basado en bloques. En lugar de escribir todo el contenido en un solo campo de texto, cada parte (párrafo, imagen, botón, cita, etc.) se convierte en un bloque individual que puedes mover, editar y personalizar de forma independiente.
Es parte del movimiento hacia una experiencia de edición completa del sitio (Full Site Editing, FSE).
🎯 Funcionalidades principales de Gutenberg
✅ 1. Edición basada en bloques
- Cada párrafo, imagen, encabezado, lista, vídeo, tabla, botón, etc. es un bloque independiente.
- Puedes insertar, mover, eliminar o duplicar bloques fácilmente.
✅ 2. Interfaz visual en tiempo real
- Lo que ves en el editor es similar a lo que verás en la página publicada.
- Puedes usar drag & drop (arrastrar y soltar) para mover bloques.
✅ 3. Bloques reutilizables
- Puedes guardar un bloque (o conjunto de bloques) como bloque reutilizable para usarlo en otras páginas o entradas.
✅ 4. Bloques de patrones y plantillas
- Gutenberg incluye patrones predefinidos (grupos de bloques ya diseñados para secciones como llamadas a la acción, columnas, testimonios, etc.).
- Algunos temas y plugins añaden plantillas completas para diseñar páginas rápidamente.
✅ 5. Bloques de medios enriquecidos
- Puedes insertar fácilmente vídeos de YouTube, tweets, mapas de Google, galerías de imágenes, audio, etc.
✅ 6. Controles de diseño avanzados
- Márgenes, relleno (padding), colores de fondo, tipografía, bordes.
- Disponible en muchos bloques estándar, sin necesidad de CSS.
✅ 7. Modo de edición de todo el sitio (Full Site Editing – FSE)
- En temas compatibles (como los basados en bloques), puedes editar el header, footer, sidebar y otras partes globales desde el editor.
🧪 Ejemplos de bloques comunes y su uso
| Tipo de bloque | Ejemplo de uso |
|---|---|
| Encabezado | Crear títulos como <h2>, <h3>, etc. |
| Párrafo | Escribir contenido textual. |
| Imagen | Insertar una imagen con leyenda y alineación. |
| Botón | Llamada a la acción con enlace. |
| Cita / Blockquote | Incluir citas destacadas. |
| Lista | Listas ordenadas o con viñetas. |
| Galería | Mostrar varias imágenes juntas. |
| Vídeo / YouTube | Insertar un vídeo de forma responsive. |
| Columnas | Crear diseño de varias columnas. |
| Separador / Espaciador | Añadir espacio visual o una línea divisoria. |
| HTML personalizado | Añadir código HTML propio. |
💡 Ejemplo práctico: una sección con imagen + texto + botón
[Columna izquierda] [Columna derecha]
[Imagen] [Encabezado]
[Párrafo de texto]
[Botón: "Leer más"]
Esto se logra con:
- Bloque de columnas (2 columnas).
- En una columna, añades una imagen.
- En la otra, pones un encabezado, párrafo y botón.
🔌 Ampliar Gutenberg con bloques extra
Puedes instalar plugins que añaden bloques adicionales como:
- Kadence Blocks
- Spectra (antes Ultimate Addons for Gutenberg)
- CoBlocks
- Stackable
- GenerateBlocks
Estos incluyen bloques como:
- Tablas de precios
- Acordeones
- Carruseles
- Testimonios
- Animaciones
🧠 ¿Ventajas de usar Gutenberg?
| Ventaja | Descripción |
|---|---|
| No necesitas maquetadores externos | Puedes diseñar páginas completas sin plugins como Elementor. |
| Flexibilidad de diseño visual | Control sobre columnas, colores, fuentes, etc. |
| Ligero y rápido | Usa recursos del núcleo de WordPress. |
| Compatible con Full Site Editing | Permite modificar todas las partes del sitio. |
⚠️ Consideraciones
- Algunos usuarios lo encuentran menos intuitivo que el editor clásico al principio.
- Algunas funcionalidades avanzadas pueden requerir CSS o bloques adicionales.
- No todos los temas lo aprovechan completamente (aunque la mayoría ya son compatibles).
https://es.wordpress.org/gutenberg/
¿Qué es Gutenberg en WordPress? Definición y diferencias del editor clásico