Como usar el editor de bloques Gutenberg desde cero

Si recien empiezas con WordPress o llevas tiempo usando el editor clasico y nunca terminaste de adaptarte, este articulo es para ti. El editor de bloques Gutenberg ya no es opcional ni una novedad: es el corazon de como se crea contenido en WordPress, y con la version 7.0 lanzada en mayo de 2026 trajo cambios importantes que conviene conocer. La buena noticia es que, una vez que entiendes la logica de bloques, todo se vuelve mucho mas rapido y flexible que con cualquier otro editor.

En esta guia te voy a llevar desde lo basico (que es un bloque, como insertarlo, como moverlo) hasta cosas mas avanzadas como patrones reutilizables, plantillas, Full Site Editing y las novedades especificas de WordPress 7.0. La idea es que termines de leer y puedas armar cualquier pagina sin pelearte con el editor. Vamos paso a paso.

Que es Gutenberg y por que reemplazo al editor clasico

Gutenberg es el editor de bloques que WordPress introdujo en la version 5.0, alla por diciembre de 2018. Antes de eso, el editor era una caja de texto con botones de formato, parecido a lo que ofrecia un procesador de texto basico. Funcionaba, pero tenia limites enormes: insertar una galeria, un video o un boton requeria shortcodes o codigo HTML. Y maquetar paginas con varias columnas era practicamente imposible sin plugins.

El cambio fue radical. En lugar de una sola caja, ahora cada elemento de contenido es un bloque independiente: un parrafo es un bloque, un titulo es otro, una imagen es otro, una columna es otro, un boton es otro. Cada bloque tiene sus propias opciones, su propio panel de configuracion y se puede mover de manera independiente. La idea es que armar una pagina sea como apilar piezas de Lego: agregas, mueves, modificas, eliminas.

El proyecto se llamo Gutenberg en homenaje a Johannes Gutenberg, el inventor de la imprenta moderna. La metafora es clara: como aquella imprenta democratizo la publicacion de libros, este editor busca democratizar la creacion de paginas web complejas sin necesidad de saber programar.

La interfaz del editor por dentro

Cuando abres una entrada o pagina nueva en WordPress, te encuentras con una pantalla que puede parecer abrumadora al principio. Vamos a desglosarla por partes para que sepas exactamente que es cada cosa.

La barra superior

En la parte de arriba veras una barra con varios botones. A la izquierda esta el boton del menu principal (el icono de WordPress), seguido del boton para insertar bloques (el icono de mas), el de herramientas (para elegir entre edicion o seleccion), y los botones de deshacer y rehacer. En el centro tipicamente esta el conmutador de modo, y a la derecha encontraras los botones para guardar borrador, vista previa, publicar y abrir el panel lateral de configuracion.

Tomate cinco minutos para hacer click en cada uno y ver que hace. Te ahorra muchas frustraciones despues. Especial atencion al boton de mas (que abre el inserter de bloques) y al boton de los tres puntos verticales arriba a la derecha, que da acceso a opciones avanzadas como el editor de codigo, los atajos de teclado y la gestion de bloques reutilizables.

El area de contenido

El centro de la pantalla es el lienzo donde escribes y armas tu contenido. Cada parrafo que escribes se convierte automaticamente en un bloque de parrafo. Si presionas enter, se crea un bloque nuevo. Si quieres insertar otro tipo de bloque, puedes hacer click en el boton de mas que aparece a la izquierda de cada linea vacia, o escribir una barra inclinada seguida del nombre del bloque (por ejemplo, escribir slash imagen abre directamente el bloque de imagen).

Cuando seleccionas un bloque, aparece una pequena barra flotante encima de el con las opciones especificas: alinear, formato de texto, agregar enlaces, mover el bloque hacia arriba o hacia abajo, y un menu de opciones adicionales. Es la barra que mas vas a usar, asi que familiarizate bien con ella.

El panel lateral derecho

A la derecha hay un panel con dos pestanas: Entrada (o Pagina, segun lo que estes editando) y Bloque. La pestana Entrada muestra opciones globales: estado de publicacion, formato, categorias, etiquetas, imagen destacada, extracto, comentarios, autor. La pestana Bloque muestra opciones especificas del bloque que tengas seleccionado en ese momento.

Por ejemplo, si seleccionas un bloque de imagen, la pestana Bloque te deja cambiar el tamano, el texto alternativo, el enlace, los estilos visuales. Si seleccionas un bloque de parrafo, te deja cambiar el tamano de fuente, el color, el espaciado. Cada bloque tiene su propio set de opciones, lo cual es una de las grandes ventajas del editor.

Los bloques esenciales que tienes que conocer

WordPress trae decenas de bloques nativos, pero hay un grupo que vas a usar todo el tiempo. Si dominas estos diez, ya puedes armar cualquier pagina sin recurrir a plugins externos.

Parrafo

El bloque mas usado de todos. Es donde escribes texto comun. Tiene opciones para cambiar alineacion, color de texto, color de fondo, tamano de fuente, espaciado y formato (negrita, cursiva, enlaces, superindice, subindice). Tip util: si pegas texto desde Word o Google Docs, Gutenberg los convierte automaticamente en bloques de parrafo respetando los saltos.

Encabezados

Para titulos y subtitulos. Soporta los seis niveles H1 al H6, aunque normalmente el H1 lo usa el titulo de la entrada, asi que tu sueles trabajar con H2, H3 y H4. La jerarquia importa para SEO y para accesibilidad, asi que no saltes niveles porque si: si tienes un H2, no metas un H4 sin pasar por un H3.

Imagen

Para insertar imagenes desde la biblioteca de medios, subir desde tu computadora o pegar desde una URL externa. Tiene opciones para recortar, redimensionar, agregar enlace, texto alternativo (importante para accesibilidad y SEO) y leyenda. Recuerda comprimir tus imagenes antes de subirlas para no afectar el rendimiento del sitio.

Galeria

Para mostrar varias imagenes en cuadricula. Eliges cuantas columnas quieres, si las imagenes deben recortarse para tener el mismo tamano, y si cada imagen debe enlazar a su archivo o a una pagina especifica. Para galerias grandes con lightbox conviene complementar con un plugin especializado.

Lista

Listas ordenadas (numeradas) o desordenadas (con vinetas). Permite anidar sublistas, cambiar el tipo de vineta o numeracion, y combinar formato dentro de cada elemento. Es el bloque ideal para enumerar pasos, requisitos o caracteristicas.

Cita

Para destacar texto de manera visualmente diferenciada, tipicamente con un margen lateral o un fondo distinto. Suele usarse para citar fuentes externas o resaltar frases importantes dentro del propio articulo. Tiene una variante llamada cita destacada (pull quote) con un estilo aun mas llamativo.

Boton

Para crear botones con enlaces. Muy util para llamadas a la accion: contactanos, descargar PDF, suscribirse. Puedes cambiar color de fondo, color de texto, bordes redondeados y abrir el enlace en una pestana nueva. Se pueden agrupar varios botones en un solo bloque para crear filas.

Columnas

Permite dividir el contenido en dos, tres o mas columnas. Dentro de cada columna puedes meter cualquier otro bloque, lo cual te da una flexibilidad enorme para maquetar. Es el bloque que reemplaza a lo que antes requeria HTML manual o plugins de columnas.

Separador y espaciador

El separador inserta una linea horizontal entre secciones. El espaciador agrega un espacio en blanco con altura personalizable. Ambos son utiles para mejorar el ritmo visual de tus articulos y darles aire, en lugar de tener todo el contenido apretado.

Codigo corto y HTML personalizado

El bloque codigo corto te deja insertar shortcodes (esos codigos entre corchetes que tienen muchos plugins). El bloque HTML personalizado te permite escribir HTML directo, util cuando necesitas insertar un script externo, un embed especifico o un widget que no tiene bloque propio.

Patrones de bloques: armar mas rapido

Una de las funciones mas potentes y menos aprovechadas del editor son los patrones de bloques. Un patron es basicamente una combinacion predefinida de varios bloques que se insertan juntos. Por ejemplo, un patron de cabecera de articulo que incluye un titulo grande, una imagen destacada y un parrafo introductorio, todo predisenado.

Para usarlos, haces click en el inserter de bloques y vas a la pestana Patrones. Veras decenas de patrones organizados por categoria: cabeceras, sobre nosotros, llamadas a la accion, testimonios, columnas, equipos. Eliges el que te gusta, lo insertas y solo cambias el contenido por el tuyo. Es la forma mas rapida de armar paginas profesionales sin diseno.

WordPress 7.0 amplio la biblioteca de patrones, ahora podes navegar el directorio oficial de patrones directamente desde el editor y traerlos al sitio con un solo click. Tambien podes crear tus propios patrones personalizados y guardarlos para reutilizarlos en cualquier entrada o pagina del sitio.

