title: Nested Item - Visual Composer
body: <p>I try create new widget for Visual Composer versrion 5.2</p>
  
  <p>i found this <a href="https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524362/Nested+Shortcodes+container" rel="nofollow noreferrer">https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524362/Nested+Shortcodes+container</a></p>
  
  <p>So i create some example widget:</p>
  
  <pre><code>    &lt;?php
  /*
  Plugin Name: Example nested item
  Plugin URI: http://wpbakery.com/vc
  Description:
  Version: 0.1.1
  Author: PG
  License: GPLv2 or later
  */
  
  
  // don't load directly
  if (!defined('ABSPATH')) die('-1');
  
  class ExampleNested {
  
      public function __construct()
      {
          // We safely integrate with VC with this hook
          add_action('vc_before_init', [$this, 'initVC']);
  
          // Use this when creating a shortcode addon
          add_shortcode('your_gallery', [$this, 'renderGallery']);
          add_shortcode('single_img', [$this, 'renderSingleImg']);
      }
  
      public function renderGallery()
      {
          /**
           *
           */
      }
  
      public function renderSingleImg()
      {
          /**
           *
           */
      }
  
      public function initVC() {
          vc_map( array(
              "name" =&gt; __("Your Gallery", "my-text-domain"),
              "base" =&gt; "your_gallery",
              "as_parent" =&gt; array('only' =&gt; 'single_img'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
              "content_element" =&gt; true,
              "show_settings_on_create" =&gt; false,
              "is_container" =&gt; true,
              "params" =&gt; array(
                  // add params same as with any other content element
                  array(
                      "type" =&gt; "textfield",
                      "heading" =&gt; __("Extra class name", "my-text-domain"),
                      "param_name" =&gt; "el_class",
                      "description" =&gt; __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.", "my-text-domain")
                  )
              ),
              "js_view" =&gt; 'VcColumnView'
          ) );
          vc_map( array(
              "name" =&gt; __("Gallery Image", "my-text-domain"),
              "base" =&gt; "single_img",
              "content_element" =&gt; true,
              "as_child" =&gt; array('only' =&gt; 'your_gallery'), // Use only|except attributes to limit parent (separate multiple values with comma)
              "params" =&gt; array(
                  // add params same as with any other content element
                  array(
                      "type" =&gt; "textfield",
                      "heading" =&gt; __("Extra class name", "my-text-domain"),
                      "param_name" =&gt; "el_class",
                      "description" =&gt; __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.", "my-text-domain")
                  )
              )
          ) );
      }
  }
  
  new ExampleNested();
  
  //Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality
  if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
      class WPBakeryShortCode_Your_Gallery extends WPBakeryShortCodesContainer {
      }
  }
  if ( class_exists( 'WPBakeryShortCode' ) ) {
      class WPBakeryShortCode_Single_Img extends WPBakeryShortCode {
      }
  }
  </code></pre>
  
  <p>It’s like that :( i can’t edit or add nested element :(</p>
  
  <p><a href="https://i.stack.imgur.com/HkjjY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HkjjY.png" alt="enter image description here"></a></p>
  
  <p>Standard Visual Composer Tabbed Content works fine ( see on screen “Zakladki” )</p>