Vlad Zelinskyi

<p>Flavor Block Visibility adds three simple toggle switches to the <strong>Advanced</strong> panel of every Gutenberg block:</p>
<ul>
<li><strong>Hide on Desktop</strong> — hides the block on large screens</li>
<li><strong>Hide on Tablet</strong> — hides the block on medium screens</li>
<li><strong>Hide on Mobile</strong> — hides the block on small screens</li>
</ul>
<h4>Features</h4>
<ul>
<li>Works with every core and third-party Gutenberg block</li>
<li>Controls appear in the native Advanced panel — no extra sidebars</li>
<li>Customizable breakpoints via <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Block Visibility</strong></li>
<li>Lightweight — CSS is only loaded on pages that actually use visibility toggles</li>
<li>Visual indicators in the editor show which blocks have visibility rules</li>
<li>No JavaScript on the frontend — pure CSS media queries</li>
<li>No build step required</li>
<li>Clean uninstall — removes all plugin data</li>
</ul>
<h4>Default Breakpoints</h4>
<ul>
<li>Mobile: 0 – 767px</li>
<li>Tablet: 768px – 1024px</li>
<li>Desktop: 1025px and above</li>
</ul>
<p>Breakpoints can be customized in <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Block Visibility</strong>.</p>


Flavor Block Visibility

Adds responsive visibility toggles to every Gutenberg block. Hide blocks on Desktop, Tablet, or Mobile right from the Advanced panel.

landwire

<p>Responsive Block Control adds responsive toggles to a “Visibility” panel of the block editor, to show or hide blocks according to screen width.</p>
<h3>Security</h3>
<p><strong>Version 1.3.1 resolves a stored cross‑site scripting (XSS) vulnerability (CVE‑2025‑62135) affecting earlier versions (<= 1.2.9).</strong><br />
Users with contributor access or higher should update immediately.</p>
<p>If you discover a security vulnerability, please report it responsibly to: security@saschapaukner.de</p>
<h4>Limitations</h4>
<p>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.</p>
<h3>Configuration</h3>
<h4>Override existing breakpoints</h4>
<pre><code>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');
</code></pre>
<h4>Provide custom CSS</h4>
<p>You can provide your own CSS rules per breakpoint using the new filter responsive_block_control_custom_css_rules.</p>
<pre><code>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;',
    ];
});
</code></pre>
<h4>Stop css output completely</h4>
<pre><code> function override_responsive_block_control_add_css() {
      return false;
  }
  add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_add_css');
</code></pre>


Responsive Block Control – Hide blocks based on display width

This plugin does exactly what I need, without adding any extra bloat. Thanks!

Great simple plugin!

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

Flavor Block Visibility vs Responsive Block Control – Hide blocks based on display width