Responsive Block Control – Hide blocks based on display width

Skildring

Responsive Block Control adds responsive toggles to a «Visibility» panel of the block editor, to show or hide blocks according to screen width.

Security

Version 1.3.1 resolves a stored cross‑site scripting (XSS) vulnerability (CVE‑2025‑62135) affecting earlier versions (<= 1.2.9).
Users with contributor access or higher should update immediately.

If you discover a security vulnerability, please report it responsibly to: security@saschapaukner.de

Limitations

Does not work with the Classic Block, Widget Block or Widget Area Block [«core/freeform», «core/legacy-widget», «core/widget-area»], as the those blocks do not support block attributes. Does also not work with the HTML Block [«core/html»] inside the Widget Screen, as this one also does not support block attributes there.

Configuration

Override existing breakpoints

function override_responsive_block_control_breakpoints($break_points) {
     $break_points['base'] = 0;
     $break_points['mobile'] = 400;
     $break_points['tablet'] = 800;
     $break_points['desktop'] = 1000;
     $break_points['wide'] = 1600;

     return $break_points;
 }

 add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_breakpoints');

Provide custom CSS

You can provide your own CSS rules per breakpoint using the new filter responsive_block_control_custom_css_rules.

add_filter('responsive_block_control_custom_css_rules', function($rules) {
    return [
        'mobile'  => 'display: none !important;',
        'tablet'  => 'display: none !important;',
        'desktop' => 'display: none !important;',
        'wide'    => 'display: none !important;',
    ];
});

Stop css output completely

 function override_responsive_block_control_add_css() {
      return false;
  }
  add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_add_css');