WordPress 7.1, publicado el 19 de agosto de 2026, incorporó estados de estilos responsivos para bloques en Tablet y Mobile directamente en el sistema de estilos. En la práctica hay dos caminos: quien edita páginas puede cambiar propiedades por viewport sin escribir media queries manualmente, mientras que los autores de temas pueden definir los mismos estados en theme.json y personalizar los límites de Mobile y Tablet.
El modelo es desktop-first. El estilo normal del bloque funciona como base y sigue aplicándose en todos los tamaños hasta que una propiedad se sobrescribe en @tablet o @mobile. Por eso no existe una clave @desktop.
Qué breakpoints usa WordPress 7.1 por defecto
| Estado | Rango predeterminado | Qué ocurre |
|---|---|---|
| @mobile | ancho ≤ 480px | Los valores definidos para Mobile sustituyen la base dentro de este rango. |
| @tablet | 480px < ancho ≤ 782px | Los valores de Tablet se aplican por encima de Mobile y hasta el límite de Tablet. |
| Base | por encima de 782px, por defecto | No usa una clave especial; es el estilo normal del bloque. |
El tema puede modificar estos límites. La documentación oficial también indica que los anchos configurados se usan tanto en los estilos responsivos como en la visibilidad de bloques y se pueden previsualizar mediante la vista de dispositivos del editor.
Ruta 1: usar estilos responsivos directamente en el editor
Para un ajuste puntual, el flujo más sencillo es el selector de dispositivo del editor. Activa la edición responsiva, cambia la vista previa a Tablet o Mobile y después modifica una propiedad de estilo del bloque. El cambio queda asociado al viewport activo.
- En el editor de bloques, abre el selector de vista de dispositivo en la barra superior.
- Activa Responsive editing (edición responsiva).
- Selecciona Tablet o Mobile, o redimensiona el lienzo de edición hasta el rango deseado.
- Selecciona un bloque con soporte de estilos y modifica una propiedad, como tamaño de fuente, color, borde, espaciado, dimensiones o layout.
- Vuelve a Desktop para confirmar que el valor base se conservó.
- Comprueba también el otro viewport menor para ver si hereda la base o tiene una sobrescritura propia.
El comportamiento se basa en herencia: si defines un tamaño de fuente en Desktop y no cambias ese campo en Tablet o Mobile, el mismo valor sigue vigente. Solo la propiedad modificada en el viewport menor se sobrescribe.
Qué es responsivo y qué sigue siendo global
Los estados responsivos se aplican a propiedades expuestas por los soportes de estilo de los bloques, entre ellas tipografía, color, fondo, borde, dimensiones, espaciado y layout. Esto no convierte automáticamente todos los controles del editor en ajustes específicos por viewport. En las pruebas oficiales de WordPress 7.1, por ejemplo, controles de la barra del bloque como la alineación seguían aplicándose a todos los dispositivos, mientras que los controles de estilo del inspector lateral eran el foco de la edición por viewport.
Ruta 2: declarar @mobile y @tablet en theme.json
Los autores de temas pueden guardar estados responsivos junto a los estilos de cada bloque. El ejemplo siguiente mantiene un padding de 3rem como base y lo reduce a 1rem solo en Mobile:
{
"styles": {
"blocks": {
"core/group": {
"spacing": { "padding": { "top": "3rem", "right": "3rem", "bottom": "3rem", "left": "3rem" } },
"@mobile": { "spacing": { "padding": { "top": "1rem", "right": "1rem", "bottom": "1rem", "left": "1rem" } } }
}
}
}
}
El mismo patrón funciona con @tablet. También se pueden combinar estados de viewport con pseudoestados: el orden documentado es primero el viewport y después el pseudoestado, por ejemplo @mobile que contiene :hover.
Cómo cambiar los breakpoints con settings.viewport
Los límites se configuran en el nivel superior de settings, no dentro de un bloque específico. Por ejemplo:
{
"settings": {
"viewport": {
"mobile": "30rem",
"tablet": "45rem"
}
}
}
Con ambos valores válidos, esto crea un rango Mobile hasta 30rem y un rango Tablet por encima de 30rem y hasta 45rem. El resto continúa utilizando la base.
Qué unidades se aceptan
WordPress 7.1 acepta longitudes numéricas no negativas en px, em o rem. Los porcentajes, valores sin unidad, funciones CSS y otras unidades se ignoran. Por tanto, valores como 480px, 30em y 30rem son compatibles; en cambio, 50%, 480 o una expresión con una función CSS no cumplen la regla documentada.
Qué ocurre si un breakpoint no es válido
- Si solo Mobile o solo Tablet es válido, el estado válido conserva su nombre y usa una única consulta de ancho máximo.
- Si ninguno es válido, WordPress vuelve a los valores predeterminados de 480px y 782px.
- Si ambos son válidos pero Tablet es menor o igual que Mobile, solo se utiliza el breakpoint Mobile.
- settings.viewport es global para el tema; no puede configurarse con valores diferentes para cada tipo de bloque.
Por qué no existe @desktop
La ausencia de @desktop evita duplicar el estilo base. Si un Group tiene padding de 3rem en su declaración normal, ese valor es el punto de partida en cualquier ancho. Una regla @tablet puede cambiar solo el padding, mientras que el color, el borde y otras propiedades siguen heredándose. Una regla @mobile puede volver a sobrescribir únicamente lo necesario.
Este detalle ayuda tanto a mantener la configuración concisa como a entender la cascada: Tablet y Mobile son excepciones de la base, no tres conjuntos de estilos independientes.
Cuándo usar el editor y cuándo usar theme.json
| Escenario | Mejor punto de partida |
|---|---|
| Ajuste visual de un bloque específico en una página | Editor con la edición responsiva activada. |
| Regla que debe aplicarse a todas las instancias de un tipo de bloque | Estilos globales o theme.json. |
| Estandarizar breakpoints en todo el sitio | settings.viewport en theme.json. |
| Cambiar solo Desktop | Edita el estilo base; no busques @desktop. |
Checklist antes de publicar
- Confirma que el sitio utiliza WordPress 7.1 u otra versión compatible con la función.
- Define primero la base y después añade solo las excepciones necesarias para Tablet y Mobile.
- No planifiques breakpoints distintos por componente: WordPress usa los valores globales de settings.viewport.
- Valida las unidades y mantén Mobile < Tablet.
- Prueba con el selector de dispositivo del editor y también redimensionando el navegador en el front-end.
- Comprueba que las propiedades sin sobrescritura siguen heredando correctamente la base.
Fuentes oficiales
La implementación y sus límites están documentados en la nota de desarrollo de WordPress 7.1 Responsive block styles and configurable viewports in WordPress 7.1, en la Theme.json Version 3 Reference y en la guía Global Settings & Styles. El flujo del editor también fue detallado en Call for Testing: Responsive Styling. La versión final de WordPress 7.1 se publicó el 19 de agosto de 2026, según el anuncio oficial de lanzamiento.
