前言介紹
- 這款 WordPress 外掛「Visual Block Inspector」是 2026-01-20 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2026-01-21，距離現在已有 36 天。
- 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
raulfg |
外掛標籤
gutenberg | block-editor | developer-tools | layout-inspector | visual inspector |
內容簡介
總結：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.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Visual Block Inspector」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。