WordPress 7.1 introduces responsive style states for blocks, allowing Tablet and Mobile viewport-specific styles to be defined both globally (via Global Styles) and per block instance. Styles support typography, color, background, border, dimensions, spacing, and layout. On the frontend, WordPress generates media-query-scoped CSS and adds stable generated classes to rendered blocks. Default breakpoints are 480px for mobile and 782px for tablet, but both are now configurable using px, em, or rem units via a top-level settings.viewport setting. Sites can disable responsive editing entirely via the responsiveEditingEnabled editor setting, though any already-saved responsive styles continue to render correctly.
Table of contents
Defining responsive block styles in `theme. json `Block instance attributesConfigurable breakpointsOpting out of responsive editing47.1K Impressions4 Comments