Gutenberg: Visualize block borders in editor

  • Is there a way to visualize the borders of blocks, columns and rows while editiong a page?

    It is just for editing. The bordesr shouldn’t be shown on the original live page.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You need a custom editor stylesheet. Enqueue it with

    add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/block-editor.css", false, '1.0', 'all' );
} );

    if your stylesheet resides in your theme’s folder. The above code can go in your theme’s functions.php. You might also need
    add_theme_support('editor-styles');
    if it’s not there already.

    In block-editor.css, include

    .is-selected {
    border: solid 1px black;
}

    I’d also find this feature helpful.

    Sorry that I’m not so well versed in the technical details yet. What’s a “custom editor stylesheet”? And are you supposed to create block-editor.css as a new file? Where to put it?

    –

    Could the feature maybe be included as an option there by default in the next WP version? To enable by clicking a checkbox? That would be aaaawesome. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gutenberg: Visualize block borders in editor’ is closed to new replies.