Title: Visual Block Inspector Author: Raúl Fernández Published: 2026 年 1 月 21 日 Last modified: 2026 年 1 月 21 日 --- 搜索插件 ![](https://ps.w.org/visual-block-inspector/assets/banner-772x250.png?rev=3444181) ![](https://ps.w.org/visual-block-inspector/assets/icon-256x256.png?rev=3444170) # Visual Block Inspector 作者：[Raúl Fernández](https://profiles.wordpress.org/raulfg/) [下载](https://downloads.wordpress.org/plugin/visual-block-inspector.1.0.0.zip) * [详情](https://cn.wordpress.org/plugins/visual-block-inspector/#description) * [评价](https://cn.wordpress.org/plugins/visual-block-inspector/#reviews) * [安装](https://cn.wordpress.org/plugins/visual-block-inspector/#installation) * [开发进展](https://cn.wordpress.org/plugins/visual-block-inspector/#developers) [支持](https://wordpress.org/support/plugin/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. ## 屏幕截图 * [[ * Color-coded outlines on blocks with hover labels ## 安装 1. Upload the `visual-block-inspector` folder to `/wp-content/plugins/` 2. Activate from **WordPress Admin Plugins** 3. Open any post/page in Block Editor 4. Hover over blocks to see outlines and labels That’s it! No settings to configure. ## 常见问题 ### Will this change how my website looks to visitors? No! The plugin only works in the WordPress editor. Your actual website looks exactly the same to visitors. ### Do I need to configure anything? Nope! Just activate the plugin and start editing. Everything works automatically. ### Does it slow down the editor? Not at all. The plugin is super lightweight (only 12KB) and uses modern browser features for smooth performance. ### Can I change the colors? Yes! If you know CSS, you can customize the colors by editing the CSS variables in `assets/css/editor.css`. ### Does it work with page builders like Elementor? No. This plugin is specifically designed for the native WordPress Block Editor ( Gutenberg). It won’t work with third-party page builders. ### What if I use the Classic Editor? This plugin only works with the Block Editor (Gutenberg). If you’re still using the Classic Editor, this plugin won’t do anything. ### Does it work on mobile/tablet? The plugin works in the WordPress editor on any device. However, the hover effects work best with a mouse. On touch devices, you may need to tap blocks to see labels. ### Can I use it on client sites? Absolutely! The plugin is free and GPL-licensed. Use it on as many sites as you want, including client projects. ### What browsers are supported? Modern browsers with CSS `color-mix()` support: * Chrome 111+ * Firefox 113+ * Safari 16.4+ Older browsers will show solid colors instead of semi-transparent outlines. ## 评价 ![](https://secure.gravatar.com/avatar/061ec5c4e043371a9ce9e2ef0a6339a5d55dcd8a61c1e3d999914ed11746d802? s=60&d=retro&r=g) ### 󠀁[A useful tool that I will use more often.](https://wordpress.org/support/topic/a-useful-tool-that-i-will-use-more-often/)󠁿 [Orlandoo](https://profiles.wordpress.org/orlandoo/) 2026 年 2 月 11 日 I have often been annoyed that it is not immediately clear what kind of block I am dealing with. Well, I now often work in the document overview/list view, as this view is particularly detailed.But with this plugin, I can easily get an overview. It’s really useful, and I’m surprised that this functionality isn’t already available as standard in Gutenberg.There are other plugins that perform this task, but they usually mess up the whole layout.“Visual Block Inspector,” on the other hand, works discreetly and unobtrusively. [ 阅读所有2条评价 ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/) ## 贡献者及开发者 「Visual Block Inspector」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Raúl Fernández ](https://profiles.wordpress.org/raulfg/) [帮助将「Visual Block Inspector」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/visual-block-inspector) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/visual-block-inspector/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/visual-block-inspector/)，或通过 [RSS](https://plugins.trac.wordpress.org/log/visual-block-inspector/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/visual-block-inspector/)。 ## 更新日志 #### 1.0.0 * Initial release * Color-coded outlines for all blocks * Smart label positioning (inside vs outside) * Column and grid numbering system * 20-color auto-assignment palette * Post/page title highlighting * CSS variables for easy customization * Iframe editor support * Pure vanilla JavaScript (no frameworks) * Zero external dependencies ## 额外信息 * 版本 **1.0.0** * 最后更新：**4 月前** * 活跃安装数量 **不到10** * WordPress 版本 ** 5.8 或更高版本 ** * 已测试的最高版本为 **6.9.4** * PHP 版本 ** 7.4 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/visual-block-inspector/) * 标签 * [block-editor](https://cn.wordpress.org/plugins/tags/block-editor/)[developer-tools](https://cn.wordpress.org/plugins/tags/developer-tools/) [gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/)[visual inspector](https://cn.wordpress.org/plugins/tags/visual-inspector/) * [高级视图](https://cn.wordpress.org/plugins/visual-block-inspector/advanced/) ## 评级 5 星（最高 5 星）。 * [ 1 条 5 星评价 ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/visual-block-inspector/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/visual-block-inspector/reviews/) ## 贡献者 * [ Raúl Fernández ](https://profiles.wordpress.org/raulfg/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/visual-block-inspector/)