I have built a few projects using Gutenberg editor + ACF Pro and I want to find the best way to include editor styles – by this I mean a stylesheet that makes the blocks in the backend (editor) look the same as the front end. A client updating their site can then preview the block without having to update the page and check the front end.

I’ve been using the block-name/block.json method for each block. My issue is I’m not sure the best way to include the editor styles. Some people have included them for each individual block i.e. block-name/editor-style.css

The problem is when using something like Sass which you have to compile, you end up having to copy and paste the plain CSS into the editor-style.css file. You then have 2 sets of code to manage when things get updated. You also don’t have all of the base styles such as fonts/headings/lists, etc included so your editor blocks look messy and don’t represent the design.

Others add an editor-styles.css stylesheet in the main theme folder, and then include it in the functions.php:

function star_gutenberg_editor_styles() {
    wp_enqueue_style(
        'admin-styles',
        get_stylesheet_directory_uri().'/editor-styles.css'
    );
}
add_action( 'admin_enqueue_scripts', 'star_gutenberg_editor_styles' );

Ideally I want to be able to include my entire stylesheet from my theme. When I do that, the great thing is that all my blocks look perfect in the backend.

The con of this, is that all of those base styles for headings, links, lists, etc are then included across the whole backend of WordPress. Meaning there are buttons, lists and things looking off all over the place across the dashboard and settings pages.

I am curious if anyone has a well rounded solution for this? I have trawled the internet for a better solution, and I’m still delving deep into Gutenberg to try and come up with a better solution myself. Discussion on this is most welcome!