Plantillas y Full Site Editing

El Full Site Editing (FSE) es la evolucion mas importante del editor en los ultimos anos. Hasta hace poco, el editor de bloques solo servia para editar el contenido de entradas y paginas: la cabecera, el pie de pagina y la barra lateral los controlaba el tema o requerian editar codigo. Con FSE, todo el sitio se edita con bloques: cabecera, pie de pagina, plantillas de archivo, plantillas de busqueda, plantillas de error 404.

Para usar FSE necesitas un tema compatible (los temas que vienen con WordPress en los ultimos anos lo son, como Twenty Twenty-Four o el nuevo Twenty Twenty-Six). Una vez activado, en el menu de Apariencia veras la opcion Editor, que abre el editor de sitio completo. Desde ahi podes modificar cualquier parte de tu tema usando bloques, sin tocar PHP ni CSS.

Tambien podes crear plantillas personalizadas para tipos de contenido especificos: una plantilla diferente para entradas de la categoria recetas, otra para paginas de servicios, otra para la home. Y todo se hace con la misma logica de bloques que ya conoces. La curva de aprendizaje es menor de lo que parece y abre un mundo de posibilidades.

Novedades clave de WordPress 7.0

La version 7.0 (mayo 2026) trajo varias mejoras especificas al editor que vale la pena resaltar porque cambian la experiencia de uso diaria.

Control responsive por bloque

Hasta ahora, configurar como se veia un bloque en mobile vs desktop requeria CSS personalizado o plugins. Con 7.0, cada bloque tiene controles responsive nativos: podes ocultar un bloque en mobile, cambiar el tamano de fuente solo en tablet, o reorganizar columnas para pantallas chicas. Todo desde el panel lateral derecho, sin tocar codigo.

Pantalla de Conectores e IA nativa

WordPress 7.0 incorpora una pantalla nueva llamada Conectores en el menu de administracion, donde se gestionan integraciones con servicios externos y donde se configuran las funciones de IA nativas que la plataforma trae por defecto. Estas funciones incluyen sugerencias de contenido en el editor, generacion de extractos automaticos y propuestas de meta descripciones. Si no queres usarlas, podes desactivarlas desde ahi.

Panel admin renovado

El panel de administracion completo recibio un rediseno visual: nueva tipografia, mejor uso del espacio, iconografia mas clara y modo oscuro nativo (al fin). El cambio es estetico pero tambien funcional: la navegacion entre secciones es mas fluida y los menus son mas ordenados.

Breadcrumbs nativos

Antes para tener migas de pan (breadcrumbs) en tu sitio necesitabas un plugin SEO como Yoast o Rank Math. WordPress 7.0 trae un bloque de breadcrumbs nativo que podes insertar en cualquier plantilla y configurar visualmente. Es una mejora pequena pero que ahorra dependencias y simplifica los temas.

Edicion colaborativa pospuesta

Cabe aclarar que la funcion de edicion colaborativa en tiempo real, que estaba prevista para 7.0, fue pospuesta para una version posterior. Si necesitas varios usuarios editando simultaneamente, sigues necesitando plugins como Multi Collab o esperar a las proximas iteraciones.

Atajos de teclado que valen oro

Si vas a usar Gutenberg de manera intensiva, aprender los atajos de teclado te puede ahorrar horas. Estos son los que mas se usan en el dia a dia.

Slash dentro de un bloque vacio: abre el inserter rapido, donde podes escribir el nombre del bloque y elegirlo sin levantar las manos del teclado. Es probablemente el atajo mas util de todos.

Control mas K: agrega un enlace al texto seleccionado, igual que en Word o Google Docs. Se abre un campo donde pegas la URL y listo.

Control mas Shift mas D: duplica el bloque seleccionado, util cuando necesitas varios bloques similares. Tambien hay Control mas Z para deshacer y Control mas Shift mas Z para rehacer, los clasicos.

Control mas Alt mas H: abre la ventana completa con todos los atajos disponibles. Si te olvidas alguno, esa ventana es tu chuleta.

Consejos para no frustrarse con el editor

Por ultimo, algunos consejos practicos basados en errores comunes que veo todo el tiempo cuando ayudo a alguien a familiarizarse con Gutenberg.

No pelees con la logica de bloques. Si vienes del editor clasico, vas a querer escribir todo seguido. Resiste la tentacion. Pensa en bloques desde el principio: cada parrafo, cada titulo, cada imagen es independiente. Vas a tardar mas al inicio pero despues vas a ser muchisimo mas rapido.

