# Outline Blocks While Editing

> Draws a faint dashed outline around blocks as you hover over them in the editor, making nested groups, columns and empty blocks easy to see.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: editor, outline, layout
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/outline-blocks-while-editing/

## Code

```php
add_action( 'enqueue_block_assets', function () {
    if ( ! is_admin() ) {
        return;
    }

    wp_register_style( 'wpide-block-outlines', false, array(), '1.0' );
    wp_enqueue_style( 'wpide-block-outlines' );
    wp_add_inline_style( 'wpide-block-outlines', '.editor-styles-wrapper .wp-block:hover{outline:1px dashed rgba(120,120,120,.45);outline-offset:2px;}.editor-styles-wrapper .wp-block.is-selected:hover{outline:none;}' );
} );
```

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Outline Blocks While Editing" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/