Archived topic
Adding customiser css to the editor
4 replies · Started by Gary on February 11, 2022
Hi GP Support
I'm trying to add the additional css I have added to the customiser load in the editor so I can preview certain style settings.
I've already seen previous posts such as this one from Tom which says you can use a snippet: https://generatepress.com/forums/topic/changing-default-colors-in-color-picker/#post-1686999
However this doesn't seem to be working for me and if I look at the editor styles being loaded I can't see one labelled generate-block-editor-styles. I've also tried gp-premium-editor-css as I can see that one is loaded but the styles still don't seem to show. Do you expect this to still work or have recent WP 5.9 changes meant this approach no longer works?
For reference the code I have is this and I'm using code snippets plugin to add it:
add_action( 'enqueue_block_editor_assets', function() {
wp_add_inline_style( 'gp-premium-editor-css', wp_get_custom_css_post()->post_content);
}, 20 );Also just adding to this for when there's a reply, as this is sort of related to adding css.
In addition to my support question, I'm Just wondering if there's any plans for GB to give us control for additional css which is viewable in the editor?
One thing I'm personally finding is whilst GB gives us lots of great controls over the blocks it provides, to get sites looking exactly like I need them I'm still finding I'm jumping to additional css in the customiser quite a bit. Rules added there obviously aren't rendered in the editor by default hence my first question, so having some kind of control over additional/advanced css options on the blocks themselves or the whole page which are rendered in the editor would make GB really powerful and flexible in my opinion. Coming over from Elementor this is the main thing I'm missing wtih GB, apart from that I'm loving the combination with GP.
Thanks
Hi there,
CSS in the editor can be tricky due to selector specificity, but you can try this:
add_action( 'enqueue_block_editor_assets', function() {
wp_add_inline_style( 'wp-edit-blocks', wp_get_custom_css_post()->post_content);
}, 20 );Custom CSS may be something we look at in GB as well, but it's a difficult one to get right.
Hope this helps! :)
Hi Tom
Thanks for this, I will give this revised snippet a try and see how it goes.
As for the custom css, it is good to know you guys are considering it at least!
If it helps, my thought would be something like your simple css plugin but fully integrated into the editor/block settings and possibly the responsive toggles if that were possible/sensible.
I think this way the emphasis would still be on the user writing custom css rules only if they need them and know how and wouldn’t bloat the editor with an overwhelming amount of extra options like some other add-ons seem to be doing. In my mind something like this would give pro users extra flexibility and a better workflow whilst being in keeping with the GP / GB way of doing things.
Really appreciate your thoughts, thank you! We'll see what we can come up with :)
