2

I am creating custom content blocks and using WPBakery plugin to do so but the nested container doesn't work. When I add the container I cannot remove it and the children items don't show at all. The icon is also different from the one shown in the example (it shows a square with a mouse pointer). Am I missing something?

The example I followed is this one: https://kb.wpbakery.com/docs/developers-how-tos/nested-shortcodes-container/ (I have also tried to implement this specific one without changes but I get the same). I have mapped the blocks on the action "vc_after_init_base". My current plugin version is 5.4.2 so it should support custom nested containers.

Right now I feel clueless so maybe someone has a similar issue?

*it seems that the js_view "VcColumnView" somehow breaks it. If I remove it at least I can edit/remove the container. The rest doesn't work.

Machavity
  • 30,841
  • 27
  • 92
  • 100
Elisa M.
  • 51
  • 5

1 Answers1

0

This component is very buggy, I finally got it working. To show the container with children there is a weird restriction: you need to call your custom container class with this format: "WPBakeryShortCode_" + "base" parameter in your vc_map. I call it "zod_tabs" in the following code snippets. But don't apply this same logic for the "child element" class, that must be with different name or it breaks.

example of my container class:

class WPBakeryShortCode_zod_tabs extends WPBakeryShortCodesContainer {

example of my content elment class:

class zodTab extends WPBakeryShortCode {

Weird, but that's it.

Then, you have to set the container class with these "vc_map" parameters:

'name' => __('Tabs', 'zod-wpb-tweaks'),
'base' => 'zod_tabs',
'description' => __('Section with tabs or accordions', 'zod-wpb-tweaks'),
'category' => __('Content', 'zod-wpb-tweaks'),
'icon' => ZBT_URI . 'output/assets/img/icon-tabs.png',
'as_parent' => array('only' => 'zod_tab'),
'is_container' => true,
'content_element' => true,
'show_settings_on_create' => false,
'js_view' => 'VcColumnView',
'params' => array( 
// ... etc... your fields here

But you are not done yet, you have to override the core function "mainHtmlBlockParams" inside the class "WPBakeryShortCodesContainer" (the core file is in js_composer\include\classes\shortcodes\core\class-wpbakeryshortcodescontainer.php). There must be a bug, because the original function is not accessing the $settings array to retrieve "shortcode" and "base", therefore the markup in the backend is wrong, outputting empty classes, and breaking the sortable javascript.

So, to have the sortable elements you need to force the markup by hand, knowing that my base is "zod_tabs", this way...

// fix: override parent class function to add correct classes
public function mainHtmlBlockParams( $width, $i ) {
    return 'data-element_type="zod_tabs" class="wpb_zod_tabs wpb_sortable wpb_content_holder vc_shortcodes_container"' . $this->customAdminBlockParams();
}

Then to fix the missing icon (the default square with mouse pointer), you need another hack, adding a css snippet for the admin, it is a function in the "__construct()" of my custom class, called by...

add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue') );

Here is the function...

// fix: icon in backend
public function admin_enqueue($hook){
  wp_enqueue_style('wpb-tabs', ZBT_URI .'output/assets/css/admin-tabs.css');
}

The content of this css file is simple, i have the icon relative to that css...

#zod_tabs .vc_element-icon{
  background-image: url(../img/icon-tabs.png);
}

Finally, these are the vc_map parameters of my zodTab custom class...

'name' => __('Tab', 'zod-wpb-tweaks'),
'base' => 'zod_tab',
'description' => __('Single tab element', 'zod-wpb-tweaks'),
'category' => __('Content', 'zod-wpb-tweaks'),
'icon' => ZBT_URI . 'output/assets/img/icon-tabs.png',
'content_element' => true,
'as_child' => array('only' => 'zod_tabs'),
'params' => array(
// etc ... your fields here

Using all these hacks I got the backend working fine. About the frontend editor it's another story, some css fixes were required, and the main container controllers are missing. Perhaps I need to tinker it a little more.

zod
  • 407
  • 4
  • 4