How To See The WordPress Blocks Outlines

WordPress Gutenberg changed the focus of the editor from writing, to “page building”. While a lot of people including myself hated it at first, its benefits have begun to grow on me. And with the bugs ironed out, I can unequivocally say that it’s far better than the original editor. Now I use blocks myself all the time within pages, allowing my content to be a lot more than just words. However, sometimes the elements get cluttered up too densely. I would like to see the WordPress blocks outlines while making changes and assigning CSS classes. Luckily, there’s an easy way to do this.

The Problem – No Block Outlines

The problem came into stark contrast for me the other day when I was creating content that was supposed to have two columns. I was writing an article comparing two products and wanted to show the features side by side.

The problem came when I wanted to style the columns. I wanted to write CSS targeting the entire block – both columns at once. But because the outer layer was so closely linked to the inner layer, it was hard for me to select what I wanted. More than once, I’ve made the mistake of applying the CSS class to the wrong container, leading to weird styling results.

For page builders who want to utilize Gutenberg’s potential to the maximum, the problem is even more severe. With all the blocks and nested content floating around, it’s necessary to be able to see which block is currently on focus, what its classes are, and which block resides under the mouse.

Using the Wayfinder Plugin

A new plugin on the WordPress repository released 4 days ago seems to fit the bill. You can download it here from wordpress.org or activate it directly on your site. When you download and install it, it takes effect immediately with no further action on your part.

Here’s a screenshot of how it looks with the plugin activated when you’re editing a post with a lot of nested blocks. I’ve removed the class names so that you can see the plugin in action more clearly:

Here you can see I have a two-column layout, and within each of them, I have a paragraph and a list. The outlines clearly show where one starts and ends. By moving your mouse or cursor, you can easily select the one you want. This makes it easy to assign individual CSS classes for more sophisticated styling.

Simple Settings to Show/Hide Info

In the WordPress Settings dashboard, you can find the settings for Wayfinder. They’re pretty simple. Here’s a screenshot:

For the first screenshot, I had unchecked the “Display block classes” box because it can get quite cluttered. But for debugging purposes, it’s quite useful as you can see at a glance which CSS styles apply to each nested block. If you want a clean look, you can even disable the block type display, since the outlines will likely be good enough for you to see where the blocks start and end.

This can be one of those plugins that you activate only when necessary. Say you’re working on a page and have to deal with some complex block formations. Just activate the plugin, finish your design, and then de-activate it when done. This will appeal to those who like to keep the plugins on their site to a minimum. It won’t interfere with your site performance when not needed.

A cool thing about the plugin is that it’s tiny – really really tiny. This version clocks in at just 3.1 KB, which is a pittance in today’s world of megabyte-sized files. So go ahead and use the Wayfinder plugin. It’s a highly specific tool and it gets the job done perfectly!