內容簡介
總結：Visual Block Inspector 外掛為 WordPress 編輯器的每個區塊添加自動視覺檢查覆蓋層，提供著色輪廓、智慧標籤、自動編號和層次視覺化等功能，不需任何配置，只需啟用並懸停於區塊上即可使用。
問題與答案：
1. 這個外掛主要提供了哪些視覺檢查功能？
- 色碼輪廓，預設為 40% 不透明度，懸停時為 100%
- 智慧標籤，懸停時顯示區塊名稱
- 自動編號功能，針對列和網格項目
- 層次視覺化，父級標籤位於外側（置中），子級標籤位於內側（右上角）
2. 為什麼需要安裝 Visual Block Inspector 外掛？
- 解決在編輯複雜頁面時感到迷失的問題，幫助用戶快速識別各個區塊
- 適合 WordPress 開發者、設計師、內容製作者、網站構建者、初學者等需要了解區塊結構的人使用
3. 該外掛的技術特點有哪些？
- 純粹的 vanilla JavaScript
- 純 CSS 視覺效果（懸停、過渡）
- 使用 MutationObserver 進行自動區塊檢測
- 總大小約 12KB（包括 CSS 和 JS）
- 可在標準和 iframe 編輯器中運作
4. 關於該外掛的隱私與安全性資訊？
- 該外掛不追蹤使用者，不進行外部呼叫，且不收集任何數據
- 完全在您的瀏覽器中執行，不會將任何內容發送至外部伺服器
- 100% 友好隱私與安全。
外掛標籤
開發者團隊
原文外掛簡介
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.
