Cuando abres una entrada o página nueva en WordPress, el editor Gutenberg tiene tres zonas que necesitas conocer antes de empezar.

Barra superior

Barra de herramientas: ☰ Herramientas | + Añadir bloque | ↩ | ↪ | Lista ☰ | Vista previa | Publicar

• Botón + — añade bloques al documento desde cualquier posición
• Deshacer / Rehacer — funciona igual que cualquier editor de texto
• Lista ☰ — abre el navegador de estructura con todos los bloques del documento
• Vista previa — muestra cómo queda el contenido antes de publicar
• Publicar — botón principal para guardar y hacer visible el contenido

Área de contenido (centro)

• El primer campo siempre es el título — es el H1 de la página
• Debajo del título empieza el área de bloques
• Cada elemento que añadas (texto, imagen, botón…) es un bloque independiente
• Haz clic en cualquier bloque para seleccionarlo y ver sus opciones

Panel lateral derecho

Pestaña ENTRADA

• Categorías y etiquetas
• Imagen destacada
• URL (slug) amigable
• Visibilidad (público / privado)
• Fecha de publicación
• Extracto

Pestaña BLOQUE

• Colores de texto y fondo
• Tipografía y tamaño
• Alineación y espaciado
• Bordes y dimensiones
• Opciones específicas del bloque

TIP: La pestaña Bloque solo aparece cuando tienes un bloque seleccionado. Si no ves nada en el panel, haz clic sobre cualquier bloque del editor.

Qué es un bloque

En Gutenberg, cada elemento de la página es un bloque. Un párrafo es un bloque. Una imagen es un bloque. Un botón es un bloque. Puedes moverlos, duplicarlos y configurarlos de forma independiente.

Bloques de texto

• Párrafo: Texto normal. Es el bloque por defecto cuando empiezas a escribir.
• Encabezado: Títulos H1 a H6 para organizar la estructura del contenido.
• Cita: Texto destacado con formato de cita blockquote.
• Lista: Listas con viñetas o numeradas.
• Tabla: Tabla con filas y columnas editables.
• Código: Bloque para mostrar código con formato monoespaciado.

Bloques multimedia

• Imagen: Sube o selecciona una imagen de la biblioteca de medios.
• Vídeo: Archivo de vídeo propio, YouTube o Vimeo.
• Audio: Reproductor de audio con archivo propio.
• Galería: Varias imágenes en cuadrícula con lightbox.
• Archivo: Enlace de descarga a un documento PDF u otro archivo.
• Portada: Imagen o vídeo con texto superpuesto.

Bloques de diseño y estructura

• Columnas: Divide el contenido en 2, 3 o más columnas.
• Grupo: Contenedor para agrupar bloques y aplicar estilos comunes.
• Fila: Coloca bloques en horizontal dentro de un contenedor.
• Pila: Apila bloques en vertical con control de espaciado.
• Separador: Línea horizontal para dividir secciones.
• Botón: Enlace con apariencia de botón estilizable.

Bloques de WordPress (dinámicos)

• Últimas entradas: Lista automática de las entradas más recientes del blog.
• Calendario: Muestra un calendario con las entradas publicadas.
• Búsqueda: Caja de búsqueda del sitio.
• Formulario comentarios: Sección de comentarios de la entrada.
• etc

TIP: Los bloques dinámicos se actualizan solos. Por ejemplo, «Últimas entradas» siempre mostrará las entradas más recientes sin que toques nada.

Insertar bloques

Hay cuatro formas de añadir un bloque. Aprende las dos primeras primero — con eso cubrirás el 95% de los casos.

Método 1 — Comando barra (el más rápido)

• Haz clic en el área de texto donde quieras insertar el bloque
• Escribe/y empieza a escribir el nombre del bloque
• Aparece un menú de sugerencias mientras escribes
• Usa las flechas del teclado para seleccionar y presionaEnter, o haz clic

Ejemplos de comandos

• /imagen → inserta un bloque de imagen
• /h2 → inserta un encabezado de nivel 2
• /columnas → inserta el bloque de columnas
• /tabla → inserta una tabla
• /cita → inserta un bloque de cita
• /botón → inserta un botón

ℹ El comando / solo funciona si el cursor está al inicio de una línea en blanco, o si escribes / como primer carácter al crear un bloque nuevo.

Método 2 — Insertor lateral

• Haz clic en el botón + en la esquina superior izquierda de la barra
• Se abre un panel lateral con todos los bloques organizados por categorías
• Usa la barra de búsqueda para filtrar por nombre
• Haz clic en el bloque para insertarlo al final, o arrástralo al lugar exacto

TIP: Este método es ideal cuando no recuerdas el nombre del bloque y quieres explorarlo visualmente por categoría.

