Automatic color-coded outlines and labels for Gutenberg blocks. See your page structure instantly while editing.
| Author: | Raúl Fernández (profile at wordpress.org) |
| WordPress version required: | 5.8 |
| WordPress version tested: | 6.9 |
| Plugin version: | 1.0.0 |
| Added to WordPress repository: | 21-01-2026 |
| Last updated: | 21-01-2026 |
| Rating, %: | 100 |
| Rated by: | 1 |
| Plugin URI: | |
| Total downloads: | 115 |
 Click to start download |
|
Visual Block Inspector adds automatic visual inspection overlays to all blocks in the WordPress editor:
- Color-coded outlines around every block (40% opacity by default, 100% on hover)
- Smart labels showing block names on hover (e.g., core/paragraph, core/group)
- Automatic numbering for columns and grid items
- Hierarchy visualization – parent labels appear outside (centered), child labels inside (top-right)
No configuration needed – just activate and hover over blocks!
Color Coding System
- Green outlines = Layout/container blocks (core/group, core/columns, core/grid, etc.)
- Unique colors = Content blocks automatically assigned from 20-color Material Design palette
- Purple outline = Post/page title
Smart Labels
Standard blocks (no children):
* Label inside at top-right corner
* Colored background matching outline
* Shows block type name
Parent containers (with children):
* Label outside, centered above block
* Text only, no background
* Shows container structure
Special numbering:
* Columns: Hover over core/columns to see numbers (1, 2, 3…) on each column
* Grids: Shows both item number (left) and block name (right) simultaneously
Why You Need This Plugin
Ever felt lost editing a complex page? Not sure which block is which? Wondering if that’s a column or a group?
Visual Block Inspector solves this instantly.
Perfect for:
* WordPress developers building complex layouts
* Designers who need to understand block structure
* Content creators working with nested blocks
* Site builders managing columns and grids
* Beginners learning how the Block Editor works
* Anyone who’s ever been confused editing a page
Technical Features
- Pure vanilla JavaScript (no frameworks, no build process)
- CSS-only visual effects (hover, transitions)
- MutationObserver for automatic block detection
- ~12KB total (CSS + JS)
- Works in both standard and iframe editors
- Zero external dependencies
Privacy & Security
This plugin:
* Does NOT track users
* Does NOT make external calls
* Does NOT collect any data
* Works entirely in your browser
* Never sends anything to external servers
100% privacy-friendly and secure.
Screenshots
FAQ
ChangeLog