How to sync the style in the visual editor with the style of a child theme?

Question

I have a wordpress site with twenty-twenty theme sightly modified with a child theme. The site's publically accessible surface is displayed correctly according to the modifications declared in the child theme. ( For example, the background is set to blue instead of the default pink-ish twenty-twenty color. )

My problem is that the visual editor still displays the content with the original template's style, like there was no child theme at all. ) For example the main background in the visual editor is still that default pink-ish color, not blue.

I wonder if there is a clean and easy solution to copy, mirror, sync the style from the child theme into the visual editor... without messing with the css of the visual editor itself.

Answer 1

The parent theme's functions.php has two functions to manage the editor styles. They are twentytwenty_classic_editor_styles() and twentytwenty_block_editor_styles() and they're both hooked to init. For example, the classic editor function reads:

function twentytwenty_classic_editor_styles() {

$classic_editor_styles = array(
    '/assets/css/editor-style-classic.css',
);

add_editor_style( $classic_editor_styles );

}

add_action( 'init', 'twentytwenty_classic_editor_styles' );

To override those styles, copy both of those functions into your child theme's functions.php, and replace the file paths specified in those functions with the path to your own current CSS stylesheet. The parent theme's function definitions are not "pluggable," so you'll need to give your own functions a different name (so you don't run into PHP errors for a function that has already been declared). Then you can remove the parent theme's stylesheets to prevent style conflicts, like so:

function remove_parent_theme_styles(){
    remove_action( 'init', 'twentytwenty_classic_editor_styles' );   
}
add_action( 'after_setup_theme', 'remove_parent_theme_styles' );

Future changes to your child theme's stylesheet will then automatically be reflected in the style imported by the editor.