En pocas palabras: WordPress 7.1 permite definir tamaños, espaciados y colores distintos por viewport (móvil, tablet y escritorio) desde el editor visual, sin escribir CSS. Funciona con lógica desktop-first y los temas configuran sus propios breakpoints en theme.json. La nota oficial se publicó el 5 de agosto de 2026.
WordPress 7.1 suma estilos responsive de bloques de forma nativa: desde el editor visual vas a poder definir tamaños, espaciados y colores distintos para móvil, tablet y escritorio sin escribir una línea de CSS. La nota de desarrollo oficial en make.wordpress.org se publicó el 5 de agosto de 2026.
Si alguna vez maquetaste un sitio en Gutenberg y tuviste que abrir el CSS adicional para que un título gigante no reventara en el celular, sabés de qué hablo. Esto viene a resolver justo eso (o al menos a intentarlo).
Los estilos responsive de bloques en WordPress 7.1 son una función del editor que aplica valores distintos según el tamaño de pantalla (viewport). Funciona con lógica desktop-first: lo que definís en escritorio se hereda hacia abajo hasta que lo cambiás en tablet o móvil. Los desarrolladores de temas pueden configurar sus propios breakpoints en theme.json en vez de usar los valores por defecto de WordPress.
En 30 segundos
- Qué cambia: ahora estilás bloques por viewport (móvil, tablet, escritorio) desde el editor, sin CSS.
- Cómo hereda: es desktop-first, los estilos de escritorio bajan a las pantallas chicas hasta que los pisás.
- Para devs: los breakpoints se configuran en theme.json, no estás atado a los defaults.
- Bonus: también podés estilar estados hover, focus y active desde el editor.
- Fecha: nota de dev oficial del 5 de agosto de 2026.
WordPress es un sistema de gestión de contenidos (CMS) de código abierto que permite crear y administrar sitios web y blogs. Fue creado por Matt Mullenweg y Mike Little en 2003, y la Fundación WordPress es responsable de su desarrollo.
¿Qué son los estilos de bloques responsive en WordPress 7.1?
Son la capacidad de asignar valores de estilo diferentes a un mismo bloque según el ancho de pantalla, directo desde el editor visual. Ponele que tenés un encabezado a 64px en escritorio y en el celular te queda desprolijo: seleccionás el bloque, cambiás la vista a móvil y lo bajás a 32px. WordPress guarda ese cambio solo para ese viewport.
El modelo es desktop-first. Definís primero para escritorio y ese estilo se hereda hacia móvil y tablet, salvo que lo sobrescribas en el viewport chico. Es la misma lógica que venís usando hace años en CSS con max-width, pero sin abrir el editor de código. Tema relacionado: explorar la comunidad WordPress.
¿Por qué importa tanto? Porque hasta acá el responsive real en Gutenberg dependía de CSS a mano o de un builder. Tenerlo nativo cambia el flujo de trabajo de cualquiera que arma sitios seguido.
¿Cómo aplico estilos diferentes para móvil, tablet y desktop sin CSS?
Seleccionás el bloque, cambiás la vista del editor al viewport que querés editar (Tablet o Móvil), y modificás los controles habituales: tamaño de fuente, espaciado, color, alineación. El editor muestra un indicador (badge) que te avisa qué viewport estás tocando, así no te confundís y creés que editás escritorio cuando en realidad estás en móvil.
- Elegí el bloque: clic en el bloque que querés hacer responsive.
- Cambiá el viewport: pasá la vista del editor a tablet o móvil.
- Ajustá los controles: tocá tipografía, espaciado o color y WordPress lo guarda solo para ese viewport.
- Verificá el badge: el editor te marca qué pantalla estás editando en ese momento.
Un consejo de oficio: editá siempre de escritorio hacia abajo. Si arrancás por el móvil y después tocás escritorio, la herencia te puede jugar en contra y terminás peleando con valores que no sabés de dónde salieron.
¿Cómo configuro breakpoints personalizados en theme.json?
Los desarrolladores de temas pueden declarar sus propios viewports en theme.json en lugar de heredar los valores por defecto de WordPress (móvil y tablet). Esto alinea los puntos de corte del editor con el sistema de diseño del tema, así el responsive del contenido usa los mismos breakpoints que el layout general. Lo explicamos a fondo en crear landing pages responsivas.
La idea, según lo que documenta el equipo de core y amplía la guía de Global Settings and Styles, es que theme.json siga siendo la fuente de verdad. Vos definís los viewports una vez y el editor los respeta para todos los bloques.
Si armás temas a medida para clientes, esto es un golpe de aire fresco. Antes cada tema traía su propio grid de breakpoints en CSS y Gutenberg no se enteraba. Ahora se hablan.
¿Cuál es la diferencia entre Global Styles y estilos por bloque?
Global Styles aplica a todas las instancias de un bloque en el sitio; los estilos por bloque afectan solo a ese bloque puntual. En 7.1 ambos aceptan variantes por viewport. Si querés que todos los párrafos del sitio bajen de tamaño en móvil, lo hacés desde Global Styles una vez. Si es un solo bloque el que te molesta, lo arreglás ahí y listo.
Regla práctica: usá Global Styles para decisiones de diseño que se repiten (todos los botones, todos los H2) y estilos por bloque para excepciones puntuales. Mezclar los dos sin criterio es la receta perfecta para no entender después por qué un bloque se ve distinto al resto.
Estados hover, focus y active: ahora también desde el editor
WordPress 7.1 también permite estilar estados de interacción (:hover, :focus, :active) desde el editor, y esos estados pueden variar por viewport. El caso típico: el color de un botón cuando le pasás el mouse por encima en escritorio, o el estilo de foco cuando alguien navega con teclado en el celular. En probar en un entorno staging profundizamos sobre esto.
Esto es más útil de lo que parece. El estado :focus bien hecho es accesibilidad pura, y antes había que meterlo a mano en el CSS. Que un editor lo exponga con controles visuales baja la barrera para que la gente lo configure (y ojalá lo haga).
¿Necesito plugins o builders visuales si tengo WordPress 7.1?
Depende de qué tan complejo sea tu diseño. Para blogs, landings simples y sitios corporativos, el responsive nativo de 7.1 te alcanza y te sobra, con la ventaja de que no cargás JavaScript ni CSS extra de un builder. Para diseños con animaciones pesadas, layouts muy irregulares o lógica condicional, un builder como Bricks o Elementor todavía tiene sentido.
| Enfoque | Responsive | Peso / performance | Cuándo conviene |
|---|---|---|---|
| Nativo WordPress 7.1 | Por viewport desde el editor | Mínimo, sin JS extra | Blogs, corporativos, landings |
| Elementor | Controles responsive propios | Alto (CSS/JS del builder) | Equipos no técnicos, diseños complejos |
| Divi | Controles responsive propios | Alto | Agencias con licencia y flujo Divi |
| Bricks | Breakpoints personalizables | Medio, más liviano que los otros | Devs que quieren control fino |
El punto a favor del nativo es la mantenibilidad: si mañana desactivás un builder, tu diseño se rompe. El responsive de core no depende de ningún plugin. Y como todo termina en un servidor, si vas a probar esto en un sitio de verdad, corré la última versión de core en un hosting WordPress como el de Donweb antes de decidir si el builder te sigue haciendo falta.
Errores comunes al usar estilos responsive en WordPress 7.1
- Pelearte con tu CSS viejo: si tenías media queries a mano para arreglar el responsive, ahora pueden chocar con los estilos nativos. Revisá y limpiá lo que ya no haga falta antes de que se contradigan.
- Dejar plugins de responsive legacy encendidos: muchos sitios arrastran plugins que hacían este trabajo. Con 7.1 son redundancia (y peso muerto). Desactivalos y probá.
- Asumir que todos los breakpoints se comportan igual: si tu tema define viewports propios en theme.json, no son los mismos que los defaults. Confirmá cuáles estás usando.
- No probar en dispositivos reales: el preview del editor está bueno, pero no reemplaza abrir el sitio en un celular de verdad. La «vista móvil» del editor miente lo suyo.
Preguntas Frecuentes
¿Qué son los estilos responsive en WordPress 7.1?
Son una función del editor que permite aplicar estilos diferentes a un bloque según el tamaño de pantalla (móvil, tablet, escritorio) sin escribir CSS. Se anunció en la nota de desarrollo oficial del 5 de agosto de 2026 y funciona con herencia desktop-first.
¿Cómo defino estilos diferentes para móvil, tablet y desktop sin CSS?
Seleccionás el bloque, cambiás la vista del editor al viewport que querés (Tablet o Móvil) y ajustás los controles de tipografía, espaciado o color. WordPress guarda esos valores solo para ese viewport y muestra un badge indicando cuál estás editando. Complementá con detectar y reparar enlaces rotos.
¿Puedo personalizar los breakpoints en mi tema?
Sí. Los desarrolladores de temas pueden declarar viewports propios en theme.json en lugar de usar los valores por defecto de WordPress. Así el editor usa los mismos puntos de corte que el sistema de diseño del tema.
¿Cuál es la diferencia entre Global Styles y estilos por bloque?
Global Styles aplica a todas las instancias de un bloque en el sitio; los estilos por bloque afectan solo al bloque que estás editando. En 7.1 los dos aceptan variantes por viewport, así que podés hacer responsive tanto global como puntual.
¿Desde cuándo WordPress soporta diseño responsive nativo por bloque?
El soporte nativo de estilos responsive por viewport llega con WordPress 7.1, según la nota de desarrollo del 5 de agosto de 2026. Antes el responsive fino dependía de CSS manual, de Global Styles sin variantes por pantalla, o de un builder externo.
Conclusión
WordPress 7.1 mete el responsive donde siempre tendría que haber estado: en el editor, por bloque y por viewport, sin obligarte a abrir el CSS. Para el que arma sitios seguido, esto acorta el flujo de trabajo y saca dependencias de encima.
Lo que yo haría ahora: probá la beta en un entorno local o de staging, revisá que tu CSS a mano no choque con los estilos nativos, y si usás un builder solo por el responsive, replanteá si te sigue haciendo falta. Eso sí, no lo pongas en producción hasta la release estable y sin haberlo mirado en un celular de verdad.
Fuentes
- Make WordPress Core – Responsive block styles and configurable viewports in WordPress 7.1 (nota oficial)
- WordPress Developer – Global Settings and Styles (theme.json)
- Gutenberg Times – WordPress 7.1 source of truth
- Ben Ryan – Responsive breakpoints en 7.1 para agencias
- WPBeginner – Qué trae WordPress 7.1
