Flexible Content nested Clone

Hello,

Thanks for the report! Looking at your code, everything should work fine, you just forgot to display content in your layouts/grouped/template.php file ??

Here is an explanation:

if(has_flexible('pagebuilder')):
    the_flexible('pagebuilder');
endif;

This code will include:
– layouts/hero/template.php
– layouts/grouped/template.php

As you have an another flexible content inside your “Grouped” layout, you have to display this sub flexible content in your layouts/grouped/template.php file.

Add the following code in layouts/grouped/template.php:

The classic ACF way:

<?php while(have_rows('grouped_content_pagebuilder')): the_row(); ?>

    <?php if(get_row_layout() == 'hero'): ?>
    
        <?php the_sub_field('text'); ?>
        
    <?php endif; ?>
    
<?php endwhile; ?>

or the ACF Extended way:

if(has_flexible('grouped_content_pagebuilder')):
    the_flexible('grouped_content_pagebuilder');
endif;

Note: You have to enable “Layouts: Render” in your grouped_content_pagebuilder in order to use the_flexible on the sub flexible content. And configure the sub flexible content layouts files ??

Hope it helps.

Have a nice day!

Regards.

Hey!

sorry to bother you here again.. But there is still something not working with the_flexible and cloned flexible content fields.

I have a flexible content field (like above) with multiple layouts and ACFE layouts set up. Working all fine in front- and backend!

