Image field doesn’t work in WPBakery Page Builder Param Group

There is an known issue with WPBakery Page Builder plugin which make the Image field doesn’t work in Param Group. This issue is reported by my client when he can’t delete the image in duplicated Param Group item.

Finding the reason

I recorded the steps how to re-produce the issue here

Vc Param Group Image Before
Issue with Image field in WPBakery Page Builder Param Group after duplicating items

Spending some times to finding the reason, I found that with the items loaded on the same time with element, there are some events assigned to this image field. These events don’t work with the duplicate items, so these items will miss the click / remove behavior.

Solution

Luckily, WPBakery Page Builder plugin allow us to insert the admin JS file and provide the event detected after an param group item is added. By that way, I can add extra JS file to the param group element and re-trigger the missing events for duplicated items in param group.

This is the code how we can enqueue admin JS file with specific function for WPBakery Page Builder custom element:

vc_map(array(
	"name"        => __("Sample Element", "[textdomain]"),
	"base"        => "dc_sample_element",
	"description" => "",
	'admin_enqueue_js' => array(THEME_URL . '/assets/js/plugin-js_composer.js'),
	"params"      => array(
		array(
			'type'       => 'param_group',
			'value'      => '',
			"heading"    => __("Group", "[textdomain]"),
			'param_name' => 'group',
			'params'     => array(
				array(
					'type'        => 'attach_image',
					'heading'     => __('Image', '[textdomain]'),
					'param_name'  => 'image',
					'admin_label' => true,
				),
			),
			'callbacks'  => array(
				'after_add' => 'VCAddImageGroup'
			)
		)
	)
));

And then, in our custom plugin-js_composer.js file, we can add the code to trigger the missing events for Image field in Param Group:

function VCAddImageGroup(){
    jQuery(".gallery_widget_attached_images_list", this.$view).off("click.removeImage").on("click.removeImage", "a.vc_icon-remove", function($block){
        $block.preventDefault();
        $block = jQuery(this).closest(".edit_form_line");
        jQuery(this).parent().remove();
        var img_ids = [];
        $block.find(".added img").each(function(){
            img_ids.push(jQuery(this).attr("rel"))
        });
        $block.find(".gallery_widget_attached_images_ids").val(img_ids.join(",")).trigger("change");
    });
    jQuery(".gallery_widget_attached_images_list").each(function(index){
        var $img_ul = jQuery(this);
        $img_ul.sortable({
            forcePlaceholderSize: !0,
            placeholder: "widgets-placeholder-gallery",
            cursor: "move",
            items: "li",
            update: function(){
                var img_ids = [];
                jQuery(this).find(".added img").each(function(){
                    img_ids.push(jQuery(this).attr("rel"))
                });
                $img_ul.closest(".edit_form_line").find(".gallery_widget_attached_images_ids").val(img_ids.join(",")).trigger("change");
            }
        })
    });
}

This is the JS code I copied and customized from the core WPBakery Page Builder when comparing the 2 items in param group.

The final result is

Vc Param Group Image Fixed
Fixed Issue with Image field in WPBakery Page Builder Param Group after duplicating items