How to Use Responsive Block Styles in WordPress 7.1

WordPress 7.1 released August 19, 2026 and ships one of the most requested developer features in years: native responsive block styles. You can now define tablet and mobile styles directly in theme.json and through the Site Editor, without writing a single line of custom CSS.

What Are Responsive Block Styles?

Responsive block styles let you define different CSS property values for different viewport sizes on a per-block basis. They work in both Global Styles and on individual block instances in the editor. The key concept: the block default style is always the desktop style. You only need to define overrides for smaller viewports using the new @mobile and @tablet keys.

Step 1: Add Responsive Styles in theme.json

Open your theme.json file and add responsive overrides under the styles.blocks section. Here is a practical example for a Group block:

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/group": {
        "spacing": {
          "padding": { "top": "3rem", "bottom": "3rem" }
        },
        "@tablet": {
          "spacing": {
            "padding": { "top": "2rem", "bottom": "2rem" }
          }
        },
        "@mobile": {
          "spacing": {
            "padding": { "top": "1rem", "bottom": "1rem" }
          }
        }
      }
    }
  }
}

In this example, the Group block uses 3rem padding on desktop, 2rem on tablet, and 1rem on mobile, all without touching a stylesheet.

Step 2: Configure Custom Breakpoints (Optional)

WordPress 7.1 ships with default breakpoints of 480px for mobile and 782px for tablet. If your design system uses different values, you can override them via the new top-level settings.viewport property:

{
  "version": 3,
  "settings": {
    "viewport": {
      "breakpoints": {
        "mobile": "640px",
        "tablet": "1024px"
      }
    }
  }
}

Important rules for breakpoint values: Values must be non-negative lengths in px, em, or rem. CSS functions, percentages, and unitless values are ignored. If the tablet value is equal to or lower than the mobile value, only mobile is used. This is a top-level setting and cannot be configured per block type.

Step 3: Add Pseudo-State Styles (Bonus Feature)

WordPress 7.1 also ships pseudo-state styling for :hover, :focus, :focus-visible, and :active. Currently limited to Button and Navigation Link blocks, you can combine them with responsive styles:

{
  "styles": {
    "blocks": {
      "core/button": {
        ":hover": {
          "color": { "background": "var:preset|color|contrast" }
        },
        "@mobile": {
          ":hover": {
            "color": { "background": "var:preset|color|contrast-2" }
          }
        }
      }
    }
  }
}

Step 4: Which Blocks Support Responsive Styles?

Blocks that use standard block supports get responsive styles automatically. This covers: Typography, Color and background, Border, Dimensions and spacing, and Layout. Blocks with custom style controls do not get responsive styles automatically and will need explicit support added.

Step 5: Disable Responsive Editing for Users (If Needed)

If you want to restrict responsive editing for certain users or contexts, you can disable it with a simple filter:

add_filter( 'block_editor_settings_all', 'my_theme_disable_responsive_editing' );

function my_theme_disable_responsive_editing( $settings ) {
    $settings['responsiveEditingEnabled'] = false;
    return $settings;
}

Key Takeaways

Responsive block styles are available in WordPress 7.1+ (released August 19, 2026)
Use @mobile and @tablet keys in theme.json with no custom CSS needed
Default breakpoints: 480px (mobile), 782px (tablet), customizable via settings.viewport
Works with all standard block supports: typography, color, spacing, layout, and more
Combine with new pseudo-state styles (:hover, :focus) for fully interactive, responsive designs

Hashtags: #WordPress #WordPress71 #BlockEditor #WebDevelopment #ThemeDevelopment #ResponsiveDesign #GutenbergBlocks #WordPressDeveloper

Resources: