I’ve been starting to heavily use custom Gutenberg Blocks created with Advanced Custom Fields in all new projects. This post won’t cover how to create custom Gutenberg Blocks with ACF (See this post from Bill Erickson for that). In this post I will give you some simple SCSS to ensure the block editor (when in ACF “Edit” mode) looks the same as the other ACF sections throughout your site.
I discussed my thoughts on what ACF could be with Gutenberg back in March of 2018 and I’m happy to say that my vision has essentially come to fruition. Being able to create custom blocks using Advanced Custom Fields is very important for me as I’ve integrated it heavily in to nearly every single website I’ve built for the past 5-7 years.
With that said, one of the nuances that has bothered me is the disconnect between the way the ACF fields look throughout the site, and how they look when editing a custom block. They aren’t major differences, but enough that I notice them each time I edit a custom block. With a few lines of SCSS (or CSS) you can easily override the styles in the block editor, targeting only custom ACF blocks, so they mirror the other ACF fields throughout your site.
Register Editor Styles
Before adding any styles we need to make sure we enable editor styles and point to a stylesheet with the styles we want to enqueue. You can do this with a few simple lines in your functions.php file:
We simply add_theme_support for ‘editor-styles’ and then using the add_editor_style we point to the CSS file that holds our styles. You’ll want to change that path to point to your own editor stylesheet.
Set ACF Editor Styles
Next we’ll add the following SCSS or CSS to the appropriate location. If you’re using vanilla CSS use the CSS version and add it to the stylesheet you’ve specified above. If using SASS you’ll use the SCSS version and make sure you compile your SASS to the editor stylsheet.
Here is the SCSS version:
Here is the CSS version:
With just these few lines of code your block editor will be back to how all of your other Advanced Custom Fields sections look throughout your site:
Advanced Custom Fields is an invaluable tool in my development process and I am thrilled that it integrates so easily with the new block editor. Hopefully this little tutorial helps keep your ACF editing experience consistent regardless of which part of the site you are using it on!