![Expandir con: ["Gradientes de fondo combinables con imágenes en bloques", "Cómo aplicar gradientes sobre imágenes en el editor de bloques"] - ilustracion](https://wordpress.donweb.com/wp-content/uploads/2026/04/gradientes-fondo-bloques-gutenberg-22-9-hero-1024x576.jpg)
Con Gutenberg 22.9, combinar gradientes de fondo en bloques Gutenberg con imágenes ya no requiere CSS manual ni trucos de :before/:after. El editor incorporó soporte nativo para superponer degradados sobre fondos de imagen directamente desde las opciones del bloque, sin tocar una línea de código.
En 30 segundos
- Gutenberg 22.9 (lanzado el 8 de abril de 2026) permite combinar gradiente + imagen como fondo en el bloque Grupo sin conflictos de CSS.
- Los pseudo-estados (:hover, :focus, :active) son editables desde Global Styles con previsualización en tiempo real desde la versión 22.8.
- La paleta de comandos renovada («Workflow Palette») agrupa recientes y sugerencias contextuales; se activa desde Experiments.
- El bloque Fondo (Cover) sigue siendo la opción más robusta para overlays con parallax o video de fondo.
- Confundir opacidad del bloque con transparencia del degradado es el error más común; son controles separados.
Gutenberg es el editor de bloques de WordPress desarrollado por Automattic y la comunidad de WordPress.org. Permite crear y editar contenido visual mediante una interfaz basada en bloques modulares.
Gradientes en Gutenberg: de manuales a nativos
Un gradiente de fondo en Gutenberg es una transición de color aplicada como fondo de un bloque, definida desde las opciones del panel lateral sin editar CSS. Hasta hace poco, si querías un degradado encima de una foto (el clásico efecto que hace legible el texto sobre una imagen) tenías dos opciones: usar el bloque Fondo con su overlay, o meterte con CSS extra en el editor de estilos adicionales.
Ponele que querés un bloque Grupo con una foto de fondo y un degradado oscuro en la parte inferior para que el título blanco se lea bien. Antes de 22.9, eso implicaba agregar la imagen como fondo del Grupo, luego un degradado, y rezar para que no se pisaran. El resultado habitual era que se aplicaba uno o el otro, pero no los dos juntos. (spoiler: el CSS adicional terminaba siendo el camino de facto para todos.)
Según el anuncio oficial de Gutenberg 22.9, la actualización del 8 de abril de 2026 resolvió este problema con soporte explícito para combinar imagen + gradiente en el mismo bloque contenedor.
Bloque Grupo: capas de color y degradados de fondo en bloques Gutenberg
El bloque Grupo es el contenedor más usado del editor. En el panel de la derecha, dentro de «Estilos», encontrás la sección «Fondo». Ahí podés elegir entre color sólido, gradiente, o imagen. El cambio en 22.9 es que ahora podés tener imagen y gradiente activos al mismo tiempo, y el editor los apila en el orden correcto sin que te pises los pies.
Cómo queda la superposición concretamente: la imagen va primero (como fondo), y el gradiente se aplica encima como capa. El selector te deja ajustar opacidad del gradiente de manera independiente a la imagen, lo cual es justo lo que necesitabas para hacer que el texto respire. Más contexto en crear una landing page con diseño profesional.
Antes tenías que escribir algo así en CSS adicional:
.mi-bloque-grupo {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8)), url('foto.jpg');
}Ahora eso lo manejás desde el panel lateral. Es un cambio menor en código, pero un cambio enorme en flujo de trabajo para quien arma landing pages o secciones hero sin tocar CSS.
Superponer gradientes sobre imágenes: casos reales
Hay tres escenarios donde esto aparece todo el tiempo:
- Texto sobre hero: degradado de transparent a negro en la parte inferior del bloque, título blanco encima. Funciona para cualquier foto sin importar el brillo.
- Sección de CTA: imagen de fondo tenue con degradado de color de marca encima al 70% de opacidad. Mantiene la textura visual sin que la foto compita con el copy.
- Cards con imagen de fondo: en un Grupo con altura fija, el degradado lateral hace legible el título sin un rectángulo de color sólido.
Para todos estos casos, el flujo en 22.9 es: seleccioná el bloque Grupo → panel Estilos → Fondo → subí o elegí la imagen → cambiá el tipo a «Gradiente» (no reemplaza la imagen, se suma) → ajustá los colores y la opacidad del degradado.
Eso sí: si la imagen que usás es muy oscura y el gradiente también va de oscuro a oscuro, vas a terminar con un bloque que parece un cuadrado negro. Ajustá el punto inicial del gradiente o usá una imagen con más contraste.
Bloque Fondo (Cover): cuándo sigue siendo la mejor opción
El bloque Fondo no se quedó obsoleto con estos cambios. Tiene capacidades que el Grupo todavía no tiene:
- Parallax: la imagen se mueve a distinta velocidad que el scroll.
- Video de fondo: podés poner un .mp4 como fondo en lugar de imagen.
- Altura mínima configurable sin CSS extra.
- Posición de contenido (arriba, centro, abajo, derecha, izquierda) directamente desde el toolbar.
Para una landing page con un video de fondo y texto centrado, Cover sigue siendo la herramienta. Para una sección de contenido con imagen y overlay de color, el Grupo en 22.9 ya compite de igual a igual con Cover y tiene la ventaja de que podés anidar otros bloques con más flexibilidad. Ya lo cubrimos antes en mejorar la presentación visual de tu tienda.
La pregunta que me hacen siempre: ¿cuándo uso uno y cuándo el otro? Si necesitás parallax o video, usá Cover. Para todo lo demás, el Grupo con fondo combinado ya alcanza.
Pseudo-estados en Global Styles: :hover, :focus y :active sin CSS extra
Esta feature llegó con la serie 22.8/22.9 y es de las más útiles para trabajo de theme en FSE. Hasta ahora, si querías cambiar el color de un botón al pasar el mouse encima, ibas a Estilos Adicionales y escribías `.wp-block-button:hover { background: …; }`. Con pseudo-estados en Global Styles, podés hacerlo desde la UI.
El acceso es: Editor de Sitio → Estilos → elegís un elemento (Botones, Enlace, o cualquier bloque con estados soportados) → arriba del selector de color aparece un dropdown con Normal, Hover, Focus, Active. Cambiás al estado que querés, modificás color/borde/sombra, y el preview en el fondo del editor te lo muestra en tiempo real.
Lo que podés estilizar por pseudo-estado hasta ahora: colores de texto y fondo, borde, sombra de caja. Las transformaciones (scale, translate) todavía no están en la UI (si las necesitás, seguís con CSS adicional o un plugin de animaciones). (que no es poco igual, porque cubren el 80% de los casos típicos.)
Esto es especialmente útil si estás armando themes para clientes y querés que puedan customizar hover states sin tocarte el CSS. Les mostrás la UI de Global Styles y listo.
Paleta de comandos renovada en Gutenberg 22.9
La paleta de comandos existía antes (Ctrl+K o Cmd+K), pero era básicamente una lista plana de acciones. En 22.9 la renombraron «Workflow Palette» y la reorganizaron con dos secciones: Sobre eso hablamos en probar los cambios de diseño de forma segura.
- Recientes: las últimas acciones que ejecutaste, ordenadas por uso.
- Contextuales: sugerencias según lo que estés editando en ese momento (si estás en un bloque Imagen, te sugiere acciones de imagen; si estás en texto, te sugiere formato).
Por ahora está en Experiments (Ajustes → Gutenberg → Experiments → Workflow Palette). Es probable que en las próximas versiones pase a estar activa por defecto.
¿Vale la pena habilitarla ya? Si editás sitios complejos con muchos bloques, sí. Si hacés posts simples, no vas a notar mucha diferencia.
Tabla comparativa: bloque Grupo vs bloque Fondo para overlays
| Característica | Bloque Grupo (22.9+) | Bloque Fondo (Cover) |
|---|---|---|
| Imagen + gradiente combinados | Sí (nativo en 22.9) | Sí (siempre) |
| Parallax | No | Sí |
| Video de fondo | No | Sí |
| Altura mínima configurable | Requiere CSS o spacer | Sí (nativo) |
| Posición del contenido | Flexbox manual | Toolbar nativo |
| Opacidad de overlay independiente | Sí | Sí |
| Flexibilidad de layout interior | Alta (Flex/Grid) | Media |
| Casos de uso ideal | Secciones de contenido complejo | Heroes, banners, backgrounds decorativos |
Errores comunes al usar gradientes con imágenes
Error 1: confundir la opacidad del bloque con la transparencia del gradiente. El bloque tiene un control de opacidad global en «Opciones avanzadas» que afecta todo el bloque (imagen, degradado y contenido). El degradado tiene su propio control de opacidad dentro del selector de gradiente. Si bajás la opacidad del bloque, el texto también se transparenta. Lo que querés tocar es la opacidad del degradado en sí, no la del bloque.
Error 2: usar colores muy claros en gradientes sobre imágenes oscuras. Un degradado de blanco a transparente sobre una foto oscura crea un efecto de bruma que hace ilegible tanto el texto como la imagen. Para fotos oscuras, el gradiente tiene que ir del color del texto (negro o el color del sitio) hacia transparente, no desde blanco.
Error 3: intentar el combo gradiente + imagen en versiones anteriores a 22.9 y esperar que funcione. Cualquiera que lo intentó sabe que el CSS generado por el editor pisaba uno de los dos fondos. Si tu instalación tiene Gutenberg 22.8 o menor (o si usás WordPress sin el plugin Gutenberg actualizado), el comportamiento es distinto. Actualizá primero. Lo explicamos a fondo en descubrir las nuevas funciones del editor de bloques.
Error 4: olvidar el contraste para accesibilidad. Un gradiente al 30% de opacidad sobre una foto iluminada puede dejar el texto en relación de contraste 2:1, muy por debajo del mínimo WCAG de 4.5:1. El plugin «Accessibility Checker» o el propio inspector de Chrome te lo dice en dos segundos antes de publicar.
Todos los detalles los tenés en Expandir con: [«Gradientes de fondo combinables con imágenes.
Si querés seguir explorando, mirá Expandir con: [«Gradientes de fondo combinables con imágenes.
Preguntas Frecuentes
¿Cómo aplicar un gradiente sobre una imagen en Gutenberg?
En Gutenberg 22.9 o superior: seleccioná el bloque Grupo, andá a Estilos en el panel derecho, y en la sección Fondo primero subí la imagen, luego cambiá el tipo de fondo de «Sólido» a «Gradiente». El editor aplica el degradado como capa encima de la imagen. Ajustá colores y opacidad del gradiente con el selector nativo.
¿Qué es Global Styles y cómo usar pseudo-estados?
Global Styles es el sistema de diseño centralizado del editor de sitio (FSE) donde definís tipografía, colores y estilos por defecto para todo el sitio. Desde Gutenberg 22.8, incluye edición de pseudo-estados (:hover, :focus, :active) para botones y enlaces. Accedés desde Editor de Sitio → ícono de paleta → Estilos → elemento que querés editar → selector de estado en el panel lateral.
¿Cuál es la diferencia entre el bloque Fondo y el bloque Grupo?
El bloque Fondo (Cover) está diseñado para backgrounds visuales con parallax, video, y control de posición de contenido nativo. El bloque Grupo es un contenedor de layout general con mayor flexibilidad para organizar bloques internos. Desde 22.9, el Grupo también soporta imagen + gradiente combinados, lo que achicó la brecha. Para parallax o video de fondo, seguís necesitando Cover.
¿Qué nuevas características trae Gutenberg 22.9?
Gutenberg 22.9, lanzado el 8 de abril de 2026, incorporó: combinación nativa de imagen + gradiente en bloques Grupo, la «Workflow Palette» (paleta de comandos renovada con secciones de recientes y contextuales, en Experiments), y mejoras en la API de bloques. La edición de pseudo-estados en Global Styles llegó en 22.8 y se consolidó en 22.9.
¿Cómo hacer un overlay degradado en el bloque grupo sin CSS?
Con Gutenberg 22.9: seleccioná el bloque Grupo → Estilos → Fondo → elegí imagen → cambiá tipo a Gradiente. El editor combina ambos sin CSS manual. Si necesitás más control (posición del gradiente, múltiples puntos de color), usá el selector de gradiente nativo. Para versiones anteriores a 22.9 o themes clásicos, seguís necesitando CSS adicional o el bloque Cover.
Conclusión
Gutenberg 22.9 cerró una brecha que hacía perder tiempo: combinar degradados con imágenes en bloques Grupo ya no necesita CSS manual. Es un cambio pequeño en términos de feature, pero grande en flujo de trabajo para quienes arman layouts con el editor.
Los pseudo-estados en Global Styles son la otra novedad que vale la pena adoptar, especialmente si hacés themes para clientes en FSE. Poder mostrarles que el hover de los botones se configura desde la UI es un argumento concreto para que dejen de pedirte plugins de customización.
Si querés probar todo esto sin tocarte un sitio en producción, armá un staging. La mayoría de los planes de hosting WordPress de Donweb incluyen entornos de staging con un clic, lo que viene bien exactamente para este tipo de pruebas con features experimentales. La Workflow Palette todavía está en Experiments, así que es el tipo de cosa que conveniene validar antes de meterla en un sitio de cliente.
La dirección de Gutenberg está clara: más control de diseño sin código. Los pseudo-estados y los overlays nativos son dos pasos en ese camino. El siguiente lógico sería animaciones de transición en la UI, pero eso es especulación por ahora.
![Expandir con: ["Cifras finales de asistencia y comparativa con ediciones anteriores", "Principales anuncios y novedades del evento"] - ilustracion](https://wordpress.donweb.com/wp-content/uploads/2026/04/wordcamp-asia-2026-resultados-mumbai-hero.png)