Método 3 — Botón + flotante entre bloques

• Pasa el cursor entre dos bloques existentes
• Aparece un botón + azul en la línea divisoria
• Haz clic para insertar un nuevo bloque exactamente en ese punto
• Puedes escribir / en el nuevo bloque para elegir el tipo

Método 4 — Transformar un bloque existente

• Selecciona un bloque haciendo clic sobre él
• En la barra flotante, haz clic en el icono del tipo de bloque (primer icono a la izquierda)
• Aparece un menú para transformar a tipos compatibles
• Por ejemplo: párrafo → encabezado, o párrafo → cita

Transformaciones comunes

• Párrafo → Encabezado (para convertir texto en título)
• Párrafo → Lista (convierte el texto en ítem de lista)
• Imagen → Portada (añade soporte para texto superpuesto)
• Lista → Párrafo (fusiona los ítems en un párrafo)

Editar y gestionar bloques

Cuando seleccionas un bloque, aparece una barra flotante encima con todas las opciones de edición disponibles para ese tipo de bloque.

La barra de herramientas flotante

Barra de herramientas:

• Cambiar tipo (primer icono) — transforma el bloque a otro tipo compatible
• ⣿ Arrastrar — mantén pulsado para mover el bloque a otra posición
• ↑ ↓ — sube o baja el bloque un puesto en el orden
• B / I / Enlace — formato del texto seleccionado dentro del bloque
• ⋮ Más opciones — acciones adicionales: duplicar, copiar estilos, eliminar

Mover bloques de posición

• Arrastrando: pasa el cursor al borde izquierdo del bloque → aparecen 6 puntos → haz clic y arrastra
• Con flechas: usa los botones ↑↓ de la barra flotante
• Vista de lista: abre el panel ☰ en la barra superior → arrastra los bloques en el árbol

Duplicar, copiar y eliminar

• Selecciona el bloque → haz clic en ⋮ en la barra flotante
• Duplicar — crea una copia exacta del bloque justo debajo
• Copiar — copia el bloque al portapapeles para pegar en otro lugar con Ctrl+V
• Copiar estilos — copia solo el formato visual (colores, tipografía) sin el contenido
• Pegar estilos — aplica el formato copiado a otro bloque del mismo tipo
• Eliminar bloque — borra el bloque (se puede deshacer con Ctrl+Z)

TIP: Al eliminar un bloque de grupo o columnas, también se eliminan todos los bloques que contiene en su interior. Confirma antes de borrar.

Configurar opciones desde el panel lateral

• Con un bloque seleccionado, mira el panel lateral derecho — pestaña Bloque
• Colores — cambia el color del texto y del fondo del bloque
• Tipografía — ajusta el tamaño, peso (negrita), altura de línea y familia de fuente
• Dimensiones — controla el relleno interno (padding) y el margen exterior
• Bordes — añade borde al bloque con color, grosor y radio de esquinas

TIP: Las opciones disponibles en el panel lateral varían según el tipo de bloque seleccionado. Un bloque de imagen tiene opciones de tamaño y texto alternativo; un bloque de párrafo tiene opciones de tipografía.

Formato de texto

Para aplicar formato a texto específico, primero selecciónalo con el cursor. La barra flotante mostrará las opciones de formato disponibles.

Formato básico

• Selecciona el texto que quieres formatear
• Negrita — botón B o Ctrl+B
• Cursiva — botón I o Ctrl+I
• Enlace — botón 🔗 o Ctrl+K → pega la URL → presiona Enter
• Tachado — en el menú de formato extendido (icono ∨ en la barra)
• Superíndice / Subíndice — disponibles en el menú extendido
• Resaltado — cambia el color de fondo del texto seleccionado

Encabezados (H1–H6)

• Inserta un bloque Encabezado con /h2, /h3, etc.
• Desde el panel lateral puedes cambiar el nivel del encabezado (H1–H6)
• También puedes cambiarlo desde la barra flotante → selector de nivel

Cuándo usar cada nivel

• H1 — es el título de la página (se configura en el campo de título, no en un bloque)
• H2 — secciones principales del artículo
• H3 — subsecciones dentro de un H2
• H4–H6 — raramente necesarios, solo en contenidos muy estructurados

Listas

• Inserta con /lista o transforma un párrafo en lista desde el icono de tipo de bloque
• Desde la barra flotante puedes cambiar entre lista de viñetas y lista numerada
• Presiona Enter para añadir un nuevo ítem
• Presiona Tab para añadir subniveles (lista anidada)
• Presiona Shift+Tab para subir un nivel de indentación
• Presiona Enter dos veces en el último ítem vacío para salir de la lista

Cita (Blockquote)

