css – How do I match my block-editor styles to my front-end styles?

Problem

I’m currently working on a personal blog that puts my styles into my . pulls from 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 looks like on the front end.

The steps I have taken

  1. make sure my style.css The file is properly queued and all its edits are visible on the front end.
  2. created 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. made sure my editor-style-block-custom.css is queued and any edits to it are reflected in my editor. here i am using .editor-styles-wrapper The class to target elements in the block editor.

Question

How do I parallel these two style files without having to do the double task of editing them both? (ie in style.css i make h1 { color: red } and in editor.style-block-custom.css i make .editor-styles-wrapper h1 { color: red }

Leave a Comment