[Support request] Own CSS styles are not displayed in Gutenberg Editor

Home Forums Support Own CSS styles are not displayed in Gutenberg Editor

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #905173
    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.

    #905635
    Tom
    Lead Developer
    Lead Developer

    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.

    #905728
    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!

    #905764
    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

    #905951
    Tom
    Lead Developer
    Lead Developer

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

    #905974
    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

    #906024
    Tom
    Lead Developer
    Lead Developer

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.