Flexible Content/Repeater field support

Hey, if anybody is interested, I have a working solution for getting live edit to work with individual flexible content rows. I forget what exactly the problem was when I worked on this, but the only drawback is that I could not find a way to alter the live_edit method within the live_edit class within my functions file, so I had to do it directly.

If anyone is interested, here is what I did:

Within the plugin’s directory, find the live-edit-v5.php file. Then search for the following code (should start at line 230)

// create form
acf_form( $args );

Directly underneath this, I used the following code:

// find editable flexible layouts
$flex_fields = array();

foreach( $fields as $field ) {

	if( substr( $field, 0, 5 ) === "flex-") {

		$field = str_replace( 'flex-', '', $field );
		$flex_fields[] = $field;
	}
}

// remove all other flexible layouts
if( !empty( $flex_fields ) )  {

	$flex_fields = json_encode( $flex_fields ); ?>

	<script type="text/javascript">
		(function($){

			// loop through all flexible layouts loaded in DOM
			$( 'div.layout' ).each(function(){

				var fieldName = $(this).attr('data-layout');

				// remove layouts not included in editable fields
				if( $.inArray(fieldName, <?php echo $flex_fields; ?>) == -1 ) {
					$(this).remove();
				}

			});

		})(jQuery);

	</script>

<?php }

To get this to work, here is what you need to do when using the live_edit function in your page templates.

First, you need to call your entire flexible layout which holds the fields you want to use. In my case, my flexible content field was called “content”. So here is the code:

<?php if(function_exists("live_edit")){ live_edit('content'); }?>

Now if you just leave it at that the live edit plugin will simply open a panel with all of your flexible content fields. What we want to do is get rid of all of the ones we don’t need and focus on one or more particular layouts we want to make editable. What the first code I provided does is then filter through and remove all of the fields that you do not specify in your live_edit function. You then specify the flexible layouts you want to display by using flex-“your field” to specify which layout you want to use. Here is an example:

<?php if(function_exists("live_edit")){ live_edit('content, flex-banner-section'); }?>

What this does is tell Live Edit to retrieve the “content” flexible field with all of its layouts, and then hide all of the other layouts and display the “banner-section” for the user to edit. Again, the catch is that you need to append “flex-” to the field so that the plugin can recognize it as a flexible layout.

Again, the only drawback is that you need to go in and edit the plugin’s file directly. Hopefully someone else might be able to rework this so we can simply put the code within a functions.php.

Anyway hope it helps.

Update

If anyone uses this, for the code you add to the plugin…

Instead of removing the fields with this:

$(this).remove();

Simply hide them with this:

$(this).css({'position':'absolute', 'z-index':'-1'});

Otherwise then you save your changes, although everything looks fine when you update via Live Edit, you will actually lose the other fields after you you refresh your browser.