Navigate the Content Canvas With the Block Editor Outline WordPress Plugin

Last week, Kalimah Apps released its Editor Block Outline plugin to the WordPress plugin repository. The idea is simple. The plugin adds a bordered outline to each block in the document along with their associated labels. For some users, this will help them navigate more complex layouts.

There is little information available about Kalimah Apps through the usual WordPress-related channels. However, this is its second plugin in the directory. Its first plugin, which has not been updated in four years, was a massive library of over 40 shortcodes, 1,000s of icons, and dozens of animations. Editor Block Outline is much more scaled back and lean.

The plugin adds a new sidebar panel to the editor. Its icon, located in the upper right of the screen, looks like a picture frame. It has several options to allow users to personalize the experience, such as what contexts to show the outline and whether to show the block name. The latter option is sometimes best disabled when inserting blocks with many inner blocks. Otherwise, the interface may look a bit cluttered.

Users can also select an outline color, border style, and opacity. I recommend knocking opacity down below 50% for more of a guideline look, something that is visible but does not feel like it is a part of the content.

Editor Block Outline plugin in the block editor sidebar.
Selecting outline options for Editor Block Outline.

All of the settings are stored as user metadata. Using this data storage method means that each user can decide how they want to use this plugin. Or, they can even disable it altogether. Because it is stored this way, settings will carry over from one post to the next.

“Do you want to know the feeling of driving while drunk, or to move around with blinders on? Then use Gutenberg without this plugin!!!” That is how one user reviewed this plugin. While I may not describe the default editor quite so — ahem — eloquently, this plugin does solve some problems, particularly when you need to more easily click around the interface.

As Brian Gardner joked on Twitter, selecting some blocks like Columns is tedious work or a fun game of whack-a-mole:

https://twitter.com/bgardner/status/1329543944401801227

Of course, there are ways around that, such as using the navigation tree, breadcrumbs, or keyboard commands. However, the block editor is meant to be a visual interface that allows end-users to simply point and click on the elements they wish to edit. Selecting specific blocks has generally improved over time, but users still run into issues. Editor Block Outline makes it a much simpler affair.

Selecting a Columns block via the Editor Block Outline plugin.
Selecting the Columns block.

In Full Site Editing (FSE) mode with the Gutenberg plugin enabled, the plugin did not hold up quite as well. Depending on the theme in use, the blocks’ text labels were sometimes huge or did not match across the canvas. The plugin’s icon was also not available on the site editor screen.

FSE is still in beta. The plugin cannot be expected to work with it yet. However, this is where I imagine the plugin will make the most sense for many users. In the post editor, it would get in the way of writing long-form posts. However, the plugin could become an invaluable tool for navigating complex layouts in both the post and site editors.

More than anything, the reason I like Editor Block Outline is its dedication to a singular purpose. It adds a simple feature that enhances the editor without taking on too large of a role.

9

9 responses to “Navigate the Content Canvas With the Block Editor Outline WordPress Plugin”

  1. I think this plugin is a great move in the right direction! It’s like when you need to let the mechanic take a look under the hood of your car, but as an end-user, you don’t always want to see the engine to enjoy the ride.

    It makes great sense to start providing a debugging library layer for the Gutenberg project and support developers with different access levels.

    I doubt it will be of much help for the end-user to manage complex layouts. Complexity is not reduced through more complexity, and this experience should be embedded in the core of the layout system (blocks), not as an afterthought.

    I hope that more people will notice and appreciate this plugin’s goal and limit its purpose before going overboard with new fancy features.

  2. Perfect timing – I just created a comment block (only shows in Dashboard) and I wanted a way to clearly show that it was a comment block (apart from the colouring). I copied some CSS from this plugin to add ‘comment’ in the top right of the block.

    I do see a brilliant use case – distinguishing which column block is in use when you have plugins that provide additional column blocks. It’s often hard to know whether you are using a core block or an identically named one from a plugin.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.