[Support request] add custom css to block editor incl. generate blocks

[Marco]

Hello
I have some custom css in my GP child theme but I can’t figure out how to load it so it would also be used/applied in the Gutenberg editor / backend.

Thank you in advance for your input.

[Ying]

Hi Marco,

You can have this PHP snippet a try:

add_action( 'after_setup_theme', function() {
    add_editor_style( 'url to your child theme CSS file' );
} );

[Marco]

Thanks but doesn’t do the trick

[Ying]

Can you share the exact code you tried?

[Marco]

the stylesheet seems to be in there but the settings do not do anything to the layout in the backend – frontend is fine – I’m getting also an error in the safari console:

SyntaxError: unexpected token ‘.’ (anonymous function) – style.min.css and this is how my file starts:

.post-slides {
  margin-top: -40px;
  margin-bottom: 40px;
  position: relative;
  height: 520px;
}

[Ying]

I mean what’s the php code you added, just want to check the file link is correct.

[Marco]

as I said, the file get loaded just fine I think:

add_action( 'after_setup_theme', function() {
    add_editor_style( trailingslashit( get_stylesheet_directory_uri() ) . 'styles/css/style.min.css' );
} );

[Ying]

If the file is loaded fine in the editor, the CSS should work.

I just added your CSS to my child theme’s style.css file and the style was reflected in the editor right away.

style.min.css looks like one of GP’s style sheets, are you sure the file URL is correct?

[Author]

Posts