Flexible (Pro)

The Flexible Content field is a unique ACF field type that is not available in other meta vendors. It provides a versatile, block-based editor, allowing for structured content creation.

With the Flexible Content field, you can define multiple layouts and sub-fields within a single field, giving you complete control over the content structure. Editors can easily choose and arrange these layouts within the editor interface.

About the field type

The Flexible Content field extends beyond traditional group and repeater fields, allowing for the creation of multiple groups of fields within a single flexible field. Editors can select the desired groups directly within the editor.

Consider a scenario with a 'Cars' Custom Post Type (CPT) consisting of three sections: pricing, dealers, and reviews. In the conventional approach, three separate field groups would be added, limiting the editor's ability to repeat sections or control their order on specific pages, resulting in a static layout.

By employing the flexible field, editors gain greater flexibility. For instance, a 'Car' flexible field could be created with the aforementioned three layouts (groups). Each layout functions like a group, with its own set of fields. This flexible field is then attached to the 'Cars' CPT, enabling editors to freely choose the order of sections and repeat them as needed. For example, they can arrange sections as reviews, pricing, reviews, or any other desired structure.

How to use it

To display a flexible field, follow these steps:

a) Create a new View ('Primary'):

1. On the Fields tab, click the 'Add field' button.

2. Choose the flexible field.

3. After selecting the flexible field, you'll see a new 'Sub-fields' tab appear in the row. Click on it.

4. Select all the layouts you want to display.

5. Save the current View.

b) Create a new View ('Internal'):

1. On the Fields tab, choose your group in the 'parent group' field.

2. In the parent field, select the 'flexible layout' from the previous step.

3. Click the 'Add field' button and add all the layout fields you want to display.

4. Save the current View.

c) Amend the 'Primary' View:

1. Find the 'flexible' field in the fields list.

2. Open the 'Sub-fields' tab and locate the target 'layout'.

3. Fill out the "View" setting by choosing the 'Internal' View.

4. Save the current View.

You're done! Now you can copy the shortcode of the 'Primary' View and paste it into the target location.

Advanced Views will automatically retrieve the set of chosen layouts on the page and pass the data of every layout to the specific View defined for each layout. This process occurs dynamically, granting editors the freedom to customize content without manual intervention.

Displaying items as a list

To display all the items in a single row, you can use the CSS Flexbox:

#view__flexible-content {
display: flex;
gap: 10px;
}

Displaying items as a Grid

To display all the items as a grid, you can use the CSS Grid:

#view__flexible-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
 }

@media screen and (min-width:992px) {
 #view__flexible-content {
  grid-template-columns: repeat(4, 1fr);
 }
}