Archived topic
How to Render Custom Gradient Presets in the Editor - without a child theme
7 replies · Started by Whelan on August 9, 2021
I'm using WP 5.8 and I followed the Block Editor Handbook and this tutorial to create Custom Gradient Presets.
The only part I haven't done, is add custom-editor-styles.css... so in the editor the background gradients appear to be blank... (or maybe I should say I think that's the reason the colours don't display when editing a post).
I know how to create a child theme in order to add a custom editor stylesheet... but I'm just wondering if there is another way.
It's a fairly simple site so my preferred setup is to just use Customizer > Additional CSS and Code Snippets. Can I use the "Example CSS snippet" and set it to "only load in the administration area"? I'm asking you because as far as I recall, Tom developed the Code Snippets plugin (or am I misremembering?).
In the past I've used another plugin: "Admin CSS" to achieve a similar result, but Gutenberg development is moving fast and I'm looking for the most up to date solution using minimal plugins and css files.
The broader question is: How to get "Additional CSS" styles to render in the editor in WP 5.8?
To give some context, this is a simplified version of the code snippet I'm trying to use:
add_action( 'wp_head', function () { ?>
<style>
/* colors */
.has-clear-to-scandal-gradient-background {
background: linear-gradient(135deg,RGBA(172,215,214,0.1) 0%,RGBA(172,215,214,1.00) 100%);
}
</style>
<?php } );OK I figured it out using a code snippet as follows:
add_action( 'admin_head', function () { ?>
<style>
/** colors **/
.has-clear-to-scandal-gradient-background {
background: linear-gradient(135deg,RGBA(172,215,214,0.1) 0%,RGBA(172,215,214,1.00) 100%);
}
/** pullquotes, custom lists, etc **/
</style>
<?php } );So if this is the best way of doing it, then I guess this ticket can be closed.
Hi there,
looking at the Codex ( and the fact it works :) ) that seems a good way to go:
https://developer.wordpress.org/reference/hooks/admin_head/#comment-4313
Yes it works, but I'd rather not have to keep updating two sets of css files. I've made a lot of tweaks, so please remind me, what is the normal behaviour on a clean install of GP Premium. Is it as simple as saying:
"all settings configured in the Customizer will be rendered in the block editor (i.e. typography and spacing), apart from anything added in Additional CSS."
...or is it not that simple?
If you're using the Customizer > Additional CSS, then try adding this PHP Snippet:
add_action( 'enqueue_block_editor_assets', function() {
wp_add_inline_style( 'generate-block-editor-styles', wp_get_custom_css_post()->post_content );
}, 20 );It 'should' load it in the editor.
Yes, that still works - thanks! Two questions:
Q1. Why is this not configured by default in Generatepress?
Q2. If I use Code Snippets, should I select "priority: 20" and "only run in admin area" (see screenshot)
1. Theres a possibility that a user has Additional CSS rules, that they don't want applied to the editor, that could create conflicts.
2. Should only be required in the Administration area. And the Priority - i believe thats for the Code Snippets priority - it shouldn't be required as the Hook priority has been set in the code.
