WPLake > Blog > ACF Flexible Field: 5 Things You Should Know

ACF Flexible Field: 5 Things You Should Know

Time to read: 5 mins

-

ACF Plugins Tips and Tricks

-

Updated 19.03.24

The Flexible field stands apart from other field types, offering an enhanced editor experience. Discover how to utilize the field, query and display values.

Table of Contents

Intro

#link copied

Advanced Custom Fields (ACF) is one of the most renowned meta-field plugins. The Flexible field type is a distinctive feature of ACF, not found in other meta-field plugins, offering a fully separate editing experience from both the Gutenberg and Classic editors.

Each flexible field serves as a container for layouts (field groups) with no fixed structure or required items. It could be likened to the Repeater field on steroids, as it includes multiple ACF Group fields and allows them to be repeated in any order.

This grants editors the freedom to craft unique pages using any of the registered layouts in their preferred manner.

Settings of the ACF Flexible field
The flexible field serves as a container for layouts (field groups)
Layout settings of the ACF Flexible field
Every "Layout" has a unique name and a group of fields
Editor's look of the ACF Flexible field
Editors can manage layouts in their own way, including utilizing the same layout multiple times
ACF Flexible layout fields
Every layout contains a set of pre-defined fields and can be collapsed to simplify navigation

Let's delve into the five key points to gain a better understanding of this field.

1. Gutenberg editor alternative

#link copied

The Flexible field appears in meta boxes just like other field types and stores values. What sets this field type apart is its functionality akin to a page builder, offering an alternative to the Gutenberg editor.

If you recall the behavior of the Gutenberg editor, you'll notice it functions as a block editor, enabling the composition of pages from blocks ranging from small elements like paragraphs to larger multi-part sections like galleries.

Gutenberg aims to transcend traditional editing by providing styling opportunities such as grouping blocks, selecting row or stack layouts, and adjusting other layout settings like image size. This variance in editor behavior distinguishes it from the previous Classic Editor, which primarily focused on content edits.

Styling options of the Gutenberg editor
Even in a simple image case, multiple styling options may distract editors from content management

The fact that Gutenberg is no longer solely an editor is one of the reasons why many in the WordPress community have reservations about it. When building websites for clients using ACF fields for data, concerns about layout and styling arise, with clients potentially becoming confused by layout features.

To address this, the Flexible field offers a pure editing experience, ensuring editors remain focused on content creation without distractions from styling features. Another solution can be utilizing the ACF Blocks feature to create independent blocks that cannot be customized via Gutenberg.

2. Uses modular parts

#link copied

The sole similarity between the Flexible field and the Gutenberg editor is that both utilize modular parts.

Within the Flexible Field, you define layouts, and editors can use them independently, but unlike built-in Gutenberg blocks, the markup of the layout along with the field set is fully under our control.

In this way you can create a sizable set of layouts, essentially turning it into your own page builder, allowing editors to compose blocks while avoiding styling features. Another advantageous aspect is that the templates created for the layouts can also be used for ACF Blocks and vice versa.

Tip: For efficient building, it's essential not only to keep templates modular but also styles and scripts. Each component should have its own template, set of styles, and scripts.

For this goal you can utilize smart templates from the Advanced Views plugin, which offers a modular approach out-of-the-box and supports all ACF field types.

3. Allows to query field values

#link copied

The Flexible field is a meta field, which means it stores all the field values inside the wp_postmeta table, like other ordinary meta fields. This fact means that, unlike data in the Gutenberg blocks, we can query them.

Let's take a look at how the Flexible field stores field values inside the database.

Layout settings of the ACF Flexible field
Fields in the Flexible layout settings
DB presentation of the ACF Flexible field
Field values of the Flexible layouts are stored in the database similar to the repeater fields

If you're familiar with the repeater field, you'll notice that the structure is the same. So our flexible field has the name 'flexible', and our 'author' layout includes the 'first_name' and 'last_name' fields. ACF writes each field to the meta table, adding an integer index to reflect the layout.

You shouldn't worry about this index, as it's a dynamic value. When editors reorder items, the index changes and the items are overridden.

flexible_0_first_name = {flexible-name}_{layout-index}_{field-name}

Using this knowledge, you can become proficient in querying field values within flexible fields. Refer to the ACF's tip for the repeater field to see a practical example.

Note: As mentioned earlier, the flexible layouts indeed have unique names, which are used inside the general template to recognize the current layout. However, in the database, the layout names do not affect the field names.

4. Loses to ACF Blocks in performance

#link copied

Nothing is perfect, and the fact that using the postmeta table enables queries by fields brings performance considerations. Both Gutenberg native and ACF Blocks store all the field values inside the post_content, which eliminates the need for extra queries to the database to retrieve them.

The Flexible field stores every field separately, resulting in numerous extra queries to the database. If you've previously been using the classic 'meta field boxes' approach with plain repeaters, then the performance will remain the same.

However, compared to ACF Blocks, the difference will be significant. So, if performance is crucial for your project, we recommend using ACF Blocks.

By using them, you can achieve a similar experience while maintaining high performance. To expedite the blocks creation process, consider using the Advanced Views Pro plugin.

5. Adds layout name with the 'acf_fc_layout' key

#link copied

Now let's consider how to display the field values from the flexible layouts. As mentioned earlier, flexible layouts don't have a fixed structure, so when writing the template, we should consider this and dynamically render different pieces based on the current layout.

The template code will be similar to that of the repeater field, with the main difference being that different items may have different sets of fields. When we request the field value from ACF, every item besides the field values contains the layout name, which we initially set in the settings. It's called 'acf_fc_layout'.

How to display Flexible field content

#link copied

Using this field, we can dynamically render layouts regardless of the position.

<?php

$sections = get_field( 'my_flexible_field' );
$sections = $sections ?: array();

foreach ( $sections as $section ) {
	switch ( $section['acf_fc_layout'] ) {
		case 'author':
			$first_name = $section['first_name'];
			$last_name  = $section['last_name'];
			// todo print your markup or pass the values into your template
			break;
		case 'book':
			$title               = $section['title'];
			$year_of_publication = $section['year_of_publication'];
			// todo print your markup or pass the values into your template
			break;
	}
}

The code above is simplified for showcasing purposes. We recommend writing separate templates for each layout and including them, rather than placing them directly within the switch statement.

Summary

#link copied

The Flexible field is a unique ACF field that serves as an alternative to Gutenberg, providing a superior editorial experience.

Within the Flexible field, layouts are defined, allowing editors to use them independently. Unlike built-in Gutenberg blocks, the markup of the layout and its fieldset are fully under our control.

As a meta field, the Flexible field stores all field values inside the wp_postmeta table, like other ordinary meta fields. This enables querying of data, unlike data stored in Gutenberg blocks.

However, the Flexible field may lag behind ACF Blocks in performance. Gutenberg native and ACF Blocks store all field values inside the post_content, eliminating the need for extra queries to retrieve them from the database.

To display field values from the Flexible field, templates should be dynamically loaded based on the 'acf_fc_layout' key, or the Advanced Views Pro plugin can be utilized.

About the Author
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it