Simple Block Visibility
A lightweight WordPress plugin allowing editors to choose to hide blocks depending on custom breakpoints.
by Valentin Grenier · github.com/valentin-grenier/simple-block-visibility · website
★ 1stars
0forks
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/valentin-grenier/simple-block-visibility/archive/refs/heads/main.zipFrom the readme
Simple Block Visibility
Show or hide Gutenberg blocks based on custom breakpoints — no coding required.
Features
- Hide any core Gutenberg block on Mobile, Tablet, Laptop, or Desktop
- Define your own breakpoint pixel values in Settings Block Visibility
- Breakpoint labels update live in the editor to reflect your settings
- Pure CSS approach — no JavaScript on the frontend, no layout shifts
- Works with all core and custom Gutenberg blocks
How It Works
1. The plugin registers hideOnMobile, hideOnTablet, hideOnLaptop, and hideOnDesktop boolean attributes on every core Gutenberg block
2. A Visibility panel appears in the block's Inspector Controls (Settings tab)
3. On the frontend, PHP injects a small tag with 4 media query rules based on your admin-defined breakpoints
4. When a block has a hide attribute set, PHP adds the matching CSS class (sblv-hide-mobile, etc.) to the block's opening tag via the renderblock filter
Installation
From source
Then activate the plugin in the WordPress admin.
Development
Settings
Go to Settings Block Visibility and configure:
| Field | Default | Description |
|---|---|---|
| Mobile max-width | 550px | Screens ≤ this width are "Mobile"