Initial release of Visual Block Inspector. Automatic visual inspection for Gutenberg blocks.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":2},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3444170,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3444170,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3444182,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3444181,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3444027,"resolution":"1","location":"assets","locale":""}},"screenshots":{"1":"Color-coded outlines on blocks with hover labels","2":"Column numbering when hovering over columns container","3":"Grid items showing both number and block type","4":"Visual hierarchy - parent labels outside, child labels inside","5":"Purple outline highlighting the post\/page title"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[148857,4932,148076,254397,156735],"plugin_category":[],"plugin_contributors":[252859],"plugin_business_model":[],"class_list":["post-274743","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-developer-tools","plugin_tags-gutenberg","plugin_tags-layout-inspector","plugin_tags-visual-inspector","plugin_contributors-raulfg","plugin_committers-raulfg"],"banners":{"banner":"https:\/\/ps.w.org\/visual-block-inspector\/assets\/banner-772x250.png?rev=3444181","banner_2x":"https:\/\/ps.w.org\/visual-block-inspector\/assets\/banner-1544x500.png?rev=3444182","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/visual-block-inspector\/assets\/icon-128x128.png?rev=3444170","icon_2x":"https:\/\/ps.w.org\/visual-block-inspector\/assets\/icon-256x256.png?rev=3444170","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/visual-block-inspector\/assets\/screenshot-1.png?rev=3444027","caption":"Color-coded outlines on blocks with hover labels"}],"raw_content":"\n
Visual Block Inspector adds automatic visual inspection overlays to all blocks in the WordPress editor:<\/p>\n\n
No configuration needed<\/strong> - just activate and hover over blocks!<\/p>\n\n Standard blocks (no children):<\/strong>\n* Label inside at top-right corner\n* Colored background matching outline\n* Shows block type name<\/p>\n\n Parent containers (with children):<\/strong>\n* Label outside, centered above block\n* Text only, no background\n* Shows container structure<\/p>\n\n Special numbering:<\/strong>\n* Columns<\/strong>: Hover over core\/columns to see numbers (1, 2, 3...) on each column\n* Grids<\/strong>: Shows both item number (left) and block name (right) simultaneously<\/p>\n\n Ever felt lost editing a complex page? Not sure which block is which? Wondering if that's a column or a group?<\/p>\n\n Visual Block Inspector solves this instantly.<\/strong><\/p>\n\n Perfect for:\n* WordPress developers building complex layouts\n* Designers who need to understand block structure\n* Content creators working with nested blocks\n* Site builders managing columns and grids\n* Beginners learning how the Block Editor works\n* Anyone who's ever been confused editing a page<\/p>\n\n This plugin:\n* Does NOT track users\n* Does NOT make external calls\n* Does NOT collect any data\n* Works entirely in your browser\n* Never sends anything to external servers<\/p>\n\n 100% privacy-friendly and secure.<\/p>\n\n\n That's it! No settings to configure.<\/p>\n\n\n No! The plugin only works in the WordPress editor. Your actual website looks exactly the same to visitors.<\/p><\/dd>\n Nope! Just activate the plugin and start editing. Everything works automatically.<\/p><\/dd>\n Not at all. The plugin is super lightweight (only 12KB) and uses modern browser features for smooth performance.<\/p><\/dd>\n Yes! If you know CSS, you can customize the colors by editing the CSS variables in No. This plugin is specifically designed for the native WordPress Block Editor (Gutenberg). It won't work with third-party page builders.<\/p><\/dd>\n This plugin only works with the Block Editor (Gutenberg). If you're still using the Classic Editor, this plugin won't do anything.<\/p><\/dd>\n 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.<\/p><\/dd>\n Absolutely! The plugin is free and GPL-licensed. Use it on as many sites as you want, including client projects.<\/p><\/dd>\n Modern browsers with CSS Older browsers will show solid colors instead of semi-transparent outlines.<\/p><\/dd>\n\n<\/dl>\n\n\nColor Coding System<\/h4>\n\n
\n
Smart Labels<\/h4>\n\n
Why You Need This Plugin<\/h4>\n\n
Technical Features<\/h4>\n\n
\n
Privacy & Security<\/h3>\n\n
\n
visual-block-inspector<\/code> folder to \/wp-content\/plugins\/<\/code><\/li>\n\n
Will this change how my website looks to visitors?<\/h3><\/dt>\n
Do I need to configure anything?<\/h3><\/dt>\n
Does it slow down the editor?<\/h3><\/dt>\n
Can I change the colors?<\/h3><\/dt>\n
assets\/css\/editor.css<\/code>.<\/p><\/dd>\nDoes it work with page builders like Elementor?<\/h3><\/dt>\n
What if I use the Classic Editor?<\/h3><\/dt>\n
Does it work on mobile\/tablet?<\/h3><\/dt>\n
Can I use it on client sites?<\/h3><\/dt>\n
What browsers are supported?<\/h3><\/dt>\n
color-mix()<\/code> support:\n* Chrome 111+\n* Firefox 113+\n* Safari 16.4+<\/p>\n\n1.0.0<\/h4>\n\n
\n