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://ko.wordpress.org/plugins/visual-block-inspector/#description) * [평가](https://ko.wordpress.org/plugins/visual-block-inspector/#reviews) * [설치](https://ko.wordpress.org/plugins/visual-block-inspector/#installation) * [개발](https://ko.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** * 최근 업데이트: **5개월 전** * 활성화된 설치 **10보다 적음** * 워드프레스 버전 ** 5.8 또는 그 이상 ** * 다음까지 시험됨: **6.9.4** * PHP 버전 ** 7.4 또는 그 이상 ** * 언어 * [English (US)](https://wordpress.org/plugins/visual-block-inspector/) * 태그: * [block-editor](https://ko.wordpress.org/plugins/tags/block-editor/)[developer-tools](https://ko.wordpress.org/plugins/tags/developer-tools/) [gutenberg](https://ko.wordpress.org/plugins/tags/gutenberg/)[visual inspector](https://ko.wordpress.org/plugins/tags/visual-inspector/) * [고급 보기](https://ko.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/)