Enqueue Styles into Editor

One frustrating thing about the block editor is that it never looks exactly like the front end.

There are some workarounds to enqueue your stylesheets into the editor (which are listed below) — but note that it wont work on EVERY style (some editor CSS is more specific and overrides it).

Enqueue Customizer CSS

Add the function below to a Code Snippet or in your Functions.php file to enqueue your Customizer “Additional CSS” into the editor:

/* Eunqueue Customizer CSS to editor */ 
add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );
    return $editor_settings;
} );

Enqueue Child Theme Stylesheet

If you’re using a child theme, you can enqueue that stylesheet into the editor by using the code below (please note, my child theme stylesheet is saved as ‘style.css’. If you name yours something different, you’ll need to replace that in the code below):

/* Enqueue child theme styles to editor */ 
add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = file_get_contents( get_stylesheet_directory() . '/style.css' );
    $editor_settings['styles'][] = array( 'css' => $css );
    return $editor_settings;
} );