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


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 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 }

smcgregor1 1 month 2022-10-21T07:38:47-05:00 0 Answers 0 views 0

Leave an answer