We are using Gutenberg Blocks by Kadence Blocks – Page Builder Features and Toolset plugin in our client site. Both have some use-full, clean and intelligent load blocks and options to extend Gutenberg’s editing capabilities.

When using the Kadence tabs block, the styling are perfectly applied to the backend. But the frontend shows the weird layout and disable the Toolset plugin completely solves this issue.

We have faced this conflict/compatibility issue on the following versions of these plugins:

Plugin	Version
Kadence Blocks – Gutenberg Blocks for Page Builder Features	2.4.13
Toolset Blocks	1.6.3

When debug the code, Kadence plugin already have some compatibility code for the Toolset plugin. But the compatibility code can’t solve the issue.

Compatibility code by Kadence:

	/**
	 * Adds a filter to the head filter for compatibility with toolset.
	 *
	 * @param boolean $render_inline_css
	 * @param string  $block_name
	 * @param array   $attributes
	 *
	 * @return boolean
	 */
	public function add_toolset_depreciated_filter_compatibility( $render_css, $block_name, $attributes ) {
		$unique_id = ( ! empty( $attributes['uniqueID'] ) ? $attributes['uniqueID'] : '' );
		return apply_filters( 'kadence_blocks_render_inline_css', $render_css, $block_name, $unique_id );
	}

Solution:

Remove the above compatibility code(filter) added by Kadence solves the issue. We are using the following code to remove the filter(You can add the code to your functions.php file):

function remove_toolset_depreciated_filter() 
{
    if( class_exists('Kadence_Blocks_Frontend' ) ){
        remove_filter('kadence_blocks_render_head_css', array( Kadence_Blocks_Frontend::get_instance(), 'add_toolset_depreciated_filter_compatibility'));
    }
}
add_action( 'wp_loaded', 'remove_toolset_depreciated_filter' );

If the above code can’t solve the issue on your site, you can try any of the following:

function remove_toolset_depreciated_filter() 
{
    if( class_exists('Kadence_Blocks_Frontend' ) ){

        remove_filter('kadence_blocks_render_head_css', array( 'Kadence_Blocks_Frontend', 'add_toolset_depreciated_filter_compatibility'));
    }
}
add_action( 'wp_loaded', 'remove_toolset_depreciated_filter' );

---

function remove_toolset_depreciated_filter() 
{
    if( class_exists('Kadence_Blocks_Frontend' ) ){

        remove_filter('kadence_blocks_render_head_css', array( new Kadence_Blocks_Frontend(), 'add_toolset_depreciated_filter_compatibility'));

    }
}
add_action( 'wp_loaded', 'remove_toolset_depreciated_filter' );

---

function remove_toolset_depreciated_filter() 
{
    if( class_exists('Kadence_Blocks_Frontend' ) ){

        remove_filter('kadence_blocks_render_head_css', 'Kadence_Blocks_Frontend::add_toolset_depreciated_filter_compatibility');
    }
}
add_action( 'wp_loaded', 'remove_toolset_depreciated_filter' );