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://ja.wordpress.org/plugins/visual-block-inspector/#description) * [レビュー](https://ja.wordpress.org/plugins/visual-block-inspector/#reviews) * [インストール](https://ja.wordpress.org/plugins/visual-block-inspector/#installation) * [開発](https://ja.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. ## FAQ ### 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/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/visual-block-inspector/) を [RSS](https://plugins.trac.wordpress.org/log/visual-block-inspector/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 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://ja.wordpress.org/plugins/tags/block-editor/)[developer-tools](https://ja.wordpress.org/plugins/tags/developer-tools/) [gutenberg](https://ja.wordpress.org/plugins/tags/gutenberg/)[visual inspector](https://ja.wordpress.org/plugins/tags/visual-inspector/) * [詳細を表示](https://ja.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/)