Two Ways to Apply Styles to the WordPress Block Editor

This section describes the two primary methods for applying styles to the WordPress block editor.

1. How to use wp_enqueue_style

This method allows you to apply your theme’s main.css to the block editor. You can also use the enqueue_block_editor_assets action to output your own tags and templates in the editor.

add_action( 'enqueue_block_editor_assets', 'add_block_editor_style' ); 
function add_block_editor_style() { 
 wp_enqueue_style( 'block-editor-style', get_theme_file_uri( 'main.css' ) ); 
 echo '<div>test</div>'; 
 get_template_part('content','svg-symbol'); 
} 

2. How to use add_editor_style

add_editor_style is a method specific to block editors, and when this method is used, a class named .editor-styles-wrapper is automatically added to the editor content. This feature allows styles to be applied only within the editor. However, using this method requires a separate CSS file for the editor.

function custom_editor_css() { 
 add_theme_support('editor-styles'); 
 add_editor_style('main.css'); 
} 

add_action('after_setup_theme', ' custom_editor_css'); 

Using the proper combination of these methods, you can customize the look and feel of the block editor.