Archived topic
Own CSS styles are not displayed in Gutenberg Editor
6 replies · Started by Samuel on May 20, 2019
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?
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
Any errors in your console tab (right click + inspect)? Perhaps the URL is missing a slash or something.