Visual Block Inspector
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.