Show/Hide Gutenberg Blocks Depending On Viewport Size – Responsive Block Control

A responsive visibility control plugin for Gutenberg that allows the admin to show & hide specified blocks depending on the current device: Desktop, Tablet, Mobile, and Wide.

How to use it:

1. Install and activate the Responsive Block Control plugin on your latest WordPress.

2. Click a block inside the Gutenberg editor and select on which device the block should be hidden from the right setting panel as follows:

Responsive Block Control Settings

3. Save the post/page and done.

4. To override the default breakpoints, change the screen size as shown below and then insert the PHP snippets into the function.php.

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

Download WordPress Plugin:

You can download this free WordPress plugin using the download button below. Unless otherwise stated, the WordPress plugin is available under GNU General Public License.

Author: Sascha Paukner


Don’t forget to share this WordPress plugin and also check out other awesome plugins on our site.

Rate This Plugin
User Review
0 (0 votes)