Gutenberg: cómo usar el editor de bloques de WordPress

1. ¿Qué es Gutenberg y para qué sirve?

Gutenberg es el proyecto de edición por bloques de WordPress. Su editor permite crear contenido componiendo unidades que representan distintos elementos de una página. Por ejemplo, un título es un bloque, una imagen es otro y una lista también se administra como un bloque independiente.

El editor de bloques se convirtió en la experiencia predeterminada de edición de WordPress a partir de WordPress 5.0, publicado en diciembre de 2018. Desde entonces, el sistema ha evolucionado y se ha ampliado con nuevos bloques, opciones de diseño y herramientas de edición.

Gutenberg no es un constructor externo que debas instalar obligatoriamente para escribir en WordPress. El editor de bloques forma parte del núcleo de WordPress. La instalación adicional del plugin Gutenberg es una opción distinta, explicada a continuación.

2. ¿Gutenberg es lo mismo que el plugin Gutenberg?

En conversaciones cotidianas se utilizan los nombres Gutenberg y editor de bloques para hablar de la experiencia de edición. Sin embargo, conviene distinguir dos cosas:

El desarrollo del editor continúa evolucionando. Las funciones visibles pueden cambiar según la versión de WordPress, el tema activo, los plugins instalados y los permisos del usuario.

3. Conoce la interfaz del editor de bloques

Para abrir el editor, ingresa al escritorio de WordPress y selecciona Páginas → Añadir nueva o Entradas → Añadir nueva. La organización exacta de algunos controles puede variar entre versiones, pero sus áreas principales siguen una lógica similar.

Esquema conceptual, no una captura literal. Los nombres y la ubicación de los paneles pueden cambiar según la versión y los bloques disponibles.

Barra superior

Contiene controles generales como el inserter de bloques, deshacer y rehacer, herramientas de vista, previsualización y publicación. También permite acceder a otras opciones del editor.

Insertador de bloques

Se abre desde el botón con el símbolo +. Permite buscar un bloque por nombre, explorar categorías e insertar patrones o medios disponibles. También puedes escribir una barra inclinada / en una línea vacía y comenzar a escribir el nombre del bloque para insertarlo rápidamente.

Área de contenido

Es la zona central en la que se agregan, editan y ordenan los bloques. Al seleccionar uno, aparece su barra de herramientas contextual con las acciones que corresponden a ese elemento.

Vista de lista

Muestra la estructura jerárquica de los bloques de la página. Es especialmente útil cuando existen grupos, columnas o secciones anidadas. Desde esa vista puedes localizar elementos que son difíciles de seleccionar directamente en el lienzo.

Panel de ajustes

El panel lateral permite configurar las opciones del documento y del bloque seleccionado. Por ejemplo, en una imagen puedes encontrar texto alternativo y ajustes de tamaño; en un grupo pueden aparecer controles de color, dimensiones, borde o disposición, dependiendo de las capacidades del bloque y del tema.

4. Tipos de bloques que debes conocer

Los bloques se pueden combinar para crear estructuras sencillas o páginas complejas. WordPress incluye bloques habituales y los plugins pueden añadir otros. La disponibilidad concreta depende de la versión, el tema y las extensiones activas.

Bloques esenciales para comenzar

Si necesitas consultar los nombres y la disponibilidad de los bloques estándar, utiliza la lista oficial de bloques de WordPress.

5. Cómo crear una página con Gutenberg paso a paso

El siguiente procedimiento sirve para construir una página informativa desde cero. Los nombres de algunos controles pueden variar, pero el flujo general es el mismo.

1. Crear una página nueva.
   En el escritorio, abre Páginas → Añadir nueva. Escribe un título descriptivo que refleje el propósito de la página.
2. Organizar los encabezados.
   Define las secciones principales con encabezados H2 y sus apartados con H3. No uses los encabezados únicamente para agrandar texto.
3. Redactar el contenido.
   Añade párrafos, listas, tablas o citas donde aporten claridad. Una sección debe resolver una pregunta o explicar una idea concreta.
4. Incorporar imágenes y medios.
   Sube imágenes optimizadas, escribe textos alternativos descriptivos y evita archivos innecesariamente pesados.
5. Construir la composición.
   Utiliza grupos, columnas, botones y separadores para organizar el contenido. Comprueba que la lectura siga siendo cómoda en móvil.
6. Revisar los ajustes del documento.
   Comprueba enlace permanente, estado, visibilidad, imagen destacada y demás opciones disponibles en el panel de página.
7. Previsualizar y publicar.
   Revisa el aspecto en escritorio y móvil, corrige enlaces y errores, guarda el borrador y publica cuando esté listo.

6. Qué son los patrones de bloques y cómo utilizarlos

Un patrón es una combinación de bloques preparada para insertarse en una página o entrada. Puede contener, por ejemplo, un título, una imagen, varios párrafos y un botón. Los patrones ayudan a reutilizar diseños sin reconstruirlos cada vez.

WordPress distingue entre patrones sincronizados y no sincronizados:

Cómo insertar un patrón

1. Abre el insertador con el botón +.
2. Entra en la pestaña de patrones.
3. Explora las categorías o busca un diseño por nombre.
4. Selecciona el patrón para insertarlo en el punto donde está el cursor.
5. Adapta textos, imágenes y enlaces según el objetivo de la página.

Cuándo conviene crear un patrón propio

