[Support request] Trying to add CSS to block editor

Home Forums Support [Support request] Trying to add CSS to block editor

Home Forums Support Trying to add CSS to block editor

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1654571
    John

    Good Day,

    I have just converted to GeneratePress Pro (loving it).

    My old theme had some CSS styling to do things like styling a paragraph as a tip with a different colour background selectable from the classic editor. All this did was add a div around stuff with the class tip. Thing is I have a thousand posts like this: https://www.morganscloud.com/2021/01/10/companionway-washboard-hacks-and-getting-out-there/

    As you can see, I have the front end all sorted, by simply adding the required CSS to my generate press child them style.css file, all good.

    But the issue is I can’t see the styling when editing in the block editor and I add tip to the Additional CSS class(es) field in a text block (works fine on front end) which is making me nuts since I have to keep previewing.

    So I want to style the back end block editor to match the front end.

    I added this (found in another thread here) to my child theme functions file:

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

    And then I added a css file named editor-style.css to my child them root directory.

    To test I just added this CSS to the file:

    @charset "UTF-8";
    /* CSS Document */
    
    .block-editor { background-color: #784546; }
    body { background-color: #784546; }
    body { background: #D54548 }

    I think any of the above should turn the background pink. All do not work. I have a feeling I’m doing something deeply stupid, but just can’t see it. If I can just get the editor-style.css file to start affecting the back end, I feel like I would be on my way, so any help would be much appreciated.

    Thanks
    John

    #1654839
    Leo
    Staff
    Customer Support

    Hi John,

    If you are using the block editor, have you considered using GenerateBlocks?

    The headline block makes things like these super easy to replicate without writing your own CSS:
    https://docs.generateblocks.com/article/headline-overview/

    It will work in live preview as well 🙂

    #1654904
    John

    Hi Leo,

    Yes, definitely plan to get generate blocks pro so I can get rid of Thrive Architect which I used to build our landing page: https://www.morganscloud.com

    That said, since I have over 1000 legacy posts to maintain I would still like to figure how to make the back end look like the front with those legacy divs. See this the blue box on this post: https://www.morganscloud.com/2021/01/10/companionway-washboard-hacks-and-getting-out-there/

    Point being I don’t think cracking this will be hard once I have figured how to get the back end style sheet in the child theme working.

    Thanks
    John

    #1655010
    Leo
    Staff
    Customer Support
    #1655025
    John

    Hi Leo,

    Yes, that’s exactly what I did, see the code in my first comment, and that’s where I got it, but it’s not working and after three hours of messing with it, I just can’t get it to work.

    #1655037
    Leo
    Staff
    Customer Support

    Weird. That solution looks good to me.

    This isn’t handled by the theme and the same method is suggested by WordPress as well.

    Can you try the same method using a Twenty series WP theme and see if that works?

    #1655982
    John

    Hi Leo,

    I know, should work. Glad you did not see a deeply stupid error on my part!

    Good idea on the theme. I will try that on our testing server with 2020 and all plugins off, and see what happens. I will revert. May be a few days as I need to get some content out the door.

    #1655998
    John

    Hi Again Leo,

    Update: I just went into an old post in the classic editor, and low and behold the background is pink from my css. So clearly the function is working to load the editor-style.css file from the child theme directory. Why it’s not hitting the block editor I don’t know.

    Maybe with your deep understanding of the block editor (I’m new to it) you can point be in the right direction?

    I will also do some more research and revert if I crack it. As I say, will be a few days.

    This looks like a good place for me to start: https://developer.wordpress.org/block-editor/developers/themes/theme-support/

    #1656442
    Leo
    Staff
    Customer Support

    I’m running out of ideas.

    What if you use the full file path for the editor-style.css file?
    https://generatepress.com/forums/topic/how-to-call-editor-style-css-from-child-theme/#post-149083

    #1656473
    Jeremy

    Hi John,

    I’ve had similar trouble in the past with this. Maybe give this a try in your functions.php instead:

    add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
    } );
    #1656772
    John

    Hi Leo,

    I don’t think that’s the issue. We know for sure that the CSS file is loading since it’s hitting the classic editor (see my update above). The problem now is that it’s the CSS is not selecting in the block editor. I think the key lies here: https://developer.wordpress.org/block-editor/developers/themes/theme-support/

    Seems like I have to do more stuff, both functions and css selectors to hit the block editor.

    I bet your Generate Blocks team know exactly how to do this.

    I will work more on this early next week.

    #1656778
    John

    Hi Thornbrand,

    Thanks for coming up on that, much appreciated.

    Interesting idea, but I’m pretty sure wp_enqueue_style loads CSS that only hits the front end, not the back. Still, if all else fails I will try it.

    #1656824
    Jeremy

    enqueue_block_editor_assets can be used to enqueue block scripts and styles in the backend editor only.

    I had never been able to get add_editor_style to work, so have been using enqueue_block_editor_assets on my sites, which has been working fine for me.

    However, I just tried something on a test site here and got add_editor_style working by adding add_theme_support( 'editor-styles' ); first. See Enqueuing the editor style.

    So maybe give this a try:

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

    Just throwing out some ideas. Good luck John, I hope you get it working!

    #1661503
    John

    Hi Thornbrand,

    Sorry for the delay in answering.

    That’s very kind of you, and I’m sure one of those will work.

    As soon as I get out from under another project I will dig in and try it.

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