Plugin Contributor
stino11
(@stino11)
Hey @gkelly1981
Do you mean have styles for your blocks in the editor? If so, the simplest current option is to write in-line CSS in your block template. The means that when your block is rendered in to the Editor, the CSS comes along with it.
If your CSS is in your theme files, these won’t be loaded in the editor, which is what you’ve noticed.
We are exploring 2 other ideas that could help this even further.
1. In admin templating. This means block templates could be stored in the database, and made easily available to the editor.
2. Templating in plugins. This is technically possible right now, but we hope to make it easier in the future.
I hope that helps. Please let me know if you have any further questions. 🙂
Yes. I would like my CSS styles to carry over to the editor. Main reason is because some blocks have hidden elements that show at smaller screen sizes, which the CSS controls. Without the CSS the blocks look very messy.
If I put inline CSS in my blocks then that will carry over to the live site, which would not be ideal.
Suggestion: It would be great if there were a “Settings” tab within the admin interface that allowed us to load in references to external style sheets that Block Labs would utilize within the Gutenberg editor when the custom blocks are loaded in.
At the moment, I have found https://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/ to be very useful, and this snippet…
function my_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );
