¿Cambió de tema y su editor conocido se convirtió en un lienzo de bloques desconocido? Todos los que abren Gutenberg por primera vez pasan por este bloqueo. Los botones familiares desaparecen, los campos de Metabox se mueven y crear una entrada sencilla toma el doble de tiempo.

Pero esta es la realidad: el editor de bloques de WordPress es la forma más rápida de maquetar contenido sin código. En la práctica, hemos comprobado que después de un par de horas trabajando con bloques, no querrá volver al editor clásico. Y si conoce los atajos de teclado y algunos trucos, Gutenberg empieza a funcionar más rápido que cualquier maquetador visual.

En esta guía encontrará un desglose completo del editor de bloques: desde el primer lanzamiento hasta las teclas rápidas. Nada de teoría por la teoría, solo pasos concretos que puede repetir en su propio sitio.

💡 Resumen rápido:

• Abra el editor: Entradas → Añadir nueva y accederá a la interfaz de bloques de Gutenberg
• Añada contenido usando bloques: cada párrafo, encabezado, imagen o botón es un bloque independiente y movible
• Inserte bloques mediante el icono "+" o la tecla /, simplemente escriba el nombre del bloque que necesita
• Configure los bloques a través de la barra lateral: las opciones de formato y estilo cambian según el tipo de bloque seleccionado
• Aprenda las teclas rápidas: Shift + Alt + H (Windows) abre una hoja de referencia con todos los atajos

Qué es el editor Gutenberg

Gutenberg es el editor de contenido por bloques integrado en el núcleo de WordPress desde la versión 5.0. A diferencia del editor clásico TinyMCE, donde toda la entrada era un único campo de texto, Gutenberg divide el contenido en bloques independientes: párrafos, encabezados, imágenes, galerías, botones, columnas y decenas de elementos más.

Cada bloque se puede mover, configurar y estilizar de forma independiente. El resultado es visible de inmediato: se trata de un editor visual, no de un campo de texto con un botón de "Vista previa".

En 2026, Gutenberg ha evolucionado de ser una novedad controvertida a un maquetador de páginas completo. Con la introducción de la Edición Completa del Sitio (FSE), el editor de bloques ha trascendido las entradas y páginas. Ahora puede editar cabeceras, pies de página, plantillas de entradas y archivos a través de él. El editor clásico sigue disponible como un plugin independiente, pero WordPress dejó de darle soporte oficial en 2022. Aún se publican actualizaciones de seguridad, pero no se añaden nuevas funciones.

Si se toma en serio el trabajo con WordPress, Gutenberg no es una opción, sino la herramienta principal. Aprenderlo vale la pena aunque solo sea por la velocidad: una vez que se acostumbra, las entradas se completan 2 o 3 veces más rápido que en el editor clásico con su montón de campos de metabox.

Interfaz: primer lanzamiento

Para abrir el editor, vaya a Entradas → Añadir nueva (o Páginas → Añadir nueva para las páginas). WordPress cargará Gutenberg con una pantalla de bienvenida y un campo de título en blanco.

A la derecha hay una barra lateral con dos pestañas: Entrada (o Página) y Bloque. La pestaña Entrada contiene los ajustes globales: enlace permanente, categorías, etiquetas, imagen destacada, extracto y estado de publicación. La pestaña Bloque muestra los ajustes del bloque específico seleccionado.

Observe que el campo de enlace permanente está disponible de inmediato, sin necesidad de un clic adicional en el título. Esto ahorra unos segundos en cada entrada.

Trabajar con bloques de texto

Título de la entrada

El primer bloque del editor es el título. Simplemente introduzca el texto y se convertirá automáticamente en el H1 de la entrada. Junto al título hay un botón Editar que abre la edición del enlace permanente directamente en el bloque.

Presione Enter y aparecerá un nuevo bloque de párrafo debajo del título. Gutenberg conserva la navegación por teclado habitual del editor clásico: Enter crea un nuevo bloque, Retroceso lo fusiona con el anterior.

Párrafos y la barra de herramientas de formato

El nuevo bloque predeterminado es Párrafo. Pero antes de que introduzca texto, Gutenberg muestra opciones: el bloque puede convertirse en un encabezado, imagen, galería, portada y decenas de otros tipos.

Después de introducir texto, aparece la barra de herramientas de formato:

La barra de herramientas le permite:

• Convertir un párrafo en cita, encabezado, lista, código o texto preformateado
• Aplicar negrita, cursiva, tachado y subrayado
• Alinear el texto a la izquierda, derecha, centro o justificarlo
• Añadir un enlace con opción para abrir en una pestaña nueva
• Insertar una imagen en línea directamente en la línea
• Duplicar, mover o eliminar el bloque
• Editar el bloque como HTML
• Guardar el bloque en Bloques reutilizables

En la pestaña Bloque de la barra lateral, encontrará ajustes avanzados: tamaño de fuente, letra capital, color de fondo y texto, relleno y clase CSS personalizada. Los colores pueden configurarse a cualquier valor; la paleta no está limitada a los preajustes del tema.

Añadir imágenes

Las imágenes pueden insertarse de tres maneras: mediante el icono «+» → pestaña Imagen, arrastrando un archivo desde su escritorio directamente al editor, o con el comando de teclado /image dentro de un párrafo.

Haga clic en cualquier icono «+», seleccione la pestaña Imagen y aparecerá un bloque con tres fuentes: subir desde el ordenador, seleccionar de la biblioteca de medios o pegar mediante URL.

Seleccionar un bloque a través del menú de inserción es el método más visual, especialmente al principio. Una vez que se acostumbre, cambiará a /image, pero el menú visual siempre permanece disponible.

Después de insertar una imagen, la barra lateral ofrece: texto alternativo (fundamental para SEO y accesibilidad), tamaño, relación de aspecto y estilos (redondeo, duotono, sombras y bordes).

El cuadro de diálogo estándar de archivos multimedia es conocido del editor clásico; aquí puede establecer el título y la descripción. Pero los ajustes principales ahora se concentran en la barra lateral de Bloque.

En la práctica, le recomendamos que siempre complete el texto alternativo: ayuda tanto a los motores de búsqueda como a los usuarios de lectores de pantalla. La descripción debe ser específica, de 4 a 8 palabras, e incluir la palabra clave de la sección.

Archivos para descargar

El bloque Archivo le permite adjuntar un PDF, ZIP, imagen o cualquier otro archivo para que los lectores lo descarguen.

Suba un archivo o selecciónelo de la biblioteca multimedia; Gutenberg creará automáticamente un botón de descarga.

El texto del botón y el nombre del archivo son editables. Puede añadir una clase CSS para aplicar un estilo personalizado. El botón se abre en una pestaña nueva de forma predeterminada.

Citas y bloques destacados

El bloque Cita añade una cita con estilo. A diferencia de un párrafo normal, la cita se resalta visualmente; el tema le aplica un formato especial.

La barra lateral del bloque Cita le permite configurar el color de fondo, la fuente y el relleno. La cita puede verse como parte de su identidad de marca en lugar de un bloque gris estándar.

Una cita acepta el mismo texto que un párrafo, pero se distingue visualmente. Además de la Cita estándar, existe la Cita destacada (un bloque de llamada de atención más grande) y el Verso (un bloque para poesía que conserva los espacios y los saltos de línea).

Incrustar video y contenido externo

Gutenberg permite incrustar contenido de más de 30 plataformas: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare y más. El proceso es el mismo para todas: inserte un bloque Incrustar, seleccione la plataforma, pegue la URL y haga clic en Incrustar.

Pegue la URL, haga clic en Incrustar y listo. Gutenberg obtiene automáticamente la vista previa, el título y la miniatura del video desde YouTube.

