How do I make my block-editor styles match my front-end styles?

Question

The Problem

I'm currently working on a personal blog that pulls its styles from my style.css file. Because It's a blog, I'm also using the block editor to create blog posts, but I want the block editor to visually match what it'll look like on the front end.

Steps I've taken.

1. Ensure my style.css file is properly enqueued and all edits to it are reflected on the front end.
2. Created an editor-style-block-custom.css file and added it to the project using the following function

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'a-rap-blog-custom-block-editor-styles',
        get_theme_file_uri( "/css/editor-style-block-custom.css" ),
        false, wp_get_theme()->get( 'Version' ));
} );

3. Ensured that my editor-style-block-custom.css is enqueued and any edits to it are reflected in my editor. Here I'm using the .editor-styles-wrapper class to target elements in the block editor.

The Question

How do I create parity between these two style files without doing the double work of editing them both? (i.e. in style.css I make h1 { color: red } and in editor.style-block-custom.css I make .editor-styles-wrapper h1 { color: red }

Answer 1

Just use the add_editor_style() function on the after_setup_theme() hook for your editor styles, and enqueue the same style sheet using wp_enqueue_style() on the wp_enqueue_scripts() hook. Optionally, you can also use wp_style_add_data() to inline the styles for better performance.

There's no need to manually add the .editor-styles-wrapper class before other selectors if you enqueue the style sheet using the method described above. WordPress will do it for you automatically when you're using this function.

Complete example for a single style sheet:

/**
 * Enqueue editor styles.
 */
if ( ! function_exists( 'my_theme_setup' ) ) :
    function my_theme_setup()  {

        // Enqueue the style sheet in the editor.
        add_editor_style( 'style.css' );
    }
    add_action( 'after_setup_theme', 'my_theme_setup' );
endif;

/**
 * Enqueue front-end styles.
 */
function my_theme_styles() {

    // Enqueue the same style sheet in the front-end.
    wp_enqueue_style( 'my-theme', get_theme_file_path( 'style.css' ), [], wp_get_theme()->get( 'Version' ) );

    // Inline the contents of the style.css file, if possible.
    wp_style_add_data( 'my-theme', 'path', get_theme_file_path( 'style.css' ) );    
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );