Site logo

Archived topic

Own CSS styles are not displayed in Gutenberg Editor

6 replies · Started by Samuel on May 20, 2019

Viewing posts 1–7 of 7

If I define my own CSS styles and insert them into the Child Theme style.css, this is unfortunately not shown in the Gutenberg Editor. How can I fix this?

Example: I have the following statement for each link:

.inside-article p a, .inside-article li a, .inside-article p a:hover, .inside-article li a:hover { border-bottom: 1px solid #F2C32F;}

But this is not shown in Gutenberg. So it is extremely difficult to find the links.

Hi there,

You'll need to enqueue the file to the editor. Something like this should do it:

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

That assumes you have a style-editor.css file in your child theme root.

It fits and it's nice. It doesn't work with the link, because I use the following code:

.inside-article p a, .inside-article li a, .inside-article p a:hover, .inside-article li a:hover { border-bottom: 1px solid #F2C32F;}

So it should be:

.editor-block-list__block a, .editor-block-list__block a:visited { border-bottom: 1px solid #F2C32F;}

It would be great if this is loaded by default without creating an extra style-editor.css.

And thank you very much for the further development of the theme. Last month I paid my yearly fee - and I was very happy to do so.

You are great! Please keep up the good work!

uh... it doesn't work. I do not believe the class goes.

So my code is:

.editor-block-list__block a, .editor-block-list__block a:visited { border-bottom: 1px solid #F2C32F;}

But this is not shown in the Inspector: http://prntscr.com/nr2z82

Can you show me your function? Are you sure the file is located in the right area?

Any errors in your console tab (right click + inspect)? Perhaps the URL is missing a slash or something.

This archived topic is closed to new replies.