El video aparece directamente en el editor; puede ver la vista previa sin salir del panel de administración. Para YouTube, hay ajustes disponibles: ocultar controles, activar la reproducción automática o establecer una hora de inicio.

Botones y llamadas a la acción

El bloque Botones crea uno o más botones en una fila. Es perfecto para llamadas a la acción: «Descargar», «Registrarse», «Ir a WordPress.org».

Introduzca el texto, pegue la URL y configure el estilo: relleno, contorno, redondeo de esquinas, tamaño. Los botones se adaptan automáticamente al móvil; en pantallas estrechas, se estiran a ancho completo.

Gutenberg verifica el contraste entre el texto del botón y el fondo: si la combinación de colores resulta ilegible, el editor muestra una advertencia. Es un pequeño detalle, pero ahorra tiempo en las comprobaciones de accesibilidad.

Columnas y cuadrículas

El bloque Columnas crea una cuadrícula de 2 a 6 columnas. Puede insertar cualquier otro bloque dentro de cada columna: un párrafo, una imagen, un botón o una cita.

Por defecto se crean dos columnas, pero puede cambiar el número y el ancho de cada una en los ajustes del bloque.

En dispositivos móviles, las columnas se apilan verticalmente de forma automática; el contenido no se desarma y se mantiene legible. Antes esto requería consultas de medios CSS, pero ahora funciona sin configuración adicional.

Medios + texto: imagen junto al texto

El bloque Medios y texto es uno de los más útiles para la maquetación: una imagen o video a la izquierda (o a la derecha), y texto con un botón a la derecha (o a la izquierda).

Suba una imagen, añada texto y, opcionalmente, un botón. Los lados se pueden intercambiar con un solo clic.

Y así es como se ve en el sitio publicado:

Tiene un aspecto profesional y se crea en apenas un minuto. No necesita un maquetador visual para este tipo de diseño.

Bloques de terceros: los plugins amplían Gutenberg

Muchos plugins añaden sus propios bloques a Gutenberg. WooCommerce es el ejemplo más destacado: tras instalar el plugin, en el editor aparecen bloques para insertar productos, carritos, filtros y categorías de la tienda.

Jetpack añade bloques para formularios, suscripciones e íconos de redes sociales. Yoast SEO integra análisis de legibilidad y consejos de SEO directamente en la barra lateral del editor. Contact Form 7 proporciona un bloque de formulario de contacto.

El principio es el mismo en todos los casos: instale el plugin y los bloques aparecerán en el menú de inserción. No se requiere código adicional.

Atajos de teclado y consejos

El truco más útil de Gutenberg es la tecla /. Estando en cualquier párrafo, escriba / y empiece a introducir el nombre del bloque. El editor le mostrará las opciones coincidentes; seleccione con las teclas de flecha y pulse Enter.

Por ejemplo: /image → bloque de imagen, /heading → encabezado, /table → tabla, /column → columnas. Tras una semana de uso, este truco acelera significativamente su trabajo.

Lista completa de atajos de teclado: Shift + Alt + H (Windows) u Opt + Ctrl + H (Mac). Esto abre una hoja de referencia con todos los atajos, desde mover bloques hasta cambiar entre modos de edición.

Algunas técnicas más que usamos en la práctica:

• Ctrl + Shift + D: duplicar el bloque seleccionado
• Ctrl + Alt + T: insertar un nuevo bloque antes del actual
• Ctrl + Alt + Y: insertar un nuevo bloque después del actual
• Haga clic en el icono i de la barra de herramientas superior: muestra la estructura del documento (encabezados, recuento de palabras, párrafos)
• Vista de lista (icono de tres líneas arriba a la izquierda): navegue por todos los bloques de la entrada como un árbol, práctico para artículos largos

Y por último: el error «Actualización fallida» suele deberse a una conexión a internet inestable, no a un problema del editor. Revise su conexión e intente guardar de nuevo.

Vídeo: Gutenberg en 15 minutos

¿Quiere verlo todo en acción? Este breve vídeo de WPBeginner muestra el ciclo completo de creación de una entrada en Gutenberg, desde el primer bloque hasta la publicación:

⁉️🤔 Preguntas frecuentes

¿Necesito instalar Gutenberg por separado?

No, el editor de bloques está integrado en el núcleo de WordPress desde la versión 5.0 (publicada en diciembre de 2018). Si tiene una versión reciente de WordPress, Gutenberg ya está funcionando. El plugin independiente Gutenberg existe solo para quienes quieran probar nuevos bloques antes de que se incluyan en el núcleo.

¿Puedo volver al editor clásico?

Sí, instale el plugin gratuito Classic Editor. Desactiva Gutenberg por completo y restaura el conocido TinyMCE. Pero tenga en cuenta: WordPress finalizó oficialmente el soporte para el editor clásico en 2022. Las versiones actuales de WordPress (6.x en 2026) siguen funcionando con Classic Editor, pero las nuevas funcionalidades (edición completa del sitio, temas de bloques, patrones) solo están disponibles en Gutenberg.

¿En qué se diferencia Gutenberg de Elementor o Divi?

Gutenberg es el editor de contenido integrado de WordPress: gratuito y sin dependencias externas. Elementor y Divi son constructores de páginas comerciales con capacidades de diseño más amplias: ventanas emergentes, sliders, integraciones de marketing. Para un blog o sitio corporativo típico, Gutenberg cubre las principales tareas de maquetación. Si genera ingresos con su sitio (tienda, páginas de aterrizaje, embudos), un constructor de páginas ofrece más flexibilidad. Buena noticia: Gutenberg y los constructores de páginas funcionan simultáneamente. Puede construir páginas en Elementor mientras gestiona las entradas en el editor de bloques.

¿Qué hago si los bloques se superponen o se rompen en el móvil?

Normalmente, el problema es del tema, no de Gutenberg. Compruebe: (1) si su tema activo es compatible con el editor de bloques (los temas de bloques garantizan una maquetación correcta); (2) si hay CSS personalizado que esté sobrescribiendo el relleno y el ancho de los bloques. Cambie al tema estándar Twenty Twenty-Four para hacer la prueba; si los bloques se muestran correctamente, el problema es de su tema.

¿Cómo añado un bloque que no está en el conjunto predeterminado?

Dos opciones: (1) busque un plugin que añada el bloque que necesita (por ejemplo, Otter Blocks o Spectra ofrecen docenas de bloques adicionales), o (2) cree un bloque personalizado mediante Advanced Custom Fields (ACF), que es más sencillo que escribir un bloque en React. Para la mayoría de las tareas, los plugins son suficientes: instálelos y úselos.

¿Funciona Gutenberg con tipos de contenido personalizados (CPT)?

Sí, plenamente. Al registrar un CPT, especifique 'show_in_rest' => true y 'supports' => array('editor'), y el editor de bloques se habilitará automáticamente. Para CPT existentes sin soporte de la API REST, existen plugins adaptadores, pero es mejor actualizar el registro del tipo de contenido.

Qué elegir: Gutenberg o un constructor de páginas

Gutenberg ha evolucionado de una «funcionalidad» experimental a un editor maduro que impulsa millones de sitios. Para los creadores de contenido, esto supone un aumento directo de la productividad: la maquetación visual, la vista previa instantánea y los atajos de teclado ahorran entre 30 y 60 minutos en cada entrada en comparación con el editor clásico y los plugins de shortcodes.

Si gestiona un blog, un sitio de noticias o un portal corporativo, Gutenberg cubre las tareas principales. Gratuito, sin código externo y sin carga adicional para el servidor.

Si está construyendo páginas de aterrizaje complejas, una tienda en línea con diseños personalizados o embudos de marketing, eche un vistazo a los constructores de páginas. Para el trabajo diario con contenidos, abra Gutenberg, escriba /heading y simplemente empiece a escribir.