Add custom editor styles in child theme

Hi @naturfreundeschweiz,

Let’s try this:

wp_enqueue_style( 'legit-editor-styles', get_template_directory_uri() .'/css/style-editor.css', false, '1.0', 'all' );

This is untested but should work.

Best,
David

Hello David

Thank you very much for your help!

It works and to be honest it seems to have even worked before but all the styles get overritten by inline styles? At least that’s what my Firefox Inspector tool says.
For example: The headings get their style from .editor-styles-wrapper. This style is implemented as “Inline:1” with “font-family: Noto Serif”. If I deactivate this, a second one appears “Inline:63” with “font-family: Noto Serif, serif” and only if I deactivate that one my personal style is used.

So it works if I add “!important” to everything.

Thank you very, very much for your help and have a nice week!

Mario

Hey Mario,

have you specified any block-specific styling?

I think changing the priority on the function to load a little later should do the trick.

function legit_block_editor_styles() {
    wp_enqueue_style( 'legit-editor-styles', get_template_directory_uri() .'/css/style-editor.css', false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'legit_block_editor_styles', 999 );

If not, I think you need to follow Gutenbergs exact prefixing like:

.editor-styles-wrapper .the-class-you-want-to-target {}

The problem with that is, that those classes have changed a couple times now during the development of Gutenberg so things are likely to break further down the road.

Using !important may be the way to go here ?? Well, this is actually the first time I recommended someone to use !important. hehe.

Best,
David

Hey David

Thank you very much for the help!

I played around with it a bit and the priority change isn’t actually necessary – you just have to get the exact styles as you said. So for example if you want to change the title just editing “.editor-post-title__input” does not work. You have to use “.editor-post-title .editor-post-title__input” at least.

But in that way I don’t have to use !important. Even if it may possibly break in future updates.

So alls in all for everyone who has the same problem as me: Just add the following code to your personal functions.php:

function legit_block_editor_styles() {
    wp_enqueue_style('legit-editor-styles', get_theme_file_uri( '/css/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'legit_block_editor_styles' );

Then add your own style-editor.cdd to the css folder and be spezific/exact with your prefixes/classes. If it doesn’t work use !important.

Thank you again for your fast help and have a great day!
Mario

Hi Mario,

that sums it up perfectly! ??

Thanks!