Responsive Block Control – Hide blocks based on display width

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.

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

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

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

1. 

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

1.2.9

• Added check to not load editor assets in the front end

1.2.8

• Updated asset loading for changes introduced in WordPress 6.3
• Added “Limitations” section to readme

1.2.7

Recompiled assets for distribution

1.2.6

• fixed translation for visiblity information
• added check for Classic Block and disabled display of settings there

1.2.0

• fixed some JS logic
• added visibility information to blocks in Gutenberg editor

1.1.1

• fixed regex for adding classes in the frontend

1.1.0

• Removed the “blocks.getSaveContent.extraProps” JS filter as it causes block validation errors
• Instead we are using the recommended PHP filter “render_block” to add the necessary classes vie preg_replace()

1.0.0

• Initial Release of the plugin