DEV Community

Kalimah Apps
Kalimah Apps

Posted on

3 1

Adding outline to Gutenberg blocks

When building a complex layout using Gutenberg, the most frustrating issue is to select a block or its parent. It is rare occurrence (at least in my experience) that you can select a block on first click without the help of the breadcrumbs at the bottom of the editor.

To solve this problem we can add an outline to each block to clearly show nested blocks and click on the appropriate one.

First we need to enqueue the style file.
Add this code to functions.php in your theme or main file in your plugin:

add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_style('outline-style', plugin_dir_url(__FILE__) . "/outline-style.css", false, '1.0', 'all');
});
Enter fullscreen mode Exit fullscreen mode

Then add this style inside oytline.style.css (code is presented in SCSS, make sure to convert to CSS before using it):

.wp-block {
    outline: 1px solid transparent;
    outline-offset: 7px;
    transition: all 0.2s;
    &:hover {
        outline-color: lightgray;
    }
    .wp-block {
        outline-offset: 2px;
    }
}
Enter fullscreen mode Exit fullscreen mode

The code will add an outline around each block but there is still an issue of identifying the name of the block especially when using custom blocks.

We can modify the style a little bit to add the title of the block on the right top corner (code in SCSS):

.wp-block {
    outline: 1px solid transparent;
    outline-offset: 7px;
    transition: all 0.2s;
    &:hover {
        outline-color: lightgray;

        &::before {
            content: attr(data-type);
            padding: 0.3em 0.6em;
            font-size: 0.8rem;
            position: absolute;
            color: black;
            font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
            top: 0;
            right: 0;
            left: initial !important;
            background-color: lightgray;
            transition: all 0.2s;
            pointer-events: none;
            z-index: 5;
            font-weight: normal;
        }
    }

    .wp-block {
        outline-offset: 2px;
    }
}
Enter fullscreen mode Exit fullscreen mode

While this works fine there might be further issues that uses face. For example, some users want to always display outline (not just on hover), change the color, opacity or not display it at all.

To fix these issues I developed a WordPress plugin that enables users to change outline settings (like color, opacity and style) as well as show/hide the outline.

You can find the plugin here:

GitHub logo kalimahapps / Editor-Block-Outline

WordPress Gutenberg editor block outline plugin

or install it from WordPress plugins directory.
https://wordpress.org/plugins/editor-block-outline/

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
jotcomponents profile image
Jotcomponents

Very good idea and helpfull solution. On WP 5.6.1 occurs js error in controls.js on line 6 el = wp.element.createElement;
Commenting this code line suppress error and block outlines are mostly shown. Only group block is not labeled.

Other solution is plugin
wordpress.org/plugins/block-guide-... Block Guide Lines By Marchetti Design which gives better results and the block marking is very good. No problem with 'group' block outline.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay