vc_map: Unable to use shortcodes inside textarea_html block

Question

I've worked out a custom Visual Composer element using vc_map() that has a simple title, WISYWIG content, and background image. My issue is that any shortcode I use inside of the content block is not detected, and is either spit out as the raw shortcode, or, if I call via do_shortcode, is commented out when saved.

// Element Class
class vcInfoBox extends WPBakeryShortCode {

// Element Init
function __construct() {
  //  add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
  $this->vc_infobox_mapping();
}

// Element Mapping
public function vc_infobox_mapping() {

    // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
        return;
    }

    // Map the block with vc_map()
    vc_map(
        array(
            'name' => __('VC Infobox', 'text-domain'),
            'base' => 'vc_infobox',
            'description' => __('A simple callout box with backing image', 'text-domain'),
            'category' => __('Custom Elements', 'text-domain'),
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
            'params' => array(

                array(
                    'type' => 'textfield',
                    'holder' => 'h2',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    // 'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),

                array(
                    'type' => 'textarea_html',
                    'holder' => 'div',
                    // 'class' => 'text-class',
                    'heading' => __( 'Content', 'text-domain' ),
                    'param_name' => 'content',
                    'value' => __( '', 'text-domain' ),
                    'description' => __( 'Main content inside block', 'text-domain' ),
                    // 'admin_label' => false,
                    // 'weight' => 0,
                    'group' => 'Custom Group',
                ),

                array(
                    'type' => 'attach_image',
                    'holder' => 'img',
                    //'class' => 'text-class',
                    'heading' => __( 'Background Image', 'text-domain' ),
                    'param_name' => 'bgimg',
                    // 'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Image to be displayed behind callout block', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),

                array(
                    'type' => 'dropdown',
                    'class' => '',
                    'heading' => __( 'Alignment', 'text-domain' ),
                    'param_name' => 'align',
                    'value' => array(
                      'Left' => "align-left",
                      'Right' => "align-right",
                    ),
                    'description' => __( 'Left or right alignment for callout block?', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),

            ),
        )
    );

}


// Element HTML
public function vc_infobox_html( $atts, $content ) {

    // Params extraction
    extract(
        shortcode_atts(
            array(
                'title' => '',
                'bgimg' => 'bgimg',
                'align' => '',
            ),
            $atts
        )
    );

    $img_url = wp_get_attachment_image_src( $bgimg, "large");
    // die ( print_r($align, true) );

    // Fill $html var with data
    $html = '
    <div class="info-callout '. $align .'" style="background-image:url('. $img_url[0] .');">
        <div class="info-callout--content-wrap">
          <h2 class="info-callout--title">'. $title .'</h2>
          <div class="info-callout--content">'. $content .'</div>
        </div>
    </div>';

    return $html;

}

} // End Element Class

And in functions.php:

require_once( get_stylesheet_directory().'/vc-elements/custom-callout-block.php' );

add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {

    $InfoBox = new vcInfoBox();
    add_shortcode( 'vc_infobox', array( $InfoBox, 'vc_infobox_html' ) );

}

I've compared my array with the default "Text Block" element in VC, they seem to match up... Anybody know what I'm missing?

Answer 1

This question seems so old. But here is the fix. Change this line

function __construct() {

add_action( 'init', array( $this, 'vc_infobox_mapping' ) );

to

function __construct() {
add_action( 'vc_before_init', array( $this, 'vc_infobox_mapping' ) );

And the one on the functions.php

add_action( 'vc_before_init', 'vc_before_init_actions' );

to

add_action( 'init', 'vc_before_init_actions' );