Additional CSS in Customizer not loaded in Gutenberg?

Hi there,

Yes this is normal behaviour, Additional CSS is only applied to the front end of the site. Maybe the future of WP will add easier ways to include those styles in the editor.

In the meantime you would need to write your styles in a child theme style sheet and apply them using this PHP snippet:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-editor-styles', 'URL TO YOUR .CSS FILE' );
} );

Please note that stylesheets for the editor may require different CSS selectors to be applied as the HTML within the editor can be different to the front end.

I found block editor plugins that let’s you add custom CSS classes to the editor at the backend, that’s how I was able to automatize some editor tweaks I did, because some things just don’t work out that well in the editor (I did this on another site of mine with a non GP theme).

That said the fact that adding all the CSS changes in colors, font-weight, font-family made in the Customizer are loaded in the Editor, and are also show real time in the Customizer, but custom CSS isn’t, there’s no way to even make a custom option for this in the Customizer?

Unfortunately not.
The customizer passes out both front end editor styles. For example this is the selector it uses to apply the customizer H2 styles to the editor style sheet:

body .editor-styles-wrapper h2, .wp-block-heading h2.editor-rich-text__tinymce

As you can see they are very specific to the block editor.
The only solution to this ( unless there is a plugin for it ) is to create a separate style sheet specifically for the editor.

With time I expect that WordPress will review how additional CSS works.

I’m sorry to be blunt, but I have to ask if you are in any way or shape involved in the GeneratePress dev team?

Fair enough question – yes, you can check my profile in the premium support forum – here for example:
https://generatepress.com/forums/topic/my-page-headers-are-not-showing-up-created-2-headers/#post-1458224

Just know that the answer that’s going to be given to this question is going to partly decide if I want to get GP Premium or not, Kadence WP is offering a lot of the same features, but most of them are free, and for me most of them work sound.

The other deal breaker is the coding-quality, and that falls back on the understanding of the WP code. Just as a heads up.

For me what you’ve stated doesn’t describe the reality that I’ve seen in front of me. I myself changed some annoying behavior of the block editor itself with an adjustment to a single CSS class, and I found a very unsophisticated plugin option in one of the block editor plugins to make it load on every page I edited without it taking into account any of the things you’ve stated whatsoever.

Some regular CSS will work in the block editor, but as David said above, some of the CSS in the editor is specific to the editor and will be more specific than the CSS in your Additional CSS.

To add the Additional CSS to the editor, you can try something like this:

add_action( 'enqueue_block_editor_assets', function() {
    wp_add_inline_style( 'generate-block-editor-styles', wp_get_custom_css_post()->post_content );
} );

If it’s only the specificity that’s a problem then that’s just a small hurdle, the other plugin just adds like id’s at the beginning of the CSS that’s put in.

As for the snippet, then I put in the code snippet plugin, but it did not load, not talking about the specificity, but it’s not loading.

The CSS is:
p {font-style:italic !important}

Let’s try this instead:

add_action( 'enqueue_block_editor_assets', function() {
    wp_add_inline_style( 'generate-block-editor-styles', wp_get_custom_css_post()->post_content );
}, 20 );

Just tested and it’s working.

Thanks for your support, it works.

(FYI, it doesn’t work with the Kadence theme)

Glad I could help ??

I’ve just stumbled on this issue having spent a while adding a batch of Additional CSS for the twenty twenty theme and then switching to edit a post and seeing it all janked up revert to twenty twenty default styles.

It seems ludicrous to me that if users are given the ability to style the theme as they wish that these don’t copy over into what is in effect a WYSYWYG editor.

In addition, it’s extremely frustrating that some styles do and aren’t allowed for in the editor. For example, I can customise the background colour, but if I do this and make it, say #222222, it makes the block editor GUI almost impossible to see because that is styled in black by default.

Not enjoying my first foray back into default WP themes after about 15 years out.

Hi there,

Not sure if you are using GP but if you want to remove the style added by GP in the editor then try this PHP snippet:
https://generatepress.com/forums/topic/remove-block-editor-styling-that-gp-adds/#post-1243587

Please open a new topic if we are missing something here.

Thanks!

GP? No I was using twenty twenty, but thanks anyway. I’ll take a look at it as it looks pretty promising.

• This reply was modified 4 years, 2 months ago by arukiyomi.

This is the support forum for the free GeneratePress theme ??