Enqueue Customizer CSS into Editor

Isn’t it annoying that all the CSS you write in the customizer only shows up on the front end and not the editor?

It makes for confusion for clients and a less cohesive experience that the frontend and backend don’t match.

But with this little snippet of PHP, you can enqueue all the Customizer CSS rules into the editor!

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

Note: I’ve found this to not work ALL of the time. Sometimes the CSS for the editor overrides some of these styles — so it’s not 100%… But it’s a whole lot better!