[Support request] How to Render Custom Gradient Presets in the Editor – without a child theme

[Whelan]

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?

[Whelan]

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 } );

[Whelan]

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.

[David]

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

[Whelan]

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?

[David]

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.

[Whelan]

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)

[David]

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.

[Author]

Posts