Reply To: Best practice to avoid backend css collisions

• room34

• September 9, 2022 at 2:12 pm

I’m still fumbling around with this a bit myself, not specifically with ACF blocks, but just my theme CSS in general. A couple of things I’ve done that have helped me along the way:

1. I prepend main to my CSS selectors in my theme’s general CSS files. For example, in defining the style of my links, instead of just specifying a { } I am using main a { }. I did this primarily because I wanted to apply different styles to the body of my pages vs. the header and footer. (The HTML main tag is part of my templates… you may have a different selector you prefer to use… the point is to make sure it’s something that is always in the body of your front-end pages but not in the body of the Block Editor back-end pages.

2. I have a bunch of general CSS for forms, contained in a form.css file in my theme. It was wreaking all kinds of havoc in the Block Editor until I realized I should not load it in the editor with the add_editor_style() function. At this point I don’t think I’ll ever have any form field elements in blocks, but… we’ll see.

The reason I came to the forums today and stumbled upon this is something that may be tangentially related, collisions between ACF and updates to WP core. I noticed some of the ACF elements are laying out weird in the Block Editor, in ways that don’t seem to be related to my theme: the Visual/Text tabs in a WYSIWYG field were broken apart from the editor and too small; the draggable side columns in rows of a repeater are too narrow and the toggle button is partially hidden, etc. This appears to be due to some new handling of box-sizing in either ACF (I know they just did some CSS updates in a recent update) or WP core, or both.