Support

Account

Home Forums Gutenberg ACF blocks don't render right in Gutenberg editor

Solving

ACF blocks don't render right in Gutenberg editor

    • roel

    • June 28, 2020 at 7:44 pm

    Hi, I’ve been using ACF blocks for a while now and I’m loving it! My own personal site is based on them.

    There is one thing that eludes me though, my blocks don’t display right in the admin/backend section (gutenberg editor) of WordPress. Everything is fine on the front end but when I enter the editor the blocks are all messed up in shape, color and font-size. I’ve dug around with the element ispector in order to get an idea of why that is and as far as I can tell, it’s the default gutenberg editor classes that interfere with my own CSS. Which is kind of odd, seeing as I included all css for my blocks in seperate CSS files for each block and attached them using the enque style property as recommended by the ACF docs.

    Does anyone have any idea of why this is occuring and how I can fix this?

    Below are a few images of what is supposed to look like and what it looks like now in the backend:

    Front-end (correct): https://i.imgur.com/Qe33qpy.png
    Back-end (incorrect): https://i.imgur.com/iBAup00.png

    • roel

    • July 16, 2020 at 2:03 am

    Can somebody please help me…

  • I would use a style-editor.css

    https://developer.wordpress.org/block-editor/developers/themes/theme-support/

    • wggl

    • July 21, 2020 at 11:25 pm

    Maybe this will help you:

    function unsetGutenbergEditorStyles() {
    
        add_filter('block_editor_settings', function ($editor_settings) {
                  unset($editor_settings['styles'][0]);
                  return $editor_settings;
              }
    );
        
    }
    add_action( 'admin_init', 'unsetGutenbergEditorStyles' );
    • roel

    • September 1, 2020 at 4:36 am

    I’ve finally had the chance to test this function and it helps solve about 70% of my problems. There’s still some fonts missing and some heights are eratic. But overall, a great help so far.

    • roel

    • September 9, 2020 at 2:20 am

    I’m still somewhat puzzled that the gutenberg styles affected it in the first place. Isn’t a block supposed to be a web component that isn’t affected by this kind of stuff? Also, in the video tutorials this never happens, nor do they even address its possibility. Am I missing something here?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.