If i clone (clone-field, not duplicate) this field, the layouts won’t render. only empty HTML-comment <!– –> is rendered.
(helper.php //get_flexible() -> $layout var seems to be empty).

Any advice?

THX for your work and support anyway ??

if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array(
	'key' => 'group_5d4a8ae8a5e2f',
	'title' => 'Layouts',
	'fields' => array(
		array(
			'key' => 'field_5d4a8aeeba9bf',
			'label' => 'PageBuilder',
			'name' => 'pagebuilder',
			'type' => 'flexible_content',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'acfe_permissions' => '',
			'acfe_flexible_stylised_button' => 1,
			'acfe_flexible_layouts_thumbnails' => 1,
			'acfe_flexible_layouts_templates' => 1,
			'acfe_flexible_layouts_previews' => 1,
			'acfe_flexible_close_button' => 1,
			'acfe_flexible_title_edition' => 0,
			'acfe_flexible_copy_paste' => 1,
			'acfe_flexible_modal_edition' => 0,
			'acfe_flexible_modal' => array(
				'acfe_flexible_modal_enabled' => '0',
			),
			'acfe_flexible_layouts_state' => '',
			'layouts' => array(
				'layout_5d4a8af774d8f' => array(
					'key' => 'layout_5d4a8af774d8f',
					'name' => 'hero',
					'label' => 'Hero',
					'display' => 'block',
					'sub_fields' => array(
						array(
							'key' => 'field_5d4a8b18ba9c0',
							'label' => 'Image',
							'name' => 'image',
							'type' => 'image',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'acfe_permissions' => '',
							'acfe_uploader' => 'wp',
							'acfe_thumbnail' => 0,
							'return_format' => 'id',
							'preview_size' => 'thumbnail',
							'library' => 'all',
							'min_width' => '',
							'min_height' => '',
							'min_size' => '',
							'max_width' => '',
							'max_height' => '',
							'max_size' => '',
							'mime_types' => '',
						),
						array(
							'key' => 'field_5ddb96fd0766a',
							'label' => 'Text',
							'name' => 'text',
							'type' => 'text',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'acfe_permissions' => '',
							'default_value' => '',
							'placeholder' => '',
							'prepend' => '',
							'append' => '',
							'maxlength' => '',
						),
					),
					'min' => '',
					'max' => '',
					'acfe_flexible_render_template' => 'layouts/hero/template.php',
					'acfe_flexible_render_style' => '',
					'acfe_flexible_render_script' => '',
					'acfe_flexible_thumbnail' => '',
				),
				'layout_5ddb97080766b' => array(
					'key' => 'layout_5ddb97080766b',
					'name' => 'grouped',
					'label' => 'Grouped',
					'display' => 'block',
					'sub_fields' => array(
						array(
							'key' => 'field_5ddb97220766c',
							'label' => 'Grouped Content',
							'name' => 'grouped_content',
							'type' => 'clone',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'acfe_permissions' => '',
							'clone' => array(
								0 => 'field_5d4a8aeeba9bf',
							),
							'display' => 'seamless',
							'layout' => 'block',
							'prefix_label' => 0,
							'prefix_name' => 1,
							'acfe_clone_modal' => 0,
						),
					),
					'min' => '',
					'max' => '',
					'acfe_flexible_render_template' => 'layouts/grouped/template.php',
					'acfe_flexible_render_style' => '',
					'acfe_flexible_render_script' => '',
					'acfe_flexible_thumbnail' => '',
				),
			),
			'button_label' => 'Layout hinzufügen',
			'min' => '',
			'max' => '',
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'post_type',
				'operator' => '==',
				'value' => 'post',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'left',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
	'active' => false,
	'description' => '',
	'acfe_display_title' => '',
	'acfe_autosync' => '',
	'acfe_permissions' => '',
	'acfe_form' => 0,
	'acfe_meta' => '',
	'acfe_note' => '',
));

acf_add_local_field_group(array(
	'key' => 'group_5de6554f3a8e4',
	'title' => 'übersetzungen',
	'fields' => array(
		array(
			'key' => 'field_5de6555316cce',
			'label' => 'Content DE',
			'name' => 'content_de',
			'type' => 'clone',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'acfe_permissions' => '',
			'clone' => array(
				0 => 'field_5d4a8aeeba9bf',
			),
			'display' => 'seamless',
			'layout' => 'table',
			'prefix_label' => 0,
			'prefix_name' => 1,
			'acfe_clone_modal' => 0,
		),
		array(
			'key' => 'field_5de6558216ccf',
			'label' => 'Content EN',
			'name' => 'content_en',
			'type' => 'clone',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'acfe_permissions' => '',
			'clone' => array(
				0 => 'field_5d4a8aeeba9bf',
			),
			'display' => 'seamless',
			'layout' => 'table',
			'prefix_label' => 0,
			'prefix_name' => 1,
			'acfe_clone_modal' => 0,
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'post_type',
				'operator' => '==',
				'value' => 'post',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'left',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
	'active' => true,
	'description' => '',
	'acfe_display_title' => '',
	'acfe_autosync' => '',
	'acfe_permissions' => '',
	'acfe_form' => 0,
	'acfe_meta' => '',
	'acfe_note' => '',
));

endif;

Hello,

I tested your code, and there’s a major flaw in your flexible content settings. Your layout Grouped has a clone field called Grouped Content which clone its parent flexible content PageBuilder (key: field_5d4a8aeeba9bf).

This setting shouldn’t be used in a flexible content, because it would create a virtual infinite loop. Flexible Content doesn’t allow infinite nested layouts by design (all layouts are parsed in the HTML during the admin page load).

In your example, this is why you cannot create a “Grouped” layout, and inside it add an another “Grouped” layout. As you can see in the admin, the second nested “Grouped” isn’t displayed.

Screenshot: https://i.imgur.com/kqPSQND.png

You should design your page builder with a “finite” nested layouts in mind. Trust me, I tested tons of configurations to try to achieve this, the best result you’ll get is an infinite admin page load ??

There’s a potential solution which consists to load layouts asynchronously (via ajax), instead of parsing layouts in the HTML during page load. But that would require a massive flexible content code rewrite. I’m thinking about such solution for ACF Extended (which would also increase admin page load speed with complex flexible content page builders). But there’s nothing ready yet.

Hope it helps!

Regards.