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.