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

[ad_1]

I posted this question on the WordPress stack exchange site. [https://wordpress.stackexchange.com/questions/410626/how-do-i-make-my-block-editor-styles-match-my-front-end-styles] I didn’t get any responses. So I’m gonna repost the question here if that’s ok.

**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’ ));
} );

1. Ensured that my `editor-style-block-custom.css` 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 }`

Would appreciate any help in answering this question.

[ad_2]