ACF Flexible Content Field

Advanced Custom Fields (ACF) is one of the most renowned meta-field plugins. The Flexible Content 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.

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

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.

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.

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.

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.

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.

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.

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'.

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.

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.