ACF flexible content fields in Breakdance 2.4

ACF flexible content fields in Breakdance 2.4

Breakdance v2.4 has a super awesome new feature that I am excited is finally happening. And that is ACF flexible content field implementation.

This is (from what I can tell) the FIRST ever WP builder that supports ACF flexible fields.

And it’s absolutely amazing.

A lot of people are curious about what flexible fields do, or how it can be used. While on the opposite side of the spectrum, some developers love it so much they rely solely on flexible fields.

What are ACF Flexible Content Fields?

Simply put, ACF flexible content fields are similar to repeater fields, but allows for different layouts in each block. This is the best way to provide a builder level content management system for clients while keeping the frontend build intact. You can set up a variation of layouts and they’d be able to choose from the selection you built for them.

A simple example of this would be to use flexible fields on a services page where some services might have different layouts depending on the content while keeping things looking consistent.

Or, you could use them for things like portfolio pages because some projects might require different layouts to showcase different things.

ACF also has very robust targetting rules in place, so you can build the fields to only show on certain custom post types, certain pages, and even certain SUBpages.

This tutorial is in two parts, one, basic flexible fields usage walking you through how to get things going, and two, a much more interesting way of using flexible fields that I’m sure you would enjoy.

The Video

Timestamps

  • 00:05 Intro
  • 00:30 What are ACF flexible content fields and their benefits?
  • Part 1. Basic usage
  • 01:42 Setting up the fields
  • 10:31 Connecting the content to the fields in Breakdance
  • 11:45 Creating global blocks to use in the flexible content element
  • 13:35 Connecting a page and exploring the interface
  • 16:25 Breakdance template + Connecting the layouts
  • Part 2. More advanced usage
  • 21:33 Single Image Layout with conditionals
  • 25:31 Staff members blocks using flexible fields inside a layout block
  • 36:18 Outro

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,

  1. 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)
  2. Connect each of the single ACF field to the corresponding elements.
  3. 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.

Extra Code

Here's the code used in the episode. Click on 'copy code' to copy to your clipboard and paste it appropriately.
Type of code: php

This goes in a plugin, then add a folder 'css' and create a file 'admin-styles.css' in that folder.

function ai_load_custom_wp_admin_style(){
    wp_register_style( 'ai_custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/admin-styles.css', false, '1.0.1' );
    wp_enqueue_style( 'ai_custom_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'ai_load_custom_wp_admin_style');
Type of code: css

The CSS that goes in admin-styles.css

.acf-field-flexible-content.ai-ff-rows_3 .values {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; }
  .acf-field-flexible-content.ai-ff-rows_3 .values .layout {
    margin-top: 0;
    width: calc((100% - 2rem) * .33); }
Leave a Reply

Your email address will not be published. Required fields are marked *

    New tutorials

    Disable Gutenberg Editor on some ACF pages
    ACF flexible content fields in Breakdance 2.4
    Making a lightbox from a CPT Loop
    Use a featured video in post templates with Breakdance

    Got a question? ask!

    If you have any question about the content on this page, feel free to send me an email by clicking the button below.

    newsletter? sign up!

    Sign up to the newsletter for updates on tutorials, news, and offers.

    Got a question?

    If you have a question about something on this page, send me an email, and hopefully I can answer, and we can solve it!