Block Revealer

by

Published on January 31, 2020, my first plugin on the WordPress repository aims to improve the editing experience under Gutenberg.

See the plugin at the bottom of the page.

Modern editor

WordPress has since version 5.0 integrated a new content editor. This new Gutenberg editor (in reference to the larger WordPress evolution project named Gutenberg) is characterized by a content edition articulated by blocks. I would not go back here on this new approach but my plugin aims to help contributors to use Gutenberg more easily.

WYSIWYG

Gutenberg has the quality of reducing the difference between the appearance of content on the back office and front office. In other words, with Gutenberg, unlike the classic editor, you have the possibility of obtaining WYSIWYG.

Problem

However, leaving the focus on formatting, the editor tends to fade. It is erased to enhance the final result but it is sometimes difficult to simply find a block to be able to modify or select it because its location is not clearly visible. This side effect is ultimately quite logical. When looking for a visual result close to the front-office result, we are no longer interested in the structural appearance of our layout. We do not want to see the blocks but rather visualize the simple end result.

Inspiration

On closer examination, this problem is not an isolated case. Preparing a layout while viewing the final result is the hallmark of any layout software.

InDesign, for example, has been responding to this problem for a long time. It has several modes including a normal mode and an preview mode. Normal mode is therefore the classic working mode where you visualize all the elements (blocks) of your composition with their selection outlines, their various handles, etc. and the preview mode removes all these technical assistance intended for the layout work and presents your work to you as it will be printed. So you can work properly and you can also see the result at your convenience.

Plugin

https://wordpress.org/plugins/wp-block-revealer

This plugin therefore makes it possible to highlight your blocks present in your content by marking their outlines with a colored border. Activated by keyboard shortcut, you can easily switch from one mode to another to view your blocks and then return to the overview of your usual page.

Without configuration, once activated, this plugin is immediately usable. Finally, if you like it, don’t hesitate to say it out loud.