Gutenberg Block Editor Match Admin Styles & Frontend Styles

The Editor itself doesn’t have much in the way of visible styling; it’s more to ensure consistency across Editor components themselves, like buttons and info panels.

You are meant to apply styles wherever they’re needed. Usually, most of your CSS should go in a file that gets enqueued on both ends – the front end and in the Editor. Most of the time you’ll also want an Editor-only stylesheet for whatever highlights etc. you want, which should appear as someone is editing, but shouldn’t appear on the front end. And finally, you can have styles that affect the front end only.

There are several ways to enqueue these 3 separate stylesheets. Here is how create-guten-block does it, when you register your block type, modified slightly as their code is in a plugin and yours is in a theme, and this is only the CSS part:

<?php
add_action('init', 'enqueue_block_assets');
function enqueue_block_assets() {
    // Register styles to both front and back end
    wp_register_style('blockname-both', get_template_directory_uri() . '/name-of-stylesheet-for-both.css', array('wp-editor'), null);
    // Register Editor-only styles with a dependency to come after wp-edit-blocks
    wp_register_style('blockname-editor', get_template_directory_uri() . '/name-of-stylesheet-for-editor-only.css', array('wp-edit-blocks'), null);
    register_block_type(
        'namespace/name-of-block', array(
            // "style" gets enqueued in both front end and Editor
            'style' => 'name-of-stylesheet-for-both.css',
            // "editor_style" only gets enqueued in the Editor
            'editor_style' => 'name-of-stylesheet-for-editor-only.css',
        )
    );
?>

Basically, what you’re trying to do is only enqueue styles where they are specifically needed, to minimize the amount of code that is loaded on any given page, whether it’s on the front end or the back end.