Own CSS styles are not displayed in Gutenberg Editor

[Samuel]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Samuel]

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!

[Samuel]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Samuel]

Hi,

this is the style-editor.css (in the root of the child theme): http://prntscr.com/nr572h
and the function: http://prntscr.com/nr57j1

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts