Responsive Block Control – Hide blocks based on display width

Description

Responsive Block Control adds responsive toggles to a “Visibility” panel of the block editor (i.e Gutenberg), to show or hide blocks according to screen width.

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');

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');

Screenshots

  • The 'Responsive Block Control' toggles at work in the block editor.

Installation

  1. Upload responsive-block-control.php to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

Is it possible to use different breakpoints?

Yes, use the following code in your functions.php or similar.

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');

Can I write my own CSS and just use the classes?

Yes, that is absolutely possible. Just use the filter below to stop the plugin from injecting its’ styles:

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

Reviews

March 7, 2020
Hi there, thank you for a great little plugin! It is ideal for showing some content for small screens and some other content for bigger screens. What really makes it stand out from other plugins is that you can adjust the breakpoints and tune them to correspond with your plugins in your theme.
Read all 1 review

Contributors & Developers

“Responsive Block Control – Hide blocks based on display width” is open source software. The following people have contributed to this plugin.

Contributors

“Responsive Block Control – Hide blocks based on display width” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Responsive Block Control – Hide blocks based on display width” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.0

  • Initial Release of the plugin