Cuando repites una sección en diferentes páginas, como una ficha de recurso, una presentación de autor, una llamada a la acción o un bloque de enlaces relacionados. Decide antes si el contenido debe permanecer sincronizado o si cada página necesita una versión distinta.

Consulta la documentación oficial sobre patrones de bloques para conocer las opciones disponibles en WordPress.

7. Diseño, estilos y ajustes de los bloques

Al seleccionar un bloque, el panel de ajustes puede mostrar controles de color, tipografía, dimensiones, espaciado, borde, fondo y opciones avanzadas. No todos los bloques ofrecen las mismas propiedades: dependen del bloque, del tema y de las capacidades registradas por el desarrollador.

Color y tipografía

Utiliza una paleta coherente y establece tamaños que mantengan una jerarquía clara. Evita cambiar el color o tamaño de cada bloque de forma aislada si el sitio ya dispone de estilos globales.

Dimensiones y espaciado

Los controles de ancho, alto, margen, relleno y separación ayudan a distribuir el contenido. Los nombres exactos de las opciones pueden variar; algunos dependen de los estilos admitidos por el tema.

Grupos, columnas y diseño adaptable

Los grupos permiten tratar varios bloques como una sección. Las columnas distribuyen contenido en paralelo, pero no conviene utilizar demasiadas en móvil. Verifica el comportamiento responsive con la vista previa y evita depender de una composición que solo funciona en pantallas grandes.

Bloque de contenido frente a plantilla del sitio

Un bloque de contenido forma parte de la página o entrada. La plantilla define elementos repetidos del sitio, como cabecera, pie, estructura de entradas y otras áreas globales. Cambiar una plantilla puede afectar a muchas páginas, por lo que conviene entender el alcance antes de guardar modificaciones.

8. Diferencia entre el editor de bloques y el Editor del sitio

Esta distinción evita confusiones habituales cuando se empieza a personalizar WordPress:

El Editor del sitio completo está vinculado a los temas de bloques y a sus capacidades. Un tema clásico puede utilizar el editor de bloques para el contenido sin ofrecer exactamente la misma experiencia de edición global. Por eso, antes de seguir un tutorial de personalización, verifica qué tipo de tema utiliza tu instalación.

9. Buenas prácticas SEO, AEO y accesibilidad al usar Gutenberg

Gutenberg facilita la organización visual del contenido, pero utilizar bloques no garantiza por sí solo un mejor posicionamiento. La calidad de la información, la estructura, la experiencia de lectura, la accesibilidad y la configuración técnica siguen siendo fundamentales.

Estructura semántica de encabezados

• Utiliza un H1 principal para el tema de la página.
• Divide los grandes apartados con H2 y sus subtemas con H3.
• No elijas H2 o H3 solo por el tamaño visual: utiliza los controles de estilo para modificar la apariencia sin romper la jerarquía.
• Escribe encabezados descriptivos que indiquen qué encontrará el lector en cada sección.

Imágenes y accesibilidad

• Escribe texto alternativo cuando la imagen aporte información relevante. Describe su contenido, no acumules palabras clave.
• Usa texto vacío en el atributo alternativo de imágenes puramente decorativas cuando corresponda.
• Utiliza enlaces con textos descriptivos, en lugar de expresiones aisladas como «haz clic aquí».
• Comprueba contraste, tamaño de texto, foco visible y navegación con teclado.
• Evita comunicar información únicamente mediante colores o iconos.

SEO técnico y enlaces internos

• Configura el título SEO, la meta description y el slug en tu herramienta SEO, no como texto visible dentro del artículo.
• Enlaza guías relacionadas de Ciborg desde el contexto donde realmente ayudan al lector.
• Optimiza el peso y las dimensiones de las imágenes y comprueba la velocidad del sitio.
• Evita duplicar el H1 si la plantilla ya imprime el título de la página.
• Comprueba que cada enlace funcione y que las páginas importantes sean accesibles desde la navegación interna.

AEO y GEO: contenido fácil de entender y citar

Para facilitar que buscadores y sistemas de respuesta comprendan una página, responde las preguntas centrales de forma directa, define los términos antes de profundizar, utiliza encabezados concretos, incluye pasos verificables y enlaza documentación primaria. Las respuestas breves de esta guía no sustituyen el desarrollo completo: permiten identificar rápidamente el concepto y luego acceder a su explicación.

No existe una etiqueta especial que garantice aparecer en respuestas generativas. La mejor base es una página útil, clara, verificable, con fuentes reconocibles y contenido que demuestre experiencia real. Si realizas una prueba práctica, incorpora capturas propias, el entorno utilizado y los pasos que efectivamente comprobaste.

10. Errores frecuentes en Gutenberg y cómo resolverlos

Antes de probar cambios en una instalación importante, crea una copia de seguridad. Si el problema aparece después de instalar una extensión o actualizar el tema, realiza las pruebas en un entorno de staging cuando sea posible.

Checklist antes de publicar una página

Marca los puntos que ya revisaste. Esta lista funciona como ayuda de trabajo en esta página y no modifica tu contenido de WordPress.

Preguntas frecuentes sobre Gutenberg y el editor de bloques

Recursos oficiales para seguir aprendiendo

Para consultar instrucciones actualizadas y profundizar en las funciones del editor, utiliza documentación mantenida por el proyecto WordPress y Google:

Continúa aprendiendo WordPress en Ciborg

Utiliza estas guías para pasar de la edición visual a la personalización, el desarrollo y el comercio electrónico: