Hello,
I’m just wonder what techniques everyone is using to avoid breaking the default ACF styles on their acf blocks.
the issue is when you have acf blocks and you are using the editor view, your styles could collide with the default styles of the acf block interface. for example your default a {} style will get applied to the buttons in repeater fields. I figure there has to be an easy way around this.
Thanks
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.
Thank you for your reply. Though not much help to my situation I would caution you on not using add_editor_style(). if you enqueue your css with a different method, your styles will not be applied to previews like blocks and patterns (maybe even style previews though I haven’t confirmed this).
Ideally we should be able to exclude an element from a page. Like “apply these styles to this page but ignore all divs with the class of .acf-block-component” something like:
:not(.acf-block-component) {
@import "links"
... ect ...
}
// in the editor this would output something like:
.editor-styles-wrapper :not(.acf-block-component) a { color: blue }
naturally this will not work. and since there does not seem to be an easy way around this. I’d propose ACF be much more specific with their block editor styles even at the risk or breaking the WordPress branding. I’d rather see a ACF themed block editor than a busted one that I have to manually fix every build. just my 2 cents, would still love to hear if anyone has an elegant solution to this issue.
since there does not seem to be an easy way around this. I’d propose ACF be much more specific with their block editor styles even at the risk or breaking the WordPress branding. I’d rather see a ACF themed block editor than a busted one that I have to manually fix every build. Yes you can choose the other option of it.
Screenshot-f....png