Update on 12 Oct 2024: ACF Flexible Content in Bricks with Each Row in its Own Section
This Pro tutorial provides the steps to set up a Flexible Content type of field using Advanced Custom Fields Pro in Bricks.
Flexible Content field enables your clients to add multiple layouts to a Page in any order, populate the sub fields in the layouts and have that content appear on the front end using the structure you define.
We shall provide the JSON file for importing a sample field group and JSON code for copying and pasting the fully-built Bricks Section. After going through how these are put together, you will be able to set up your own sub fields and layouts for your requirements.
Screenshot of a Page where the Flexible Content field is populated:
The rows can be dragged around to (re)position them in any order and any number of rows can be added by the client.
After implementing the tutorial:
Step 1
Install and activate ACF Pro.
Go to ACF → Tools and import this field group.
Make sure the location of the field group is Page or attach it to a specific Page – typically the Page set as the homepage at Settings → Reading.
Step 2
Edit a Page and populate the field.
Step 3
Edit this Page with Bricks directly or edit with Bricks a single template that applies to all Pages depending on the field group’s location.
Copy this section’s JSON and paste.
The query loop type has been set to our ACF Flexible Content.
Condition applied on the “Image Text Layout” element:
{acf_get_row_layout}
image_text is the name of the layout we are checking against.
Condition applied on the “Text Image Layout” element:
Image and Rich Text elements are mapped to the corresponding sub fields.
Ex.:
Check the front end.