Gutenberg

Qué es Gutenberg

Gutenberg es el editor de bloques nativo de WordPress, integrado en el core desde la versión 5.0 (diciembre 2018). Reemplazó al editor clásico TinyMCE con un sistema modular donde cada elemento de contenido (párrafo, imagen, encabezado, tabla, botón) es un "bloque" independiente que se puede insertar, mover, personalizar y combinar. El nombre proviene de Johannes Gutenberg, inventor de la imprenta. Hoy es el editor predeterminado de WordPress, que alimenta el 43% de todos los sitios web del mundo.

Evolución: de editor a Site Editor

Gutenberg ha evolucionado en cuatro fases planificadas. La Fase 1 (completada) introdujo el editor de bloques para contenido. La Fase 2 (en progreso) expandió a Full Site Editing (FSE): templates, headers, footers y sidebars editables con bloques. La Fase 3 abordará la colaboración multiusuario en tiempo real. La Fase 4 se enfocará en soporte multilingüe nativo. En 2025-2026, la Fase 2 está madura con el Site Editor accesible desde Apariencia > Editor, que permite diseñar la estructura completa del sitio sin tocar código PHP.

Gutenberg y ecommerce (WooCommerce Blocks)

WooCommerce ha integrado completamente bloques Gutenberg para construir tiendas online. Los WooCommerce Blocks permiten insertar grids de productos, filtros, carrito, checkout, y reviews directamente en el editor de bloques. Desde WooCommerce 8.0+, el checkout basado en bloques es la experiencia por defecto para nuevas instalaciones.

Bloques de producto

Product Grid, Product Collection, Product Categories, Best Sellers, On Sale, Featured Product, y Hand-Picked Products. Cada bloque acepta filtros por categoría, tag, atributo, precio y stock. En WooCommerce 10.2+ se añadieron layouts de carrusel y filtros de taxonomía (marca, etiqueta). Cross-Sells collection muestra productos relacionados automáticamente.

Bloques de checkout

Cart Block y Checkout Block reemplazan las shortcodes legacy [woocommerce_cart] y [woocommerce_checkout]. Ofrecen personalización visual directa, campos condicionales, y compatibilidad con extensiones de pago (Stripe, PayPal). El Mini Cart Block permite un carrito desplegable integrado en el header sin plugins adicionales.

Bloques de filtrado

Filter by Price, Filter by Attribute, Filter by Rating y Active Filters. Implementan filtrado AJAX sin recarga de página. Esenciales para categorías con catálogos amplios donde el usuario necesita refinar su búsqueda.

Block Patterns y templates

Los Block Patterns son combinaciones prediseñadas de bloques que se insertan con un clic. WordPress incluye una librería creciente de patterns, y el directorio de patterns (wordpress.org/patterns) ofrece miles más creados por la comunidad. Para ecommerce, existen patterns de hero sections con CTA, grids de producto, testimoniales, FAQs, y landing pages optimizadas para conversión. Los block themes (temas basados en bloques) como Twenty Twenty-Five aprovechan FSE para controlar toda la apariencia del sitio.

Ecosystem de plugins de bloques

El ecosystem de Gutenberg ha generado cientos de plugins que extienden sus capacidades. Spectra (de Astra) añade 30+ bloques avanzados. Stackable ofrece diseño premium con controles de responsive. GenerateBlocks se enfoca en minimalismo y rendimiento. Kadence Blocks combina diseño avanzado con WooCommerce. Para ecommerce, WowStore agrega 40+ bloques WooCommerce con quick view, wishlists y pre-order. La Community Template Gallery sigue creciendo con bloques específicos para tiendas online.

Rendimiento y consideraciones técnicas

Gutenberg renderiza HTML semántico en el frontend, no carga JavaScript del editor en la parte pública. Los bloques core están optimizados para Web Vitals (LCP, CLS, INP). Sin embargo, plugins de bloques de terceros pueden añadir CSS y JS adicional que impacta la velocidad. La combinación de bloques core + WooCommerce Blocks + un block theme como Twenty Twenty-Five ofrece el stack más ligero y compatible con el futuro de WordPress.

Veredicto

Gutenberg ya no es opcional: es WordPress. Para ecommerce en WooCommerce, los bloques de producto, checkout y filtrado están maduros y son la experiencia recomendada para nuevas tiendas. Full Site Editing permite personalizar headers, footers y templates sin page builders de terceros. La inversión en aprender Gutenberg y FSE es la que mejor se alinea con el futuro de WordPress. Los page builders como Elementor siguen siendo más flexibles visualmente, pero Gutenberg cierra la brecha rápidamente y sin coste adicional.

Características Principales

• Editor de bloques modular: 90+ bloques core (párrafo, imagen, galería, tabla, botón, columnas, grupo).
• WooCommerce Blocks: Product Grid, Collection, Cart, Checkout, Mini Cart, filtros por precio/atributo/rating.
• Full Site Editing: templates de página, header, footer, sidebar y archive editables con bloques.
• Block Patterns: combinaciones prediseñadas de bloques para inserción rápida de layouts.
• Reusable Blocks: bloques globales que se actualizan en todas las instancias simultáneamente.
• Block Themes: temas diseñados completamente con bloques (Twenty Twenty-Five, Flavor, Flavor).
• Global Styles: tipografía, colores, espaciado y layout configurables globalmente desde theme.json.
• API de bloques para desarrolladores: registro de bloques custom con React y PHP.
• Responsive design nativo con controles de visibilidad y spacing por breakpoint.

Se integra con 13 herramientas