Roots Discourse

Dev library: ACF Blocks ("controllers" for re-usable field groups)

Hey guys!

We built a couple of developer tools and I thought I’d share them with you.

Over the last years, we at Codelight have been gravitating towards building sites more and more using ACF Flexible Content. Giving the client a way to put together new page layouts using existing pieces is really useful and reduces the amount of boring work. In addition to that, organizing the code by blocks rather than templates makes much more sense since usually many elements between templates overlap.

To simplify the process, I’ve built a library that abstracts away all the “plumbing” and lets you focus on writing just the site-specific code. I ended up with a system where you can define blocks either via simple procedural code or clean OOP classes and re-use blocks between templates and flexible field groups super easily. We’ve battle-tested it on quite a lot of projects by now and it works perfectly (at least for us), saving tons of dev time. I personally find that it fits many situations much better than using soberwp/controller. We also have a system for defining block-specific JS modules that are automatically executed if the block exists on page, but we haven’t had the time to publish it yet.

You can find the code and a couple of examples here: https://github.com/codelight-eu/acf-blocks - haven’t had much time to write documentation yet, but it’s a start.

One more thing. The biggest problem with ACF Flexible Content is usability in admin. It can be difficult for site admins to get a good overview of the elements on the page. So we solved that by moving the flexible layouts to vertical tabs which can be drag-n-dropped to re-order them. For that, we built a plugin - check it out here: https://github.com/codelight-eu/acf-tabbed-flexible-content

Hope this helps someone. All feedback welcome!

3 Likes

I built something similar too (https://github.com/lvl99/blockpress) because I wanted reuseable and dev-friendly flexible content blocks but there are a lot of caveats with using ACF:

  1. Heaps of post meta data per block

  2. If you use WPML and reorder a flexible content block it loses the translation

  3. Lots of other issues with WPML to do with config (primarily issue with having to configure translation for each block per post)

  4. Reliance on ACF which isn’t core. Gutenberg is basically making the flex content part obsolete tbh.

I built this while Gutenberg was in early development but I think Gutenberg has most definitely superceded ACF flexible content now, in terms of features and dev friendliness too.

Thanks for your feedback! So you’re saying that everything that you’d have done with ACF and/or flexible content before, you’ll now be doing with Gutenberg?

I haven’t had a chance to dig deep into Gutenberg yet due to various GDPR projects being so time-consuming, but will do that soon. From the initial review, one thing we considered a problem with Gutenberg was versioning blocks. Their deprecated block handling system is nice, but cumbersome compared to just being able to edit a template and having the modifications applied immediately.

Anyway, since 2/4 issues you mention are WPML related I have to ask - have you tried Polylang? We’re currently testing Polylang’s WooCommerce extension, praying towards various higher beings that we could finally move away from WPML.