Make WordPress Core
Read post

Responsive block styles and configurable viewports in WordPress 7.1

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.

    #css#wordpress#ui-design
Aug 05•3m read time•From make.wordpress.org
Post cover image
Table of contents
Defining responsive block styles in `theme. json `Block instance attributesConfigurable breakpointsOpting out of responsive editing
47.1K Impressions4 Comments
Make WordPress Core's image
Make WordPress Core

WordPressCore's platform is a central hub for WordPress developers and contributors, offering insigh...

425 Followers

•

1.4K Upvotes

Would you recommend this post?

Copy link
WhatsApp
Facebook
X
New Squad
  • © 2026 Daily Dev Ltd.
  • Guidelines
  • Explore
  • Tags
  • Sources
  • Squads
  • Leaderboard