Guía del editor Gutenberg de WordPress

Qué es el editor Gutenberg

Gutenberg es el editor de bloques que sustituyó al editor clásico de WordPress (TinyMCE) a partir de WordPress 5.0. En lugar de un único campo de texto grande, Gutenberg utiliza un sistema de bloques en el que cada elemento de contenido —párrafo, imagen, encabezado, lista, vídeo— es un bloque independiente que puedes editar, mover y dar estilo por separado.

Recibe su nombre de Johannes Gutenberg, inventor de la imprenta de tipos móviles. Igual que la imprenta de Gutenberg revolucionó la creación de contenido en el siglo XV, el editor Gutenberg de WordPress revoluciona la forma en que creamos contenido web.

Si vienes del editor clásico, pasarte a Gutenberg puede resultar confuso al principio. Nuestra guía para crear un sitio en WordPress cubre los fundamentos que te ayudarán. Pero una vez que dominas lo básico, Gutenberg ofrece mucha más flexibilidad y control sobre el aspecto de tu contenido sin necesidad de HTML ni CSS.

Trabajar con bloques: fundamentos

Añadir bloques

Para añadir un bloque nuevo, haz clic en el botón azul "+" que aparece entre los bloques o en la esquina superior izquierda del editor. Se abre un menú con todos los bloques disponibles organizados por categorías: Texto, Multimedia, Diseño, Widgets, Tema e Insertados. También puedes escribir simplemente "/" en un párrafo vacío para buscar bloques rápidamente.

Los bloques más habituales

• Párrafo: el bloque de texto básico. Admite negrita, cursiva, enlaces y formato en línea.
• Encabezado: encabezados de H2 a H6. Úsalos para estructurar el contenido (el H1 suele ser el título de la entrada).
• Imagen: inserción de imágenes con opciones de tamaño, alineación, texto alternativo y enlace.
• Lista: listas con viñetas y numeradas con elementos anidados.
• Cita: citas destacadas con un aspecto estilizado.
• Galería: una galería de imágenes con disposición automática y vista en lightbox.
• Portada: una imagen con texto encima, ideal para secciones con imagen de fondo.
• Columnas: organiza el contenido en columnas (2, 3 o más) para diseños más complejos.

Editar y mover bloques

Cada bloque tiene una barra de herramientas que aparece encima al seleccionarlo. Esa barra contiene opciones específicas de ese tipo de bloque. En el lateral derecho del editor, un panel de ajustes ofrece opciones adicionales para el bloque seleccionado (colores, tipografía, espaciado).

Puedes mover bloques arrastrándolos y soltándolos o con las flechas arriba/abajo de la barra de herramientas. También puedes agrupar, copiar, duplicar o convertir bloques en otro tipo (por ejemplo, un párrafo en encabezado).

Bloques avanzados

Bloque Grupo

El bloque Grupo te permite combinar varios bloques en una sola unidad. Resulta útil para aplicar un color de fondo, un espaciado o un borde común a un conjunto de bloques. Por ejemplo, puedes agrupar un encabezado, un párrafo y un botón en una "tarjeta" con color de fondo y esquinas redondeadas.

Bloque Columnas

El bloque Columnas crea un diseño a varias columnas. Puedes elegir entre variantes predefinidas (50/50, 33/33/33, 25/50/25, etc.) o fijar manualmente el ancho de cada columna. Dentro de cada columna puedes añadir cualquier bloque. En móvil, las columnas se apilan verticalmente de forma automática.

Bloque Tabla

Para datos en formato tabular, el bloque Tabla ofrece una forma sencilla de crear tablas sin HTML. Puedes definir el número de filas y columnas, dar estilo al encabezado y al pie de la tabla y aplicar un estilo de filas alternas para mejorar la legibilidad. Para tablas más complejas, valora un plugin como TablePress.

Bloques reutilizables (patrones sincronizados)

Desde WordPress 6.3, los bloques reutilizables pasaron a llamarse "patrones sincronizados". Es una de las funciones más potentes de Gutenberg. Puedes guardar cualquier bloque o grupo de bloques como patrón y luego usarlo en varias páginas.

Diferencia clave: cuando cambias un patrón sincronizado, el cambio se aplica automáticamente a TODAS las páginas donde se usa ese patrón. Es ideal para elementos que se repiten en varias páginas: llamadas a la acción (CTA), datos de contacto, banners promocionales, formularios de newsletter.

Para crear un patrón sincronizado: selecciona el bloque o los bloques, haz clic en los tres puntos de la barra de herramientas, elige "Crear patrón" y dale un nombre. Para insertarlo en otra página, búscalo en la sección Patrones del insertador de bloques.

Atajos de teclado

Los atajos de teclado aceleran muchísimo el trabajo en Gutenberg. Los más útiles:

• / (barra): en un párrafo vacío, abre la búsqueda rápida de bloques.
• Ctrl+Shift+D: duplica el bloque seleccionado.
• Ctrl+Alt+T: añade un bloque nuevo encima del actual.
• Ctrl+Alt+Y: añade un bloque nuevo debajo del actual.
• Ctrl+Shift+Z: rehacer.
• Ctrl+Z: deshacer.
• Escape: selecciona el bloque (cambia del modo edición al modo selección).
• Enter: crea un bloque nuevo debajo.
• Ctrl+Shift+,: oculta/muestra el panel de ajustes de la barra lateral.
• Shift+Alt+H: muestra todos los atajos de teclado disponibles.

En Mac, usa Cmd en lugar de Ctrl. Estos atajos funcionan en todas las versiones modernas de WordPress.

Consejos para trabajar de forma más eficiente

Usa la "Vista de lista" (Ctrl+Alt+O) para ver la estructura de todos los bloques en una vista jerárquica, especialmente útil en páginas largas. Prueba el modo "Pantalla completa" para trabajar sin distracciones. Usa la opción "Barra de herramientas superior" si no te gusta que la barra aparezca encima de cada bloque. Organiza los bloques de uso frecuente en patrones para crear contenido más rápido.

Conclusión

El editor Gutenberg es una herramienta potente que transforma la forma de crear contenido en WordPress. El enfoque por bloques te da control visual sin código, los patrones sincronizados ahorran tiempo con el contenido repetido y los atajos de teclado agilizan el trabajo diario. Invierte tiempo en aprender Gutenberg: te lo devolverá con creces. Para un rendimiento óptimo del editor, usa hosting optimizado para WordPress y crea contenido más rápido y mejor.