Flavor Block Visibility

Flavor Block Visibility adds three simple toggle switches to the Advanced panel of every Gutenberg block:

• Hide on Desktop — hides the block on large screens
• Hide on Tablet — hides the block on medium screens
• Hide on Mobile — hides the block on small screens

Features

• Works with every core and third-party Gutenberg block
• Controls appear in the native Advanced panel — no extra sidebars
• Customizable breakpoints via Settings → Block Visibility
• Lightweight — CSS is only loaded on pages that actually use visibility toggles
• Visual indicators in the editor show which blocks have visibility rules
• No JavaScript on the frontend — pure CSS media queries
• No build step required
• Clean uninstall — removes all plugin data

Default Breakpoints

• Mobile: 0 – 767px
• Tablet: 768px – 1024px
• Desktop: 1025px and above

Breakpoints can be customized in Settings → Block Visibility.

1. Upload the flavor-block-visibility folder to /wp-content/plugins/
2. Activate through the Plugins menu in WordPress
3. Select any block → open the Advanced panel in the sidebar → use the toggles
4. Optionally adjust breakpoints in Settings → Block Visibility

1. 

   Toggle controls in the Advanced panel of the block sidebar.

2. 

   Settings page for customizing breakpoints.

1.1.0

• Editor: blocks hidden on the current preview device now display a grey overlay with a label — so it’s clear they won’t appear on that device.
• Editor: blocks with any hide rule show a thin blue outline and a small badge on other devices — visual confirmation the plugin is active.
• Removed the old dashed outline in favour of the new per-device-aware indicators.

1.0.0

• Initial release.
• Hide on Desktop, Tablet, and Mobile toggles for all Gutenberg blocks.
• Customizable breakpoints via Settings page.
• Conditional CSS loading — styles only load when needed.
• Visual editor indicators for hidden blocks.