[Resolved] How to call editor-style.css from child theme?

[Tudor M]

I would like to see when editing the fonts and titles like they would be when I hit publish. And I found this article https://tommcfarlin.com/add-google-fonts-to-wordpress-editor/.

The instrunctions works but I the editor-style.css is in main theme I would like it to be in child theme so it wont’t get deleted. How do I do that?

I’ve created the folder css in child theme and add the file editor-style.css but it doesn’t work. Just after I uploded to the main theme it worked.

Thank you

[Tom]

You should just have to do this:

add_action( 'after_setup_theme', 'generate_child_setup' );
function generate_child_setup() 
{
	add_editor_style( 'path/to/editor-style.css' );
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

The above assumes it’s in the path and to folders in your child theme.

If it’s just inside your root child theme directory, it would just be:

add_editor_style( 'editor-style.css' )

Hope this helps 🙂

[Tudor M]

Thank you, it worked!

[Tom]

You’re welcome 🙂

[Derek]

How do I also include the css changes done through the Customizer?

[Tom]

Not sure if it will work, but you could try this:

add_action( 'enqueue_block_editor_assets', function() {
    if ( function_exists( 'wp_get_custom_css_post' ) ) {
        wp_add_inline_style( 'generate-block-editor-styles', wp_get_custom_css_post()->post_content );
    }
}, 20 );

[Steven]

Tried to follow these instructions to get the editor-style.css file loaded from my child theme, but not sure if it’s loading or not. I’m not clear on how you would verify if the child theme style.css and editor-style.css files are loading. My changes to styles.css from my child theme seem to be taking affect, but not my editor-style.css changes in the child theme folder.

I have the following in my child theme functions.php file:

add_action('after_setup_theme', 'generate_child_setup');
	function generate_child_setup()	{
	add_editor_style('editor-style.css');
	}

My editor-style.css is in the root of my child theme folder. Am I supposed to include the following in both my style.css and editor-style.css files?

/*
 Theme Name:   GeneratePress Child
 Description:  GeneratePress Child Theme
 Template:     generatepress
 Version:      0.1
*/

I tried using Chrome DevTools > Sources to see if I could locate the style sheets being loaded. Can’t seem to find them. Are they compiled into a different resource?

[Steven]

I figured out the style.css doesn’t get loaded unless your in the public view of the site. So now I can verify my style.css from my child theme is loading correctly. Just can’t seem to get the editor-style.css to load now when on the page/post edit screen.

[Tom]

Just to confirm, are you trying to load editor-style.css in Gutenberg?

[Steven]

Trying to load a style sheet in Gutenberg to apply padding-left to .edit-post-layout__content container. When using full-width blocks, you can’t access the move handle to the left of them. Thanks for the hint Tom 😉 I’m new enough to WordPress I didn’t realize there was a separate CSS file for the block editor. The following placed in my child theme functions.php file worked for me:

/*Sets up block editor style sheet*/
function addBlockEditorStyles() {
	  // Add support for editor styles.
	  add_theme_support( 'editor-styles' );
  
	// Enqueue editor styles.
	add_editor_style( 'block-editor.css' );
}
add_action( 'after_setup_theme', 'addBlockEditorStyles' );

And then the following in the block-editor.css in my child theme’s root folder:

/*allows space to show full width block move handles*/

.edit-post-layout__content {padding-left:25px !important;}

Reference: https://richtabor.com/add-wordpress-theme-styles-to-gutenberg/

[Tom]

Awesome, thanks for sharing your code! 🙂

[Steven]

Well, I was certain this was working yesterday and now it doesn’t appear to be loading the style sheet :/

I looked over documentation and it seems to validate this approach: https://developer.wordpress.org/block-editor/developers/themes/theme-support/

I have a child theme active and I’ve verified the child theme functions.php is loading successfully. I stripped it down to just the following to try to isolate the issue:

<?php
function generate_child_setup() {
    add_theme_support('editor-styles');
    add_editor_style('block-editor.css');
}
add_action('after_setup_theme', 'generate_child_setup');

Both the functions.php and block-editor.css file are in the root of my child theme folder.

The only content of the block-editor.css file is a single CSS rule:

.edit-post-layout__content {padding-left:25px !important;}

However, it doesn’t seem like the block-editor.css is getting loaded when editing a post.

My end goal is to add 25px of padding to the left of the content. It’s to address an issue where blocks to the far left within a full-width block have their move handle obscured.

Thanks for any help you can pass along.

[Tom]

I don’t love the way Gutenberg does the editor styles.

Instead, try this:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'your-handle-here', get_stylesheet_directory_uri() . "/block-editor.css", false, '1.0', 'all' );
} );

[Steven]

Thank you Tom! Yes, this working like a charm to load the editor style sheet in the child theme 😉

[Tom]

Awesome, glad I could help 🙂

[Author]

Posts