Using css to display visual indicators around Gutenberg columns for easier editing

Gutenberg has had mixed reactions since it first appeared. Personally, I think it's a huge leap in the right direction. However, I do think that the UX for the editor could be improved in places.

One of my biggest gripes is that fact that there are no visual indicators to show where each block starts or finishes. For the most part this isn't an issue, because most blocks are a single elements, but I do feel that the columns block needed some visual clues to see where the column sits inside a row (yes, I know you can use the Block Navigation to navigate through the block structure, but this is tedious and not visually intuitive).

I wanted to see if I could add a border to the block elements, to make it easier to click on the column or the row, without randomly clicking on the page in the hope that you might hit the right target. By adding a little padding to the column display, it also makes it much easier to select the row.

The dashed line above indicates the row, and the dotted lines indicate the columns - simple!

To achieve this, we need to add a Block Editor stylesheet to the template. First add this to the functions.php file in your template.

/*Sets up block editor style sheet*/
add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_style('tms-block-styles', get_stylesheet_directory_uri() . "/block-editor.css", false, '1.0', 'all');
});

...or if using a plugin...

/*if loading from plugin*/
add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_style('tms-block-styles', plugins_url('/block-editor-min.css', __FILE__), false, '1.0', 'all');
});

Then create a new file in the root of your template folder called block-editor.css. In this file add the following:

/* fix for Gutenberg columns */
.wp-block-columns {padding: 20px; border: 1px dashed #d7d7d7;}
.wp-block-columns:hover {border: 1px dashed #c4c4c4;}
.editor-styles-wrapper .wp-block .wp-block.wp-block-column {border: 1px dotted #d7d7d7 !important;}
.editor-styles-wrapper .wp-block .wp-block.wp-block-column:hover {border: 1px dotted #c4c4c4 !important;}

...and that's it. Makes editing columns soooo much easier.

At the same time, you may want to adjust the default editor width in Gutenberg by adding the following:

/* 
 * Adjust Main column width to 720px (Default is 580px)
 */
.wp-block {
    max-width: 1180px;
}

/* 
 * Adjust Wide view width to 1280px (Default is 1080px)
 */
.wp-block[data-align="wide"] {
    max-width: 1280px;
}

As a bonus, I also created some styles for the Gutenberg Blocks by Kadence Blocks plugin as well. Add the following to the block-editor.css file, and you'll get the same results for the Kadence Block rows.

/* fix for Kadence Row display */
.wp-block-kadence-rowlayout { padding-left: 20px; padding-right: 20px; }
.wp-block-kadence-rowlayout { border: 1px dashed #e6e6e6; }
.wp-block-kadence-rowlayout .kadence-column {border: 1px dotted #e6e6e6;}
.wp-block-kadence-rowlayout:hover { border: 1px dashed #c4c4c4; }
.wp-block-kadence-rowlayout:hover .kadence-column { border: 1px dotted #c4c4c4; }

I noticed recently that the Gutenberg Blocks – Ultimate Addons for Gutenberg already does something similar.