• Inserta con /cita
• Escribe el texto de la cita en el área principal
• Opcionalmente añade el nombre del autor en el campo de atribución debajo

Bloque Código

• Inserta con /código o /code
• Escribe o pega el código directamente — conserva el formato
• No tiene resaltado de sintaxis por defecto, pero plugins como Code Syntax Block lo añaden

Imágenes y vídeo

Gutenberg incluye varios bloques específicos para contenido multimedia. Aquí están los más importantes y cómo usarlos.

Bloque Imagen

• Inserta con /imagen
• Elige entre: Subir archivo, Biblioteca de medios (imágenes ya subidas), o pegar una URL
• Una vez insertada, haz clic en la imagen para ver sus opciones
• Alt text (texto alternativo) — imprescindible para accesibilidad y SEO, escríbelo en el panel lateral
• Alineación — izquierda, centro, derecha, o ancho completo desde la barra flotante
• Añadir título — aparece un campo debajo para la leyenda de la imagen
• Enlazar imagen — desde la barra flotante puedes hacer que la imagen sea un enlace

TIP: Para cambiar el tamaño de la imagen, arrastra las esquinas del recuadro de la imagen en el editor, o usa las opciones de tamaño en el panel lateral (pequeño, mediano, grande, tamaño original).

Bloque Galería

• Inserta con /galería
• Haz clic en Añadir para subir múltiples imágenes o seleccionarlas de la biblioteca
• Arrastra las imágenes dentro de la galería para reordenarlas
• Desde el panel lateral ajusta el número de columnas de la cuadrícula
• Activa Imágenes recortadas para que todas tengan la misma altura

Bloque Vídeo

• Inserta con /vídeo
• Para vídeo propio: haz clic en Subir o Biblioteca de medios
• Para YouTube o Vimeo: usa el bloque YouTube o Vimeo directamente (inserta con /youtube)
• Pega la URL del vídeo en el bloque y presiona Enter

Vídeo embebido de YouTube

/youtube https://youtube.com/watch?v=… Enter

Bloque Portada (Cover)

• Inserta con /portada
• Sube una imagen o vídeo como fondo
• Escribe texto encima del fondo — ideal para secciones hero o cabeceras de sección
• Desde el panel lateral controla: opacidad del overlay, posición del fondo, altura mínima
• Puedes añadir un color de superposición para mejorar la legibilidad del texto

Columnas y grupos

Estos bloques te permiten crear layouts de página más complejos combinando bloques dentro de otros bloques (bloques anidados).

Bloque Columnas

• Inserta con /columnas
• Elige la distribución inicial: 50/50, 33/33/33, 30/70, 70/30, etc.
• Haz clic dentro de cada columna y añade cualquier bloque en su interior (texto, imagen, botón…)
• Desde el panel lateral ajusta el número de columnas (hasta 6) y la distribución porcentual de cada una
• Controla el espacio entre columnas con el control de «Espacio entre bloques»

Uso típico

TIP: Las columnas en móvil se apilan verticalmente por defecto. En el panel lateral puedes ajustar desde qué tamaño de pantalla se apilan activando la opción «Apilar en dispositivos móviles».

Bloque Grupo

• Inserta con /grupo y añade bloques dentro, o agrupa bloques existentes
• Para agrupar bloques ya creados: selecciona varios (mantén Shift y haz clic) → en la barra flotante → ⋮ → Agrupar
• Usa el Grupo para aplicar un color de fondo a toda una sección
• Desde el panel lateral añade relleno interno (padding) para que el fondo no quede pegado al contenido
• Útil para crear bloques de llamada a la acción (CTA) con fondo de color

Bloque Fila y Pila

• Fila: inserta con /fila — coloca bloques horizontalmente dentro de un contenedor flexible
• Pila: inserta con /pila — apila bloques verticalmente con control de espaciado preciso
• Ambos son versiones más controladas que el bloque Columnas para layouts simples

Ejemplo de Fila

Vista de lista — navegar por la estructura

• Haz clic en el icono ☰ (lista) en la barra superior izquierda
• Se abre un árbol lateral con todos los bloques y sus bloques anidados
• Haz clic en cualquier elemento del árbol para seleccionarlo directamente en el editor
• Arrastra elementos en el árbol para reordenarlos sin tocar el área de contenido
• Muy útil cuando tienes muchos bloques anidados y se hace difícil seleccionar el correcto

Patrones reutilizables

Un patrón reutilizable es un bloque o grupo de bloques que guardas con un nombre para usarlo en cualquier página o entrada sin tener que recrearlo.

Crear un patrón reutilizable

• Crea y diseña los bloques que quieres guardar (pueden ser uno o varios agrupados)
• Selecciona el bloque o grupo → haz clic en ⋮ → Crear patrón
• Asigna un nombre descriptivo al patrón (ej: «CTA newsletter», «Sección hero»)
• Haz clic en Crear para guardarlo

Insertar un patrón reutilizable

• Escribe / seguido del nombre del patrón en el área de contenido
• O bien: abre el insertor lateral → busca en la sección Mis patrones
• El patrón se inserta con todo su contenido y estilos intactos

Editar un patrón reutilizable

• Haz clic sobre el patrón en el editor → verás que aparece como un bloque con borde azul
• Haz clic en el botón Editar que aparece en la barra flotante
• Se abre el editor del patrón — haz los cambios necesarios y guarda
• Importante: los cambios afectan a TODAS las páginas donde está insertado el patrón

TIP: Si solo quieres modificar el patrón en una página sin afectar al resto, primero desvincula la instancia: selecciona el patrón → ⋮ → Desvincular. Ahora es un bloque normal independiente.

Gestionar todos los patrones

• En el panel de WordPress: Apariencia → Editor → Patrones
• Desde ahí puedes ver, renombrar y eliminar todos los patrones guardados
• También encontrarás patrones prediseñados del tema que puedes usar como base

Guardar y publicar

Todo lo que necesitas saber para guardar, previsualizar, programar y publicar tu contenido en WordPress.

Autoguardado

• Gutenberg guarda automáticamente el borrador cada 60 segundos
• Verás el texto «Guardado» en la barra superior cuando ocurre
• También puedes guardar manualmente en cualquier momento con Ctrl+S

Guardar como borrador

• Haz clic en Guardar borrador en la barra superior
• El contenido se guarda pero no es visible en el sitio para los visitantes
• Puedes seguir editando y guardando borradores tantas veces como necesites

Vista previa

• Haz clic en Vista previa en la barra superior
• Elige entre: Escritorio, Tablet o Móvil para ver la versión responsive
• Elige Previsualizar en nueva pestaña para ver el resultado real con el tema aplicado

Publicar

• Haz clic en Publicar en la barra superior (botón azul)
• Aparece un panel de confirmación antes de publicar definitivamente
• Revisa la Visibilidad: público (cualquiera puede verlo), privado (solo administradores), o protegido con contraseña
• Revisa la Fecha: si quieres publicación inmediata deja la fecha actual; si quieres programarla, cambia a una fecha futura
• Haz clic en Publicar de nuevo para confirmar

Publicación programada

• En el panel de confirmación de publicación, haz clic en la fecha que aparece
• Selecciona la fecha y hora futura en que quieres que se publique
• Haz clic en Programar — el botón cambia de «Publicar» a «Programar»
• WordPress publicará el contenido automáticamente en ese momento

Revisiones (historial de cambios)

• Panel lateral derecho → pestaña Entrada → sección Revisiones
• Haz clic en Explorar revisiones para ver todas las versiones guardadas
• Usa el deslizador para moverte entre versiones y comparar cambios
• Haz clic en Restaurar esta revisión para volver a una versión anterior

TIP: WordPress guarda una revisión cada vez que guardas o publicas. Si borraste contenido por error y ya está publicado, las revisiones te permiten recuperarlo.

Atajos de teclado

Aprende estos atajos para trabajar significativamente más rápido. En Mac, sustituye Ctrl por Cmd.

Edición general

Categoría	Acción	Atajo
Edición General	Deshacer	Ctrl + Z
	Rehacer	Ctrl + Shift + Z
	Guardar borrador	Ctrl + S
	Buscar y reemplazar	Ctrl + H
	Seleccionar todo el texto del bloque	Ctrl + A
Formato de Texto	Negrita	Ctrl + B
	Cursiva	Ctrl + I
	Enlace	Ctrl + K
	Tachado	Shift + Alt + D
	Superíndice	Shift + Alt + X
	Subíndice	Shift + Alt + Q
Gestión de Bloques	Salir del modo edición al modo selección	Esc
	Navegar al bloque anterior / siguiente	↑ / ↓
	Duplicar bloque seleccionado	Ctrl + Shift + D
	Eliminar bloque seleccionado	Shift + Alt + Z
	Insertar bloque nuevo arriba	Ctrl + Alt + T
	Insertar bloque nuevo abajo	Ctrl + Alt + Y
	Mover bloque hacia arriba	Ctrl + Shift + Alt + T
	Mover bloque hacia abajo	Ctrl + Shift + Alt + Y
Vistas del Editor	Abrir el insertor de bloques	Shift + Alt + N
	Vista de lista (árbol de bloques)	Ctrl + Shift + L
	Modo sin distracciones (pantalla completa)	Ctrl + Shift + \
	Ver todos los atajos disponibles	Shift + Alt + H