Just use the add_editor_styles() 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' );