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:
I would use a style-editor.css
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?
You must be logged in to reply to this topic.
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!