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
Can somebody please help me…
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.
