I am creating a simple theme and some custom blocks to go along with that. However, I don't understand the best way to visually make my block look the same in the editor and the frontend.

There are a ton of styles being applied in the editor via load-styles.php. I'm not sure what these are?

What is the best approach to get the editor styles to match the frontend? Do I have to load a new stylesheet and override all of these load-styles.php styles? Turn them off? Do I just load ALL of my CSS to the frontend and the admin now? Other ideas?

Thanks.

---

EDIT

I get how to load the styles when I create a block but I want to override very general styles that aren't really related to a specific block. For example, there are styles in the editor that add font styles and things. I guess I need a way to just load a general stylesheet to override stuff that load-styles.php is adding.

I am creating a simple theme and some custom blocks to go along with that. However, I don't understand the best way to visually make my block look the same in the editor and the frontend.

There are a ton of styles being applied in the editor via load-styles.php. I'm not sure what these are?

What is the best approach to get the editor styles to match the frontend? Do I have to load a new stylesheet and override all of these load-styles.php styles? Turn them off? Do I just load ALL of my CSS to the frontend and the admin now? Other ideas?

Thanks.

---

EDIT

I get how to load the styles when I create a block but I want to override very general styles that aren't really related to a specific block. For example, there are styles in the editor that add font styles and things. I guess I need a way to just load a general stylesheet to override stuff that load-styles.php is adding.

• css
• block-editor
• admin-css

Share Improve this question edited May 30, 2019 at 15:24 Jon asked May 28, 2019 at 13:47 JonJon 32755 silver badges1717 bronze badges 4

• What have you tried? On a current project, I've had quite some success with all block styles in frontend & backend, and only some special styles for backend (because the structure in the block editor is a bit different than it is in the rendered site). – kero Commented May 28, 2019 at 14:06
• how did you handle the very general styles like font size and things like that? It seems the editor has styles being applied from load-styles.php that adds stuff. – Jon Commented May 30, 2019 at 14:48
• Based on your edit, it sounds like you may want to create an "editor override" stylesheet that is only applied on the back end, with the basic font size etc. mapped out. That way you can get as specific as you need to with the CSS, without making the front-end CSS super-specific and harder to override. – WebElaine Commented May 30, 2019 at 17:44
• So would this mean, just use the normal wp_enqueue_style with admin_enqueue_scripts for the more general styles? Or is there a better way to add an "editor override" stylesheet? – Jon Commented May 31, 2019 at 15:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.