Gutenberg es el editor de contenido por defecto de WordPress. Se introdujo en WordPress 5.0, publicado en diciembre de 2018, sustituyendo al Classic Editor que había sido el estándar durante más de una década. El nombre es un guiño a Johannes Gutenberg, el inventor de la imprenta. La idea central es sencilla: en lugar de un único área de texto donde formateas todo en línea, cada pieza de contenido es su propio "bloque" que puedes mover, configurar y dar estilo de forma independiente.
La historia detrás de Gutenberg
Antes de Gutenberg, WordPress usaba TinyMCE, un editor de texto enriquecido WYSIWYG (What You See Is What You Get) clásico. TinyMCE le sirvió bien a WordPress durante años, pero tenía limitaciones. Añadir diseños complejos, como secciones de varias columnas o cajas de llamada a la acción con estilo, normalmente requería shortcodes, HTML personalizado o plugins maquetadores. El equipo del núcleo de WordPress comenzó el proyecto Gutenberg en 2017 con el objetivo de hacer la creación de contenido enriquecido accesible para todos, no solo para desarrolladores o usuarios dispuestos a instalar maquetadores de terceros. Cuando WordPress 5.0 salió en diciembre de 2018, Gutenberg pasó a ser el editor por defecto para todas las nuevas entradas y páginas.
Cómo funciona el editor de bloques
Todo en Gutenberg es un bloque. Un párrafo es un bloque. Una imagen es un bloque. Un encabezado, una lista, un vídeo incrustado, un botón, una tabla; todo son bloques. Construyes una página apilando estos bloques verticalmente y configurando cada uno mediante su propia barra de herramientas y panel de ajustes. Los bloques pueden reorganizarse arrastrándolos o usando las flechas arriba/abajo. Cada bloque almacena su contenido y configuración como una combinación de HTML y comentarios HTML especiales que WordPress utiliza para reconstruir el bloque en el editor.
Categorías y tipos de bloques
WordPress incluye decenas de bloques integrados, organizados en categorías:
- Bloques de texto: Párrafo, Encabezado, Lista, Cita, Código, Preformateado, Cita destacada, Verso, Tabla.
- Bloques de medios: Imagen, Galería, Audio, Vídeo, Portada, Archivo, Medio y texto.
- Bloques de diseño: Columnas, Grupo, Fila, Apilado, Separador, Espaciador, Botones, Detalles.
- Bloques de widget: Últimas entradas, Últimos comentarios, Archivos, Categorías, Lista de páginas, Buscador, Nube de etiquetas, Iconos sociales, Calendario.
- Bloques de incrustación: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok y muchos otros servicios compatibles con oEmbed.
Bloques reutilizables y patrones de bloques
Los bloques reutilizables (ahora llamados "Patrones sincronizados" desde WordPress 6.3) te permiten guardar un bloque o grupo de bloques e insertarlos en varias entradas o páginas. Cuando actualizas un patrón sincronizado, el cambio se propaga a todos los lugares donde se usa. Esto es útil para elementos como secciones de llamada a la acción, descargos de responsabilidad o cajas de biografía del autor que aparecen en muchas páginas. Los patrones de bloques son disposiciones prediseñadas de bloques, por ejemplo una sección hero con imagen de fondo, encabezado y botón. El núcleo de WordPress incluye patrones integrados, los temas pueden registrar los suyos propios y puedes explorar cientos más en el Directorio de Patrones de WordPress.
Edición Completa del Sitio y temas de bloques
Gutenberg se ha expandido mucho más allá del contenido de las entradas. La Edición Completa del Sitio (Full Site Editing, FSE), introducida progresivamente desde WordPress 5.9 en adelante, te permite editar todo el diseño de tu sitio con bloques: cabeceras, pies de página, barras laterales, plantillas de archivo, plantillas de entrada única, páginas 404 y más. Para usar FSE, necesitas un "tema de bloques" (como los temas por defecto Twenty Twenty-Four o Twenty Twenty-Five). Los temas de bloques sustituyen la jerarquía tradicional de plantillas PHP por plantillas basadas en HTML que utilizan bloques. El Editor del Sitio (Apariencia > Editor) te ofrece una interfaz visual para personalizar cada parte de tu sitio sin escribir código. Los "temas clásicos" tradicionales siguen funcionando, pero no soportan FSE.
El plugin Classic Editor
No todo el mundo aceptó el cambio. El plugin Classic Editor fue publicado por el equipo de WordPress como una forma oficial de restaurar el antiguo editor TinyMCE. Es uno de los plugins de WordPress más instalados, con millones de instalaciones activas. WordPress se comprometió originalmente a soportar el Classic Editor hasta 2024, y el plugin sigue funcionando y recibiendo actualizaciones. Muchos sitios de larga trayectoria, especialmente aquellos con configuraciones muy personalizadas de TinyMCE o diseños complejos basados en shortcodes, todavía lo usan. Para sitios nuevos, sin embargo, el editor de bloques es la dirección clara hacia la que se dirige WordPress.
Plugin Gutenberg frente a núcleo de WordPress
Hay una distinción importante entre el plugin Gutenberg y el editor de bloques integrado en el núcleo de WordPress. El plugin Gutenberg es un plugin independiente disponible en wordpress.org que sirve como banco de pruebas para funciones planificadas para futuras versiones de WordPress. Publica nuevas actualizaciones aproximadamente cada dos semanas e incluye funciones experimentales que aún no son lo suficientemente estables para el núcleo. Una vez que una función madura en el plugin, se incorpora a la siguiente versión mayor de WordPress. Si eres desarrollador o adoptante temprano que quiere probar funciones venideras, puedes instalar el plugin Gutenberg. Para la mayoría de los propietarios de sitios, la versión incluida con el núcleo de WordPress es la elección correcta.
Consideraciones de rendimiento
Gutenberg está construido con React en el lado del editor y añade CSS y JavaScript específicos de bloques al frontend. Cada tipo de bloque puede encolar su propia hoja de estilos, así que una página que usa muchos tipos diferentes de bloques puede cargar más archivos CSS que una página construida con el Classic Editor. WordPress ha trabajado para abordar esto: desde la versión 5.8, los estilos de bloque se cargan por bloque en lugar de como una única hoja de estilos grande. Aun así, los sitios con muchos bloques o un uso intensivo de plugins de bloques de terceros pueden acabar con una sobrecarga notable en el frontend. Los propietarios de sitios centrados en el rendimiento a menudo combinan Gutenberg con un plugin de caché y una herramienta de optimización de CSS para mantener bajos los tiempos de carga.
Plugins populares de bibliotecas de bloques
Los bloques integrados cubren lo básico, pero muchos propietarios de sitios amplían el editor con bibliotecas de bloques de terceros para diseños y componentes más avanzados:
- Spectra (de Brainstorm Force): añade bloques para tablas de precios, cuadrículas de entradas, formularios, cuentas atrás, valoraciones por estrellas y más. Popular entre los usuarios del tema Astra.
- Stackable: ofrece bloques orientados al diseño con opciones avanzadas de estilo, ajustes globales y su propia biblioteca de diseños.
- GenerateBlocks: un plugin ligero del equipo de GeneratePress. Proporciona solo cuatro bloques muy flexibles (Contenedor, Titular, Botones, Cuadrícula) que pueden sustituir a decenas de bloques especializados mediante sus opciones de configuración.
- Kadence Blocks: incluye un bloque avanzado de fila/diseño, listas de iconos, cajas informativas, testimonios y un bloque de formulario. Conocido por su buen rendimiento y un nivel gratuito generoso.
- CoBlocks: de GoDaddy, ofrece bloques para recetas de cocina, tablas de precios, compartir en redes sociales, click-to-tweet y más.
Crear bloques personalizados para desarrolladores
Los desarrolladores pueden crear bloques personalizados usando la API de Bloques de WordPress. La herramienta oficial para generar la estructura de un plugin de bloque es @wordpress/create-block, que genera la estructura de archivos, la configuración de compilación y el código base. Los bloques personalizados se construyen con JavaScript (normalmente JSX con React) para el lado del editor y pueden renderizarse vía JavaScript o PHP del lado del servidor en el frontend. El archivo block.json define metadatos como el nombre del bloque, la categoría, los atributos y las funciones soportadas. Para los desarrolladores que prefieren flujos de trabajo basados en PHP, el plugin Advanced Custom Fields (ACF) ofrece ACF Blocks, que te permiten crear bloques personalizados usando plantillas PHP y campos ACF sin escribir código React.
Qué comprueba InspectWP
InspectWP detecta si tu sitio WordPress utiliza el editor Gutenberg escaneando el código fuente de la página en busca de comentarios HTML específicos de bloques (como <!-- wp:paragraph -->, <!-- wp:image --> y otros), así como archivos CSS y JavaScript relacionados con Gutenberg. Esto te ayuda a entender si un sitio ha adoptado el editor de bloques o si todavía está usando el Classic Editor.