Automatic color-coded outlines and labels for Gutenberg blocks. See your page structure instantly while editing.

Raúl Fernández

Visual Block Inspector adds automatic visual inspection overlays to all blocks in the WordPress editor:
<ul>
<li>Color-coded outlines around every block (40% opacity by default, 100% on hover)</li>
<li>Smart labels showing block names on hover (e.g., core/paragraph, core/group)</li>
<li>Automatic numbering for columns and grid items</li>
<li>Hierarchy visualization – parent labels appear outside (centered), child labels inside (top-right)</li>
</ul>
No configuration needed – just activate and hover over blocks!
<h4>Color Coding System</h4>
<ul>
<li>Green outlines = Layout/container blocks (core/group, core/columns, core/grid, etc.)</li>
<li>Unique colors = Content blocks automatically assigned from 20-color Material Design palette</li>
<li>Purple outline = Post/page title</li>
</ul>
<h4>Smart Labels</h4>
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
<h4>Why You Need This Plugin</h4>
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
<h4>Technical Features</h4>
<ul>
<li>Pure vanilla JavaScript (no frameworks, no build process)</li>
<li>CSS-only visual effects (hover, transitions)</li>
<li>MutationObserver for automatic block detection</li>
<li>~12KB total (CSS + JS)</li>
<li>Works in both standard and iframe editors</li>
<li>Zero external dependencies</li>
</ul>
<h3>Privacy & Security</h3>
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.

Alternatives to Visual Block Inspector

Top alternatives