Aprovecha los bloques reutilizables. Si tienes un bloque (o conjunto de bloques) que usas muchas veces, como una llamada a la accion al final de cada articulo, conviertelo en bloque reutilizable. Cuando lo modifiques en un sitio, se actualiza en todas las entradas donde lo insertaste. Ahorra muchisimo tiempo.

Guarda con frecuencia. Gutenberg tiene autoguardado, pero no es infalible. Acostumbrate a presionar Control mas S de vez en cuando para asegurarte que tu trabajo no se pierde si algo sale mal con la conexion o el navegador.

Usa el modo de vista de codigo cuando algo no te cuadra. Si un bloque se te esta comportando raro, podes ver el HTML que esta generando desde el menu de los tres puntos del bloque. A veces se entiende mejor el problema viendo el codigo directamente.

Preguntas frecuentes

Puedo seguir usando el editor clasico en WordPress 7.0

Si, todavia podes instalar el plugin Classic Editor, mantenido oficialmente por el equipo de WordPress. Sin embargo, la recomendacion es adaptarse a Gutenberg porque el editor clasico no recibe nuevas funciones y eventualmente dejara de tener soporte. Mejor invertir el tiempo de aprender bloques desde ya.

Que hago si un bloque no me deja editar como quiero

Lo primero es revisar el panel lateral derecho con el bloque seleccionado, muchas opciones estan ahi. Si lo que necesitas no aparece, podes recurrir al modo de edicion de codigo HTML del bloque o, si es algo recurrente, instalar plugins de bloques adicionales como Stackable o Kadence Blocks que extienden las posibilidades.

Como inserto un bloque desde el teclado sin usar el mouse

Lo mas rapido es escribir slash dentro de un bloque de parrafo vacio. Por ejemplo, slash imagen abre la opcion de insertar imagen, slash columnas inserta el bloque de columnas. Es muchisimo mas veloz que usar el inserter visual y conviene memorizar los nombres de los bloques que mas usas.

Los patrones son lo mismo que las plantillas

No, son cosas diferentes. Un patron es una combinacion de bloques que insertas dentro de una entrada o pagina. Una plantilla es una estructura completa de pagina (cabecera, contenido, pie) que define como se ve un tipo de contenido. Los patrones son piezas, las plantillas son la estructura completa.

Que tema me recomiendas para aprovechar bien Gutenberg

Cualquier tema basado en bloques (block theme) te va a dar la mejor experiencia. Los temas oficiales como Twenty Twenty-Four, Twenty Twenty-Five y el flamante Twenty Twenty-Six son gratuitos y estan bien hechos. Si buscas algo mas estilizado, opciones como Kadence o Blocksy tambien son buenas alternativas.

Como creo un bloque reutilizable

Seleccionas el bloque o grupo de bloques que queres reutilizar, abris el menu de los tres puntos verticales y eliges Agregar a bloques reutilizables. Le pones un nombre y queda guardado. En cualquier entrada futura podes insertarlo desde la pestana Reutilizables del inserter de bloques.

Puedo usar Gutenberg sin Full Site Editing

Si, perfectamente. El editor de bloques funciona en cualquier tema, incluso en temas clasicos que no son compatibles con FSE. Lo unico que cambia es que solo podes editar el contenido de entradas y paginas, no la cabecera ni el pie. Para muchos sitios eso es mas que suficiente.

Como deshago un cambio que ya guarde sin querer

WordPress mantiene un historial de revisiones de cada entrada. Vas al panel lateral, seccion Revisiones, y veras todas las versiones guardadas con fecha y autor. Podes comparar y restaurar la version que necesites, lo cual es un salvavidas cuando metes la pata.

Que pasa con mis shortcodes viejos en Gutenberg

Siguen funcionando. Podes meterlos en el bloque Codigo corto o pegarlos directamente en un bloque de parrafo, WordPress los reconoce igual. Sin embargo, si el plugin que provee ese shortcode tambien tiene un bloque nativo equivalente, conviene migrar al bloque para tener mejor experiencia visual en el editor.

Como controlo el espaciado entre bloques

Con bloque seleccionado vas al panel lateral derecho, seccion Dimensiones, y veras opciones de margen y padding. En WordPress 7.0 estas opciones tienen valores responsive, asi que podes definir un espaciado distinto en mobile, tablet y desktop. Es una de las mejoras mas utiles para diseno fino.