When you are using ACF field connections or insertions in Beaver Builder with Beaver Themer if the field is not populated the HTML mark up is still rendered on the page, even though the field is blank some of its HTML markup will have valid CSS applied to it and affect the spacing on the page as well as being unnecessary.

ACF Field Connection

If you have used a straight ACF connection then the solution should be relatively easy using the code supplied by Beaver Builder. This will prevent both the module and the row markup.

add_filter( 'fl_builder_is_node_visible', 'check_field_connections', 10, 2 );

function check_field_connections( $is_visible, $node ) {
	
	if ( isset( $node->settings->connections ) ) {
		foreach ( $node->settings->connections as $key => $connection ) {
			if ( ! empty( $connection ) && empty( $node->settings->$key ) ) {
				return false;
			}
		}
	}
	
	return $is_visible;
}


ACF Field Insertion

Using an ACF field insertion is a bit more tricky as these are using the conditional shortcodes.

[wpbb-if post:acf name='my_field']]
  
[[wpbb post:acf type='text' name='my_field']]
 
[[/wpbb-if]

So in the above example the field my_field will only output if it is populated otherwise it will be blank, however the row and module it sits in will have it’s markup output.

The row and module mark up are dealt with by the code below.

add_filter( 'fl_builder_is_node_visible', 'tp_hide_row_module', 10, 2 );

function tp_hide_row_module($is_visible, $node) {
	if ($node->type == 'row' && $node->settings->class == 'my-class') { // target a row with a class
		if ($meta = get_post_meta(get_the_ID(), 'my_field', true)) { // target a post meta/custom field
			if ($meta == '') {
				$is_visible = false;
			}
		} else {
			$is_visible = false;
		}
	}
	
	return $is_visible;
}

So in the above code which is heavily based on the initially provided Beaver Builder code, the row that the inserted ACF code lives in has a CSS class applied via the Builder my-class – this is targetted with the $node parameter and then if true further targetted with the get_post_meta function which has the ‘my_field’ custom field  – you would change this name to your custom field, the custom field is tested to see if it has a value or rather if it doesn’t have a value – if it doesn’t then no row is output.

Thanks to @zestsms in the Beaver Builder slack channel!

Share:

Leave a Reply