Enqueue Customizer CSS into Editor

See the CSS tweaks you make in the customizer inside of the block editor.

by

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!

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

1 thought on “Enqueue Customizer CSS into Editor”

  1. Kyle,

    I just stumbled across your site. As a fellow GP+GB enthusiast, this place is a gold mine! Thank you for all your efforts!

    And this is a pretty handy little filter here. You’d definitely need to adjust the specificity of your css in certain cases, but handy nonetheless.

    Reply

Leave a Comment