Title: Visual Block Inspector Author: Raúl Fernández Published: 21 janeiro, 2026 Last modified: 21 janeiro, 2026 --- Pesquisar plugins ![](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 Por [Raúl Fernández](https://profiles.wordpress.org/raulfg/) [Baixar](https://downloads.wordpress.org/plugin/visual-block-inspector.1.0.0.zip) * [Detalhes](https://br.wordpress.org/plugins/visual-block-inspector/#description) * [Avaliações](https://br.wordpress.org/plugins/visual-block-inspector/#reviews) * [Instalação](https://br.wordpress.org/plugins/visual-block-inspector/#installation) * [Desenvolvimento](https://br.wordpress.org/plugins/visual-block-inspector/#developers) [Suporte](https://wordpress.org/support/plugin/visual-block-inspector/) ## Descrição 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. ## Capturas de tela * [[ * Color-coded outlines on blocks with hover labels ## Instalação 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. ## Perguntas frequentes ### 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. ## Avaliações ![](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/) 11 fevereiro, 2026 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. [ Leia todas as 2 avaliações ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/) ## Colaboradores e desenvolvedores “Visual Block Inspector” é um programa de código aberto. As seguintes pessoas contribuíram para este plugin. Colaboradores * [ Raúl Fernández ](https://profiles.wordpress.org/raulfg/) [Traduzir o “Visual Block Inspector” para seu idioma.](https://translate.wordpress.org/projects/wp-plugins/visual-block-inspector) ### Interessado no desenvolvimento? [Navegue pelo código](https://plugins.trac.wordpress.org/browser/visual-block-inspector/), consulte o [repositório SVN](https://plugins.svn.wordpress.org/visual-block-inspector/) ou assine o [registro de desenvolvimento](https://plugins.trac.wordpress.org/log/visual-block-inspector/) por [RSS](https://plugins.trac.wordpress.org/log/visual-block-inspector/?limit=100&mode=stop_on_copy&format=rss). ## Registro de alterações #### 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 ## Meta * Versão **1.0.0** * Última atualização **3 meses atrás** * Instalações ativas **Menos de 10** * Versão do WordPress ** 5.8 ou superior ** * Testado até **6.9.4** * Versão do PHP ** 7.4 ou superior ** * Idioma * [English (US)](https://wordpress.org/plugins/visual-block-inspector/) * Tags * [block-editor](https://br.wordpress.org/plugins/tags/block-editor/)[developer-tools](https://br.wordpress.org/plugins/tags/developer-tools/) [gutenberg](https://br.wordpress.org/plugins/tags/gutenberg/)[visual inspector](https://br.wordpress.org/plugins/tags/visual-inspector/) * [Visualização avançada](https://br.wordpress.org/plugins/visual-block-inspector/advanced/) ## Classificações 5 de 5 estrelas. * [ 1 avaliação com 5 estrela ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=5) * [ 0 avaliação com 4 estrela ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=4) * [ 0 avaliação com 3 estrela ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=3) * [ 0 avaliação com 2 estrela ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=2) * [ 0 avaliação com 1 estrela ](https://wordpress.org/support/plugin/visual-block-inspector/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/visual-block-inspector/reviews/#new-post) [Ver todas avaliações](https://wordpress.org/support/plugin/visual-block-inspector/reviews/) ## Colaboradores * [ Raúl Fernández ](https://profiles.wordpress.org/raulfg/) ## Suporte Tem algo a dizer? Precisa de ajuda? [Ver fórum de suporte](https://wordpress.org/support/plugin/visual-block-inspector/)