Quick Note: This is an ACF Pro and a Breakdance 2.4+ feature.
Setting up flexible content fields
Some useful tips when making a flexible content fields group.
Make sure you plan ahead. There are a couple of different ways you can plan your flexible fields
- Analyze the design proof fully before you start putting the fields together
- Pull apart a page template into smaller sections and build the layouts from them
One huge tip that I’ve realized is to make sure you prefix the field titles in a way that’s easy to find the whole layout (group) easily. For example, in the video I used “FF Hero”, “FF Services”, “FF Staff”, etc and then the fields in the layout would be named like “FF Hero Heading”, “FF Hero Paragraph”, “FF Hero Button Text”, etc.
If you’re using the flexible fields as the main layout tool, then you might not even need to use the FF prefix (or any extra prefix) and go straight into the regular BEM philosophy* of naming layouts.
When I say “the BEM philosophy” I mean appending the modifiers rather than prepending them when naming things. It’s the opposite of how English is written, but it’s easier to sort and easier to write code. So use “button-green” and not “green-button”. (Similarly, that’s also why the ISO standard (8601) date format of yyyy-mm-dd is easily sortable)
Once you build everything, you can assign them to the pages or posts you’d like them to show on the backend. The locations section on the bottom of the field group build panel will help you with that. Make sure you have a thorough look at the location conditions because they are very helpful in giving you a wide variety of options.
You can make a certain custom post type use only your flexible fields, or you can assign them to certain pages, or child pages of, for example, a services page, or an about us page. There are a lot of things you can do. Additionally, it’s great because Breakdance templates can target the same posts. (I’ve noticed that quite a few (most) site builders don’t have all the necessary template targeting conditions. Weird.)
breakdance setup for the fields
Now to get everything connected!
This is probably my favorite part. The implementation is simple, intuitive, and elegant.
It’s so simple, I absolutely love it.
Basically, what you’re doing is making a global block for each layout in the flexible field, and then assigning them in the flexible content element.
Sounds simple, right? It actually is!
To explain the process I showed in the video,
- I just loaded a Breakdance design library section onto a page (if you’re building your own, of course, this step is to build the whole lot of layouts on a template page)
- Connect each of the single ACF field to the corresponding elements.
- From there, once they are all connected, save them as separate global blocks. (Again, make sure you take care when you name them. Something like the “appended modifiers” approach I mentioned above helps.)
Once you have all the global blocks made, you’re ready to go to the next step.
After you set up the condition of the template, it’s a simple matter of loading the flexible content element and assigning each layout to its corresponding global block.
Some extra tricks
Allowing simple styled conditions
The easiest way to add style/layout options is to use conditions in multiple sections in a single global block. (and, of course, the non-easy way is to write some code that will pick up on the ACF values and output it on the frontend)
I normally use the button group field to add options, and use the value to match conditions and show the correct block.
For example, you can add a button group to a layout like this
and set the conditions in the breakdance element to load conditionally depending on the button choice.
For more info on this type of build, have a look at this tutorial on making repeater fields work similarly to flexible content fields with conditions.
Making a grid in the flexible content area
You can even add some backend CSS to certain flexible fields to make a grid of blocks (this won’t work with repeater fields) and the client will be able to edit content inside their own custom built backend page builder.
For example, in the flexible field, go to presentation > class
and then add the CSS you see in the sidebar, and you get something like this:
You can add the backend CSS to your own plugin or use this custom blank plugin (which already has the admin css file ready, so you can just add the css from the sidebar).
I hope you liked this whole walkthrough!
ACF flexible content fields are super powerful, and I’m so happy Breakdance 2.4 has not only made it possible to utilize this, but also made it SUPER easy to use.
