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
I would use a style-editor.css
https://developer.wordpress.org/block-editor/developers/themes/theme-support/
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' );
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.
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?
I know it has been some time but I wanted to say that I eventually resorted to using the shadow DOM to resolve this issue. It’s working great so far.
The topic ‘ACF blocks don't render right in Gutenberg editor’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.