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

Home Forums Support How to call editor-style.css from child theme?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #149079
    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

    #149083
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #149102
    Tudor M

    Thank you, it worked!

    #149175
    Tom
    Lead Developer
    Lead Developer
    #953233
    Derek

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

    #953417
    Tom
    Lead Developer
    Lead Developer

    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 );
    #995716
    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?

    #995719
    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.

    #996005
    Tom
    Lead Developer
    Lead Developer

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

    #996455
    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/

    #996821
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for sharing your code! πŸ™‚

    #997387
    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.

    #997551
    Tom
    Lead Developer
    Lead Developer

    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' );
    } );
    #1007970
    Steven

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

    #1008238
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help πŸ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.